HTML列表标签、表格，详细代码图解
列表标签：
html 中有有序列表(ol)，⽆序列表(ul)和⾃定义列表(dl)。不管何种列表，其中只能涵盖列表项标签（li），dl 标签除外。
1. 有序列表
- `<ol></ol>`有序列表标签，双标签，第⼀层嵌套内只能包含`<li></li>`列表项标签，单独存在没有意义，块级元素可以⾃占⼀⾏显⽰
- `<li></li>`列表项标签，为双标签可以包裹任何标签和⽂本，块级元素。
- 列表项前有数字顺序，type 类型 1、A、a、i、I ⽤来更改列表项的数字。type 属性可以设置：
- `type="1"` 默认的
- `type="a"` ⼩写字母
- `type="A"` ⼤写字母
<ol type="A">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ol>
2. ⽆序列表
- `<ul></ul>`⽆序列表标签，双标签，第⼀层嵌套内只能包含`<li></li>`列表项标签，单独存在没有意义，块级元素可以⾃占⼀⾏显⽰
- `<li></li>`列表项标签，为双标签可以包裹任何标签和⽂本，块级元素。
- type 类型 disc、square、circle ⽤来更改列表项的形状。type属性可以设置：
- `type="disc"` 默认的
- `type="circle"` 空⼼圆点
- `type="square"` ⼩正⽅形（实⼼的）
<ul type="square">
<li>后羿</li>
<li>蔡⽂姬</li>
<li>程咬⾦</li>
</ul>
3.嵌套列表
当需要多级⽬录，或多级列表时，可采取列标签套的⽅法，写法与普通列表书写⽅法⼀样，只是在列表项中再增加列表。列表嵌套结构因嵌套复杂，容易出错，因此在书写中需要格外注意。
<ol type="I">
<li>互联⽹介绍</li>
<ul>
<li>互联⽹</li>
<li>web和互联⽹的关系</li>        </ul>
<li>浏览器介绍</li>
<li>web⼯作原理</li>
</ol>
</ol>
练习
<ol>
<li>妙蛙种⼦</li>
<img src="./img/001.png" alt="" width="50">
<li>妙蛙草</li>
<img src="./img/002.png" alt="" width="50">
<li>妙蛙花</li>
<img src="./img/003.png" alt="" width="50">
</ol>
<li>⽕系⼩精灵</li>
<ol>
<li>⼩⽕龙</li>
<img src="./img/004.png" alt="" width="50">
</ol>
</ul>
六. 表格
1.表格标签
- `<table></table>`表格标签。双标签可以包裹表格系列的标签，块级元素，⾃占⼀⾏
- 对于表格往往应⽤于 pc 端部分布局，⼿机端不可⽤ table 标签布局
- `<caption></caption>`表格标题标签，双标签，只可以包裹⽂本。块级元素，⾃占⼀⾏，可以指定表格的标题，只能有⼀个，可以省略不写。如书写⼀定在`<table></table>`标签内嵌套的第⼀⾏出现。
- `<thead></thead>`表头标签，可以指定表格的列表表头，可不写
- `<tbody></tbody>`表体标签，可以指定表格的主体部分，可不写
-
`<tfoot></tfoot>`表尾标签，可以指定表格的尾部说明，可不写。`<tfoot>` 标签必须被⽤在以下情境中：作为 `<table> `元素的⼦元素，出现在 `<caption>`和 `<thead> `元素之后，`<tbody>` 和 `<tr>` 元素之前。
2. 表格的⾏列
- `<tr></tr>`⾏标签，双标签只能包裹列标签和加粗列标签，可存在在表头、表体和表尾中，属于结构，代表⼀⾏的范围。
- `<th></th>`加粗列标签，⼀般放在表头，当作列标题使⽤。
- `<td></td>`表格单元列标签，放置内容如⽂本和其他标签。
<caption>⽉收⼊表</caption>    <thead>
<tr>
<th>⽉</th>
<th>收⼊</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总和</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
html ul标签<tr>
<td>⼀⽉</td>
<td>$100</td>
</tr>
<tr>
<td>⼆⽉</td>
<td>$80</td>
</tr>
</tbody>
</table>
<caption>王者荣耀英雄表</caption>
<thead>
<tr>
<th>序号</th>
<th>英雄名字</th>
<th>职业</th>
<th>阵营</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>程咬⾦</td>
<td>坦克</td>
<td>长安</td>
</tr>
<tr>
<td>2</td>
<td>⽼夫⼦</td>
<td>战⼠</td>
<td>稷下学院</td>
</tr>
<tr>
<td>3</td>
<td>甄姬</td>
<td>法师</td>
<td>魏地</td>
</tr>
<tr>
<td>4</td>
<td>橘右京</td>
<td>刺客</td>
<td>扶桑</td>
</tr>
</tbody>
</table>
3.表格标签的相关属性
- `<table>`标签下的属性
- `border` 像素 表格边框宽度
- `height` 像素、百分⽐ 表格整体⾼度
- `width` 像素、百分⽐ 表格整体宽度
- `border-collapse` 值`collapse` 除去缝隙，需要写在 style 样式中``  - `bgcolor` 英⽂、16 进制、rgba 表格背景颜⾊
- 拆分、合并单元格
- `colspan` 数字（占据的列数） 合并列（左右相邻合并）
- `rowspan` 数字（占据的⾏数） 合并⾏（上下相邻合并）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。