一、列表

有序列表

1. 基本结结构： 一个ol表示列表的整体，里面嵌套多个li标签；
2. 注意： ol里面只能嵌套li，li里面可以嵌套任何的标签内容；
3. li上面的value属性：表示当前li的起始位置，随后的条目会从设置的值开始计数；
4. type 属性规定有序列表的项目符号的类型；属性值如下：

无序列表

1. 基本结构：一个ul表示列表的整体，里面嵌套多个li标签
2. ul>li*10 自动生成十条li
3. ul里面只能嵌套li，li里面可以嵌套任何的标签内容；

自定义列表

1. 基本结结构： 一个dl表示列表的整体，里面只嵌套一个dt和多个dd，dt表示描述标题，dd表示描述内容；

2. 注意： dl里面只能嵌套dt和dd，dt和dd里面可以嵌套任何的标签内容；

二、表格

1. 基本结构：最基本常用的表格是table表示表格整体，tr表示行，tr里面可以嵌套th或者td；
2. th：表头单元格 - 包含表头信息（由 th 元素创建）；
3. td：标准单元格 - 包含数据（由 td 元素创建）；

常见属性

1. border ： 边框；
2. width： 设置表格的宽度；
3. rules : 规定表格内部边框哪部分可见，一般取值为all，就可以实现细线表格样式；
4. cellpadding： 规定内容距离单元格边沿的空白距离；
5. align： 设置表格的对齐方式，取值为left、center、right；如果align设置给table只影响table整体,不会影响th和td；

表格结构标签

实际开发中我们也可以按照项目需求将table表格进行区块划分（语义化），一般我们划分为以下三部分：

1. thead标签用于把对HTML表格里的表头集中起来；
2. tbody用于集中主体内容；
3. tfoot用于集中表尾；

合并单元格

单元格合并三步曲(左上原则)

• 第一步： 先确定是跨行还是跨列合并，如果是跨行合并rowspan从上到下的合并，如果是跨列合并colspan从左到右的合并
• 第二步：找到目标单元格（需要合并的格子中的第一个格子），在开始单元格上书写跨行或者跨列，写上合并的格子
• 第三步：删除多余的单元格；

三、表单

• 作用： 收集用户信息；登录、注册、搜索框；
• 表单的组成： 一个完整的表单是由提示文本、表单域（form）、表单控件三部分组成的；

1. 提示文本：提示用户需要填写的相关信息的说明文字；
2. 表单域（form）： 将收集的用户信息提交到后台服务器保存使用，所有的提示文本和表单控件都要放在form表单域中；重置和提交按钮生效的前提也是同一个表单域； <form action="" method="" name=“”></form>

• form表单域有三个常见的属性action、method、name；
• action： 设置要提交的地址，将收集的数据提交到指定的地址；
• method： 提交数据的方式，有post和get两种，post属于加密提交，get属于明文提交（不需要加密直接提交）；
• name： 规定表单的名称，用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据

3. 表单控件 :表单控件主要有input表单控件、select下拉列表、textarea文本域等；通过type属性来指定；

• type属性类型：

• 注意： 想要实现单选效果，必须要设置相同的name属性，name属性的取值是自己定义的；如下：
• <input type="radio" name="sex" > <input type="radio" name="sex" >
• 注意： 复选按钮设置了相同的name不会影响复选功能；
• 注意： 提交按钮默认有 “提交” 文字，我们也可以用value属性设置自己的文字；如下：
• <input type="submit" value="提交数据" >
• <input type="image" src="图片路径" alt="" > 图片按钮可以按钮的样式更加美观，同样具有数据提交的功能；
• <input type="file" multiple="multiple"> 文件域file有提交文件的功能，但是该控件目前只能上传一个文件，H5可以设置multiple属性实现上传多个文件的功能；

button按钮标签

type属性值（同input的按钮系列）：

• <button>按钮</button> 默认为submit

常见的表单属性

1. name属性： 给数据设置名称，区分数据的类别(比如单选框radio上面的name属性)；
2. checked属性： 取值为自己，设置单选和复选按钮默认选中效果；（属性和属性值一致，可以直接省略属性值）
3. value属性： 设置修改表单的默认值，一般是用来获取值使用；
4. maxlength最大长度： 限制最多输入的内容长度，取值是阿拉伯数字；
5. placeholder属性： css3新增的占位符，只有提示作用，不能获取值；注意： 如果表单设置了value的默认值，那么占位符placeholder无效；

select下拉列表

• 我们可以通过下拉列表将对应的参数选项折叠起来；
• 基本结构： 一对select标签嵌套多个option标签；

• 注意： 如果想要默认选中其中某一项，需要给对应option设置selected=“selected”表示默认选中；

textarea文本域

• 用于定义多行的文本输入控件。该控件中可以容纳无限数量的文本。我们可以通过cols和rows属性来规定textarea的尺寸。
• <textarea cols="30" rows="10"></textarea>
• 注意：cols和rows控制文本域的输入行数和每行输入的文字个数，右下角可以拖拽改变大小；
• 设置默认值的方法有两种:
• 1. <textarea cols="30" rows="10">默认值</textarea>（不能敲任何回车或空格需要紧贴着书写）
• 2. <textarea cols="30" rows="10" placeholder="占位符"></textarea>

label用户体验提升设置

• 目的： 提高用户操作表单控件的体验，通常和对应的input功能控件关联使用；
• 方法 一：label有一个常用的属性for，我们可以在对应的input控件设置id属性并且设置id值，然后用label嵌套对应的提示文本，设置label的取值为id的值即可实现点击提示文本直接获取对应input控件的焦点；理解为以下步骤：

1. 第一步：在input控件上设置id="id值"；
2. 第二步：用label标签嵌套提示文本，然后设置label的for属性取值为id的值；

• <label for="user">用户名</label> <input type="text" id="user">

• ** 方法二**：

1. 第一步：直接用label标签把内容和表单标签包裹起来；
2. 第二步：把label标签的for属性删掉

• <label><input type="radio" name="sex">女</label>