一、标题

标题的h1到h6标签，这里不再赘述。值得一提的是，H5中新定义了一个元素<hgroup>，用来将标题和副标题群组。一般在header里将一组标题组合在一起，变成一个区块：

 <body>

     <header>

         <hgroup>

             <h1> 阿里旅行·去啊 </h1>

             <h2> 阿里旅行·去啊是阿里巴巴旗下的综合性旅游出行服务平台 </h2>

             <p>阿里旅行·去啊，世界触手可行</p>

         </hgroup>

     </header>

     <article>

         阿里旅行·去啊整合数千家机票代理商、航空公司、旅行社、旅行代理商资源，直签酒店，客栈卖家等为广大旅游者提供特价机票，酒店预订，客栈查询，国内外度假信息，门票购买，签证代理，旅游卡券，租车，邮轮等旅游产品的信息搜索，购买及售后服务。全程采用支付宝担保交易，安全、可靠、有保证。

     </article>

 <body>

 </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
  • ltr
  • rtl
 定义文字的方向,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>标签定义计算机源代码时，请使用符号实体来表示特殊字符，比如"&lt;"代表"<"，"&gt;"代表">"，"&amp;"代表"&"。

十五、使用下拉列表<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> 标签。

HTML系列（三）：文字设置的更多相关文章

  1. JVM系列三:JVM参数设置

    JVM系列三:JVM参数设置.分析   不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运 ...

  2. 【JAVA编码专题】 JAVA字符编码系列三：Java应用中的编码问题

    这两天抽时间又总结/整理了一下各种编码的实际编码方式,和在Java应用中的使用情况,在这里记录下来以便日后参考. 为了构成一个完整的对文字编码的认识和深入把握,以便处理在Java开发过程中遇到的各种问 ...

  3. VSTO之旅系列(三)：自定义Excel UI

    原文:VSTO之旅系列(三):自定义Excel UI 本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创 ...

  4. Android高效率编码-第三方SDK详解系列(三)——JPush推送牵扯出来的江湖恩怨，XMPP实现推送，自定义客户端推送

    Android高效率编码-第三方SDK详解系列(三)--JPush推送牵扯出来的江湖恩怨,XMPP实现推送,自定义客户端推送 很久没有更新第三方SDK这个系列了,所以更新一下这几天工作中使用到的推送, ...

  5. Web 开发人员和设计师必读文章推荐【系列三十】

    <Web 前端开发精华文章推荐>2014年第9期(总第30期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. AutoLayout的三种设置方式之——NSLayoutConstraint代码篇

    AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该技术有三种设置方式,等下我来为大家一一叙述一下. 在说三种设置方式前,我们先简单的说一下autolayou ...

  7. MySQL并发复制系列三：MySQL和MariaDB实现对比

    http://blog.itpub.net/28218939/viewspace-1975856/ 并发复制(Parallel Replication) 系列三:MySQL 5.7 和MariaDB ...

  8. SQL Server 2008空间数据应用系列三：SQL Server 2008空间数据类型

    原文:SQL Server 2008空间数据应用系列三:SQL Server 2008空间数据类型 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server ...

  9. 系列三VisualSvn Server

    原文:系列三VisualSvn Server VisualSvn Server介绍 1 .VisualSvn Server  VisualSvn Server是免费的,而VisualSvn是收费的.V ...

  10. java‘小秘密’系列(三)---HashMap

    java'小秘密'系列(三)---HashMap java基础系列 java'小秘密'系列(一)---String.StringBuffer.StringBuilder java'小秘密'系列(二)- ...

随机推荐

  1. Android的多媒体框架OpenCore介绍

    网上资料很少, 不过还是找到一个比较详细的说明: 特地在此整理了下: 地址:http://blog.csdn.net/djy1992/article/details/9339787 分为几个阶段: 1 ...

  2. nodejs递归创建目录，同步和异步方法

    nodejs递归创建目录,同步和异步方法.在官方API中只提供了最基本的方法,只能创建单级目录,如果要创建一个多级的目录(./aaa/bbb/ccc)就只能一级一级的创建,感觉不是很方便,因此简单写了 ...

  3. webpack入门笔记

    此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html

  4. jquery去除字符串首尾空格的方法：$.trim()

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. setObject与setValue的区别

    在使用NSMutableDictionary的时候经常会使用setValue forKey与setObject forKey,他们经常是可以交互使用的,代码中经常每一种的使用都有.1.先看看setVa ...

  6. mysql同时update多行

    当我们只更新一个字段时的语法如下: UPDATE mytable     SET myfield = CASE other_field         WHEN 1 THEN 'value'     ...

  7. [置顶] ※数据结构※→☆非线性结构（tree）☆============树结点 链式存储结构（tree node list）（十四）

    结点: 包括一个数据元素及若干个指向其它子树的分支:例如,A,B,C,D等. 在数据结构的图形表示中,对于数据集合中的每一个数据元素用中间标有元素值的方框表示,一般称之为数据结点,简称结点. 在C语言 ...

  8. 通过url给action传中文参数乱码解决方案

    比如: http://localhost:8080/projectName/dutyCondition.action?admitstate=0&currentStep=我的博客 传到后台的时候 ...

  9. 斐波那契数列 的两种实现方式（Java）

    import java.util.Scanner; /* 斐波那契数列:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ... 如果设F(n)为该数列的第n ...

  10. 提示constructor无法location的原因

    1.缺少对应属性的set方法 2.缺少确实没有对应的方法 3.对应的构造方法中参数类型不匹配 4.java对象不会在寻找构造函数时执行数据类型的强制类型转换,没有对应的类型就返回异常,不会自动强制转换 ...