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

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

 

h1~h6标签

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

示例代码：

    
我是一级标题
    
我是二级标题
    
我是三级标题
    
我是四级标题
    
我是五级标题
    
我是六级标题

页面显示效果：

---

blockquote标签

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

cite标签

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

q标签

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

abbr标签

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

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

    

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

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

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

    
        我是abbr标签，表示对缩写词的引用
    

页面展示效果：

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

示例代码：

    
        我是缩写词
    

页面展示效果：

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

---

strong标签

表示重要的文本

b标签

表示应突出显示的文本

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

p标签

表示段落

em标签

表示强调的文本

i标签

表示应区别对待的文本

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

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

    
        我是strong标签
    

    
        我是b标签
    

    

        我是P标签
    

    
        我是em标签
    

    
        我是i标签
    

页面展示效果：

---

sup标签

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

sub标签

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

示例代码：

    H2O
    
    103

页面展示效果：

---

ins标签

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

del标签

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

示例代码：

    
        我是ins标签
    

    
        我是del标签
    

页面显示效果：