HTML5文本元素（20160802-0002）

文本元素，就是将一段文本设置成相匹配的结构和含义。HTML5 规范指出：使用元素应该完全从元素的语义出发。
一、文本元素总汇

元素名称	说明
a	生成超链接
br	强制换行
wbr	可安全换行
b	标记一段文字但不强调
strong	表示重要
i	表示外文或科学术语
em	表示强调
code	表示计算机代码
var	表示程序输出
samp	表示变量
kdb	表示用户输入
abbr	表示缩写
cite	表示其他作品的标题
del	表示被删除的文字
s	表示文字已不再确认
dfn	表示术语定义
mark	表示与另一段上下文有关的内容
q	表示引自他处的内容
ruby	表示位于表意文字上方或右方的拼音符号
bdo	控制文字的方向
small	表示小号字体内容
sub	表示下标字体
sup	表示上标字体
time	表示时间或日期
u	表示一段文字但不强调
span	通用元素，没有任何语义。一般配合css修饰

二、文本元素解析

1、<b> 表示关键字或产品名称
<b> b，文本，HTML5 </b>
解释：<b> 元素实际作用是加粗。从语义上来看，就是标记一段文字，但并不是特别强调或重要性。比如：一段文本中的某些关键字或者产品的名称。
2、<strong> 表示重要的文字
<strong> strong，文本，HTML5  </strong>
解释：<strong> 元素实际作用和 <b> 元素一样，就是加粗。从语义上来看，就是强调一段重要的文本。
3、<br> 强制换行、<wbr>安全换行
<br> The abcdefghijk<wbr>lmnopqrstuvwxyz is letter.
解释：在任意文本位置键入 <br> 都会被换行，而在英文单词过长时使用 <wbr> 会根据浏览器的宽度适当的裁切换行。
4、<i> 表示外文词汇或科学技术语
<i> i，文本，HTML5  </i>
解释：<i> 元素实际作用就是倾斜。从语义上来看表示区分周围内容，并不是特别强调或重要。
5、<em> 加以强调
<em> em，文本，HTML5  </em>
解释：<em> 元素实际作用和 <i> 一样，就是倾斜；从语义上来看，表示对一段文本的强调。
6、<s> 表示不准确或校正
<s> s，文本，HTML5  </s>
解释：<s> 元素实际作用就是删除线，从语义上来看，表示不准确的删除。
7、<del> 表示删除文字
<del> del，文本，HTML5  </del>
解释：<del> 元素实际作用和 <s> 一样，就是删除线，从语义上来看，表示删除相关文字。
8、<u> 表示给文字加上下划线
<u> u，文本，HTML5  </u>
解释：<u> 元素实际作用就是加一条下划线，从语义上来看，并不强调此段文本。
9、<ins> 添加一段文本
<ins> ins，文本，HTML5  </ins>
解释：<ins> 元素实际作用和 <u> 一样，加一条下划线，从语义上来看，是添加一段文本，起到强调的作用。
10、<small> 添加小号字体
<small> small，文本，HTML5  </small>
解释：<small> 元素实际作用就是将文本放小一号，从语义上来看，用于免责声明和澄清声明。
11、<sub><sup> 添加下标和上标
₅
⁵
解释：<sub>和<sup>元素实际作用就是数学的下标和上标，语义也是如此。
12、<code> 等表示输入和输出
<code> code，文本，HTML5  </code>
<var> var，文本，HTML5  </var>
<samp> samp，文本，HTML5  </samp>
<kdb> kdb，文本，HTML5  </kdb>
解释：<code> 表示计算机代码片段；<var> 表示编程语言中的变量；<samp> 表示程序或计算机的输出；<kdb>表示用户的输入。由于这属于英文范畴的，必须将 lang="en" 英语才能体现效果。
13、<abbr> 表示缩写
<abbr> abbr，文本，HTML5  </abbr>
解释：<abbr> 元素没有实际作用，从语义上来看，就是一段文本的缩写。
14、<dfn> 表示定义术语
<dfn> dfn，文本，HTML5  </dfn>
解释：<dfn> 元素就是一般性的倾斜，从语义上来看，表示解释一个词或短语的一段文本。
15、<q> 引用来自他处的内容
<q> q，文本，HTML5  </q>
解释：<q> 元素实际作用就是加了一对双引号，从语义上来看，表示引用自其他地方的内容。
16、<cite> 引用其他作品的标题
<cite> cite，文本，HTML5  </cite>
解释：<cite> 元素实际作用就是倾斜。从语义上来看，表示引用其他作品的标题。
17、<ruby> 语言元素
<ruby style="font-size:2em">
饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>
解释：<ruby> 用来为非西方语言提供支持。<rp><rt>用来帮助读者掌握表意语言文字正确发音。比如：汉语拼音在文字的上方。
mac 下输入带声调的拼音：在自带的英文输入法下长按要输入的字母。
18、<bdo> 设置文字方向
<bdo dir="rtl"> bdo，文本，HTML5  </bdo>
解释：<bdo> 必须使用属性 dir 才可以设置，一共两个值：rtl（从右到左）和 ltr（从左到右）。一般默认是 ltr。还有一个<bdi> 元素也是处理
a493
方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略。
19、<mark> 突出显示文本
<mark> mark，文本，HTML5  </mark>
解释：<mark> 实际作用就是加上一个黄色的背景，黑色的字，从语义上来看，与上下文相关而突出的文本，用于记号。
20、<time> 表示日期和时间
<time> 2015-10-10 </time>
解释：<time> 元素没有实际作用，从语义上来看，表示日期和时间。
21、<span> 表示一般性文本
<span> span，文本，HTML5  </span>
解释：<span> 元素没有实际作用，语义上就是表示一段文本，我们经常用它来设置 css 等操作。

代码地址