HTML
# HTML概述
# HTML是什么?
超文本标记语言(Hyper Text Markup Language),由标签组成,除支持普通文本之外,还支持流媒体(超文本)。
(1)主要强调HTML的标签都是成对儿的,有开始标签,一般都会有对应的结束标签。
(2)强调代码的合理缩进
(3)强调HTML语法松散不严格
(4)强调HTML不区分大小写
(5)强调标签的属性,每个属性都包括属性名和属性值,属性值可以使用单引号括起来,也可以使用双引号括起来。
(6)强调HTML中的注释怎么写
(7)<meta charset="UTF-8"/>
解决乱码问题
乱码产生是因为文件采用UTF-8方式,但浏览器打开该文件时采用GBK方式打开的,所以乱码该行代码的作用就是
告诉浏览器采用哪一种字符编码打开该文件。
# 基本标签
在线调试网页->菜鸟教程
段落标记
<p></p>
1标题字
<h1> h1~h6 </h1>
1
2
3
4换行
独目标记
<br/>
1水平线
<hr/>
1预留格式
<pre> for i = 1 to 10 print i next i </pre>
1
2
3
4
5粗体字
<b></b>
1斜体字
<i></i>
1插入字
<ins></ins>
1删除字
<del></del>
1右上角加字
<sup></sup>
1右下角加字
<sub></sub>
1font标签
<font size="3" color="red">This is some text!</font>
1
# 实体符号
空格
大于号
>
小于号
<
# 表格
基本表格
<table border="像素" width="像素或百分比" height="像素或百分比" align="center"> <tr align="center"> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td align="center">test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17单元格合并
行合并:
rowspan
列合并:
colspan
th标签
thead、tbody、tfoot标签
背景颜色和背景图片
bgcolor background
# 图片
(1)<img src="" width="" height="" alt="" title=""/>
(2)只设置图片的宽度,高度等比例缩放,不建议设置高度,设置高度容易失真。
# 超链接
(1)超链接的作用
向服务器发送请求,链接到某个资源
(2)链接到网络中的某个资源
<a href="http://www.baidu.com"></a>
(3)链接到本地的某个资源
<a href="本地文件的相对路径或绝对路径都可以"></a>
(4)图片做超链接
<a href=""><img/></a>
(5)超链接的target属性
_blank
_self
_parent
_top
(6)用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果,只不过超链接更傻瓜式。
# 列表
有序列表
<ol type="1/A/a/I"> <li>中国 <ol> <li>北京</li> <li>天津</li> <li>上海</li> </ol> </li> <li>美国</li> <li>日本</li> </ol>
1
2
3
4
5
6
7
8
9
10
11无序列表
<ul type="disc/circle/square"> <li>中国 <ul> <li>北京</li> <li>天津</li> <li>上海</li> </ul> </li> <li>美国</li> <li>日本</li> </ul>
1
2
3
4
5
6
7
8
9
10
11
# 表单
表单起什么作用
用户填写表单,提交数据给服务器,所以表单是专门用来收集用户数据的。
第一个表单
<form action="http://192.168.101.2:8080/crm/login"> 用户名<input type="text" name="uname" /> 密码<input type="password" name="pwd"/> <input type="submit" value="登录"/> <!--普通按钮不具备提交表单的能力--> <input type="button" value="登录"/> </form> <!--submit放到form外部无法提交表单--> <input type="submit" value="登录"/>
1
2
3
4
5
6
7
8
9
10(1)action属性等同于超链接的href属性,填写请求的url
(2)input标签属于输入域标签,input标签的type属性是text,表示文本框,是password,表示密码框
(3)input标签的type是submit表示提交按钮,该按钮可以提交表单,所谓表单的提交是发送请求url,并携带数据给服务器。
(4)所有按钮的value属性都是用来设置按钮上显示的文本内容
(5)发送请求并提交数据时,数据格式遵循HTTP协议,所有浏览器都会采用这种格式:url?
name=value&name=value&name=value...,其中name是input标签的name属性,value是input标签的value属性
(6)文本框和密码框的value不需要开发人员指定,用户填写的数据就是value。
(7)submit按钮放到form标签外面无法提交表单
(8)普通按钮不具备提交表单的能力。
用户注册表单
表单项包括
(1)用户名
<input type="text" name="username" />
,value属性不需要写,用户填写的数据就是value(2)密码
<input type="password" name="pwd" />
,value属性不需要写,用户填写的数据就是value(3)性别
男
<input type="radio" name="gender" value="m"/>
,性别是单选按钮,用户只能选,所以该标签需要添加value属性
女
<input type="radio" name="gender" value="f" checked/>
,checked默认选中同一组的单选按钮,name必须相同
提交给服务器的数据是:gender=m 或者 gender=f
(4)兴趣
运动
<input type="checkbox" name="aihao" value="sport"/>
音乐
<input type="checkbox" name="aihao" value="music" />
跳舞
<input type="checkbox" name="aihao" value="dance" checked/>
,checked表示默认选中同一组的复选框,name相同
以上三项都被选中的话,提交的数据是:aihao=sport&aihao=music&aihao=dance
(5)学历
<select name="xueli"> <option value="gz">高中</option> <option value="zk">专科</option> <option value="bk" selected>本科</option> </select>
1
2
3
4
5selected默认选中
当选中本科时,提交的数据为:xueli=bk
(6)简介
<textarea cols="列数" rows="行数" name="jianjie"></textarea>,文本域没有value属性,用户填写的内容就是value
1(7)注册按钮
<input type="submit" value="注册"/>
:该标签放在form标签内部才起作用(8)重置按钮
<input type="reset" value="重置" />
(9)再次强调表单提交时的数据格式
action?name=value&name=value&name=value&name=value...
这是HTTP协议中规定的,这些有规律的数据提交给服务器之后,以后服务器端的java程序要解析这段数据的
form表单的method属性
(1)method不写或写上get都属于get请求,method写post才是post请求
(2)get请求在HTTP协议的请求行上提交数据,最终提交的数据会显示在浏览器地址栏上
(3)post请求在HTTP协议的请求体中提交数据,最终提交的数据不会显示到浏览器地址栏上
(4)只有当使用form表单,并且method属性设置为post才是post请求,其他请求均为get,超链接
也是get请求。
下拉列表怎么显示多个条目,怎么支持多选
(1)支持多选:multiple="multiple"
(2)显示多个条目:size="3"
file控件
(1)文件上传时使用 (2)
<input type="file"/>
hidden控件
隐藏域控件,页面上看不到,但提交表单时会提交数据
readonly与disabled
(1)readonly:只读,不能修改,提交表单时数据会提交
(2)disabled:只读,不能修改,提交表单时数据不会提交
input 控件的 maxlength
maxlength 属性规定输入字段的最大长度,以字符个数计。
HTML中元素的id属性
(1)讲述HTML文档是一棵树(DOM树),树上有很多节点,每个节点一般都会有id属性,id属性具有唯一性,在同一个文档中不能重复,id是该节点的唯一标识。后期所学的javascript语言可以对DOM树上的节点进行增删改,达到动态效果。javascript主要通过节点的id来获取该元素。
(2)
<a id=""></a>
,超链接有id;<form id=""></form>
,form表单有id;<input type="text" id="username"/>
,input标签有id。div和span
(1)理解div是一种图层,div主要使用在网页布局方面,通过后期所学的CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。
(2)div图层可以嵌套使用
(3)默认情况下div独占一行,span不会独占行。