一、标题

标题的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. reids客户端 redis-cli用法

    Redis提供了丰富的命令(command)对数据库和各种数据类型进行操作,这些command可以在Linux终端使用.在编程时,比如使用Redis 的Java语言包,这些命令都有对应的方法.下面将R ...

  2. POJ 2976 Dropping tests（二分答案）

    [题目链接]  http://poj.org/problem?id=2976 [题目大意] 给出每门成绩的总分和得分,去除k门成绩之后 使得剩余的成绩分数和除以总分得到的数字最大,要求精度在三位小数之 ...

  3. HDU4551

    简单. /* 简单题 */ #include<stdio.h> #include<string.h> #include<stdlib.h> #include< ...

  4. Android系统移植与调试之------->如何修改Android设备的开机第一阶段Logo

    1.切换到~/mx0831-0525/device/other/TBDG1073/res_pack目录下 2.更换bootup和poweron文件 找一张bmp16位的图片去除后缀名将这两张都替换,转 ...

  5. HipHop算法：利用微博互动关系挖掘社交圈

    /* 版权声明:可以任意转载,转载时请务必标明文章原始出处和作者信息 .*/                  CopyMiddle: 张俊林 TimeStamp:2012年3 月 在微博环境下,如何 ...

  6. linux内核源码阅读之facebook硬盘加速flashcache之六

    其实到目前为止,如果对读流程已经能轻松地看懂了,那么写流程不需要太多脑细胞.我觉得再写下去没有太大的必要了,后面想想为了保持flashcache完整性,还是写出来吧.接着到写流程: 1530stati ...

  7. mybatisnet轻量级ORM框架

    https://code.google.com/p/mybatisnet/source/checkout http://blog.csdn.net/arvinstudy/article/details ...

  8. AngularJS学习资源

    图灵社区 : 图书 : AngularJS入门教程 http://www.ituring.com.cn/book/1206 AngularJS 教程 | 菜鸟教程 http://www.runoob. ...

  9. Oracle视图，序列及同义词、集合操作

    一.视图(重点) 视同的功能:一个视图其实就是封装了一个复杂的查询语句.1.创建视图的语法:CREATE VIEW 视图名称 AS 子查询 范例:创建一个包含了20部门的视图CREATE VIEW e ...

  10. Android开发问题汇总（持续更新）

    在Android开发中,总会有一些很小的问题.由于我们的不仔细,很容易忽略掉,从而导致在该问题上花费了很多的时间,造成工作进度的延迟. 为此,在这里做一下记录,避免再次浪费许多时间在这些问题上. 1. ...