本文参与4月更文挑战,打卡day5,第五篇
7.列表
分为有序列表(order list)和无序列表(unorder list)
- 无序列表:每一个项目前方都有一个黑色实心圆圈作为项目符号(也可以看作是一个
padding)
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
- 有序列表:类比无序列表,这里的项目符号是数字1. 2. 3. ……
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
有序列表和无序列表之间是可以嵌套的
<ol>
<li>知识点
<ul>
<li>1.1 vscode的安装与配置</li>
<li>1.2 html基础标签</li>
<li>1.3 Web官方文档</li>
</ul>
</li>
</ol>
- 一种不常用列表
<!-- 不常用列表的开始标志 -->
<dl>
<!-- 第一个一级项目 -->
<dt>name</dt>
<!-- 第一个一级项目下的第一个子项目 -->
<dd>稀土掘金</dd>
<dt>born</dt>
<dd>2016</dd>
<dt>birthplace</dt>
<dd>China</dd>
<!-- 第四个一级项目 -->
<dt>color</dt>
<!-- 第四个一级项目下的第一个子项目 -->
<dd>blue</dd>
<!-- 第四个一级项目下的第二个子项目 -->
<dd>white</dd>
</dl>
<!-- 一级项目无缩进,其子项目有缩进 -->
8. 表格
| 标签 | 含义 |
|---|---|
| thead | 定义表格的第一行 |
| tbody | 定义一组数据行 |
| tr | 定义表格中的行,同一行可以同时出现td和th |
| th | 表格中的表头单元格 |
| td | 包含数据的表格单元格 |
| caption | 定义表格的名称 (可以不加) |
<table>
<caption>成绩单</caption>
<!-- 表头 -->
<thead>
<!-- 一行用tr -->
<tr>
<!-- 表头的每一项用th -->
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<!-- 数据区 -->
<tbody>
<tr>
<!-- 主体部分每个单元格用td -->
<td>abc</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>Alice</td>
<td>90</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>60</td>
<td>70</td>
<td>65</td>
</tr>
</tbody>
</table>
9. 语义标签
定义div盒子的简化版,书写网页常用的一些div的class名组成的新标签。
按照语义标签的意思对书写的页面进行合理划分即可。
10. 特殊符号
| HTML源代码 | 显示结果 |
|---|---|
< | < |
> | > |
& | & |
" | " |
® | ® 已注册 |
© | © 版权 |
™ | ™ 商标 |
| 空格 |