HTML5一些元素的整理
address元素：
定义和用法
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <header> 9 <h1>HTML5</h1> 10 </header> 11 <footer> 12 <address> 13 <a href="/" title="晨落梦公子">晨落梦公子</a> 14 </address> 15 时间：<time datetime="2016-01-21">2016年1月21日</time> 16 </footer> 17 </body> 18 </html>
生成的为：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
details元素：
定义和用法
<details> 标签用于描述文档或文档某个部分的细节。
内含有：summary
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <details> 9 <!--<details：用于展开和收缩的。貌似不能用ie而打开--> 10 <summary> 11 <!--<summary：展开的标题--> 12 学习需要的动力 13 </summary> 14 <p> 15 <!--以下是折叠的内容--> 16 想一想未来吧 17 </p> 18 </details> 19 </body> 20 </html>
生成的为：
里面的倒三角是展开项
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
figure元素：
定义和用法
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
内容有：figcaption，为图片设置标题。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <figure> 9 <!--<figure>：插入图片--> 10 <img src="1.jpg" title="死神"> 11 <figcaption>死神</figcaption> 12 <!--<figcaption：为图片设置标题--> 13 </figure> 14 </body> 15 </html>
生成的为：
这里不再赘述，just生成个图片。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
mark元素：
定义和用法
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
即是特殊字高亮。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <header> 9 <h1>以下是<mark>HTML5</mark>的搜索结果</h1> 10 <section> 11 <nav> 12 <ul> 13 <li> 14 <h2><a href="/"><mark>HTML5 </mark>百度全科</a></h2> 15 </li> 16 </ul> 17 </nav> 18 <figure> 19 <img src="4.jpg" title="HTML5"> 20 <aside> 21 <p> 22 万维网的核心语言、标准通用标记语言下的一个应用超文本 23 标记语言（<mark>HTML</mark>）的第五次重大修改（这是一 24 项推荐标准、外语原文：W3C Recommendation、见本处参考资 25 料原文内容：）。 26 </p> 27 </aside> 28 </figure> 29 </section> 30 <footer> 31 <a href="\">发展历程</a> 32 <a href="\">新元素</a> 33 <a href="\">技术要点</a> 34 </footer> 35 </header> 36 </body> 37 </html>
生成的为：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
meter元素：
定义和用法
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
生成进度条
注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>硬盘使用情况：<meter value="30" max="100" min="0">30/100</meter>GB </p> 9 <!--<meter：生成进度表；value:当前进度；max总进度；min:最低进度--> 10 <p>硬盘使用情况：<meter value="30" max="100" min="0" low="40" high="80" optimum="23"></meter>GB </p> 11 <p>硬盘使用情况：<meter value="30" max="100" min="0" low="40" high="80" optimum="42"></meter>GB </p> 12 <p>硬盘使用情况：<meter value="30" max="100" min="0" low="40" high="80" optimum="83"></meter>GB </p> 13 <!--optium:低于low显示绿色。高于low但是低于high显示黄色。高于high显示红色--> 14 </body> 15 </html>
生成的为：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ol元素：
定义和用法
<ol> 标签定义有序列表。
注：IE不支持。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ol start="1" type="1" reversed="reversed"> 9 <!--<ol：输出序列， 10 start：设置开始的序号， 11 type：设置类型，如字母型、阿拉伯数字型等， 12 reversed：倒序排列--> 13 <li><a href="address.html">有序列表A</a> </li> 14 <li><a href="detailsDemo.html">有序列表B</a> </li> 15 <li><a href="figureDemo.html">有序列表C</a> </li> 16 </ol> 17 </body> 18 </html>
生成的为：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
progess元素：
定义和用法
<progress> 标签标示任务的进度（进程）。
提示和注释
提示：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。
注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替。
注：Internet Explorer 9 以及更早的版本不支持 <progress> 标签。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p> 9 进度： 10 </p> 11 <progress max="100" value="30"></progress> 12 <!--<progress：生成进度条--> 13 </body> 14 </html>
生成的为：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
