1.超链接标签
超链接标签是由<a>标签来定义的，<a> 标签（或称锚标签）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。
其作用主要有：跳转页面、跳转文件、跳转锚点和跳转指定程序
【1】跳转网页
我们直接使用代码来看一下<a>标签：
<!-- 点击文字就会跳转到京东网页 --> <a href="https://www.jd.com/" target="_blank">去京东</a>
生成结果：（点击后就会跳转到京东网页）
从上边的代码中我们可以发现，<a>标签有一个属性为target，现介绍该属性：
target ： 控制跳转时如何打开页面，常用值如下:
_self ：当前页面加载（默认）；
_blank ：在新标签页打开；
以上就是<a>标签跳转网页的使用方法。
【2】跳转文件
除了打开网页，我们还可以打开本地的文件：
<!-- 点击文字就会打开href地址的fish图片 --> <a href="./fish.jpg" target="_blank">打开fish图片</a>
生成结果：（点击后就会打开fish图片）
注：不是所有的文件格式都可以直接打开，例如jpg、MP4、gif、pdf等格式是可以直接打开的，但是像zip等文件格式不可以直接打开，若浏览器无法打开文件，则会引导用户下载。
那有的人就会问，能不能不管什么格式，我都想让用户直接下载，而不是打开呢？
如果想让用户直接下载而不是给用户打开文件的话，我们就需要在其后面加上download属性：
<!-- 点击文字不会打开href地址的fish图片，而是直接下载该图片 --> <a href="./fish.jpg" target="_blank" download="fish.jpg">下载fish图片</a>
若想强制触发下载，则使用download 属性，属性值为下载文件的名称。
以上就是<a>标签跳转文件的使用方法。
【3】跳转锚点
先了解什么是锚点？—— 锚点，即网页中的一个标记点。
创建锚点的两种方式：
<!-- 第一种方式：a标签配合name属性 --> <a name="test1"></a> <!-- 第二种方式：其他标签配合id属性 --> <h2 id="test2">我是一个位置</h2>
当我们创建好锚点之后，我们就可以在创建一个超链接标签用来跳转对应的锚点了：
使用第一种方式跳转锚点：
<!-- 跳转到test1锚点--> <a href="#test1">去test1锚点</a> 一些文字 <br> 一些文字 <br> 一些文字 <br> 一些文字 <br> 一些文字 <br> <a name="test1"></a> <img src="./fish.jpg" width="300">
使用第二种方式跳转锚点：
<!-- 第二种方式：a标签配合id属性 --> <a href="#test2">tiaozhuan</a> 一些文字<br> 一些文字<br> 一些文字<br> 一些文字<br> 一些文字<br> 一些文字<br> 一些文字<br> 一些文字<br> <img id="test2" src="./fish.jpg" width="300">
使用以上两种方式我们就可以跳转到所需锚点处了。
当然还有一些其他特殊的锚点的使用：（如下）
<!-- 跳到本页面顶部，无需设置锚点，直接使用 --> <a href="#">回到顶部</a> <!-- 跳转到其他页面锚点 --> <a href="demo.html#test1">去demo.html页面的test1锚点</a> <!-- 刷新本页面，无需设置锚点，直接使用 --> <a href="">刷新本页面</a>
注：
1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。
以上就是<a>标签跳转锚点的使用方法。
【4】跳转指定程序
当然通过<a>标签，我们可以唤起设备应用程序。
我们直接使用代码看一下：
<!-- 唤起设备拨号 --> <a href="tel:123456">电话联系</a> <!-- 唤起设备发送邮件 --> <a href="mailto:123456@qq.com">邮件联系</a> <!-- 唤起设备发送短信 --> <a href="sms:123456">短信联系</a>
在所对应的属性后面加上信息对象即可完成在唤起设备应用程序的同时，完成信息的发送。
以上就是<a>标签跳转指定程序的使用方法。
2.表字辈标签
表字辈标签一共有三个，分别为：列表标签、表格标签、表单标签。
（1）列表标签
在列表标签中，列表有分为了无序列表、有序列表和自定义列表。
【1】无序列表
无序列表使用<ul>，<li>两个标签来构成，<ul>标签通常用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。
我们直接使用代码来看一下无序列表的使用：
<h2>我想去的几个城市</h2> <!-- 无序列表的使用 --> <ul> <li>成都</li> <li>上海</li> <li>西安</li> <li>武汉</li> </ul>
这样我们就了解了无序列表的使用。
【2】有序列表
有序列表使用<ol>，<li>两个标签来构成，通常有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。
我们直接使用代码来看一下无序列表的使用：
<h2>要把大象放冰箱总共分几步</h2> <!-- 有序列表的使用 --> <ol> <li>把冰箱门打开</li> <li>把大象放进去</li> <li>把冰箱门关上</li> </ol>
这样我们就了解了有序列表的使用。
【3】自定义列表
自定义列表使用<dl>，<dt>，<dd>三个标签来构成，所谓自定义列表，就是一个包含术语名称以及术语描述的列表，一个dl 就是一个自定义列表，一个dt 就是一个术语名称，一个dd 就是术语描述。
我们直接使用代码来看一下无序列表的使用：
<h2>如何高效的学习？</h2> <!-- 自定义列表的使用 --> <dl> <dt>做好笔记</dt> <dd>笔记是我们以后复习的一个抓手</dd> <dd>笔记可以是电子版，也可以是纸质版</dd> <dt>多加练习</dt> <dd>只有敲出来的代码，才是自己的</dd> <dt>别怕出错</dt> <dd>错很正常，改正后并记住，就是经验</dd> </dl>
这样我们就了解了自定义列表的使用。
这样我们就了解了所有列表的基础知识点。
（2）表格标签
【1】表格的基本标签框架
<table>标签为表格标签——即在一个由包含数据的行和列组成的二维表格中呈现的信息，而一个完整的表格通常由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
如图：
对于创建一个表格，我们通常需要以下标签：
1. table ：用于创建表格的大框架；
2. caption ：用于创建表格标题
3. thead ：用于创建表格头部
4. tbody ：用于创建表格主体
5. tfoot ：用于创建表格注脚
6. tr ：用于创建表格的每一行
7. th 、td ：用于创建表格的每一个单元格（备注：表格头部中用th ，表格主体、表格脚注中用： td ）
我们直接使用上边的表格来加以解释：
由此我们就知道了表格创建所需的标签，现在我们来看一下创建上边表格的代码：
<table border="1"> <!-- 表格标题 --> <caption>学生信息</caption> <!-- 表格头部 --> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>汉族</td> <td>团员</td> </tr> <tr> <td>李四</td> <td>女</td> <td>20</td> <td>满族</td> <td>群众</td> </tr> <tr> <td>王五</td> <td>男</td> <td>20</td> <td>回族</td> <td>党员</td> </tr> <tr> <td>赵六</td> <td>女</td> <td>21</td> <td>壮族</td> <td>团员</td> </tr> </tbody> <!-- 表格脚注 --> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td>共计：4人</td> </tr> </tfoot> </table>
了解完表格的基本标签框架，那么现在让我们学习一下表格中各个标签的属性。
【2】表格各个标签中的属性
1.table标签
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
| table | 表格 | width ：设置表格宽度。 height ：设置表格最小高度，表格最终高度可能比设置 的值大。 border ：设置表格边框宽度。 cellspacing ： 设置单元格之间的间距。 |
双 |
其中我们只讲解border和cellspacing：
border：设置表格边框宽度。
我们使用一个最简单的表格来进行演示：
<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> </tbody> </table>
当我们把border的值改大之后：
<table border="20"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> </tbody> </table>
这样我们也就知道了border的属性特征了。
2.cellspacing：设置单元格之间的间距。
我们继续使用上边的代码：
<table border="20" cellspacing="10"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> </tbody> </table>
我们可以发现中间的单元格与单元格直接的空隙加大了，这样我们也就知道了cellspacing的属性特征了。
2.thead标签
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
| thead | 表格头部 | height ：设置表格头部高度。 align ： 设置单元格的水平对齐方式，可选值如下： 1. left ：左对齐 2. center ：中间对齐 3. right ：右对齐 valign ：设置单元格的垂直对齐方式，可选值如下： 1. top ：顶部对齐 2. middle ：中间对齐 3. bottom ：底部对齐 |
双 |
当然这些属性在我们日常生活中使用表格的时候或多或少都见到过，所以这里就不再进行讲解，读者可以自己尝试一下。
注意：对于tbody、tr、tfoot这三个标签，其属性和thead是相同的。
3.td标签
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
| td | 普通单元 格 |
width ：设置单元格的宽度，同列所有单元格全都受影 响。 heigth ：设置单元格的高度，同行所有单元格全都受影 响。 align ：设置单元格的水平对齐方式，参数同上。 valign ：设置单元格的垂直对齐方式，参数同上。 |
双 |
当然这些属性在我们日常生活中使用表格的时候或多或少都见到过，所以这里就不再进行讲解，读者可以自己尝试一下。
注：th标签的属性和td标签是相同的。
注意：
1. <table> 元素的border 属性可以控制表格边框，但border 值的大小，并不控制单元格
边框的宽度，
只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠CSS 控制。
2. 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
3. 给某个th 或td 设置了宽度之后，他们所在的那一列的宽度就确定了。
4. 给某个th 或td 设置了高度之后，他们所在的那一行的高度就确定了。
那么这样表格的大体知识就讲解完了。
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
