一、列表
1.列表有3种：
- 无序列表
<h3>购物车</h3><ul><li>牛奶一箱</li><li>蛋糕一个</li><li>苹果10斤</li></ul>
- 有序列表
<h3>购物车</h3><ol><li>牛奶一箱</li><li>蛋糕一个</li><li>苹果10斤</li></ol>
- 自定义列表
<dl><dt>名称：</dt><dd>php中文网</dd><dt>地址：</dt><dd>河南省信阳市浉河区</dd><dt>联系</dt><dd>电话：<a href="tel:18937109272">18937109272</a></dd><dd>邮箱：<a href="mailto:734564242@qq.com">734564242@qq.com</a></dd></dl>
二、表格
table标签定义表格，一个HTML表格由table以及一个或多个tr、th或者td组成
tr元素定义表格行，th元素定义表头，td元素定义表格单元格。
一个表格的基本结构：
<table class="table"><!-- 表格标题 --><caption>商品信息表</caption><!-- 表头 --><thead><!-- 每添加一组表格数据，必须先添加一行 --><tr><td>ID</td><td>品名</td><td>单价</td><td>单位</td><td>数量</td><td>金额</td></tr></thead><!-- 一个表格可以有多个tbody，但是只能有一个thead --><tbody><tr><td>1</td><td>iPhone 12 mini</td><td>5499</td><td>部</td><td>100</td><td>549900</td></tr></tbody></table>
总结：
1.一个表格可以有多个tbody，但是只能有一个thead。
2.每添加一组表格数据，必须先添加一行。
3.所有的数据必须填充到td/th中，th是td元素的一个加强版，th比td多了个加粗和居中的效果。备注：
VS Code快捷键PDF文档：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
三、表单与常用控件
form表单用于向服务器传送数据，一个表单可以包含input元素，例如：文本框、单选框、复选框、按钮等。
表单的基本格式：
<form action="" method="POST" class="register"><!-- 这里面可以放input元素 --></form>
action 处理表单的程序。
method：表单数据提交类型，默认为GET：数据直接显示在url地址中；POST：表单数据在请求头体中。
- 控件：
3.1 文本类型控件：
- 单行文本框：
<label for="username">账号：</label><!-- type：控件类型 --><!-- name：数据的变量名，后端服务器接收前端传递的参数时就用该变量 --><!-- value：数据值 --><input type="text" name="username" id="username" value="admin" required>
- 邮箱型文本框：
<!-- 邮箱型文本框 --><label for="email">邮箱：</label><input type="email" name="email" id="email" value="html@html.cn" required>
- 密码型文本框/非明文：
<!-- 密码型文本框/非明文 --><label for="password">密码：</label><input type="password" name="password" id="password" value="" placeholder="密码不少于6位" required>
3.2 单选框和复选框
- 3.2.1 单选框
<label for="">性别：</label><div><!-- 一组单选按钮必须公用同一个名称的name值，否则无法实现值的唯一性 --><!-- checked：表示默认值 --><input type="radio" name="gender" value="male" id="male"><label for="male">男</label><input type="radio" name="gender" value="male" id="male"><label for="female">女</label><input type="radio" name="gender" value="male" id="male" checked><label for="secret">保密</label></div>
注意：
单选框（radio）的name值必须全部相同，这样才能保证值的唯一性，默认选中使用checked属性。3.2.2 复选框
<label for="#">兴趣：</label><div><input type="checkbox" name="hobby[]" value="basketball" id="basketball"><label for="basketball">篮球</label><input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label><input type="checkbox" name="hobby[]" value="travel" id="travel"><label for="travel">旅游</label><input type="checkbox" name="hobby[]" value="program" id="program"><label for="program">编程</label></div>
- 3.2.3 下拉列表/下拉框
<label for="">学历：</label><select name="edu" id="eud"><option value="1">初中</option><option value="2">高中</option><option value="3" selected>本科</option><option value="4">研究生</option><option value="5" label="老司机">博士</option></select>
注意：
如果option里有label值，label属性的优先级于option里的内容。因此，上述列表第5项应该显示“老司机”。HTML5中新属性：
| 属性 | 值 | 描述 |
|---|---|---|
| multiple | multiple | 可以选择多个选项 |
| size | 数值，如：2 | 下拉框里可见的选项数量 |
- 3.2.4 文件域与隐藏域
上传文件需要注意两点：
请求类型必须为POST；
将表单form数据编码设置为：enctype=”multipart/form-data”；
<form action="" method="POST" class="register" enctype="multipart/form-data"><label for="user-pic">头像：</label><!-- 隐藏域，在前端页面是无法看到的，它的值是用于后端处理的 --><input type="hidden" name="MAX_FILE_ZIE" value="80000" /><input type="file" name="user_pic" id="user-pic" /><!-- 头像占位符 --><div class="user-pic" style="grid-column: 2;"></div><!-- 提交按钮 --><button>提交</button></form>
enctype有3个值：
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 默认值，在发送之前编码所有字符 |
| multipart/form-data | 使用上传文件空间时必须用该值 |
| text/plain | 将空格转换为“+”，但不对特殊字符编码 |
隐藏域：在前端页面是无法看到的，它的值是用于后端处理的
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
- 3.2.5 文本域（多行文本框）
<label for="comment">备注：</label><textarea name="comment" id="comment" cols="30" rows="10"></textarea>
四、表单的form属性
- 如果控件写在form表单外部，则控件需要使用form属性，即：form=”表单id值”，才能在提交表单的时候传递控件的值，否则无法传递。
如上述代码，账号的input控件里没有写form属性，在提交的时候是无法提交username值，只能提交email和password的值。<form action="check.php" method="get" id="register"><div class="box"><!-- 使用form属性，将控件与它所属的表单进行关联/绑定 --><label for="email">邮箱:</label><input type="email" form="register" name="email" id="email" placeholder="demo@email.com" /><label for="password">密码:</label><input type="password" form="register" name="password" id="password" placeholder="至少8位" /><button form="register">提交</button></div></form><label for="username">帐号:</label><input type="text" name="username" id="username" placeholder="不能为空" />
如果不把表单控件写到form内部，这样会方便js获取表单元素的值，但是这样写会影响布局，造成布局混乱，建议还是按照标准的写法，写到form表单内部。
作业：用表格写一个课程表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/table.css"><title>表格：行与列的合并</title></head><body><table class="lesson"><!-- 表格标题 --><caption>xxxx小学课程表</caption><!-- 表头 --><thead><tr><th colspan="2"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><!-- tbody --><tbody><tr><td rowspan="4">上午</td><td>1</td><td>语文</td><td>数学</td><td>音乐</td><td>社会</td><td>科学</td></tr><tr><td>2</td><td>数学</td><td>语文</td><td>音乐</td><td>语文</td><td>数学</td></tr><tr><td>3</td><td>美术</td><td>音乐</td><td>音乐</td><td>数学</td><td>音乐</td></tr><tr><td>4</td><td>社会</td><td>体育</td><td>音乐</td><td>体育</td><td>语文</td></tr><tr class="rest"><td colspan="7">中午休息</td></tr><tr><td rowspan="4">下午</td><td>5</td><td>语文</td><td>数学</td><td>音乐</td><td>社会</td><td>科学</td></tr><tr><td>6</td><td>数学</td><td>语文</td><td>音乐</td><td>语文</td><td>数学</td></tr><tr><td>7</td><td>课外活动：</td><td colspan="4">各班自行组织，自愿参加</td><!-- <td>音乐</td><td>数学</td><td>音乐</td> --></tr></tbody></table></body></html>
效果：
