html进阶
列表、表格、表单
目标：掌握嵌套关系标签的写法，使用列表标签布局网页
01-列表
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> …… </ul>
注意事项：
- ul 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> …… </ol>
注意事项：
- ol 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。
<dl> <dt>列表标题</dt> <dd>列表描述 / 详情</dd> …… </dl>
注意事项：
- dl 里面只能包含dt 和 dd
- dt 和 dd 里面可以包含任何内容
02-表格
网页中的表格与 Excel 表格类似，用来展示数据。
基本使用
标签：table 嵌套 tr，tr 嵌套 td / th。
提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。
<table border="1"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> <tr> <td>张三</td> <td>99</td> <td>199</td> </tr> <tr>/td> <td>100< <td>李四</td> <td>98</td> <td>100</td> <td>198</td> </tr> <tr> <td>总结</td> <td>全市第一</td> <td>全市第一</td> <td>全市第一</td> </tr> </table>
表格结构标签-了解
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
caption是表格的标题,双标签.使用表格时注意加上.
提示：表格结构标签可以省略。
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息。
合并单元格的步骤：
- 明确合并的目标
- 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
- 删除其他单元格
<table border="1"> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>99</td> <td rowspan="2">100</td> <td>199</td> </tr> <tr> <td>李四</td> <td>98</td> <!-- <td>100</td> --> <td>198</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="3">全市第一</td> <!-- <td>全市第一</td> <td>全市第一</td> --> </tr> </tfoot> </table>
注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。
03-表单
作用：收集用户信息。
使用场景：
- 登录页面
- 注册页面
- 搜索区域
input 标签
input 标签 type 属性值不同，则功能不同。
<input type="..." >
input 标签占位文本
占位文本：提示信息，文本框和密码框都可以使用。
<input type="..." placeholder="提示信息">
单选框
常用属性
<input type="radio" name="gender" checked> 男 <input type="radio" name="gender"> 女
提示：name 属性值自定义。
上传文件
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
<input type="file" multiple>
多选框
多选框也叫复选框，默认选中：checked。
<input type="checkbox" checked> 敲前端代码
下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
<select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option selected>武汉</option> </select>
默认显示第一项，selected 属性实现默认选中功能。
html进阶语法(2):https://developer.aliyun.com/article/1393306?spm=a2c6h.13148508.setting.17.434b4f0eJFR9Df
