Web前端–文本类标签深度剖析及应用

前言：文本标签用于标识网页中的不同内容，属于不可替换元素。

 

h1~h6标签

代表1~6级标题，权重从高到低递减

示例代码：

    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>

页面显示效果：

---

blockquote标签

表示整段的引用。特点：自动前后缩进

cite标签

表示对参考文献的引用。特点：斜体展示方式，它既可以当标签，又可以当属性

q标签

表示小段文本引用。特点：自带前后双引号。适用场景：名人名言等小段引用

abbr标签

对缩写词的引用。缩写词：鼠标放上去会有全称显示，适用场景：专业术语、名词解释等
 

以上四个都是引用的标签，他们在页面的不同展示效果如下。示例代码：

    <blockquote>
        我是blockquote标签，表示整段引用
    </blockquote>

    <cite>
        我是cite标签，表示对参考文献的引用
    </cite>

    <q>
        我是q标签，表示小段文本引用
    </q>

    <abbr title="">
        我是abbr标签，表示对缩写词的引用
    </abbr>

页面展示效果：

【补充：当title为标签时，代表当前页面标题。当它为<abbr>的属性时展示专业名词的全称或者解释内容】

示例代码：

    <abbr title="我是缩写词全称：我是abbr标签，表示对缩写词的引用">
        我是缩写词
    </abbr>

页面展示效果：

【如图所示，当鼠标放到缩写词上时，会自动显示全称信息】

---

strong标签

表示重要的文本

b标签

表示应突出显示的文本

【<strong>和<b>在页面展示上没有任何区别，都是加粗展示。但是在阅读浏览器上，<strong>的内容会加重语气】

p标签

表示段落

em标签

表示强调的文本

i标签

表示应区别对待的文本

【<em>和<i>在页面展示上没有任何区别，都是斜体展示。但是在阅读浏览器上，<em>的内容会加重语气】

页面展示效果如下，示例代码：

    <strong>
        我是strong标签
    </strong>

    <b>
        我是b标签
    </b>

    <p>
        我是P标签
    </p>

    <em>
        我是em标签
    </em>

    <i>
        我是i标签
    </i>

页面展示效果：

---

sup标签

表示定义文字上标，用于表示类似于10³中的3

sub标签

表示定义文字下标，用于表示类似余H2O中的2

示例代码：

    H<sub>2</sub>O
    
    10<sup>3</sup>

页面展示效果：

---

ins标签

表示插入的内容，显示时通常会加下划线。

del标签

表示删除的内容，显示时通常会加删除线，适用如打折促销等。

示例代码：

    <ins>
        我是ins标签
    </ins>

    <del>
        我是del标签
    </del>

页面显示效果：