文本标签
- 熟悉HTML4定义的格式文本标签
- 掌握HTML5新增的文本标签
1.标题文本
<h1>~<h6>标签可定义标题，其中<h1>定义最大的标题，<h6>定义最小的标题。
按级别分别：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="wrapper"> 9 <h1>网页标题</h1> 10 <h2>网页副标题</h2> 11 <div id="box1"> 12 <h3>栏目标题</h3> 13 <p>正文</p> 14 </div> 15 <div id="bo2"> 16 <h3>栏目标题</h3> 17 <div id="sub_box1"> 18 <h4>子栏目标题</h4> 19 <p>正文</p> 20 </div> 21 <div id="sub_box2"> 22 <h4>子栏目标题</h4> 23 <p>正文</p> 24 </div> 25 </div> 26 </div> 27 </body> 28 </html>
2.段落文本
<p>标签定义段落文本
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="article"> 9 <h1>即将展示一个段落</h1> 10 <p>我是一个段落</p> 11 </div> 12 </body> 13 </html>
3. 引用文本
<q>标签定义短引用，浏览器经常在引用的内容周围添加引号
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="article"> 9 <h1>即将展示一个引用文本</h1> 10 <q>我是一个引用文本</q> 11 </div> 12 </body> 13 </html>
4.强调文本
<em>标签用于强调文本，其包含的文字默认显示为斜体
<strong>标签也用于强调文本，但它强调的程度更强一些，其包含文字通常以粗体进行显示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>没有<em>最好</em>只有<strong>更好</strong>!</p> 9 </body> 10 </html>
5.格式文本
文本格式有多种多样，如：粗体、大号、小号、下划线，预定义，高亮等
<b>定义粗体文本，与<strong>标签的默认效果相似。
<i>：定义斜体文本。与<em>标签的默认效果相似。
<big>定义大号字体。
<small>定义小号字体
<sup>定义上标文本
<sub>定义下标文本
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>解一元二次方程</h1> 9 <p>一元二次方程求解有四种方法：</p> 10 <ul> 11 <li>直接开平方法 </li> 12 <li>配方法 </li> 13 <li>公式法 </li> 14 <li>分解因式法</li> 15 </ul> 16 <p>例如，针对下面这个一元二次方程：</p> 17 <p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p> 18 <p>我们使用<big><b>分解因式法</b></big>来演示解题思路如下：</p> 19 <p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p> 20 <p><small>得：</small><br /> 21 <i>x</i><sub>1</sub>=1<br /> 22 <i>x</i><sub>2</sub>=4</p> 23 </body> 24 </html>
6.输出文本
<code>：标识代码字体，即显示源代码
<pre>：标识预定义格式的源代码，即保留源代码显示中的空格大小
<tt>：标识打印机字体
<kbd>：标识键盘字体
<dfn>：表示定义的术语
<var>：表示变量字体
<samp>：表示代码范例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="output"> 9 <p>表示预定义格式的源代码：</p> 10 <pre> 11 var count = 0; 12 while (count < 10) { 13 document.write(count + "<br>"); 14 count++; 15 } 16 </pre> 17 <p>表示代码字体：<code>Specifies a code sample</code></p> 18 <p>表示打印机字体：<tt>Renders text in a fixed-width font</tt></p> 19 <p>表示键盘字体：<kbd>Renders text in a fixed-width font</kbd></p> 20 <p>表示定义的术语：<dfn>Indicates the defining instance of a term</dfn></p> 21 <p>表示变量字体：<var>Defines a programming variable. Typically renders in an italic font style</var></p> 22 <p>表示代码范例：<samp>Specifies a code sample</samp></p> 23 </div> 24 </body> 25 </html>
7.缩写文本
<abbr>标签可以定义简称或缩写，通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。
8.插入和删除文本
<ins>标签定义插入到文档中的文本，
<del>标签定义文档中已被删除的文本。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>我是一个程序猿 <ins>CSS从零到入门</ins></p> 9 <p>我是一个程序猿 <del>我要搬砖</del></p> 10 </body> 11 </html>
9.文本方向
<bdo>标签可以改变文本流的方向，它包含一个属性：dir，取值【ltr(从左到右)和rtl(从右到左)】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>我是从右到左</p> 9 <bdo dir="rtl">ABCDEFG</bdo> 10 11 <p>我是从左到右</p> 12 <bdo dir="ltr">ABCDEFG</bdo> 13 </body> 14 </html>
以下是HTML5新增文本标签
10.标记文本
<mark>标签定义带有记号的文本，表示页面中需要突出显示或高亮显示的信息。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h2>静夜思 </h2> 9 <h3>李白</h3> 10 <p>床前明月<mark>光</mark>，疑是地上<mark>霜</mark>。</p> 11 <p>举头望明月，低头思故<mark>乡</mark>。</p> 12 </body> 13 </html>
11.进度信息
<progress>标签可以标识任务的进度（进程）
progress元素包含两个新增属性
- max：定义任务一共需要多少工作量。工作量的单位是随意的，不用指定
- value：定义已完成多任务
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <section> 9 <p>百分比进度：<progress id="progress" max="100"></progress> <span>0</span>%</p> 10 <input type="button" onclick="click1()" value="显示进度" /> 11 </section> 12 <script> 13 function click1(){ 14 var progress = document.getElementById('progress'); 15 document.getElementsByTagName('span')[0].textContent = "0"; 16 for(var i = 0;i<=90;i++) 17 updateProgress(i); 18 } 19 function updateProgress(newValue){ 20 var progress = document.getElementById('progress'); 21 progress.value=newValue; 22 document.getElementsByTagName('span')[0].textContent = newValue; 23 } 24 </script> 25 </body> 26 </html>
12.刻度信息
<meter>标签定义已知范围或分数值内的标量、进度。
meter元素包含7个属性。
- value：在元素中特别标示的实际值。该属性值默认为0，可以为该属性指定一个浮点小数值。
- min：设置规定范围时，允许使用的最小值，默认为0，设定的值不能小于0.
- max：设置规定范围时，允许使用的最大值。如果设定时，该属性值小于min属性的值，那么把min属性的值视为最大值。max属性的默认值为1。
- low：设置范围的下限值，必须小于或等于high属性的值。同样，如果low属性值小于min属性的值，那么把min属性的值视为low属性的值。
- high：设置范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样，如果该属性值大于max属性的值，那么把max属性的视为high属性的值。
- optimum：设置最佳值，该属性值必须在min属性值与max属性值之间，可与大于high属性值。
- form：设置meter元素所属的一个或多个表单。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <meter value="3" min="0" max="10">十分之三</meter> 9 <meter value="0.6">60%</meter> 10 </body> 11 </html>
13.时间信息
<time>标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的
tiem标签包含两个属性
- datetime：定义日期和时间，datetime属性中日期与时间之间要使用“T”文字间隔
- pubdate：定义<time>标签中的日期和时间是文档或<article>标签的发布日期
14.联系文本
<address>标签定义文档或文章的作者、拥有者的联系信息。
注意：
如果<address>标签位于<body>标签内，它表示文档联系信息
如果<address>标签位于<article>标签内，它表示文章的联系信息
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <address> 9 <a href="http://www.w3.org/">W3C</a> 10 <a href="http://www.whatwg.org/">WHATWG</a> 11 <a href="http://www.mhtml5.com/">HTML5研究小组</a> 12 </address> 13 14 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 </body> 27 </html>
15.隔离文本
<bdi>标签允许设置一段文本，使其脱离其父元素的文本方向设置。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul> 9 <li>用户<bdi>admin</bdi>: 70 分</li> 10 <li>用户<bdi>lisi</bdi>: 80 分</li> 11 <li>用户<bdi>zhangsan</bdi> : 90 分</li> 12 </ul> 13 </body> 14 </html>
16. 换行断点
<wbr>标签定义在文本中的合出适合添加换行符，如果单词太长。或者担心浏览器会在错误的位置换行，那么即可以使用<wbr>标签来添加单次换行点，避免浏览器随意换行
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>本站旧地址为：https:<wbr>//<wbr>www.old_site.com/，新地址为：https:<wbr>//<wbr>www.new_site.com/。</p> 9 </body> 10 </html>
17.文本注释
<ruby>标签可以定义ruby注释，即中文注音或字符。ruby需要与<rt>标签或<rp>标签一同使用。
其中<rt>标签和<rp>标签必须位于<ruby>标签。
<rt>标签定义字符的解释或发音。
<rp>标签定义当浏览器不支持rub元素的显示内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ruby>少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt></ruby>， 9 <ruby>乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>shuāi</rt></ruby>。 10 </body> 11 </html>
