本文首发于个人微信公众号(xinjie-just)。

HTML是超文本标记语言，它提供网页的具体内容，包括文本、表单、图像、表格、链接、多媒体、列表等。其中文本是我们遇到的最多的展示内容。正确的使用文本标签，会使页面具有语义化，也有利于SEO。

文本标签主要包括：abbr, address, strong, b, em, i, bdi, bdo, blockquote, cite, code, del, ins, s, dfn, kbd, mark, small, meter, pre, progress, q, sub, sup, time, span, var.

网页中并不总是使用 div 和 span 就够了。正确使用这些文本标签，使得我们的页面即便没有 css 的情况下，也能良好的展示。另一方面，使用这些标签是为了写出别人能看得懂的代码，而不仅仅是机器能看得懂，这也是我从学习编程以来一直在努力的方向。

1. abbr

abbr 解释缩写词,鼠标悬停在其上时显示title属性值WHO

2. address

address 定义与 html 页面和页面一部分有关的作者、相关人士或组织的联系信息,通常位于页面底部或相关部分内 （用 address 标记公司网站 “联系我们” 中的办公地点，则是错误的用法），字体以斜体显示 Written by Jon Doe. Visit us at: Example.com Box 564, Disneyland USA

3. strong

strong 强调内容的重要性（重要程度），字体以粗体显示stop and get out

4. b

b 表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不代表其他的语态和语气，用于文章的关键词、评论中的产品名、文章导语、基于文本的交互式软件中的指示操作的文字他在感情上的愚钝就想门窗紧闭的屋子

5. em

em 表示内容的着重点（唯一性），字体以斜体显示I just love you

6. i

i 表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如技术名称、技术术语、外语中的惯用语、翻译的散文、西方文字中的船舶名称等HTML，重构，wow，解忧杂货店，泰坦尼克号

7. bdi

bdi 允许设置一段文本，使其脱离其父元素的文本方向设置。目前只有 Firefox 和 Chrome 浏览器支持

8. bdo

bdo 定义文本的方向,ltr（从左到右为默认方向）This text will go left-to-right.This text will go right-to-left.

9. blockquote

blockquote 表示单独存在的引述（可长可短）For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

10. cite

cite 指明对某内容源的引用或参考。如：戏剧、脚本、图片的标题、歌曲、电影、照片、雕塑的名称、演唱会、音乐会、规范、报纸、法律文件（不能作为对人名的引用），字体以斜体显示你我都当过警务处长，自己人太懂礼貌，虚伪！这句话出自电影《寒战II》

11. code

code 定义计算机代码文本This is a piece of computer code: alert("这里有再次成为好人的路,Here is the way to be a good person again.")

12. del

del 如果需要在前一个版本之后对页面内容的编辑标记出来，或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容， del 表示删除内容， s 用来标记不再准确或不再相关的内容， 浏览器对删除的内容加删除线，对添加的内容加上下划线，对 s 元素添加删除线My favorite color is bluered!

13. ins

ins 如果需要在前一个版本之后对页面内容的编辑标记出来，或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容， del 表示删除内容， s 用来标记不再准确或不再相关的内容， 浏览器对删除的内容加删除线，对添加的内容加上下划线，对 s 元素添加删除线My favorite color is not blue, is red!

14. s