HTML5一些元素的整理

address元素：

定义和用法

<address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。

如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <header>

     <h1>HTML5</h1>

 </header>

 <footer>

     <address>

         <a href="/" title="晨落梦公子">晨落梦公子</a>

     </address>

     时间：<time datetime="2016-01-21">2016年1月21日</time>

 </footer>

 </body>

 </html>

address

生成的为：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

details元素：

定义和用法

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

内含有：summary

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <details>

 <!--<details：用于展开和收缩的。貌似不能用ie而打开-->

     <summary>

     <!--<summary：展开的标题-->

         学习需要的动力

     </summary>

     <p>

         <!--以下是折叠的内容-->

         想一想未来吧

     </p>

 </details>

 </body>

 </html>

details

生成的为：

里面的倒三角是展开项

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

figure元素：

定义和用法

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

内容有：figcaption，为图片设置标题。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <figure>

 <!--<figure>：插入图片-->

     <img src="1.jpg" title="死神">

     <figcaption>死神</figcaption>

     <!--<figcaption：为图片设置标题-->

 </figure>

 </body>

 </html>

figure

生成的为：

这里不再赘述，just生成个图片。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

mark元素：

定义和用法

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

即是特殊字高亮。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <header>

     <h1>以下是<mark>HTML5</mark>的搜索结果</h1>

 <section>

     <nav>

         <ul>

             <li>

                 <h2><a href="/"><mark>HTML5 </mark>百度全科</a></h2>

             </li>

         </ul>

     </nav>

     <figure>

         <img src="4.jpg" title="HTML5">

         <aside>

             <p>

                 万维网的核心语言、标准通用标记语言下的一个应用超文本

                 标记语言（<mark>HTML</mark>）的第五次重大修改（这是一

                 项推荐标准、外语原文：W3C Recommendation、见本处参考资

                 料原文内容：）。

             </p>

         </aside>

     </figure>

 </section>

     <footer>

         <a href="\">发展历程</a>

         <a href="\">新元素</a>

         <a href="\">技术要点</a>

     </footer>

 </header>

 </body>

 </html>

mark

生成的为：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

meter元素：

定义和用法

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

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

生成进度条

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <p>硬盘使用情况：<meter value="30" max="100" min="0">30/100</meter>GB </p>

 <!--<meter：生成进度表；value:当前进度；max总进度；min:最低进度-->

 <p>硬盘使用情况：<meter value="30" max="100" min="0" low="40" high="80" optimum="23"></meter>GB </p>

 <p>硬盘使用情况：<meter value="30" max="100" min="0" low="40" high="80" optimum="42"></meter>GB </p>

 <p>硬盘使用情况：<meter value="30" max="100" min="0" low="40" high="80" optimum="83"></meter>GB </p>

 <!--optium:低于low显示绿色。高于low但是低于high显示黄色。高于high显示红色-->

 </body>

 </html>

meter

生成的为：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ol元素：

定义和用法

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

注：IE不支持。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <ol start="1" type="1" reversed="reversed">

 <!--<ol：输出序列，

 start：设置开始的序号，

 type：设置类型，如字母型、阿拉伯数字型等，

 reversed：倒序排列-->

     <li><a href="address.html">有序列表A</a> </li>

     <li><a href="detailsDemo.html">有序列表B</a> </li>

     <li><a href="figureDemo.html">有序列表C</a> </li>

 </ol>

 </body>

 </html>

生成的为：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

progess元素：

定义和用法

<progress> 标签标示任务的进度（进程）。

提示和注释

提示：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。

注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替。

注：Internet Explorer 9 以及更早的版本不支持 <progress> 标签。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <p>

     进度：

 </p>

 <progress max="100" value="30"></progress>

 <!--<progress：生成进度条-->

 </body>

 </html>

progess

生成的为：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~