第2章 HTML5文本
2.1 标题和正文
1）标题
HTML5把标题分为6级，分别使用<h1><h2><h3><h4><h5><h6>标签进行标识，它们包含信息的重要性逐级递减。其中h1表示最重要的信息，而h6表示最次要的信息。关于这些标签常用的有<h1><h2><h3><h4>, 使用示例代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <h1>所有产品分类</h1> 10 <h2>进口商品</h2> 11 <h2>食品饮料</h2> 12 <h3>糖果/巧克力</h3> 13 <h4>巧克力 果冻</h4> 14 <h4>口香糖 棒棒糖 软糖 奶糖 QQ糖</h4> 15 <h3>饼干糕点</h3> 16 <h4>饼干 曲奇</h4> 17 <h4>糕点 蛋卷 面包 薯片/膨化</h4> 18 <h2>粮油副食</h2> 19 <h3>大米面粉</h3> 20 <h3>食用油</h3> 21 </body> 22 </html>
2）段落
网页正文主要通过段落文本来表现。HTML5使用<p>标签定义段落文本。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <article> 10 <h1>枫桥夜泊</h1> 11 <h2>张继</h2> 12 <p>月落乌啼霜满天，江枫渔火对愁眠。</p> 13 <p>姑苏城外寒山寺，夜半钟声到客船。</p> 14 </article> 15 16 </body> 17 </html>
2.2 描述性信息
1）强调
语义标签<strong>标签的语气强于<em>标签。二者的作用都在于引起注意，使文本的重要程度递增。显示效果：<b>相当于<strong>字体加粗，<i>相当于<em>字体斜体显示，使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h2>游客注意</h2> 9 <p><strong>请不要随地吐痰，特别是在<em>景区或室内</em>！</strong></p> 10 </body> 11 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>这是一个<b>红</b>盒子，那是一个<b>蓝</b>盒子</p> 9 <p>这块<i class="taxonomy">玛瑙</i>来自西亚</p> 10 <p>这篇<i>散文</i>已经发表.</p> 11 <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p> 12 </body> 13 </html>
2）注解
<small>标签表示注解，常见于细则、旁注。如免责声明、注意事项、法律限制、版权信息、署名、注解等。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <dl> 9 <dt>单人间</dt> 10 <dd>399 元 <small>含早餐，不含税</small></dd> 11 <dt>双人间</dt> 12 <dd>599 元 <small>含早餐，不含税</small></dd> 13 </dl> 14 </body> 15 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>现在订购免费送货。<small>（仅限于五环以内）</small></p> 9 <footer role="contentinfo"> 10 <p><small>© 2018 Baidu 使用百度前必读</small></p> 11 </footer> 12 </body> 13 </html>
3）上下标
上标和下标是很重要的排版格式。HTML5使用sup和sub分别定义上标文本和下标文本。上标和下标文本比主题文本稍高或稍低。常见的上标包括商标符号、指数和脚注编号等；常见的下标包括化学符号等。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <article> 9 <h1>王维</h1> 10 <p>王维参禅悟理，学庄信道，精通诗、书、画、音乐等，以诗名盛于开元、天宝间，尤长五言，多咏山水田园，与孟浩然合称“王孟”，有“诗佛”之称<a href="#footnote-1" title="参考注释"><sup>[1]</sup></a> 。</p> 11 <footer> 12 <h2>参考资料</h2> 13 <p id="footnote-1"><sup>[1]</sup>孙昌武·《佛教与中国文学》第二章：“王维的诗歌受佛教影响是很显著的。因此早在生前，就得到‘当代诗匠，又精禅理’的赞誉。后来，更得到‘诗佛’的称号。”</p> 14 </footer> 15 </article> 16 </body> 17 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="maths"> 9 <h1>解一元二次方程</h1> 10 <p>一元二次方程求解有四种方法：</p> 11 <ul> 12 <li>直接开平方法 </li> 13 <li>配方法 </li> 14 <li>公式法 </li> 15 <li>分解因式法</li> 16 </ul> 17 <p>例如，针对下面这个一元二次方程：</p> 18 <p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p> 19 <p>我们使用<big><b>分解因式法</b></big>来演示解题思路如下：</p> 20 <p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p> 21 <p><small>得：</small><br /> 22 <i>x</i><sub>1</sub>=1<br /> 23 <i>x</i><sub>2</sub>=4</p> 24 </div> 25 </body> 26 </html>
4）术语
HTML5使用dfn元素标识专用术语，并规定dfn元素及其定义必须放在一起，否则便是错误用法。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!--dfn两种常用形式如下--> 9 <!--1.在段落文本中定义术语--> 10 <p><dfn id="def-internet">Internet</dfn>是一个全球互联网络系统，使用因特网协议套件（TCP/IP）为全球数十亿用户提供服务。</p> 11 <!--2.在描述列表中定义术语--> 12 <dl> 13 <!-- 定义“万维网”和“因特网”的参考定义 --> 14 <dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt> 15 <dd>万维网（WWW）是一个互连的超文本文档访问系统，它建立在<a href="#def-internet">Internet</a>之上。</dd> 16 </dl> 17 </body> 18 </html>
5）代码
使用code元素可以标记代码或文件名，如果文件中有“<”或“>”字符，应使用<和>表示。使用<code>显示一段代码，示例代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <pre> 9 <code> 10 #include<iostream> 11 int main() 12 { 13 System.out.println("Hello,world!"); 14 return 0; 15 } 16 </code> 17 </pre> 18 </body> 19 </html>
6）预定义格式
预定义文本可以保持文本固有的换行和空格。使用pre元素可以定义预定义文本。使用pre显示CSS样式代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 pre { 8 margin: 20px auto; 9 padding: 20px; 10 background-color: #aea8a8;/*根据自己需要修改背景底色颜色*/ 11 white-space: pre-wrap; 12 word-wrap: break-word; 13 letter-spacing: 0; 14 font: 14px/26px 'courier new'; 15 position: relative; 16 border-radius: 4px; 17 } 18 </style> 19 </head> 20 21 <body> 22 <pre> 23 pre { 24 margin: 20px auto; 25 padding: 20px; 26 background-color: #aea8a8;/*根据自己需要修改背景底色颜色*/ 27 white-space: pre-wrap; 28 word-wrap: break-word; 29 letter-spacing: 0; 30 font: 14px/26px 'courier new'; 31 position: relative; 32 border-radius: 4px; 33 } 34 </pre> 35 </body> 36 </html>
7）缩写词
使用abbr元素可以标记缩写词并解释其含义，还可以使用abbr的title属性提供缩写词的全称。示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 abbr[title] { border-bottom: 1px dotted #000; } 8 </style> 9 </head> 10 <body> 11 <p><abbr title=" HyperText Markup Language">HTML</abbr>是一门标识语言。</p> 12 </body> 13 </html>
8）编辑提示
HTML5使用ins（已添加的内容）和del（已删除的内容）这两个元素来标记内容标记的操作。ins和del可以单独使用，也可以搭配使用。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <ins> 11 <p>文本1</p> 12 </ins> 13 <del> 14 <ul> 15 <li><del>删除项目</del></li> 16 <li>列表项目</li> 17 <li><del>删除项目</del></li> 18 <li><ins>插入项目</ins></li> 19 </ul> 20 </del> 21 22 <p> <cite>因为懂得，所以慈悲</cite>。<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2018-8-1">这是张爱玲对胡兰成说的话</ins>。</p> 23 <p> <cite>笑，全世界便与你同笑；哭，你便独自哭</cite>。<del datetime="2018-8-8">出自冰心的《遥寄印度哲人泰戈尔》</del>，<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2018-8-1">出自张爱玲的小说《花凋》</ins> </p> 24 25 </body> 26 </html>
9）引用
使用cite元素可以标识引用或参考的对象，如图书、歌曲、电影、演唱会或音乐会、规范、报纸或法律文件等名称。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 </style> 8 </head> 9 10 <body> 11 <p>他正在看<cite>红楼梦</cite></p> 12 13 <p><cite>鲁迅</cite>说过：<q>地上本没有路，走的人多了就成了路.</q></p> 14 15 </body> 16 </html>
10）引述
HTML5支持以下两种引述第三方内容的方法。
a.blockquote：引述独立的内容，一般比较长，默认显示在新的一行。
b.q：引述短语，一般比较短，用于句子中。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <p>毛主席说过： 11 <blockquote>帝国主义都是纸老虎 ... </blockquote> 12 </p> 13 <p>世界自然基金会的目标是 : <q cite="http://www.wwf.org"> 建设一个与自然和谐相处的未来 </q>我们希望他们成功。</p> 14 15 </body> 16 </html>
11）换行显示
使用br元素可以实现文本换行显示，但是不要使用br模拟段落文本或者设计文本间距。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>北京市<br /> 9 海淀区<br /> 10 北京大学<br /> 11 32号楼</p> 12 13 </body> 14 </html>
12）修饰
使用span这一没有任何语义的行内元素来包裹短语、流动对象等内容，而div适合包含块级内容。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <style type="text/css"> 11 .red { color: red; } 12 </style> 13 <p><span class="red">HTML</span>是通向 WEB 技术世界的钥匙。</p> 14 15 </body> 16 </html>
13）非文本注解
HTML5中，u元素为一块文字添加明显的非文本注解。表现上：为文本添加下划线。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <p>When they <u class="spelling"> recieved</u> the package, they put it with <u class="spelling">there</u></p> 11 12 13 </body> 14 </html>
2.3 实用性标记
1）高亮显示
HTML5使用新的mark元素实现突出显示文本，用于引起浏览者的注意。mark类似于strong和em但和它们是有区别的，不能混用。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <article> 11 <h2><mark>HTML5</mark>中国:中国最大的<mark>HTML5</mark>中文门户 - Powered by Discuz!官网</h2> 12 <p><mark>HTML5</mark>中国,是中国最大的<mark>HTML5</mark>中文门户。为广大<mark>html5</mark>开发者提供<mark>html5</mark>教程、<mark>html5</mark>开发工具、<mark>html5</mark>网站示例、<mark>html5</mark>视频、js教程等多种<mark>html5</mark>在线学习资源。</p> 13 <p>www.html5cn.org/ - 百度快照 - 86%好评</p> 14 </article> 15 16 17 </body> 18 </html>
2）进度
progress是HTML5的新元素，他指示某项任务的完成进度，可以用它来表示一个进度条。progress元素支持3个属性：max、value和form。它们都是可选的，max>0，value介于0和max之间，form属性用于将progress元素和form元素联系起来，可以添加form属性并将其值设为该form元素的id。目前，Firefox8+、Opera11+、IE10+、Chrome6+、safari5.2+版本的浏览器都以不同形式对progress元素提供了支持。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <section> 11 <p>百分比进度: <progress id="progress" max="100"><span>0</span>%</progress></p> 12 <input type="button" onclick="click1()" value="显示进度"/> 13 </section> 14 <script> 15 function click1(){ 16 var progress = document.getElementById('progress'); 17 progress.getElementsByTagName('span')[0].textContent ="0"; 18 for(var i=0;i<=100;i++) 19 updateProgress(i); 20 } 21 function updateProgress(newValue){ 22 var progress = document.getElementById('progress'); 23 progress.value = newValue; 24 progress.getElementsByTagName('span')[0].textContent = newValue; 25 } 26 </script> 27 28 29 </body> 30 </html>
3）刻度
meter也是HTML5的新元素，它很像progress元素。可以用它来表示分数的值或已知范围的测量结果。类似于投票结果。如已售票数305张（共400张）、考试分数90分（满分100）等。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <meter value="3" min="0" max="10">十分之三</meter> 11 <meter value="0.6">60%</meter> 12 13 <br> 14 <p>项目的完成状态：<meter value="0.80">80%完成</meter></p> 15 <p>汽车损耗程度：<meter low="0.25" high="0.75" optimum="0" value="0.21">21%</meter></p> 16 <p>十公里竞走里程：<meter min="0" max="13.1" value="5.5" title="Miles">5.5</meter></p> 17 </body> 18 </html>
4）时间
HTML5新增time元素，用来标记时间、日期或时间段。time有一个可选的datetime属性，用来指定时间格式。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <time datetime="2017-11-13">2017年11月13日</time><br> 11 <time datetime="2017-11-13">11月13日</time><br> 12 <time datetime="2017-11-13">我的生日</time><br> 13 <time datetime="2017-11-13T20:00">我生日的晚上8点</time><br> 14 <time datetime="2017-11-13T20:00Z">我生日的晚上8点</time><br> 15 <time datetime="2017-11-13T20:00+09:00">我生日的晚上8点的美国时间</time><br> 16 17 </body> 18 </html>
5）联系信息
HTML5新增了address元素，用于定义于HTML页面或页面一部分有关的作者、相关人士或组织的俩你信息，通常位于页面底部。使用示例代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <!--address具体表示的是哪种信息，取决于该元素出现的位置--> 10 <address> 11 <a href="http://www.w3.org/">W3C</a> 12 <a href="http://www.whatwg.org/">WHATWG</a> 13 <a href="http://www.mhtml5.com/">HTML5研究小组</a> 14 </address><br> 15 16 <footer> 17 <section> 18 <address> 19 <a title="作者：MDN" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5">HTML5 - Web开发者指南</a> 20 </address> 21 <p> 发布于： 22 <time datetime="2017-6-1">2017年6月1日</time> 23 </p> 24 </section> 25 </footer> 26 27 </body> 28 </html>
6）显示方向
对于HTML中混合了从左到右书写的字符和从右到左书写的字符的情况，可能要用到bdi和bdo元素来确定显示方向，根据取值ltr（由左至右）或rtl(由右至左)，指定希望呈现的显示方向。bdo适用于段落里的短语或句子，不能用它包含多个段落。bdi元素是HTML新加的元素，不需要包含dir属性，因为它默认设为自动判断。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <ul> 11 <li><bdi>jcranmer</bdi></li> 12 <li><bdi>hober</bdi></li> 13 <li><bdi> نايإ </bdi></li> 14 </ul> 15 16 <p>本站地址为：https：<wbr>//</wbr>www.old_site.com/,新地址为：https:<wbr>//</wbr>www.new_site.com/。</p> 17 18 </body> 19 </html>
7）换行断点
HTML5为br引入了一个相近的元素wbr。wbr代表“一个可换行处”，不会强制换行，更加兼顾文本在有限的空间内的可读性。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 <p>本站旧地址为：https:<wbr>//<wbr>www.old_site.com/，新地址为：https:<wbr>//<wbr>www.new_site.com/。</p> 11 12 </body> 13 </html>
8）标注
旁注标记是东亚语言（如中文和日文）中一种惯用的注解字符，用于表示生僻字的发音，位于它们标注的字符的上方或右方。简称为旁注（ruby或rubi）。ruby元素及它们的子元素rt和rp在HTML5中用来为内容添加旁注标记。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 ruby { font-size: 40px; } 8 </style> 9 </head> 10 11 <body> 12 <ruby> 13 北 <rp>(</rp><rt>ㄅㄟˇ</rt><rp>)</rp> 14 京 <rp>(</rp><rt>ㄐㄧㄥ</rt><rp>)</rp> 15 </ruby> 16 17 <br> 18 19 <ruby> 20 少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt> 21 </ruby>， 22 <ruby> 23 乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt> 24 </ruby>。 25 </body> 26 </html>
总结：以上内容是个人根据一些HTML5教程总结的，关于HTML5文本这一部分内容还有很多，其中遗漏的一些内容可以自行到W3C官网去看HTML5对应的这一部分内容。