html5新增标签
1、定义导航链接<nav></nav>
它也是有意义的标签，并不是在某处加上这个标签就有了导航的样式了，这都是有意义的p而已，在头部header中加入菜单标签<nav>，nav标签可以和<ul><li>标签合用。【推荐：html在线手册】
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、定义文章标签<article></article>
可以使用文章块标签进行写文章，这就使用这个标签进行写文章在section部分，可以和<h1><p>合用
html代码：
<article><!--文章块p--> <h2>文章标题</h2><!--标题--> <p>文章内容文章内容文章内容文章内容文章内容文章内容 <br> 文章内容文章内容文章内容文章内容文章内容文章内容<br> 文章内容文章内容文章内容</p> </article>
css样式：
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
}这样就可以写一篇文章了
3、定义媒介内容的分组，以及它们的标题<figure>
A。这个标签可以和它的配套标签联合使用<figcaption>，不过<figcaption></figcaption>中间写标题
<figure>
<figcaption>标题</figcaption><!--配套-->
<p>标题内容</p>
</figure>
B。还可以和<dt><dd>联合使用，其中<dt></dt>是写标题，而<dd>写内容，显示的效果和配套使用的效果也有差异
<figure>
<dt>标题1</dt>
<dd>标题内容</dd>
</figure>4、定义对话框或窗口<dialog>
在这个标签中也是可以使用dd和dt标签，对话框中的标题和内容，对话框有个属性是open，这个标签的兼容性不是很好
<dialog open>
<dt>1问题</dt>
<dd>1答案</dd>
<dt>2问题</dt>
<dd>2答案</dd>
</dialog> 
5、定义命令的列表或菜单<menu>
A、这个标签可以和li合用
<menu>
<li>定义列表</li>
<li>定义列表</li>
<li>定义列表</li>
</menu>
B、可以给右键单击中添加自己的内容（只有火狐浏览器可以兼容）
联合（定义用户可以从弹出菜单调用的命令/菜单项目）<menuitem>标签使用
<menu type="context" id="cai">
<!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem>
</menu><span contextmenu="cai">单击我试试</span>
右键单击后出现想要的菜单项
单击菜单项，弹出内容
6、标题组<hgroup>
里面可以写一些标题的结合<h3>合用
<hgroup><!--标题组-->
<h3>标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
</hgroup>
7、定义小号文本<small>
这个标签和其他的加粗什么的标签其实是差不多的
<small>法律条文</small> <small>联系我们</small> <small>客户意见</small>
8、定义元素的细节<details>
里面的内容可以配合标题和内容标签来使用
<details>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
</details> 点击详细信息就可以看到标题和内容了
9、定义 ruby 注释<ruby>
碰到不认识的字了可以使用这个进行注释拼音，但是有的兼容性不是很好，到时候可以进行修改
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby> <!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->
10、定义预定义范围内的度量<meter>
有几个属性值，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、进度条的标签<progress>
<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写的好多了，不同的浏览器表现形式还不一样
更多web前端知识，请查阅 HTML中文网 ！！
以上就是html5新增标签有哪些？的详细内容，更多请关注0133技术站其它相关文章！
