html5新增的标签有哪些

HTML5新增的标签：canvas、audio、video、source、embed、track、datalist、keygen、output、article、aside、bdi、nav、mark、rt、rp、ruby、time、wbr等。canvas标签可定义图形、audio标签可定义音频内容，video可定义视频，source可定义多媒体资源，embed可定义嵌入的内容等。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

HTML5是HTML的最新版本，由W3C在2014年完成标准定制。增强的浏览器本机功能，减少了浏览器插件（如：flash）应用程序，提高了用户体验满意度，使开发更加方便。HTML1.0到5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。

html5的新增标签

HTML5新增了一些结构性标记、多媒体标记和表单标记。下面给大家介绍一下。

5ba626b379994d53f7acf72a64f9b697 新元素

标签	描述
5ba626b379994d53f7acf72a64f9b697	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签	描述
b97864c2e0ef2353a16c4d64c7734e92	定义音频内容
39000f942b2545a5315c57fa3276f220	定义视频（video 或者 movie）
e02da388656c3265154666b7c71a8ddc	定义多媒体资源 39000f942b2545a5315c57fa3276f220 和 b97864c2e0ef2353a16c4d64c7734e92
d8e2720730be5ddc9c2a3782839e8eb6	定义嵌入的内容，比如插件。
9bf7cbf2c39baa37076a22499de2f6ed	为诸如 39000f942b2545a5315c57fa3276f220 和 b97864c2e0ef2353a16c4d64c7734e92 元素之类的媒介规定外部文本轨道。

新表单元素

标签	描述
fc86e7b705049fc9d4fccc89a2e80ee3	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
aa983b9eb8086376f1f6481364a02e5a	规定用于表单的密钥对生成器字段。
be6d67dae90cc1ad6469079e163d0939	定义不同类型的输出，比如脚本的输出。

新的语义和结构元素

标签	描述
23c3de37f2f9ebcb477c4a90aac6fffd	定义页面独立的内容区域。
15221ee8cba27fc1d7a26c47a001eb9b	定义页面的侧边栏内容。
af4e6c3c591431c4583becd75d1c3582	允许您设置一段文本，使其脱离其父元素的文本方向设置。
e2b9f03cad787b9644e1f51fd23b7dac	定义命令按钮，比如单选按钮、复选框或按钮
a5e9d42b316b6d06c62de0deffc36939	用于描述文档或文档某个部分的细节
a38fd2622755924ad24c0fc5f0b4d412	定义对话框，比如提示框
631fb227578dfffda61e1fa4d04b7d25	标签包含 details 元素的标题
24203f2f45e6606542ba09fd2181843a	规定独立的流内容（图像、图表、照片、代码等等）。
614eb9dc63b3fb809437a716aa228d24	定义 24203f2f45e6606542ba09fd2181843a 元素的标题
c37f8231a37e88427e62669260f0074d	定义 section 或 document 的页脚。
1aa9e5d373740b65a0cc8f0a02150c53	定义了文档的头部区域
f920514e6447cf1d171079d1371f007f	定义带有记号的文本。
49c6123c49c6be380cb91db06cd3bfa9	定义度量衡。仅用于已知最大和最小值的度量。
c787b9a589a3ece771e842a6176cf8e9	定义导航链接的部分。
6ecb87e5318a36c03c59e25d55f43372	定义任何类型的任务的进度。
ec41f2147470148e85ad0337a362103e	定义 ruby 注释（中文注音或字符）。
7240f116d85a7ee375466871bc33670a	定义字符（中文注音或字符）的解释或发音。
515718f19dfe6612658be14be18aa0ec	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
2f8332c8dcfd5c7dec030a070bf652c3	定义文档中的节（section、区段）。
46dd80ba616c57a652514755c74c4211	定义日期或时间。
37fcc81822f151c26d66e5caf9953670	规定在文本中的何处适合添加换行符。

html5标签的使用示例

（1）定义导航链接c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f

它也是有意义的标签，并不是在某处加上这个标签就有了导航的样式了，这都是有意义的p而已，在头部header中加入菜单标签c787b9a589a3ece771e842a6176cf8e9，nav标签可以和ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6标签合用

html代码：

<header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

css代码：

/*定义nav的高和颜色*/ 
nav{
    height:30px;
    background-color:#F33;
    margin-top:100px;}
/*正常设置li的样式*/
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
}

 这样就可以实现之前只用p进行的菜单布局了

 （2）定义文章标签23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1

