html5新元素

1.section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<section cite="http://www.baidu.com">
我是<section></section>
</section>

2.progress相当于一个进度条,如果不给max和value,进度条会变成一个来回运动的进度条
<progress max="100" value="50"></progress>

3.nav定义导航链接的部分。如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

4.meter标签定义已知范围或分数值内的标量测量。如果标记进度条,请使用progress标签。
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>

5.time定义元素的日期和时间。(不知道有什么用,去掉页面没有任何变化,可能是对盲人比较优化吧)
我们在每天早上 <time>9:00</time> 开始营业。
我在 <time datetime="2008-02-14">情人节</time> 有个约会。

6.command元素表示用户能够调用的命令。但是目前只有ie9支持,暂时不用管这个

7.datalist标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。(这个不错,而且有模糊搜索,提示)
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

8.details标签用于描述文档或文档某个部分的细节。summary显示出详细信息。
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

9.embed标签定义嵌入的内容,比如插件,适用于非ie浏览器,ie使用object

10.figure与figcaption用作文档中插图的图像,带有一个标题
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

11.hgroup标签被用来对标题元素进行分组
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>

<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

12.mark 标签定义带有记号的文本。
<p>Do not forget to buy <mark>milk</mark> today.</p>

13.output 标签定义不同类型的输出,比如脚本的输出。output标签也可以放到form外面,但需要指定form id
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

14.rp标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
rt标签定义字符(中文注音或字符)的解释或发音。
ruby标签定义 ruby 注释(中文注音或字符)。
<ruby>
汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

15.source标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。(就是可能多个浏览器支持的视频音频不一致)
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

16.wbr规定在文本中的何处适合添加换行符。
如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用wbr元素来添加 Word Break Opportunity(单词换行时机)。
(本来应该xmlhttprequest连着换行的,加了这个,就会在xml后就换行了)
如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。

contenteditable可编辑
<div contenteditable="true">
contenteditable
</div>

contextmenu属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。
<div contextmenu="mymenu">
<menu type="context" id="mymenu">
<menuitem label="Refresh"></menuitem>
<menuitem label="Twitter"></menuitem>
</menu>
</div>

draggable可拖拽
<div draggable="true">
draggable
</div>

draggable属性规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。
<div dropzone="copy">
dropzone
</div>

spellcheck 属性规定是否对元素内容进行拼写检查。
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

hidden 属性是布尔属性。浏览器不应显示已规定 hidden 属性的元素。(貌似可以替代样式,更方便,只是ie不支持)

img (srcset sizes) 在不同屏幕宽度显示不同宽度的图片
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
alt="Clock"
srcset="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3987907653,720009510&fm=26&gp=0.jpg 200w,
https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2174909441,2495215020&fm=26&gp=0.jpg 400w"
sizes="(min- 600px) 100px, 50vw">

picture同样可以通过不同设备来匹配不同的图像资源
<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min- 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

原文地址:https://www.cnblogs.com/wangxi01/p/11590203.html