1 列表标签

注：

• 一般不在ul、ol中直接嵌套别的标签，如p标签，会影响显示，ul、ol中最好只直接嵌套li标签。

• li标签只能被ul、ol标签直接嵌套。列表中可以嵌套列表，但li中不能直接嵌套li标签，li中可以嵌套ul、ol等其他标签。

• dl标签中包含dt、dd标签，一个dt标签后可以跟一个或多个dd标签。

  <dl>
      <dt>如何学习HTML标签？</dt>
      <dd>标签的语义</dd>
      <dd>标签的属性以及属性值如何设置</dd>
      <dd>单标签还是双标签</dd>
  </dl>
  

2 表格标签

2.2 表格的结构

表格分为表格头、表格主体、表格脚，它们都由行组成，每一行由单元格组成。

<table width="800" border="1" cellspacing="0" cellpadding="10">
    <!--表格标题-->
    <caption>
        <!--caption中可嵌套h1~h6-->
        <h1>表格标题</h1>
    </caption>
    <!--表格头-->
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>        
        </tr>
    </thead>
    <!--表格主体-->
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>    
    </tbody>
    <!--表格脚-->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

3.2 表格整体样式设置

给table标签设置属性，可以给表格整体设置样式。

width:设置表格整体宽度
height:设置表格整体高度（一般不设置）
border：设置表格边框粗细（非单元格边框）
cellspacing：设置单元格之间的距离
cellpadding：设置单元格内容与边框之间的距离（补白）

2.3 单元格样式设置

① 内容对齐方式

align:设置单元格水平对齐方式
对thead、tbody、tfoot、tr、th、td设置 align 属性，值为left/center/right，可设置这些标签包含的单元格的水平对齐方式为左/中/右。
valign：设置单元格垂直对齐方式
对thead、tbody、tfoot、tr、th、td设置 valign 属性，值为top/middle/bottom，可设置这些标签包含的单元格的垂直对齐方式为上/中/下。

② 宽高

设置单元格的宽度：
1、给 td/th 设置 width 属性，整列的单元格都会按照该宽度设置；
2、一般不给 tr 设置 width 属性。
设置单元格的高度：
1、给 td/th/tr 设置 height 属性，整行的单元格都会按照该宽度设置。

③ 跨行与跨列（重要）

给 td/th 设置 rowspan 属性实现单元格跨越多行
给 td/th 设置 colspan 属性实现单元格跨越多行

注：table中不写thead、tbody、tfoot，直接写tr也可以实现表格，因为浏览器会自动在合适的位置加上tbody，但缺点是浏览器只会加tbody，原本包含在thead中的th会被浏览器放在tbody中。

3 表单

表单用于收集信息。表单的总体设置如下，一个表单中包含各种表单控件标签。

<form action="http://baidu.com/s" mothod="get" target="_blank">
    <!--表单控件 输入框-->
    <input type="text" name="wd">
    <!--表单控件 提交按钮-->
    <button>搜索</button>
</form>

3.1 form标签

form标签是表单最外层的包裹标签，表单中的一切都要包裹在form里面。一个form就是一个表单，form有如下属性：

action:设置提交的目的地址（后端处理程序的地址）
mothod：设置请求方式，值:get、post
target：设置在当前窗口或新窗口打开，值：_self、_blank

3.2 表单控件

input 的 type 值不同，表现为不同的表单控件，input 的 type 值默认为 text。

① 文本输入框

<input type="text" maxlength="10">
<!-- maxlength设置最大可输入的文字长度，无论英文还是中文都是10个字符-->

② 密码输入框

<input type="password" maxlength="8">
<!-- maxlength设置最大可输入的密码长度为8位-->

③ 单选按钮

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<!-- checked表示默认被选中，该属性无需给值 -->

注：

• 属于同一组的单选按钮，需设置相同的 name 属性值，才能够实现单选效果。
• 单选按钮应设置value，将value值提交至后端。

④ 复选框

特点：可多选，选择后可取消

