1 回顾
1.1 列表
无序列表
有序列表
定义列表
ul 无序列表 双
ol 有序列表 双
li 列表项 双
dl 定义列表 双
dt 定义列表项标题 双
dd 定义列表项描述 双
1.2 表格
table 表格 属性 width/height/border/cellspacing/cellpadding 双
caption 标题标题 双
thead 表格头部 属性: align/valign 双
tbody 表格主体 属性: align/valign 双
tfoot 表格注脚 属性: align/valign 双
tr 行 属性：align/valign/height 双
td 普通单元格 属性：align/valign/width/height/rowspan/colspan 双
th 表头单元格 属性：align/valign/width/height/rowspan/colspan 双
2 表单
用户可以通过表单向网站提交数据，与网站进行交互。
表单允许用户输入内容选择某个选项，并且可以把用户的内容提交给网站。
通常用于 搜索框、登录、注册、评论、发帖 等。
2.1 表单总体设置
表单的内容要包裹在 form 标签内。
form 标签可以通过属性设置相关功能：
action 属性可以设置要提交的地址（后端处理程序的地址）
target 属性指定提交的地址从哪里打开（本窗口或新窗口）
method 属性指定提交方法。
表单控件需要指定 name 属性，目的是后端程序通过 name 属性的值获取对饮的数据。
2.2 表单控件
① 文本输入框
<input type="text">
文本输入框还具有如下属性：
name 属性 指定数据的名称。
value 属性指定输入框的默认输入值。
maxlength 属性指定输入框最大可输入长度。
② 密码输入框
<input type="password">
密码输入框还具有如下属性：
name 属性 指定数据的名称。
value 属性指定输入框的默认输入值。（无意义）
maxlength 属性指定输入框最大可输入长度。
③ 单选按钮
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="male">其他
单选按钮还具有如下属性：
name 属性指定数据的名称，多个radio想要具有单选效果，它们 name 属性值要保持一致。
value 属性指定的是真正提交的数据。
checked 属性可以让该单选按钮默认选中。 只要给标签设置了 check 属性，无需指定值，效果就生效。
④ 复选框
<input type="checkbox" name="hobbys">睡觉
<input type="checkbox" name="hobbys">吃
<input type="checkbox" name="hobbys">发呆
<input type="checkbox" name="hobbys">男（高富帅）
<input type="checkbox" name="hobbys">女（富婆）
<input type="checkbox" name="hobbys">打游戏
复选按钮还具有如下属性：
name 属性指定数据的名称。
value 属性指定的是真正提交的数据。
checked 属性可以让该复选框默认选中。 只要给标签设置了 check 属性，无需指定值，效果就生效。
⑤ 隐藏域
<input type="hidden" name="tag" value="100">
用户不可见的
作用： 提交表单的时候，携带一些数据
name 是数据的名称
value 指定要提交的数据
⑥ 提交按钮
<input type="submit" value="点我提交">
<button>点我也提交</button>
注意： button 标签 type 属性的默认值是 submit
不要指定 name 属性
input 标签的按钮，使用 value 属性指定按钮文字。
⑦ 重置按钮
<input type="reset" value="点我重置">
<button type="reset">点我也重置</button>
不要指定 name 属性.
input 标签的按钮，使用 value 属性指定按钮文字。
⑧ 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
不要指定 name 属性.
input 标签的按钮，使用 value 属性指定按钮文字。
⑨ 文本域
<textarea name="msg" rows="10" cols="60">我是文本域</textarea>
name 属性指定数据的名称。
rows 属性指定默认显示的行数，会影响文本域的高度。
cols 属性指定默认显示的列数（一行能显示多少字符），会影响文本域的宽度。
⑩ 下拉选项
<select name="from">
<option value="新">新疆维吾尔族自治区</option>
<option value="蒙">内蒙古自治区</option>
<option value="藏">西藏自治区</option>
<option value="宁" selected>宁夏回族自治区</option>
<option value="桂">广西壮族自治区</option>
</select>
select 标签设置 name 属性指定数据名称。
option 标签设置value 属性， 如果没有value属性，指正提交的数据是中间的文字；如果设置了value属性，提交的数据就是 value 的值（建议设置 value 属性）
option 标签设置了 selected 属性，表示默认选中，该属性无需赋值，写上属性名就生效
2.3 设置表单控件不可用
给表单控件的标签设置 disabled 既可，无需给值。
input、textarea、button、select、option 都可以设置 disabled 属性
2.4 label 标签的使用
label 标签可以与表单控件相关联，关联之后点击文字对应的表单控件获取焦点。
1. 跟文本输入框、密码输入框、文本域、下拉选项
让 label 标签 for 属性的值等于表单控件的 ID 名。
2. 跟单选按钮或者复选框关联
把单选按钮或复选框套在 label 标签的里面。
3. 按钮无需关联
<!-- 与输入框关联 -->
<label for="nameInput">姓名：</label>
<input type="text" id="nameInput">
<!--与单选按钮关联-->
<label>
<input type="radio" name="sex">男
</label>
<label>
<input type="radio" name="sex">女
</label>
<label>
<input type="radio" name="sex">其他
</label>
2.5 fieldset 标签和 legend 标签的使用（了解）
<form>
<fieldset>
<legend>注册</legend>
<label for="nameInput">姓名：</label>
<input type="text" id="nameInput">
<br>
<label for="pwdInput">密码：</label>
<input type="password" id="pwdInput">
<br>
</fieldset>
</form>
fieldset 显示为表单的边框。
legend 标签指定表单的标题。
2.6 表单标签总结
| 标签名 | 语义和功能 | 属性 | 单标签和双标签 |
|---|---|---|---|
| form | 表单 | action 属性： 指定表单要提交的地址。 target 属性： 指定要跳转的新地址打开位置; 值:_self / _blank method 属性： 指定请求方式，值： get / post | 双 |
| input | 多种形式的表单控件 | type 属性： 指定表单控件的类型。 值： text、password、radio、checkbox、hidden、submit、reset、button 等。 name 属性： 指定数据名称 value 属性： 对于输入框：指定默认输入的值； 对于单选和复选框：实际提交的数据； 对于按钮：显示按钮文字。 disabled 属性： 设置表单控件不可用。 maxlength 属性： 用于输入框，设置最大可输入长度。 checked 属性： 用于单选按钮和复选框，默认选中 | 单 |
| textarea | 文本域 | name 属性： 指定数据名称 rows 属性： 指定默认显示的行数，影响文本域的高度。 cols 属性： 指定默认显示的列数，影响文本域的宽度。 disabled 属性： 设置表单控件不可用。 | 双 |
| select | 下拉框 | name 属性： 指定数据名称 disabled 属性： 设置整个下拉框不可用。 | 双 |
| option | 下拉框的选项 | disabled 属性： 设置拉下选项不可用。 value 属性： 该选项事件提交的数据（不指定value，会把标签中的内容作为提交数据） selected 属性： 默认选中。 | 双 |
| button | 按钮 | disabled 属性： 设置按钮不可用。 type 属性： 设置按钮的类型，值：submit（默认）、reset、button | 双 |
| label | 与表单控件做关联 | **for 属性： ** 值与要关联的表单控件的ID值相同。 | 双 |
| fieldset | 表单边框 | 双 |
3 框架标签
| 标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| iframe | 框架（可以在网页中嵌入其他文件） | name 属性： 指定框架的名字，可以与 超链接或表单的 target 属性配合。 width 属性： 指定框架的宽。 height 属性： 指定框架的高度。 frameborder 属性： 指定是否显示边框，值：0或者1。 | 双 |
iframe 标签的实际应用：
① 在网页中使用 iframe 嵌入广告。
② 在网页中展示其他模板网页。
③ 可以与超链接或表单的 target 配合。
4 HTML 字符实体
空格
< <
> >
& &
¥ 人民币符号 ¥
© 版权符号 ©
× 乘号 ×
÷ 除号 ÷
5 全局属性
所有的标记都具有的属性
| 属性名 | 含义 |
|---|---|
| id | 给标签指定ID名，标签的ID名是不能重复的。 ID名可以用于 css、javascript、表单控件的label标签、作为锚点名。 |
| class | 给标签指定类名，用于 css 指定标签设置样式。 |
| style | 给标签设置 css 样式。 |
| dir | 内容的方向，值: ltr、rtl |
| title | 给标签设置一个文字提示，一般超链接和图片用得比较多。 |
| lang | 给标签指定语言，常见的值 en、cn、zh-CN 等。 一般会把该属性设置给根标签。 |
6 meta 元信息
<!--设置字符集编码-->
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--指定页面的关键字-->
<meta name="keywords" content="啊实打实大撒大声地">
<!--指定页面的描述信息-->
<meta name="description" content="啊实打实大撒大声地">
<!--页面定时跳转-->
<meta http-equiv="refresh" content="3;url=http://www.atguigu.com">
