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>
生成的为:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~