<input type="checkbox" checked>吃饭<!-- checked表示默认被选中，该属性无需给值 -->
<input type="checkbox" >睡觉
<input type="checkbox" >写代码

注：复选框应设置value，将value值提交至后端。

button 的 type 值不同，表现为不同的按钮，button的默认值为submit，不设置 type 属性的 button 就是提交按钮。

⑤ 提交按钮

两种实现方式，可用 input 或 button 来实现：

<input type="submit" value="按钮上的文字内容"><!--若不设置value则文字默认为“提交”-->
<button>按钮上的文字内容</button>
<button type="submit">按钮上的文字内容</button><!--若为空则文字默认无文字-->

⑥ 重置按钮

作用：将页面重置为页面打开时的状态

<input type="reset" value="按钮上的文字内容"><!--若不设置value则文字默认为“重置”-->
<button type="reset">按钮上的文字内容</button><!--若为空则文字默认无文字-->

⑦ 普通按钮

作用：无提交/重置功能，配合js使用

<input type="button" value="按钮上的文字内容"><!--若不设置value则默认无文字-->
<button type="button">按钮上的文字内容</button><!--若为空则文字默认无文字-->

⑧ 文本域

作用：可输入多行文字，常用于论坛贴、自我介绍、文章等

<textarea rows="10" cols="80">默认文字</textarea>

注：rows属性：默认显示几行；cols属性：默认显示几列

⑨ 下拉选项

<select name="degree">
    <option value="0">小学</option>
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3">本科</option>
    <option value="4" selected>研究生</option>
</select><!-- selected表示默认被选中，该属性无需给值，若不设置，则默认选择第一个选项 -->

注：下拉选项的 name 属性 要设置给 select 标签而非 option 标签

3.3 表单控件的属性

① name

name的值需与后端商量

1、每个表单控件（除按钮类）都应该设置 name 属性，name 属性设置的是表单控件数据的名字，后端会通过该名字获取数据。
2、所有按钮类表单控件不应设置 name 属性，否则会将按钮的名字传给后端。
3、单选按钮需要通过设置相同的 name 属性值实现单选效果。
4、下拉选项 name 属性需要设置给 select 标签。

② value

value的值需与后端商量

1、 文本输入框、密码输入框通过 value 属性设置默认显示的文字。
2、 使用 input 标签实现按钮，通过 value 属性设置按钮中的文字。
3、单选按钮和复选框应设置 value 属性，value 属性的值是真正提交的数据，如果不设置 value 属性就没有数据。
4、option 可设置 value 属性，作为真正提交的数据； 如果没有 value 属性，双标签中的文字作为提交的数据，建议设置value属性。
5、textarea 没有value属性，要设置默认显示文字，可以设置在双标签内。

③ disabled

1. 每个表单控件都可以设置 disabled 属性，设置了disabled属性之后，该表单控件不可用，颜色变为灰色
2. disabled 属性无需设置值，有该属性就生效
3. select 设置disabled属性：整个下拉选项不可用；option 设置disabled属性：该选项不可选

3.4 label标签的使用

1、使用label标签可以把表单控件和文字进行关联
2、语义：让搜索引擎识别表单控件的文字描述
3、功能：帮助表单控件更便捷获取焦点（通过点击文字让表单控件获取焦点）

<!-- 
通过设置 label 标签的 for 属性的值与表单控件 id 属性的值一致，使 label 中的文字与表单控件进行关联。
适合的的表单控件类型：文本输入框、密码输入框、文本域、下拉选项
表现：点击文字时，文字输入区域出现光标
-->
<label for="usernameInput">用户名：</label>
<input type="text" id="usernameInput">

<!-- 用label 标签包裹表单控件和文字，使 label 中的文字与表单控件进行关联。
适合的的表单控件类型：单选按钮、复选框
表现：点击文字时，选中单选按钮或复选框
-->
<label>
    <input type="radio" name="gender" value="male">男
</label>
<label>
    <input type="radio" name="gender" value="female">女
</label>

<!-- 按钮类表单控件无需与 label 关联 -->

3.5 表单标签总结

4 框架标签