HTML | 文本标签

常用文本标签

用于包裹：词汇、短语等。
通常写在排版标签里面。
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
文本标签通常都是行内元素。

标签名	标签语义	单 / 双标签
em	要着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	没有语义，用于包裹短语的通用容器	双

生活中的例子：div 是大包装袋，span 是小包装袋。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML_常用的文本标签</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        预防电信诈骗，请安装：<em>国家反诈中心app</em>。
    </p>
    <p>
        当我们出门的时候，一定要<strong>关好门窗</strong>！
    </p>
    <p>
        前端三个框架为：<span>Angular、React、Vue</span>。
    </p>
</body>
</html>

不常用文本标签

标签名	标签语义	单 / 双标签
`cite`	作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）	双
`dfn`	特殊术语，或专属名词	双
`del`与`ins`	删除的文本【与】插入的文本	双
`sub`与`sup`	下标文字【与】上标文字	双
`code`	一段代码	双
`samp`	从正常的上下文中，将某些内容提取出来，例如：标识设备输出	双
`kbd`	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中	双
`abbr`	缩写，最好配合上`title` 属性	双
`bdo`	更改文本方向，要配合`dir`属性，可选值:`ltr` （默认值）、`rtl`	双
`var`	标记变量，可以与`code` 标签一起使用	双
`small`	附属细则，例如：包括版权、法律文本。—— 很少使用	双
`b`	摘要中的关键字、评论中的产品名称。—— 很少使用	双
`i`	本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标（后面要讲的内容）。	双
`u`	与正常内容有反差文本，例如：错的单词、不合适的描述等。——很少使用	双
`q`	短引用 —— 很少使用	双
`blockquote`	长引用 —— 很少使用	双
`address`	地址信息	双

备注：

这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。

blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。

有些语义感不强的标签，我们很少使用，例如：small 、b 、u 、q 、blockquote

HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：h1~h6 、p 、div 、em 、strong 、span

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML_不常用的文本标签</title>
</head>
<body>
    <p>
        这首<cite>《光辉岁月》</cite>，非常的好听！
    </p>

    <p>
        <dfn>耗子尾汁</dfn>，是一个网络流行语，意思同<dfn>好自为之</dfn>。
    </p>

    <p>
        商品原价：<del>199</del>，限时秒杀：<ins>99</ins>
    </p>

    <p>
        水的化学方程式是：H<sub>2</sub>O，8的三次方是这么写的：8<sup>3</sup>
    </p>

    <p>
        等过一段我们学习了JS，你就会发现这段代码很有意思：<code>alert(1)</code>
    </p>

    <p>
        手机突然提示，<samp>支付宝到账100万元！</samp>
    </p>

    <p>
        保存的快捷键是：<kbd>ctrl + s</kbd>
    </p>

    <p>
        <abbr title="英雄联盟">LOL</abbr>这个游戏非常好玩
    </p>

    <p>
        你是年少的欢喜，这句话反过来念就是：<bdo dir="rtl">你是年少的欢喜</bdo>
    </p>

    <p>
        等过一段我们学习了JS，我们就知道要这样定义变量了：<code>let <var>a</var> = 1</code>
    </p>

    <p>
        <small>本网站所有资料、图表仅供参考，涉及投资项目所造成的盈亏与本网站无关。</small>
    </p>

    <p>
        我也买过<b>罗技GPW二代</b>这个鼠标，确实很好用！
    </p>

    <p>
        猪头声嘶力竭的喊着：<i>“燕子，没有你我怎么活啊！”</i>
    </p>

    <p>
        张三把“你好”的英文写成了：<u>heelo</u>，这是不对的！
    </p>

    <p>
        屈原曾经说过：<q>路漫漫其修远兮，吾将上下而求索</q>
    </p>

    <p>
        有一首歌，歌词是这样的：
        <blockquote>后来，我总算学会了如何去爱；可惜你早已远去消失在人海；后来终于在眼泪中明白，有些人一旦错过就不在；</blockquote>
    </p>

    <p>
        我们的学校地址是：<address>北京宏福科技园</address>
    </p>

</body>
</html>