HTML系列（三）：文字设置
一、标题
标题的h1到h6标签，这里不再赘述。值得一提的是，H5中新定义了一个元素<hgroup>，用来将标题和副标题群组。一般在header里将一组标题组合在一起，变成一个区块：
1 <body>
2 <header>
3 <hgroup>
4 <h1> 阿里旅行·去啊 </h1>
5 <h2> 阿里旅行·去啊是阿里巴巴旗下的综合性旅游出行服务平台 </h2>
6 <p>阿里旅行·去啊，世界触手可行</p>
7 </hgroup>
8 </header>
9 <article>
10 阿里旅行·去啊整合数千家机票代理商、航空公司、旅行社、旅行代理商资源，直签酒店，客栈卖家等为广大旅游者提供特价机票，酒店预订，客栈查询，国内外度假信息，门票购买，签证代理，旅游卡券，租车，邮轮等旅游产品的信息搜索，购买及售后服务。全程采用支付宝担保交易，安全、可靠、有保证。
11 </article>
12 <body>
13 </body>
二、关键字和产品名称<b></b>
<b>标签包裹的部分比其余部分更重要，呈现为粗体。以下场景可以使用b标签：文档的摘要中的关键字；产品描述中的产品名；其他文本在需要加粗显示的情况下。
根据H5规范，再没有其他更合适的标签时，才把b作为最后的选项。H5声明用h1到h6表示标题，em表示要强调的文本，strong来表示重要文本，mark表示标注的、突出显示的文本。
三、强调<em></em>
<em>标签表示强调其中的文本，用斜体来显示。但是如果只是单纯的想要斜体效果，请使用i标签。
四、外文或科技术语<i></i>
<i>标签也是显示斜体效果，使用场景为：表示转述句；表示分类名称；习语。
五、重要文字<strong></strong>
<strong>和<em>一样用于强调文本，但它强调的程度更强一些。显示效果为加粗。
六、删除线<s></s>
<s>显示效果为删除线，可以和<ins>标签配合使用。H5中的删除线用<del> 。
七、下划线<u></u>
可以在css样式属性中的text-decoration设置为underline来为文字添加下划线，也可以利用u标签设置。在H5中不再支持u标签。如果不是超链接的话不建议添加下划线。
八、小号字体内容<small></small>
<small>标签显示为标注性质的小型文本，作为主体的旁注。适用于免责声明、版权声明、注意事项、法律限制、新闻来源、许可要求等。
九、上标<sup></sup>，下标<sub></sub>
包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。 提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。
十、指明可以安全换行的建议位置<wbr>
<wbr>是H5中新增的元素。如果单词太长，或者担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来进行换行。将<wbr>元素放在一个单词内部，比如reck<wbr>less，当浏览器宽度合适时，不拆单词；当浏览器宽度不适时，在reck后换行。注意：IE8以下版本不支持。
十一、<code>,<var>,<kbd>,<abbr>,<dfn>
<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员来说，这应该是十分熟悉的。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。
提示：如果只是希望使用等宽字体的效果，请使用<tt>标签。或者，如果想要在严格限制为等宽字体格式的文本中显示编程代码，请使用 <pre>标签。
<var> 标签表示变量的名称，或者由用户提供的值。
<var> 标签是计算机文档中应用的另一个小窍门，这个标签经常与<code>和 <pre>一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用 <var> 标签标记的文本通常显示为斜体。
就像其他与计算机编程和文档相关的标签一样，<var> 标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从你的文档中提取信息以及文档中提到的有用参数。我们再一次 强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。
<kbd> 标签定义键盘文本。它用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。
<abbr> 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式，比如 "WWW" 或 "NATO"。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
提示：可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。
<dfn> 标签可标记那些对特殊术语或短语的定义。其最近的父元素必须包含术语的定义。
现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来，<dfn> 还可能有助于创建文档的索引或术语表。与其他许多基于内容的样式和物理样式标签一样，<dfn> 标签尽量少用为妙。
十二、引用
<q> 标签定义短的引用。浏览器经常在引用的内容周围添加引号。<q> 标签在本质上与<blockquote>是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。
可选的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| cite | citation | 定义引用的出处或来源（citation） |
<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。
用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用。
十三、文字排版方向
<bdo> 元素可覆盖默认的文本方向。
可选属性：
| 属性 | 值 | 描述 |
|---|---|---|
| dir |
|
定义文字的方向,rtl表示从右向左书写。 |
bdi 指的是 bidi 隔离。<bdi> 标签允许设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他无法完全控制的内容时，该标签很有用。<bdi> 标签是 HTML5 中的新标签。目前只有 Firefox 和 Chrome 支持 <bdi> 标签。
十四、使用预先编排好格式的内容
<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
为了使包含在pre元素中的文本内容能正确换行，通常需要配上以下样式代码：
<style type="text/css">
pre{
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
</style>
提示：在用<pre>标签定义计算机源代码时，请使用符号实体来表示特殊字符，比如"<"代表"<"，">"代表">"，"&"代表"&"。
十五、使用下拉列表<datalist>
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
提示： input 元素的 list 属性一定要和 datalist的id属性值相同。
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
datalist是H5的新标签，目前只有 Firefox 和 Opera 支持 <datalist> 标签。
