第三周:
1.html(HyperText Markup Language:超文本标记语言 ):网页语言。
(1)解释名词
a.超文本:超出文本的范畴,使用html可以轻松实现类似使文字带颜色的操作;
b.标记:html所有的操做都是通过标记实现的,标记就是标签,<标签名称>;
c.网页语言:上网的语言
(2)第一个html文件,与Java文件相似以.java结尾,
HTML文件以.html或.htm结尾。
(3)html的规范(遵循)
a.一个html文件开始标签和结束标签<html></html>
b.包含两部分内容
(1)<head>设置相关信息</head>
(2)<body>显示在页面上的内容</body>
c.html有开始标签也要有结束标签
d.不区分大小写
e.有些标签没有结束标签,在标签内结束,如换行:<br/>分行线<hr/>
(4)HTML的操作思想
网页中有很多不同的数据,不同的数据需要标记不同的显示效果,这时候需要使用标签把操作的数据包起来(封装起来),通过修改标签的属性值来实现0标签内数据样式的变化
2.html中常用的标签
(1)文字标签与注释标签
a.文字标签:修改文字样式
-<font></font>
-属性:size:文字大小,取值范围1-7,超出后默认为7
color:文字颜色,两种表示方式:1)英文单词
2)使用十六进制数表示:#进制数
b.注释标签:<!--注释-->
3.标题标签,水平线标签和特殊字符
(1)标题标签
<h1></h1> <h2></h2> <h3></h3>..........<h6></h6>
--从一到六字体大小依次变小,同时会自动换行
(2)水平线标签
<hr/>
--属性:size:水平线的粗细,取值范围1-7,超出后默认为7
color:颜色
(3)特殊字符
--想要在网页上显示的内容 <html>:是网页的开始;
--需要对特殊字符进行转义
1)< <
2)> >
3)空格 &nbst;
4)& &
4.列表标签,比如想要在网页上显示如下内容:
传智播客
-财务部
-学工部
-人事部
需要如下操作:
<dl> </dl>:表示列表的范围,
在dl里面<dl></dt>:上层结构
在dl里面<dd></dd>:下层结构
代码如下:
<dl>
<dt>传智播客</dt>
<dd>-财务部</dd>
<dd>-学工部</dd>
<dd>-人事部</dd>
<dl>
又如,想在页面上显示如下内容:
1-财务部
2-学工部
3-人事部
需要有序列表标签:
<ol> </ol>:有序列表的范围
-属性 type设置排序方式<ol type="a"></ol>(结果为abc)
-在ol标签里面<lo>具体内容</li>
代码如下:
<ol>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
又如,想在页面上显示如下内容:
特殊符号 (方框) 财务部;
特殊符号 (方框) 学工部;
需要使用:<ul></ul>无序列表范围;
属性:type :空心圆 circle,实心圆 disc
在ul里面<li></li>
5.图像标签:<img src="图片的路径"/>
-src:图片的路径
-width:图片的宽度
-height:图片的高度
-alt(少):图片上显示的文字,把鼠标移动到图片上,停留片刻显示的内容
6.路径的介绍:两类
(1)相对路径:
-C:\Users\hp\.eclipse
-https://www.bilibili.com/video/av20709088/?p=7
(2)绝对路径:一个文件相对于另外一个文件的位置
-三种:
a.html文件和图片在一个路径下的,可以直接写文件名称
b.html文件在在图片的上层,写出相对路径
c.html文件和图片在的下层,使用 ../图片名称
7.超链接标签:
(1)连接资源:<a href="连接到资源的路径">显示在页面上的内容</a>
href:连接的资源的地址
target:设置打开的方式,默认是在当前页打开
--_blank:在一个新窗口打开
--_self:在当前页打开
-当超链接不需要到任何的地址,在href里面加#
<a href="#">这是一个超链接</a>
(2)定位资源:如果想要定位资源,定义一个位置
<a name="top">顶部</a>
回到这个位置:<a herf="#top">回到顶部</a>
8.表格标签:可以对数据进行格式化,是数据显示更加清晰
*<table></table>:表格范围
设置对齐方式:align:left(居左),right(居右),center(居中)
*行:<tr></tr> //第一行,tr表示单元格;
th也表示单元格:多了加粗和居中
<tr></tr> //第二行
<tr></tr> //第三行
在tr里面:也可以设置对齐方式:align:left(居左),right(居右),center(居中)
*单元格:存在于行(tr)中,
<tr>
<td></td> //第一个单元格
<td></td> //第二个单元格
</tr>
-border:表示表格线
-bordercolor:表示表格线颜色
-sellspacing:表示表格与表格之间的间隙
*表格的标题:<caption></caption>
*跨行:rowspan 跨列:clospan
-使用方法:<td clospan="要垮的列数">信息</td>
9***.表单标签:可以提交数据到一定网站的服务器,这个过程可以使用表单标签实现
--<form></form>:定义表单标签的范围
--action:提交到地址(默认为当前页面),<form action="要提交到的地址"> --method:表单提交方式,常用有两种:get和post,默认为get请求
--get:不安全,泄露信息
--post:相对安全
**get和post的区别:
1.get请求地址栏会携带提交的数据,post不会携带(请求体里面)
2.get请求不安全,post相对安全。
3.get请求有数据大小的限制,post理论上没有限制。
*enctype:一般请求下不需要这个属性,做文件上传时需要。
--输入项:可以输入内容或者选择内容的部分
-大部分的输入项可以使用 :<input type"输入项的类型"/>
-普通输入项:<input type="text"/>
-密码输入项:<input type="password"/>
-单选输入项:<type="radio">选项;
*写单选输入项时,要写一个name项,且name值需一样,必须加value值以区分各个选项;
单选输入项:<input type="radio" name="1">选项<type="radio" name="1"/>选项;
默认选中的信息:checked ="cheked"
-多选输入项:<input type="checkbox"/>,其余同单选输入项
-文件输入项:文件上传<input type="file">
下拉输入项:
<select name="birth">
<option value="1991">1991</option>
</select>
-默认选择项:slected
-文本域:<textarea cols="10"></textarea>
-隐藏项:<input type="hidden">
-提交按钮:<input type="submit" 【value="注册"】/>
-使用图片提交:<input type="image" src="图片路径">
-重置按钮:<input type="reset"/>回到初始项;
-普通按钮(和js一起使用):<input type="butten" value=""/>
一次小小的测试:
<html>
<head>
<title>html示例</title>
</head>
<body>
<form>
手机号码:<input type="text"/><br/>
<hr/>
密码:<input type="password"><br/>
性别:<input type="radio" name="1">男<input type="radio" name="1">女<br/>
文件:<input type="file"><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
还是很成功的。
这周:
(1)本周,学习Javaweb打代码的时间大概有十个小时吧,解决问题用了大概两三个小时。
(2)下周去练车,去游泳,学习。
(3)渐渐熟练用eclipse创建并完成Java及Javaweb的小项目。
学习时间减少了,因为事多了,要考科一,适当的放松也是不错的,可以让自己的学习更快的进步,我会好好利用这个假期的。