1 列表
1.1 无序列表
<!--
unorder list 无序列表
list item 列表项
-->
<ul>
<li>HTMl 超文本标记语言</li>
<li>CSS 层叠样式表</li>
<li>JavaScript 浏览器脚本语言</li>
</ul>
一组类似的内容排列在一起，适合使用无序列表，比如新闻列表，文章列表，导航条等。
1.2 有序列表
<!--
order list 有序列表
list item 列表项
-->
<h2>小说</h2>
<ol>
<li>章节1</li>
<li>章节2</li>
<li>章节3</li>
<li>章节4</li>
</ol>
一组相似的内容排列在一起且排列项有序，适合使用的场景：各种排行榜
1.3 定义列表（了解）
<!--
dl define list 定义列表
dt define title 定义列表项的标题
dd define description 定义列表项描述
-->
<!-- 一个dt 对应一个dd -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>浏览器脚本语言</dd>
</dl>
<!-- 一个dt对应多个dd -->
<dl>
<dt>如何掌握HTML标签</dt>
<dd>掌握语义</dd>
<dd>掌握属性及属性值</dd>
<dd>掌握标签是双标签还是单标签</dd>
</dl>
1.4 列表标签总结
| 标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| ul | 无序列表包裹标签 | 双标签 | |
| ol | 有序列表包裹标签 | 双标签 | |
| li | 列表项（必须被ul或ol标签直接包裹） | 双标签 | |
| dl | 自定义列表包裹标签 | 双标签 | |
| dt | 列表项标题 | 双标签 | |
| dd | 列表项描述 | 双标签 |
<h1>列表项的嵌套</h1>
<hr>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">热卖商品</a>
<ul>
<li><a href="#">新人特卖</a></li>
<li><a href="#">9.9包邮</a></li>
<li><a href="#">人气好物</a></li>
</ul>
</li>
<li><a href="#">论坛</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">加入我们</a></li>
</ul>
1. li标签里面可以包裹任何东西
2. li标签必须被ul标签或者 ol标签直接包裹
2 表格标签
2.1 表格的结构
<table>
<!-- 表格标题 -->
<caption></caption>
<!-- 表格头部 -->
<thead>
<!-- 行 -->
<tr>
<!-- 表头单元格 -->
<th>表头单元格</th>
<th></th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 普通单元格 -->
<td>普通单元格</td>
<td></td>
</tr>
</tbody>
<!-- 表格脚 -->
<tfoot>
<!-- 行 -->
<tr>
<td>普通单元格</td>
<td></td>
</tr>
</tfoot>
</table>
1. 表格标签必须按照规定顺序进行包裹 table > caption thead tbody tfoot > tr > th、td
2. 如果table标签直接包裹tr，浏览器会自动添加 tbody，建议自己添加 thead,tbody,tfoot
3. td 和 th 作为单元格，内部可以包裹任意内容
2.2 表格整体样式设置
给table标签设置如下属性：
width 设置表格宽度
height 设置表格高度
border 设置单元格边框宽度
cellspacing 单元格间距
cellpadding 单元格内容和边框距离
2.3 单元格样式设置
① 设置单元格内容对齐方式
给td或者th设置如下属性：
align 设置单元格的内容水平对其方式，值：left默认、center、right
valign 设置单元格的内容垂直对齐方式，值：middle默认、top、bottom
② 设置单元格宽高
给 td或者th设置如下属性：
width 设置单元格所在的列宽
heigth 设置单元格所在的行高
2.4 单元格跨行和跨列（重要）
给 td或者 th设置如下属性：
rowspan 设置该单元格所跨的行数
colspan 设置该单元格所跨的列数
2.5 表格标签总结
| 标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| table | 表格包裹标签 | width：宽 height：高 border：边框粗细 cellspacing：单元格间隔 cellpadding：单元格内容和边框的距离 |
双标签 |
| caption | 表格标题 | 双标签 | |
| thead | 表格头 | 双标签 | |
| tbody | 表格主体 | 双标签 | |
| tfoot | 表格脚 | 双标签 | |
| tr | 行 | 双标签 | |
| td | 单元格 | width：宽 height：高 align：水平对齐方式 valign：垂直对齐方式 colspan：列合并 rowspan：行合并 |
双标签 |
| th | 表头单元格 | 双标签 |
vertical
3 表单
3.1 表单总体设置
<form action="https://www.baidu.com/s" method="get" target="_blank">
<input type="text" name="wd">
<input type="submit">
</form>
3.2 表单控件
① 文本输入框
<!-- 设置type属性值为text表示文本输入框 -->
<input type="text"> <br>
<!-- input标签type默认值是text -->
<input> <br>
<!-- maxlength 设置最大可输入长度 -->
<input type="text" maxlength="6"> <br>
② 密码输入框
<input type="password"> <br>
<input type="password" maxlength="4"> <br>
③ 单选框
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
1、同一选项单选框要保证name的属性值相同
2、设置checked属性可以默认被选中，checked属性不需要值
④ 复选框
<input type="checkbox" name="hobby" value="eat" checked> 吃饭 <br>
<input type="checkbox" name="hobby" value="sleep"> 睡觉 <br>
<input type="checkbox" name="hobby" value="code" checked> 敲代码 <br>
<input type="checkbox" name="hobby" value="study"> 学习 <br>
1、设置checked属性可以默认被选中，checked属性不需要值
⑤ 提交按钮
<!-- 提交按钮必须写在form表单内 -->
<input type="submit">
<input type="submit" value="登录">
<!-- button默认type类型为submit -->
<button>提交</button>
<button type="submit">提交</button>
1、input标签实现的提交按钮，按钮上的文字，默认是“提交”，可以使用 value属性进行设置
2、button按钮的type属性默认是submit，默认就是提交按钮
⑥ 重置按钮
<input type="reset" value="重置">
<button type="reset">重置</button>
input标签实现的重置按钮，按钮上的文字，默认是“重置”，可以使用value属性设置按钮上的文字。
⑦ 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
input和button的普通按钮，type的属性值都是button
⑧ 文本域
<!--
rows：默认行数
cols：默认列数
-->
<textarea cols="30" rows="10"></textarea>
rows 设置默认显示多少行，影响文本域的高度
cols 设置默认显示多少列，影响文本域的宽度
⑨ 下拉选项
<!-- selected 属性表示默认选中 -->
<select>
<option>上海</option>
<option selected>北京</option>
<option>深圳</option>
<option>新疆维吾尔自治区</option>
<option>宁夏回族自治区</option>
<option>伊犁哈萨克自治州</option>
</select>
给option设置selected属性，可以让该选项默认选中，selected属性不需要属性值
3.3 表单控件的属性
① name 属性
1. 给表单控件设置 name 属性，作为数据的标识，后端会根据 name 值获取数据
2. 单选框需要设置相同的 name 值才有单选的效果
3. 提交按钮、重置按钮、普通按钮不建议设置 name 属性
② value 属性
1. 文本输入框、密码输入框，value 属性设置输入框的默认显示文字
2. 单选框、复选框, value 属性设置提交到后端的数据内容
3. input 标签实现的提交按钮、重置按钮、普通按钮，value 属性设置按钮上的文字
4. option 标签，value属性设置提交到后端的数据内容
option 如果没有设置 value 属性，双标签中的文字会作为提交到后端的数据
5. button、textarea、select 标签没有 value 属性
③ disabled 属性
1. 任何表单控件，设置 disabled 属性之后，该表单控件不可用，disabled 属性不需要属性值
2. select 标签设置 disabled，整个下拉框不可用
option 标签设置 disabled，该下拉选项不可用
3.4 label 标签的使用
<!-- 通过 label 的 for 属性与表单控件的id属性关联 -->
<label for="un">用户名：</label>
<input type="text" id="un"> <br>
<label for="pwd">密码：</label>
<input type="password" id="pwd"> <br>
<!-- lable 标签将表单控件与描述文字包裹起来 -->
<label><input type="radio" name="gender" value="male" checked> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
1. 文本输入框，密码输入框、文本域、下拉框选项使用 for的属性值与表单控件的id属性关联
2. 单选框、复选框使用 label 标签包裹进行关联
3. 提交按钮、重置按钮、普通按钮不需要使用 label 标签
3.5 表单标签总结
| 标签名 | 语义和功能 | 属性 | 单标签和双标签 |
|---|---|---|---|
| form | 表单包裹标签 | action：设置提交地址 target：设置在哪个窗口打开 |
双标签 |
| input | 各种类型的表单控件 | type：表单控件的类型 name：数据标识（后端使用） value：表单控件的值 maxlength：设置最大可输入的长度 checked：表单控件默认选中 diabled：设置表单控件不可用 |
单标签 |
| button | 按钮 | type：按钮的类型，默认是submit类型，还有button和reset类型 | 双标签 |
| textarea | 文本域 | rows：默认显示的行数 cols：默认显示好的列数 name：数据标识 disabled：设置文本域不可用 |
双标签 |
| select | 下拉选项的包裹标签 | name：数据标识 disabled：设置不可用 |
双标签 |
| option | 下拉选项 | value：表单控件的值，用于传递给后端 disabled：设置不可用 |
双标签 |
| label | 关联表单控件 | for：与关联表单控件的id一致 | 双标签 |
1. input 标签的 type 属性值：text、password、radio、checkbox、submit、reset、button，默认是 text
2. button 标签的 type属性值：submit、reset、button，默认是 submit
浙公网安备 33010602011771号