一、列表

作用：布局内容排列整齐的区域。

1. 无序列表
   作用：布局排列整齐的不需要规定顺序的区域。
   标签：ul嵌套li

ul是无序列表，li是列表条目。

<ul>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	......
</ul>

以上代码显示效果：

注意事项：
1.ul标签里面只能包裹li标签
2.li标签里面可以包裹任何内容

2. 有序列表
   作用：布局排列整齐的需要规定顺序的区域。
   标签：ol嵌套li

ol是有序列表，li是列表条目。

<ol>
	<li>第一步</li>
	<li>第二步</li>
	<li>第三步</li>
	......
</ol>

以上代码显示效果：

注意事项：
1.ol标签里面只能包裹li标签
2.li标签里面可以包裹任何内容

3. 定义列表
   标签：dl嵌套dt和dd

dl是定义列表，dt是定义列表标题，dd是定义列表的描述/详情。

<dl>
	<dt>列表标题</dt>
	<dd>列表描述/详情</dd>
	.....
</dl>

以上代码效果：

注意事项：
1.dl里面只能包含dt和dd
2.dt和dd里面可以包含任何内容

二、表格

标签：table嵌套tr，tr嵌套td/th。

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

提示：
在网页中，表格默认没有边框线，使用border属性可以添加边框线。

无边框线：

<table>
    <tr>
        <th>题头一</th>
        <th>题头二</th>
        <th>题头三</th>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
    </tr>
</table>

以上代码显示效果：

有边框线：

<table border="1">
    <tr>
        <th>题头一</th>
        <th>题头二</th>
        <th>题头三</th>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
    </tr>
</table>

以上代码显示效果：

三、表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更加清晰，语义更清晰。

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

四、合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。
分类：

1. 跨行合并
2. 跨列合并

合并单元格步骤：

1. 明确合并的目标
2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
   —跨行合并，保留最上单元格，添加属性rowspan
   —跨列合并，保留最左单元格，添加属性colspan
3. 删除其他单元格

原本表格：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
    </tr>
    <tr>
        <td>学生1</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
    </tr>
        <tr>
        <td>学生2</td>
        <td>98</td>
        <td>100</td>
        <td>198</td>
    </tr>
        <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
    </tr>
</table>

效果：

合并列：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
    </tr>
    <tr>
        <td>学生1</td>
        <td>99</td>
        <td rowspan="2">100</td>
        <td>199</td>
    </tr>
        <tr>
        <td>学生2</td>
        <td>98</td>
        <td>198</td>
    </tr>
        <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
    </tr>
</table>

效果：

合并行：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
    </tr>
    <tr>
        <td>学生1</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
    </tr>
        <tr>
        <td>学生2</td>
        <td>98</td>
        <td>100</td>
        <td>198</td>
    </tr>
        <tr>
        <td>总结</td>
        <td colspan="3">全市第一</td>
    </tr>
</table>

效果：

五、表单

作用：收集用户信息。
使用场景：

• 登陆页面
• 注册页面
• 搜索区域

1.input标签
input标签type属性值不同，则功能不同。
标签<input type="...">

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

<input type="text"><br>
<input type="password"><br>
<input type="checkbox"><br>
<input type="radio"><br>
<input type="file"><br>

效果：

2.input标签占位文本
占位文本：提示信息。
标签：<input type="..." placeholder"提示信息" >

文本框和密码框都可以使用。

文本框：<input type="text" placeholder="请输入文本"><br>
密码框：<input type="password" placeholder="请输入密码"><br>

以上代码效果：

3.单选框radio

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

单选框：

性别（无checked）：
<input type="radio" name="gender">男
<input type="radio" name="gender">女

效果：



加入checked后：

<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

效果：

4.上传文件
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
标签：<input type="file" multiple>

5.多选框（也叫复选框）

默认选中checked

标签：<input type="checkbox" checked>
多选框（无checked）：

<input type="checkbox">选择1
<input type="checkbox">选择2
<input type="checkbox">选择3

效果：

多选框（有checked）：

选择（有checked）：
<input type="checkbox" checked>选择1
<input type="checkbox">选择2
<input type="checkbox">选择3

效果：

六、下拉菜单

标签：select 嵌套option

select 是下拉菜单整体；option是下拉菜单的每一项。
默认选中selected

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
    <option>选项四</option>
    <option>选项五</option>
</select>

效果：

七、文本域

作用：多行输入文本的表单控件
标签：textarea（双标签）
<textarea>默认提示文字</textarea>
代码：

<textarea>输入多行文字 输入多行文字 输入多行文字</textarea>

效果：

八、label标签

作用：网页中，某个标签的说明文本

经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

两种写法：
1.写法1：
label标签只包裹内容，不包裹表单控件设置
label标签的for属性值和表单控件的id属性值相同

代码：

<input type="radio" name="gender" id="man"><label for="man">选项</label>

2.写法2：
使用label标签包裹文字和表单控件，不需要属性

代码：

<label><input type="radio">选项</label>

九、button按钮

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JavaScript使用

代码：

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

使用form标签将表单区域框起来
form中action属性是未来发送数据的地址

十、无语义的布局标签

1.div和span
作用：布局网页

• div
  表示：<div>div标签，独占一行</div>
• span
  表示：<span>span标签，不换行</span>

2.字符实体
作用：在网页中显示预留字符

显示结果	描述	实体名称
	空格	&nbsp；(英文分号)
<	小于号	&lt；(英文分号)
>	大于号	&gt；(英文分号)