HTML5 增强的页面元素

一、HTML5 改良的 input 元素的种类

1.<input type="number" id="num1">

var n1 = document.getElementById("num1").valueAsNumber;

七、HTML5 增强的页面元素

1.figure、figcaption

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 <p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>
 5 <figure>
 6   <figcaption>黄浦江上的的卢浦大桥</figcaption>
 7   <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
 8 </figure>
 9 </body>
10 </html>

2.details、summary

<details> 标签用于描述文档或文档某个部分的细节。

属性open 定义 details 是否可见。

与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

</body>
</html>

<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

</body>
</html>

3.mark,着重，高亮显示

1 <!DOCTYPE HTML>
2 <html>
3 <body>
4 
5 <p>Do not forget to buy <mark>milk</mark> today.</p>
6 
7 </body>
8 </html>

4.progress标签标示任务的进度（进程）

5.meter

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <p>显示度量值：</p>
 6 <meter value="3" min="0" max="10">3/10</meter><br>
 7 <meter value="0.6">60%</meter>
 8 
 9 <p><b>注释：</b>Internet Explorer 不支持 meter 标签。</p>
10 
11 </body>
12 </html>

6.ol

<ol> 标签定义有序列表。

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <ol>
 5   <li>咖啡</li>
 6   <li>牛奶</li>
 7   <li>茶</li>
 8 </ol>
 9 <ol start="50" reversed>
10   <li>咖啡</li>
11   <li>牛奶</li>
12   <li>茶</li>
13 </ol>
14 </body>
15 </html>

7.dl

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

 1 <body>
 2 <h2>一个定义列表：</h2>
 3 <dl>
 4    <dt>计算机</dt>
 5    <dd>用来计算的仪器 ... ...</dd>
 6    <dt>显示器</dt>
 7    <dd>以视觉方式显示信息的装置 ... ...</dd>
 8 </dl>
 9 </body>
10 </html>

8.cite

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

按照惯例，引用的文本将以斜体显示。

用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。

<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

1 <p>我最喜欢的运动是<cite>篮球</cite></p>

9.small

标签呈现小号字体效果。

标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 标签将不起任何作用。

与 <big> 标签类似， 标签也可以嵌套，从而连续地把文字缩小。每个 标签都把文本的字体变小一号，直到达到下限的一号字。