html5新元素

今天药忘吃喽~ 2023-08-17 15:55 175阅读 0赞

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 οninput="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-width: 600px) 100px, 50vw">

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

转载于:https://www.cnblogs.com/wangxi01/p/11590203.html