标签的使用
列表
网页中，常常将结构相似、内容相关、样式相似的结构，使用列表标签进行书写
列表标签的分类：
- 无序列表
- 有序列表
- 定义列表
无序列表
组成：两个标签组成：ul（unordered list），li（list item）
级别：容器级
作用：定义一个没有顺序的列表结构，没有先后顺序之分
eg.
<h2>古典四大名著</h2>
<ul>
<li>三国演义</li>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
</ul>
注意：ul内部只能嵌套li标签，li标签的内部可以嵌套任何标签，甚至是ul。例如（这就是列表的嵌套）：
<h2>四大名著</h2>
<ul>
<li>
<h3>西游记</h3>
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ul>
</li>
<li>
<h3>水浒传</h3>
<ul>
<li>宋江</li>
<li>武松</li>
<li>林冲</li>
<li>卢俊义</li>
</ul>
</li>
<li>
<h3>红楼梦</h3>
<ul>
<li>林黛玉</li>
<li>薛宝钗</li>
<li>王熙凤</li>
<li>贾宝玉</li>
</ul>
</li>
<li>
<h3>三国演义</h3>
<ul>
<li>刘备</li>
<li>曹操</li>
<li>孙权</li>
<li>张飞</li>
</ul>
</li>
</ul>
有序列表
组成：两个标签组成：ol（ordered list），li（list item）
级别：容器级
作用：定义一个有序列表的列表结构
使用场景：排行榜
eg.
<h2>三年级排名情况</h2>
<ol>
<li>三年级2班</li>
<li>三年级1班</li>
<li>三年级2班</li>
</ol>
注意：ol和ul一样，内部只能嵌套li标签。例如（这是有序列表的嵌套）：
<h2>三年级期末考试排名</h2>
<ol>
<li>
<h3>三年级2班</h3>
<ol>
<li>王同学</li>
<li>张同学</li>
<li>李同学</li>
</ol>
</li>
<li>
<h3>三年级1班</h3>
<ol>
<li>樊同学</li>
<li>周同学</li>
<li>孟同学</li>
</ol>
</li>
<li>
<h3>三年级3班</h3>
<ol>
<li>刘同学</li>
<li>赵同学</li>
<li>李同学</li>
</ol>
</li>
</ol>
定义列表
组成：dl，dt，dd
dl：definition list 表示创建一个自定义列表结构
dt：definition term 定义主题或者定义术语，表示一个列表的主题
dd：definition description 定义解释项，表示解释和说明前面的主题内容
关系：dl内部可以包含dd、dt，dd与dt是同级关系
级别：容器级
作用：定义一个标题和内容自定义的列表结构
使用场景：
eg.
<h2>文婧的未来计划</h2>
<dl>
<dt>第一年</dt>
<dd>
<p>
计划：睡觉
</p>
<p>
实施情况：未知
</p>
</dd>
</dl>
<dl>
<dt>第二年</dt>
<dd>计划：吃饭</dd>
<dd>实施情况：未知</dd>
</dl>
注意，dt和dd一般同时出现，有定义就应该有解释。
一个dt后面可以有多个dd
表格
表格基础
- 表格的组成
1）table：作用是定义了一个表格的结构
2）tr：table rows，作用定义了表格的行
3）td：table dock，作用是定义表格的单元格
4）th：table head，作用为定义了表格行的标题 - 关系
table>tr>td、th - 属性
1）border。border=“1”。用来设置表格的边框，如果没有这个属性，边框不显示，
2）style。style="border-collapse:collapse"。它是css样式，作用为合并表格。 - 例子
<table border="1" style="border-collapse:collapse">
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
<th>第5列</th>
</tr>
<tr>
<td>第2行，第1列</td>
<td>第2行，第2列</td>
<td>第2行，第3列</td>
<td>第2行，第4列</td>
</tr>
<tr>
<td>第3行，第1列</td>
<td>第3行，第2列</td>
<td>第3行，第3列</td>
<td>第3行，第4列</td>
</tr>
</table>
单元格合并
单元格合并需要给对应的td和th标签设置相关属性
- 属性
1）rowspan: 上下跨行合并
2）colspan：左右跨列合并
属性值是数字，数字是几就代表跨几行或者跨几列
eg.
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td colspan="2">18</td>
</tr>
</table>
表格分区
- 表格三个组成部分（分区）
1）caption：标题分区，定义表格的标题
2）thead：table head, 表头分区，定义表格表头，内部嵌套tr>th
3）tbody：主体分区，定义表格的主体，内部嵌套tr>td - 例子
<table border="1">
<!-- 标题分区 -->
<caption>各地区资产投资情况</caption>
<!-- 表头分区 -->
<thead>
<tr>
<th rowspan="2">地区</th>
<th colspan="2">按总量分</th>
<th colspan="2">按比重分</th>
</tr>
<tr>
<th>自年初累计（亿元）</th>
<th>去年同期增长（%）</th>
<th>自年初累计（%）</th>
<th>自年同期（%）</th>
</tr>
</thead>
<!-- 主体分区 -->
<tbody>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
</tbody>
</table>
表单元素
表单元素是网页中提供给用户进行点击或者输入的控件
form标签
含义： 表单
级别：容器级
作用：内部存放可输入的控件。如果输入的表单需要提交到数据库，所有的控件需要被form表单包裹
属性：
1）method：方法，指的数据提交的方法，属性值是post和get
2）action：是数据提交的位置
form标签中用来放置各种控件，常见的如下所示。
1.input标签
作用：
1）输入框
2）可以type属性拓展多功能
有哪些多功能呢？下面来介绍一下
Ⅰ.输入框
type值为text
属性：
1）value：设置默认显示的内容，属性值为自定义内容
2）placeholder：在没有value值的时候提示用户的文字占位符
<input type="text" placeholder="请输入用户名">
<input type="text" value="张三" placeholder="请输入用户名">
Ⅱ. 密码框
type值为password
显示效果是输入后通过掩码形式显示的
<input type="password" placeholder="请输入密码">
Ⅲ.单选框
type值为radio
单选按钮成组出现
当name值相同时，可以实现一组单选按钮的互斥
当属性checked="checked"，表示该选项为默认选项
可以使用lable标签扩大点击范围
<p>
性 别：
<label>
<input type="radio" name='sex' checked="checked">男
</label>
<input type="radio" name='sex'>女
<input type="radio" name='sex'>保密
</p>
Ⅳ 复选框
type值为checkbox
可以通过对自身进行多次点击实现选择或者取消
可以选择一个或者多个，建议同一组设置同样的name属性
当属性checked="checked"，表示该选项为默认选项
可以使用lable标签扩大点击范围
<p>
爱 好：
<label>
<input type="checkbox" name="hobby"> 运动
</label>
<input type="checkbox" name="hobby" checked="checked"> 绘画
<input type="checkbox" name="hobby"> 音乐
<input type="checkbox" name="hobby"> 阅读
<input type="checkbox" name="hobby"> 其他
</p>
2.文本域
input，只能输入单行文本，如果需要使用多行文本，需要文本域
标签：textarea
级别：双标签，文本级标签
属性：
1）rows：定义文本域的可视区域有几行
2）cols：当前行显示的字节数量（以英文为准）
3）placeholder：占位符
4）style：是否可以放大缩小文本域。
style="resize:none"表示不可以放大缩小
默认可以通过拖动右下角实现放大或者缩小文本域
<textarea rows="4s" cols="50" placeholder="请输入自我介绍" style="resize:none"></textarea>
3. 下拉菜单
需要一组标签进行制作
标签：
1）select：搭建下拉项
2）option：搭建下拉项具体选项
关系：select>option
设置默认选中用selected="selected"。
<select>
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
HTML注释
语法：<!-- 被注释的内容 -->
快捷键（VSCODE）：ctrl+/
字符实体
w3c手册
在编写网页时，一些已有的标签打不出来。例如，
<div>
好开心啊，今天老师带我们学习了<h1>标签的作用
</div>
我们发现浏览器会识别文本中的<h1>进行加载
解决办法：
利用字符实体进行转换
<div>
好开心啊，今天老师带我们学习了<h1>标签的作用
</div>
字符实体的规定：
1）以&符号开头‘;’结尾
2）常用的字符实体：
| 符号 | 含义 |
|---|---|
| 实体空格 |
< | 小于号 |
> | 大于号 |
© | 版权符号 |
® | 注册商标 |
" | 引号 |
& | 和号 |
div和span
布局标签，俗称盒子
作用：
用来分割页面的布局。
div：分割大跨度，跨度布局分割。用来进行网页布局的拆分，没有明确的语义
span：小区域小跨度，文字分割。
级别：div是容器级标签，双标签
作用是用来分割页面的布局，div指的是跨度布局分割，span是文字分割
HTML+CSS又叫做div+CSS
<p>
今天一共收入 <span style="color:red;">300</span> 元
</p>
扫一扫
1279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
