Logo

# HTML5教程 - 5 文本语义标签

学习HTML就是学习各个标签如何使用，下面先从文本标签学起。

# 5.1 h1、p、br标签

下面我们介绍几个标签，<h1> 、 <p> 、<br/>

注：后面 head 中的代码没有改变，在演示的时候就不罗列了，只列出 body 标签中的内容。

编写代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    <h1>春夜喜雨</h1>
    <h2>[唐] 杜甫</h2>
    <p>
        好雨知时节，当春乃发生。
        随风潜入夜，润物细无声。
        野径云俱黑，江船火独明。
        晓看红湿处，花重锦官城。
    </p>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

显示的效果如下：

下面来解释一下：

  • **<h1> **标签一级标题标签，<h2> 表示二级标题标签，在HTML中，总共有6级标题，<h1> 定义最大的标题， <h6> 定义最小的标题。一般一个页面中，最好只定义1个一级标题，当然你定义一堆一级标题，对这个页面没有任何影响，只是一级标题是最重要的内容，搜索引擎在检索的时候，通过一级标题知道这个页面的内容重点是什么。一般在使用的时候，也就用 h1 - h3 也就够了，其他的的就表示内容没那么重要了。
  • <p> 标签表示的是段落，一般一个段落使用一个 p 标签。
  • 我们在 <p> 标签中写了多行内容，显示的时候，发现都显示在一行了。在 HTML 中，回车是无法换行的，如果想换行，需要使用 <br /> 标签。有很多人将 <br/> 写成 <br>，效果是一样的。

使用 <br/> 标签，修改代码如下：

<body>
    <h1>春夜喜雨</h1>
    <h2>[唐] 杜甫</h2>
    <p>
        好雨知时节，当春乃发生。<br/>
        随风潜入夜，润物细无声。<br/>
        野径云俱黑，江船火独明。<br/>
        晓看红湿处，花重锦官城。
    </p>
</body>
1
2
3
4
5
6
7
8
9
10

显示效果如下：

# 5.2 文本格式化标签

我们继续修改上面的代码，将代码修改为如下：

<body>
    <h1>春夜喜雨</h1>
    <h2>[唐] 杜甫</h2>
    <p>
        好雨知时节，当春乃发生。<br/>
        随风潜入夜，<em>润</em>物细无声。<br/>
        野径云俱黑，江船火独明。<br/>
        晓看红湿处，花重锦官城。
    </p>
</body>
1
2
3
4
5
6
7
8
9
10

用 <em> 标签将 润 字包起来，显示效果如下：

润 字变成了斜体。

解释一下：

  • 上面使用了 <em> 标签，<em> 标签的作用是用于标记重点强调的文本。

这里需要强调：

HTML 只负责页面的结构，CSS负责表现，用于控制页面中元素的样式。所以我们在学习HTML标签的时候，不要关心标签的样式，不要关心大小、斜体、位置等样式内容，例如不要关心 <h1> 标签字体的大小，<em> 标签的字体是斜体，统统不要关心，这些元素的样式都是可以通过 CSS 来修改的，CSS负责元素的样式。

那么应该关注 HTML 标签的什么信息呢？

我们需要关注标签的语义，就是标签代表什么含义就可以了。我们做什么时候用什么标签，不要关心标签显示的样式。

下面介绍一下其他的一些文本格式化标签：

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

但其实吧，上面的标签用的都不是很多，很多情况下都是使用 <span> 标签，然后使用 CSS 控制样式，那么 <span> 标签表示什么语义呢？

没有语义，就是用来包裹文字的标签。下面看看各个标签的效果：

代码：

<body>
    b 标签：<b>定义粗体文本。</b> <br/>
    em 标签：<em>定义着重文字。</em> <br/>
    i 标签：<i>定义斜体字。</i> <br/>
    small 标签：<small>定义小号字。</small> <br/>
    strong 标签：<strong>定义加重语气。</strong> <br/>
    sub 标签：<sub>定义下标字。</sub> <br/>
    sup 标签：<sup>定义上标字。</sup> <br/>
    ins 标签：<ins>定义插入字。</ins> <br/>
    del 标签：<del>定义删除字。</del> <br/>
    span 标签：<span>普通文本。</span>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

效果：


为什么我们编写HTML只关心语义，不关心样式？

首先，HTML只负责页面的结构，CSS负责表现，所以样式由CSS负责。在编写页面的时候，我们用到了很多的标签，其实像上面的标签，我们都可以使用其中一种标签写，然后使用CSS来控制样式，达到相同的效果。

那么既然能达到相同的效果，为什么又要使用不同的标签来呢？

我们在看网页的时候，各种标签在CSS的修饰下，最终都可以实现相同的样式，所以标签的语义对于看网页的 人 来说没有什么区别。但是浏览器、搜索引擎、拼写检查程序、翻译系统等组件，在遇到不同的语义标签的时候，会针对不同的语义标签做不同的处理，所以语义标签最大的意义还是给这些组件去用的，例如搜索引擎读取到网页的 <h1> 标题标签，那么就知道页面的重点是什么。


下面再介绍一些标签，我们只关心它们的语义及可以了，具体显示的样式不需要那么关心。这些标签在开发中用的比较少，了解一下即可。HTML标签很难全都记住，有时候需要查询文档，大家可以查看 w3school 网站了解一下各个标签如何使用。这里就不就细节一一展开说明，不影响我们后面的学习。

计算机输出 标签：

标签 描述
<code> 用来定义计算机代码文本
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本，被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。该标签的一个常见应用就是用来表示计算机的源代码。

上面的标签很少用到，推荐使用上面的标签吗？我只能表示 不反对。

这里也罗列一下引用、引用和术语定义相关的标签，了解一下，不需要记忆，万一有需要再查询：

标签 含义
<abbr> 定义缩写
通过对缩写词语进行标记，能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语，浏览器经常会在标签内的内容外面插入引号。
<cite> 定义引用、引证

上面的标签很少用到，这里只演示两个特殊的 <q> 和 <bdo>

代码：

<body>
    <bdo dir="rtl">bdo 标签，可以定义文字显示方向。</bdo>
    
    <br/>

    孔子曰：<q>这句话会被加上双引号</q>
</body>
1
2
3
4
5
6
7

效果：

20220729101133

本章总结：

主要讲解了一些基础的标签的使用和含义，列举了很多的文本格式化标签。这里需要记住，使用标签的时候，看重的是标签的 语义，而不是 样式，样式是由 CSS 控制的。使用最多的还是 <span> 标签。

← 06-块元素和行内元素 →