文章目录
第4章 文本
选择元素不是为了使用其样式，而是为了描述内容，比如不能为了让文字变成斜体就使用em,em是用来标记强调的文本的。
4.1 添加段落
<p>:HTML会忽略你在文本编辑器中输入的回车符和其他额外的空格。要在网页中开始一个新的段落，应该使用p元素
4.2 指定细则
small表示细则一类的旁注（side comment），“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。”
small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本
1.例子一：
Order now to receive free shipping. (Some restrictions may apply.)
2.例子二：在上面的两个例子中，我们用
small元素来表示简短的法律声明。在第二个例子中，small表示的是包含在页面级footer里的版权声明，这是一种常见的用法
提示 用
small标记页面的版权信息是一种常见的做法。不过，small只适用于短语，因此不要用它标记长的法律声明，如“使用条款”和“隐私政策”页面。根据需要，应该用段落或其他语义标签标记这些内容。
4.3 标记重要和强调的文本
strong元素：表示内容的重要性。em元素：表示内容的着重点。
This is my pen.I like it.
提示 不要使用b元素代替strong，也不要使用i元素代替em。尽管它们在浏览器中显示的样式是一样的，但它们的含义却很不一样
HTML5中重新定义的
b和i元素
HTML5强调元素的语义，而非表现。b和i元素是早期HTML遗留下来的产物，它们分别用于将文本变为粗体和斜体（那时CSS还未出现）。HTML4和XHTML1当然抛弃了它们，因为它们本质上是用于表现的。当时的规范建议编码人员用strong替代b，用em替代i。不过，事实证明，em和strong有时在语义上并不合适。为此，HTML5重新定义了b和i。
传统出版业里的某些排版规则在现有的HTML语义中还找不到对应物，其中就包括用斜体表示植物学名（如“Ulmus americana is the Massachusetts state tree.”）、具体的交通工具名称（如“We rode the Orient Express.”）及外来语（如“The couple exhibited a joie de vivre that was infectious.”）。这些词语不是为了强调而加上斜体的，只是样式上的惯例。
为了应对这些情况，HTML5没有创建一些新的语义化元素（进一步把事情搞复杂），而是采取了一种很实际的做法，直接利用现有元素：em用于所有层次的强调，strong用于表示重要性，而其他情况则使用b和i。
这意味着，尽管b和i并不包含任何明显的语义，但读者仍能发现它们与周边文字的差别。而且你还可以通过CSS改变它们粗体或斜体的样式。HTML5强调，b和i应该是其他元素（如strong、em、cite等）都不适用时的最后选择。
b元素简介
HTML5将b重新定义为：
b元素表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。
例如：
<p>The <b>XR-5</b>, also dubbed the <b>Extreme Robot 5</b>, is the best robot we've ever tested.</p>
b元素默认显示为粗体。
i元素简介
HTML5将i重新定义为：
i元素表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称等。
例如：
<p>The <i lang="la">Ulmus americana</i> is the Massachusetts state tree.</p>
<p>We rode the <i>Orient Express</i>.<p>
<p>The couple exhibited a <i lang="fr">joie de vivre</i> that was infectious.<p>
i元素默认显示为斜体。
4.4 创建图
figure元素：插入图片、图表、图形、代码以及其他的独立内容figcaption元素：figure的标题，出现在figure内容的开头或结尾处。
<figure>
<figcaption>花木兰</figcaption>
<img src="花木兰 冠军飞将.jpeg">
<figcaption>冠军飞将</figcaption>
<code>console.log("hello mulan！")</code>
</figure>
4.5 指明引用或参考
cite元素：指明某内容源的引用或参考，例如，戏剧、脚本或图书的标题，歌曲、电影、照片、或雕塑的名称，演唱会或音乐会，规范、报纸或法律文书等。
4.6 引述文本
bolckquote元素：引述块级文本q元素：引述行内文本 （浏览器会默认添加双引号）
由于
q元素的跨浏览器问题，开发时要避免使用q元素，而是选择直接输入正确的引号或使用字符实体。
4.7 时间
time元素：定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的datetime属性：规定日期 / 时间。否则，由元素的内容给定日期 / 时间。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
格式：
YYYY-MM-DDThh:mm:ss或者YYYY-MM-DDT:hh:mm.sss
例如：1985-11-03T17:19:40
如果表示时间段，需要用nh nm ns
例如：<p>这个会议持续了<time>2h 41m 3s</time>
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
提示：不能在
time元素中嵌套另一个time元素，也不能在没有datetime属性的time元素中包含其他元素（只能包含文本）
4.8解释缩写词
<abbr title="abbreviation">abbr</abbr>
<abbr title="National Basketball Association">NBA</abbr>
<abbr>NFL</abbr>(National Football League)
页面显示效果：
方式一：
| NBA |
|---|
方式二：
| NFL(National Football League) |
|---|
方式二对手机用户友好，这些用户没办法移到
<abbr>元素上查看title提示框
4.9 定义术语
dfn元素：定义术语（只是包围术语词儿，而不包围定义）
<p>The contestant was asked to spell "pleonasm".
She requested the definition and was told that <dfn>pleonasm</dfn> means "a redundant word or expression"(Ref:<cite><a href="http://dictionary.reference.com/browse/pleonasm" rel="external">dictionary.com</a></cite>).</p>
4.10 上标和下标
sub：下标sup：上标
<a href="#footnote-1" title="Read footnote 1"><sup>1</sup></a>.
<a href="#footnote-2" title="Read footnote 2"><sup>2</sup></a>.
<footer>
<p id="footnote-1"><sup>1</sup>It means Paul in English.</p>
<p id="footnote-2"><sup>2</sup>In 1963,Ibelieve.</p>
</footer>
The1.
The2.
4.11 添加作者联系信息
address元素：用以定义有关作者、相关人士或组织的联系信息，通常位于相关部分内或者页面底部
address元素的内容通常是作者的电子邮件地址或者指向联系信息页的链接。但address不能用来标记公司网站“联系我们”页面中的办公地点
提示
address只能包含作者的联系信息，不能包括其他内容，如文档或文章的最后修改时间。此外，HTML5禁止在address里包含以下元素：h1～h6、article、address、aside、footer、header、hgroup、nav和section
4.12 标注编辑和不再准确的文本
ins元素：代表添加内容,标记新插入文本del元素：代表删除内容，标记以删除文本s元素：标记不再准确或不再相关的文本
<ul>
<li><del>2 desks</del></li>
<li>1 chalkboard</li>
<li><del>4 solar-powered tablets</del></li>
<li><ins>1 bicycle</ins></li>
</ul>
<s>HTML4 HTML3 HTML2 HTML1</s>
效果如下：
2 desks- 1 chalkboard
4 solar-powered tablets- 1 bicycle
del和ins是少有的既可以包围短语内容（HTML5之前称“行内元素”）又可以包围块级内容的元素
4.13 标记代码
code元素：标记代码或文件名
<code><ul id="thumbnail"></code>
<ul id=“thumbnail”>
注意 code元素中需要表示左右尖括号的话应该要用
<和>，否则浏览器会将这些代码当做HTML元素处理 （lt:less than,gt:greater than）
4.14 使用预格式化的文本
pre元素：保持文本固有的换行和空格，这是表现计算机代码示例的理想元素
<pre>
<code>
abbr[title]{
border-bottom:1px dotted #000;
}
</code>
</pre>
效果如下：
abbr[title]{
border-bottom:1px dotted #000;
}
对比效果（不用<pre>）：
abbr[title]{
border-bottom:1px dotted #000;
}
4.15 突出显示文本
mark元素：突出显示文本
4.16 创建换行
br元素：强制换行
提示 在HTML5中，输入
<br />或<br>都是有效的
4.17 创建span
span元素：没有任何语义，适合包围资瓷或短语内容（div适合包围块级内容）
4.18 其他元素
mater元素：表示分数的值或意志范围的测量结果
简单地说，它代表的是投票结果（如“30% Smith，37% Garcia，33% Hawkins”）、已售票数（如“共850张，已售811张”）、考试分数（如“百分制的90分”）、磁盘使用量（如“256GB中的74GB”）等测量数据。
<p>project completion staus:<meter value="0.80">80% completed</meter></p>
<p>Car brake pad wear:<meter low="0.25" high="0.75" optimum="0" value="0.21">21% worn</meter>
<p>Miles walked during half-marathon:<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p>
效果如下：
project completion staus:80% completed
Car brake pad wear:21% worn
Miles walked during half-marathon:4.5
