HTML———标签元素

一、布局标签

1、标题标签

2、段落标签

编辑

[2、表格相关的属性](#2、表格相关的属性)

3、合并单元格

[4、表格的结构标签](#4、表格的结构标签)

（6）submit，button，reset

[八、语义化标签](#八、语义化标签)

一、布局标签

1、标题标签

标题标签，顾名思义是为了给网页的标题所用的，其总共有6种，标签为：

html 复制代码

<h1></h1>  <h2></h2>  <h3></h3>  <h4></h4>  <h5></h5>  <h6></h6>

其效果为加粗加大标签内的字体，起到醒目突出的作用，表明网页的主题和内容，因此该标签专门为标题所用。其中的六个标签中的文字随着其中的数字增大而逐次减小，同时每个标题标签默认独占一行的。

示例代码为：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这是标签</h1>
<h2>这是标签</h2>
<h3>这是标签</h3>
<h4>这是标签</h4>
<h5>这是标签</h5>
<h6>这是标签</h6>
</body>
</html>

效果为：

2、段落标签

段落标签就是为了在编写网页时内容让内容更加的有层次，因此要分段，使得文字在网页上可以有分段，让文章更加美观。

其段落标签为：。其中段落和段落之间是有间隔的，同时每个段落默认独占一行。

示例代码为：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>

效果为：

3、换行标签

换行标签为的作用为让文字强制换行，让网页排版更加美观。

其代码标签为

示例代码为：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
此处没有用换行标签，
此处<br>用了换行标签
</body>
</html>

效果图：

4、水平线标签

水平线标签是在网页上添加一个水平的直线，用来区分文章中的每一块区域。

水平线标签为<hr>

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
区块一
<hr>
区块二
</body>
</html>

效果为：

二、文本标签

文本标签是在编辑文本时，对文字的样式进行进行设计的一种标签，可以让文字显示出加粗、下划线、倾斜、删除线等效果。

标签有<s><ins><del>等。和是加粗，和<ins>是下划线，和是倾斜，<s>和<del>是删除线。

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<b>b标签文字效果展示</b> <br>
<u>u标签文字效果展示</u> <br>
<i>i标签文字效果展示</i> <br>
<s>s标签文字效果展示</s> <br>
<strong>strong标签文字效果展示</strong> <br>
<ins>ins标签文字效果展示</ins> <br>
<em>em标签文字效果展示</em> <br>
<del>del标签文字效果展示</del> <br>
</body>
</html>

效果为：

三、引用/插入标签

1、图片标签

图片标签是为了在网页中展示图片所用。

图片标签为<img src="" alt="">，其中对于该标签有一下五个属性：src,alt,title,width,height。其中src属性为指定图片的路径，alt为在图片加载失败时产生的文字，title为在鼠标悬停在图片时产生的文字，width和height分别为设置图片的长和宽。

在使用标签时,会有相关要求，详情可见补充：标签的使用规则

对于链接的相关知识，可见补充：链接的介绍和使用

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="img.png">
<img src="#" alt="图片加载失败">
<img src="img.png" title="HTML">
<img src="img.png" width="200" height="300">
</body>
</html>

效果图：

2、音频标签

音频标签是为了在网页中展示音频所用。

音频标签为<audio src="" controls></audio>，其中对于该标签有一下四个属性：src,control,autoplay,loop。其中src属性为指定音频的路径，control为显示控制台，autoplay是控制音频的自动播放（跟随浏览器要求，部分可能不支持），loop为循环播放。

在使用标签时,会有相关要求，详情可见补充：标签的使用规则

对于链接的相关知识，可见补充：链接的介绍和使用

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio src="./QQ音乐@486451866@希望有羽毛和翅膀@知更鸟,%20HOYO-MiX,%20Chevy.mp3" controls autoplay loop></audio>
</body>
</html>

效果图：

3、视频标签

音频标签是为了在网页中展示音频所用。

视频标签为<video src="" controls></video>，其中对于该标签有一下四个属性：src,control,autoplay,loop。其中src属性为指定视频的路径，control为显示控制台，autoplay是控制视频的自动播放（跟随浏览器要求，部分可能不支持），loop为循环播放。

在使用标签时,会有相关要求，详情可见补充：标签的使用规则

对于链接的相关知识，可见补充：链接的介绍和使用

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src="屏幕录制%202025-05-21%20182726.mp4" controls autoplay loop></video>
</body>
</html>

效果图：

四、超链接标签

超链接标签是为了实现页面跳转，即让鼠标点击被链接的文字后，就会跳转到相关页面。

超链接的标签为<a href=""></a>，在标签之间所加的文字就是要超链接的对象。该标签有两个属性：href，target。其中href属性为要跳转到目标的地址（可以为网页，也可以为#表空，还可以跳转到同一网页的指定位置）。target标签为设置跳转方式，_self:在当前窗口中跳转，_blank:在新窗口中跳转。

其特点为：a标签默认文字有下划线，a标签从未点击过，默认文字显示蓝色，a标签点击过之后，文字显示为紫色(清除浏览器历史记录可恢复蓝色)。

由于超链接不方便展示，仅提供代码，可以自行测试。

在使用标签时,会有相关要求，详情可见补充：标签的使用规则

对于链接的相关知识，可见补充：链接的介绍和使用

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#">空标签</a><br>
<a href="https://www.baidu.com/" target="_blank">重新打开一个网页，连接到百度</a><br>
<a href="https://www.baidu.com/" target="_self">在当前页面打开百度</a>
</body>
</html>

五、列表标签

列表标签是为了在网页中罗列同一类型的不同项目而提供的标签。可以按照特定的排序方式来展示文字。

列表标签分为三种：无序列表，有序列表和自定义列表。

1、无序标签

在网页中展示一组无序的列表时使用，其标签有两个为<ul></ul>和<li></li>两种，其中ul标签是整个无序列表的整体，包含li标签。li标签则为包含需要展示的列表内容。

该标签的特点为为：列表的每一项前默认显示圆点标识。

注意：ul标签中只允许嵌套li标签，li标签中可以嵌套任意内容。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
</ul>
</body>
</html>

效果图：

2、有序列表

在网页中展示一组有序的列表时使用，其标签有两个为<ol></ol>和<li></li>两种，其中ol标签是整个有序列表的整体，包含li标签。li标签则为包含需要展示的列表内容。

该标签的特点为为：列表的每一项前默认显示数字排序标识。

注意：ol标签中只允许嵌套li标签，li标签中可以嵌套任意内容。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
</ol>
</body>
</html>

效果图：

3、自定义列表

和上面两个列表相似，但是其有三个标签，分别为<dl></dl>,<dt></dt>和<dd></dd>。其中dl标签:表示自定义列表的整体，dt标签:表示自定义列表的主题，dd标签:表示对于主题的每一项内容。

其列表的特点为: dd前会默认显示缩进效果

注意：dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容。

代码示例

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
    <dt>主题</dt>
    <dd>内容一</dd>
    <dd>内容二</dd>
</dl>
</body>
</html>

效果图：

对于有列表标签来说，其前面的圆点和数字等等样式均可以被设置，可以通过CSS来设置。具体的可以看有关于CSS的文章。

六、表格标签

表格标签就是为了在网页之中可以更加方便的展示表格的内容。

1、基本标签

最基本的表格标签有：table，tr，td。其中：table标签表示表格整体，tr标签表示表格每行，td标签表示每一项内容。对于该三个标签来说table嵌套tr，tr再嵌套td。

除此之外，还有表格标题和表头单元格标签。分别为：caption和th。其中caption标签书写在table标签内部，th标签书写在tr标签内部(用于替换td标签)。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <caption>示例表格</caption>
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    <tr>
        <td>一行一列</td>
        <td>一行二列</td>
        <td>一行三列</td>
    </tr>
    <tr>
        <td>二行一列</td>
        <td>二行二列</td>
        <td>二行三列</td>
    </tr>
    <tr>
        <td>三行一列  </td>
        <td>三行二列  </td>
        <td>三行三列  </td>
    </tr>
</table>
</body>
</html>

效果图：

2、表格相关的属性

再介绍基本标签时，我们不难看出效果图中的表格没有边框，使得该表格可读性很差或者说很不美观。所以表格的属性就相当重要。（注：这里因该是CSS的内容）

相关属性有三个：border，width和height。分别表示表格边框，表格的宽和高。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table style="width:300px;height:100px;border:1px solid black">
    <caption>示例表格</caption>
    <tr>
        <th style="border:1px solid black"> 第一列</th>
        <th style="border:1px solid black">第二列</th>
        <th style="border:1px solid black">第三列</th>
    </tr>
    <tr>
        <td style="border:1px solid black">一行一列</td>
        <td style="border:1px solid black">一行二列</td>
        <td style="border:1px solid black">一行三列</td>
    </tr>
    <tr>
        <td>二行一列</td>
        <td>二行二列</td>
        <td>二行三列</td>
    </tr>
    <tr>
        <td>三行一列  </td>
        <td>三行二列  </td>
        <td>三行三列  </td>
    </tr>
</table>
</body>
</html>

效果图：

3、合并单元格

有时会有将单元格合并的情况，此时就要使用标签：rowspan，colspan。其分别为：跨行合并，跨列合并。在合并单元格时因遵守左上原则，确定保留谁删除谁（上下合并→只保留最上的，删除其他，左右合并→只保留最左的，删除其他)。

注意：不可以跨标签合并单元格。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table style="width:300px;height:100px;border:1px solid black">
    <caption>示例表格</caption>
    <tr >
        <th style="border:1px solid black;" >第一列</th>
        <th style="border:1px solid black">第二列</th>
        <th style="border:1px solid black">第三列</th>
    </tr>
    <tr>
        <td style="border:1px solid black" rowspan="2">一行一列</td>
        <td style="border:1px solid black" colspan="2">一行二列</td>
    </tr>
    <tr>
        <td style="border:1px solid black">二行二列</td>
        <td style="border:1px solid black">二行三列</td>
    </tr>
    <tr>
        <td style="border:1px solid black">三行一列  </td>
        <td style="border:1px solid black">三行二列  </td>
        <td style="border:1px solid black">三行三列  </td>
    </tr>
</table>
</body>
</html>

效果图：

4、表格的结构标签

在设计表格时，为了让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰，使用结构标签：thead表示表格头部，tbody表示表格主体，tfoot表示表格底部。

在使用时应书写在：表格结构标签写在table标签内部，表格标签内部用于包裹tr标签。

这点用作补充了解，不做更多的讲解。

七、表单标签

1.input标签

该标签是为了在网页中显示收集用户信息的表单效果，如:登录页、注册页。其标签就为imput

对于该标签有许多属性值，下面一一讲解：

（1）text

该标签为为文本框标签，在网页中显示输入单行文本的表单控件。其常见属性为placeholder，用于提示用户输入。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入文本">
</body>
</html>

效果图：

拓展知识：value属性和name属性作用介绍详见：value属性和name属性作用介绍

（2）password

为了实现在网页中显示输入密码的表单控件。其常见属性为placeholder，用于提示用户输入。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="password" placeholder="请输入密码">
</body>
</html>

效果图：

（3）radio

为了实现在网页中显示多选一的单选表单控件。其常见属性name和checked。其中name进行了分组，checked为默认选中。

注意：name属性对于单选框有分组功能，有相同name属性值的单选框为一组，一组中只能同时有一个被选中。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="radio" name="male"  >女
<input type="radio" name="male"  checked>男
</body>
</html>

效果图：

（4）checkbox

与radio不同，这个是为了实现在网页中显示多选多的多选表单控件。其常见属性checked。checked为默认选中。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox"   >足球
<input type="checkbox"   >篮球
<input type="checkbox"   >排球
<input type="checkbox"   checked>乒乓球
</body>
</html>

效果图：

（5）file

为了实现在网页中显示文件选择的表单控件。其常见属性值为multiple，表示多文选择。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" multiple>
</body>
</html>

效果图：

（6）submit，button，reset

这三个为按钮标签，提供了一个按钮来实现相关功能。submit是提交按钮，可以将数据传给后端。button是普通按钮，默认无效果，但是可以搭配js实现其他功能。reset是重置按钮，点击后会重置到默认的页面。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="submit">
<input type="button">
<input type="reset">
</body>
</html>

效果图：

2.button标签

为了实现在网页中显示用户点击的按钮。其type属性为submit，button，reset。submit是提交按钮，可以将数据传给后端。button是普通按钮，默认无效果，但是可以搭配js实现其他功能。reset是重置按钮，点击后会重置到默认的页面。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">button</button>
</body>
</html>

效果图：

3.select标签

为了实现在网页中提供多个选择项的下拉菜单表单控件。其标签的组成为：select标签表示下拉菜单的整体，option标签表示下拉菜单的每一项。常见属性有：selected:下拉菜单的默认选中。

代码示例;

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select>
    <option>选择1</option>
    <option selected>选择2</option>
    <option>选择3</option>
</select>
</body>
</html>

效果图：

4、textarea标签

为了实现在网页中提供可输入多行文本的表单控件。其常见属性有cols,rows。

cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数

注意：右下角可以拖拽改变大小，实际开发时针对于样式效果推荐用CSS设置

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea  cols="30" rows="10">请输入文本</textarea>
</body>
</html>

效果图：

5.lable标签

该标签常用于绑定内容与表单标签的关系，其使用方法有两种;

使用方法1:

使用label标签把内容(如:文本)包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

使用方法2:

直接使用label标签把内容(如:文本)和表单标签一起包裹起来。

代码示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="one">
<label for="one">方法一</label>
<label>
<input type="text">方法二
</label>
</body>
</html>

效果图：

八、语义化标签

1.没有语义的布局标签

前面学习了许多的HTML标签，但在实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签。

div标签:一行只显示一个(独占一行)

span标签:一行可以显示多个

2.有语义的布局标签（了解）

在HTML5新版本中，推出了一些有语义的布局标签供开发者使用，该标签显示特点和div一致，但是比div多了不同的语义。

|---------|-------|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |

九.字符实体

在网页编辑文本时，如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格。此时，就需要使用字符实体来实现编辑时需要的效果。

常用的字符实体有：

|--------|--------|---|------|---------|
| 大于号 > | &lt | | 分 ₵ | &cent |
| 小于号 < | &gt | | 磅 £ | &pound |
| 空格 | &nbsp | | 元 ¥ | &yen |
| 和号 & | &amp | | 欧元 € | &euro |
| 引号 " | &quot | | 小节 § | &sect |
| 撇号 ' | &apos | | 版权 © | &copy |

十、补充说明

1.标签的使用规则

以img标签为例，在使用图像标签时有src，alt，width等等属性，在使用时是在原标签的<>内书写（双标签的写在第一个<>内）。书写时，属性与属性之间，属性与标签之间要有空格隔开，不可以合并，且标签必须在第一个位置，不可以将属性写在标签之前。

属性后有=""，在添加属性值时，应在引号内填写该属性的属性值

例子：

正确书写：

复制代码

<img src="" alt="" width="">

错误书写：

复制代码

<imgsrc=""alt="">
<src="" img alt="">

2.链接（路径）的介绍和使用

在使用src或者href属性时，我们需要引入链接（路径）。在引入链接（路径）时有一下几种情况：

（1）绝对路径

指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如

盘符：C:\Users\username\AppData\Local\Google\Chrome\Application

网址：https://www.csdn.net/

（2）相对路径

即寻找时是相对于当前网页位置开始定位。分为三种情况：同级目录，下级目录，上级目录。

同级目录：

此时目标（被引用）文件位置和当前文件在同一文件夹内（同一目录），在href或src属性后的属性值里直接写文件名或者在文件名前加"./"这个符号。

示例：

复制代码

<img src="img.jpg">
<img scr="./img.jpg">

上级目录：

此时目标文件（被引用文件）和当前文件所在文件夹在同一文件夹中（同一目录），在href或src属性后的属性值里写"../目标文件"。

示例：

复制代码

<img src="../img.jpg">

下级目录

此时目标文件（被引用文件）所在文件夹在和当前文件同一文件夹中（同一目录），在href或src属性后的属性值里写"./目标文件所在文件夹/目标文件"。

示例：

复制代码

<img src="./img/img.jpg">

总结：在属性值里写"./"就是找同一级文件夹的文件，写"/"就是找斜杠之前文件夹内的文件，写"../"就是返回上一级文件夹，再寻找该文件夹下的文件。

3、value属性和name属性作用介绍

value属性:用户输入的内容，提交之后会发送给后端服务器。

name属性:当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义。

后端接收到数据的格式是:name的属性值 = value的属性值。

4、双标签和单标签

双标签，字面意思为该种标签有两部分组成例如超链接标签<a></a>，段落标签等等，该标签的第一个部分时<>和标签名构成，第二个部分是</>和标签名构成。双标签可以在前后两个部分中添加文字等内容。但是切记要注意闭合，不可单独出现。

单标签则为该标签仅有一个部分组成例如图片标签<img>，表单标签<input>等。该种标签为<>和标签名构成。由于仅有一个标签，所以会导致不可以自由的添加文字等元素。但是，部分标签，可以通过属性来达到类似的效果（例如input的placeholder属性）。

HTML———标签元素

一、布局标签

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

二、文本标签

三、引用/插入标签

1、图片标签

2、音频标签

3、视频标签

四、超链接标签

五、列表标签

1、无序标签

2、有序列表

3、自定义列表

六、表格标签

1、基本标签

2、 表格相关的属性

3、合并单元格

4、 表格的结构标签

七、表单标签

1.input标签

（1）text

（2）password

（3）radio

（4）checkbox

（5）file

（6）submit，button，reset

2.button标签

3.select标签

4、textarea标签

5.lable标签

八、 语义化标签

1.没有语义的布局标签

2.有语义的布局标签（了解）

九.字符实体

十、补充说明

1.标签的使用规则

2.链接（路径）的介绍和使用

（1）绝对路径

（2）相对路径

3、value属性和name属性作用介绍

4、双标签和单标签

2、表格相关的属性

4、表格的结构标签

八、语义化标签