可以使用文章块标签进行写文章，这就使用这个标签进行写文章在section部分，可以和4a249f0d628e2318394fd9b75b4636b1e388a4556c0f65e1904146cc1a846bee合用

html代码：

<article><!--文章块p-->
　　<h2>文章标题</h2><!--标题-->
　　<p>文章内容文章内容文章内容文章内容文章内容文章内容
　　<br>
　　文章内容文章内容文章内容文章内容文章内容文章内容<br>
　　文章内容文章内容文章内容</p>
</article>　

css样式：

article{
	background-color:#F33;
	width:500px;
	text-align:center;  /*水平居中*/  
	margin:0px auto;
}

这样就可以写一篇文章了

（3）定义媒介内容的分组，以及它们的标题24203f2f45e6606542ba09fd2181843a

A。这个标签可以和它的配套标签联合使用614eb9dc63b3fb809437a716aa228d24，不过614eb9dc63b3fb809437a716aa228d24c03477f35900935b9be6780eb373f61c中间写标题

<figure>
    <figcaption>标题</figcaption><!--配套-->
    <p>标题内容</p>
</figure>

B。还可以和73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742联合使用，其中73de882deff7a050a357292d0a1fca94c72c1af5e0e7f90179c047c5ef85885e是写标题，而67bc4f89d416b0b8236eaa5f43dee742写内容，显示的效果和配套使用的效果也有差异

<figure>
    <dt>标题1</dt>
    <dd>标题内容</dd>
</figure>

（4）定义对话框或窗口a38fd2622755924ad24c0fc5f0b4d412

在这个标签中也是可以使用dd和dt标签，对话框中的标题和内容，对话框有个属性是open，这个标签的兼容性不是很好

<dialog open>
          <dt>1问题</dt>
          <dd>1答案</dd>
          <dt>2问题</dt>
          <dd>2答案</dd>
</dialog>

　

（5）定义命令的列表或菜单5c0e96d12fc7501cef2ae2efde646ee0

A。这个标签可以和li合用

<menu>
         <li>定义列表</li>
         <li>定义列表</li>
         <li>定义列表</li>
</menu>

B。可以给右键单击中添加自己的内容（只有火狐浏览器可以兼容）

联合（定义用户可以从弹出菜单调用的命令/菜单项目）9b8d7b889acba92c978f783c55ba01dc标签使用

<menu type="context" id="cai">
            <!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码--> 
            <menuitem label="菜单一" onclick="alert(&#39;这是菜单一&#39;)" icon="右键单击显示的图片"></menuitem>
                   
</menu>

<span contextmenu="cai">单击我试试</span>

右键单击后出现想要的菜单项

单击菜单项，弹出内容

（6）标题组d8eccd9ed644b68a6460a2bb84548c82

里面可以写一些标题的结合684271ed9684bde649abda8831d4d355合用

<hgroup><!--标题组-->
        <h3>标题</h3>
        <h3>标题1</h3>
        <h3>标题2</h3>
        <h3>标题3</h3>
</hgroup>

（7）定义小号文本d015d241ae6d34c34210679b5204fe85

这个标签和其他的加粗什么的标签其实是差不多的

<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>

（8）定义元素的细节a5e9d42b316b6d06c62de0deffc36939

里面的内容可以配合标题和内容标签来使用

<details>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
</details>　　

点击详细信息就可以看到标题和内容了

（9）定义 ruby 注释ec41f2147470148e85ad0337a362103e

碰到不认识的字了可以使用这个进行注释拼音，但是有的兼容性不是很好，到时候可以进行修改

<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->

（10）定义预定义范围内的度量49c6123c49c6be380cb91db06cd3bfa9

有几个属性值，min="" max="" value="" low="" high=""，其中low和high是范围，当value范围超了话就会显示不同的效果

<meter min="0" max="10" value="4" low="2" high="7">

value值超出了范围后

<meter min="0" max="10" value="8" low="2" high="7">

（11）进度条的标签6ecb87e5318a36c03c59e25d55f43372

<progress id="jindu" max="100" value="0"></progress>进度条

最大值就是进度条的长度就行，value值就是显示的进度，用它可以进行动态的进度条

<progress id="jindu" max="100" value="0"></progress>进度条
<script>
    var pro = document.getElementById("jindu");
    setInterval(function(){ pro.value+=1;},1000);    //间隔1秒它的值加1
</script>

这样进度条就可以完成了，是不是比只用js写的好多了，不同的浏览器表现形式还不一样

更多编程相关知识，请访问：编程学习！！

以上是html5新增的标签有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！