列表标签
目标：无序有序和自定义列表标签实现网页中列表结构的搭建
列表的应用场景
按行展示关联性内容，如新闻（无序）、排行榜（有序）、账单（自定）等
无序列表
组成
ul（表示整体用于包裹） 嵌套 li（表示每一项用于包含每行内容）
显示特点
每项前默认圆点标识
注意，ul （ol）只允许包含 li，li 可以包含任何内容
有序列表
组成
ol+li
特点
默认显示序号表示
自定义列表
场景
网页底部导航
组成
dl（整体，包裹dt或dd）+dt（主题）+dd（每项内容）
显示特点
默认缩进
dl 只允许包含 dt/dd，后二者可以包含任意
表格标签
基本标签
场景：行+列（如成绩表）
| 标签名 | 说明 |
|---|---|
| table（>tr>td） | 整体，包裹多个tr |
| tr | 每行，包裹td |
| td | 单元格，包裹内容 |
相关属性
设置展示效果（给格子）
border（/width/height）+数字以规定 边框宽度（/表格宽度/表格高度）
<table border="1" width="750" height="500">
<caption><strong>成绩单</strong></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>林檎</td>
<td rowspan="2">一伯昏</td>
<td>谢谢喵</td>
</tr>
<tr>
<td>东雪莲</td>
<!-- 被删除行<td>零分</td> -->
<td>最适合梅菲斯特的一集</td>
</tr>
</table>
</body>
标题和表头
即 整体大标题（caption，写在table内部）和每列上方的小标题（th，写在tr内部）
结构标签*
thead头部、tbody主体、tfoot底部
合并单元格
跨列或跨行合并 步骤：
-
明确合并哪几个单元格
-
左上原则确定保留和删除
上下合并只保留最上，左右合并只保留最左，删除其他
-
给保留的单元格设置属性名（
rowspan或colspan）、属性值（合并的个数）不能跨结构合并（thead、tbody、tfoot）
表单标签
登陆、注册、搜索等功能时使用；
input
收集用户信息，通过type属性值不同行使不同效果
text 文本框 输入单行文本、password密码框、radio单选框 多选一、checkbox多选框 多选多、file上传文件、submit提交按钮、reset重置按钮、button普通按钮 默认无功能 配合JavaScript...
<!-- 写什么显示什么，文本框不换行 -->
文本框：<input type="text">
<!-- 不显示内容,也不换行 -->
密码框：<input type="password">
<hr>
<input type="radio">
<input type="checkbox" name="" id="">
<!-- ...... -->
占位符，提示用户要输入的文本
<input type="text" placeholder="请输入用户名，邮箱/手机">
单选控件，分组
性别：<input type="radio" name="gender">MALE <input type="radio" name="gender">FEMALE 默认选中控件，提升体验
性别：<input type="radio" name="gender">MALE <input type="radio" name="gender" checked>FEMALE
multiple多文件选择控件
<input type="file" multiple>
button
<!-- 自带“提交”字样和提交功能，不必配合js -->
<input type="submit" value="注册">
但前提是有表单域 <form action="提交地址"> 才能实现提交或重置功能；
button是双标签，随type不同取值而行使不同功能，另外通过value命名
select
<section>
<option value="">Beijing</option>
<option value="" selected>Tokyo</option>
<option value="">New York</option>
</section>
textarea
<textarea name="" id="" cols="75" rows="45"></textarea>
实际工作通过CSS控制宽高以及禁用拖拽
label
方法① 用label把内容文本包裹、表单上添加id、在label的for属性中设置对应id
方法② 直接用label把内容和表单一起包裹、把label的for属性删除
性别：
<input type="radio" name="gender" id="MALE"><label for="MALE">帅OTTO</label>
<!-- 以上为① -->
<label><input type="radio" name="gender">柯洁</label>
<!-- 以上为② -->
语义化标签
无语义 布局 标签：div（独占行）、span（一行多个）；
有语义的* ：HTML5
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
手机端网页常用
字符实体
html里的空格合并现象
网页不认识多个空格，若实现特殊符号效果则需要实体
结构：“ &英文；”
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |   | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ' | 撇号 | &apos |
| ¢ | 分cent | ¢ |
| £ | 镑pound | £ |
| ￥ | 元 | ¥ |
| € | 欧元euro | &euro |
| § | 小节 | § |
| © | 版权copyright | © |
常见字符实体
案例
<title>七月十号</title>
</head>
<body>
<table border="2" width="500" height="300">
<caption>
<h2>优秀学生（悲）</h2>
</caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">逸一时误一世</td>
<td>山里灵活的狗</td>
<td>114514</td>
<td>帝丹高中</td>
</tr>
<tr>
<!-- <td>壹玖壹玖捌壹零</td> -->
<td>我超，出音味来</td>
<td>1919810</td>
<td>榊野学园</td>
</tr>
<tr>
<td>先辈评语</td>
<td colspan="3">灌注永雏塔菲谢谢喵！</td>
</tr>
</table>
<h1>你所热爱的，就是你的生活</h1>
<hr>
<!-- 先给表单域 -->
<form action="">
输入昵称：<input type="text" placeholder="不可使用违规名称,如帅otto">
<!-- 上行默认不换行 -->
<br><br>
成分和浓度:
<label>
<input type="radio" name="gender" checked>鼠鼠我呀...
</label>
<label>
<input type="radio" name="gender">原神怎么你了？
</label>
<br><br>
了解你的捍卫者:
<select>
<option>古代艺术家特有的沉着冷静，好摇不挑曲儿</option>
<option selected>如来嘛（我醉提酒游寒山，爽滑慢舔）</option>
<option>Never Gonna Give You Up</option>
</select>
<br><br>
你的XP:
<label><input type="checkbox">牡蛎牡蛎牡蛎牡蛎牡蛎牡蛎</label>
<label><input type="checkbox" checked>One Last Kiss</label>
<label><input type="checkbox">这么可爱一定是男孩子（立了）</label>
<label><input type="checkbox" checked>请停止你的松冈行为</label>
<br><br>
请结合实际谈谈你对“鲜衣怒马少年郎，谁人不识理塘王”的理解（5分）: <br>
<textarea name="" id="" cols="60" rows="10"
placeholder="阿妈说，格聂山上风声很大，没有烟灰...">
</textarea>
<h2>你可以再表演一次那个吗？就是那个:</h2>
<ul>
<li>骂谁罕见？</li>
<li>啊↗？</li>
<li>↑↑↑骂谁罕见！！！</li>
</ul>
<input type="checkbox">我说婷婷同意所有条款
<input type="submit" value="你说得对，但...">
<button type="reset">启！动！！</button>
</form>
</body>
</html>
