html5新增了什么元素標簽

這篇文章主要介紹html5新增了什么元素標簽，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

html5新增的元素標簽有：“<article>”、“<aside>”、“<audio>”、“<bdi>”、“<canvas>”、“<dialog>”、“<mark>”、“<meter>”、“<nav>”、“<time>”、“<rt>”等。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

html5新增的元素標簽

（1）定義導航鏈接<nav></nav>

它也是有意義的標簽，并不是在某處加上這個標簽就有了導航的樣式了，這都是有意義的p而已，在頭部header中加入菜單標簽<nav>，nav標簽可以和<ul><li>標簽合用

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部分，可以和<h2><p>合用

html代碼：

<article><!--文章塊p-->
　　<h3>文章標題</h3><!--標題-->
　　<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>

里面可以寫一些標題的結合<h4>合用

<hgroup><!--標題組-->
        <h4>標題</h4>
        <h4>標題1</h4>
        <h4>標題2</h4>
        <h4>標題3</h4>
</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寫的好多了，不同的瀏覽器表現形式還不一樣

以上是“html5新增了什么元素標簽”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！