简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > 前端問答 > 主體

html5新增的標籤有哪些

青灯夜游
發布： 2022-11-23 18:55:21
原創
9184 人瀏覽過

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可定義嵌入的內容等。

html5新增的標籤有哪些

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

HTML5是HTML的最新版本，由W3C在2014年完成標準自訂。增強的瀏覽器本機功能，減少了瀏覽器插件（如：flash）應用程序，提高了用戶體驗滿意度，使開發更加方便。 HTML1.0到5.0經歷了巨大的變化，從單一的文字顯示功能到圖文並茂的多媒體顯示功能，許多特性經過多年的完善，已經發展成為一種非常重要的標記語言。

html5的新增標籤

HTML5新增了一些結構性標記、多媒體標記和表單標記。下面來跟大家介紹一下。

新元素

##描述
#標籤

標籤定義圖形，例如圖表和其他圖像。此標籤基於JavaScript 的繪圖API新多媒體元素標籤描述定義音訊內容

定義多媒體資源#定義嵌入的內容，例如外掛程式。 為諸如 新表單元素
####標籤#####描述說明### ###############定義選項清單。請與 input 元素搭配使用該元素，來定義 input 可能的值。 ##################規定用於表單的金鑰對產生器欄位。 ##################定義不同類型的輸出，例如腳本的輸出。 ############

新的語意與結構元素

#標籤 描述
定義頁面獨立的內容區域。
定義頁面的側邊欄內容。
允許您設定一段文本，使其脫離其父元素的文本方向設定。
定義指令按鈕，例如單選按鈕、複選框或按鈕
< details> 用來描述文件或文件某個部分的細節
定義對話框，例如提示框
標籤包含details 元素的標題
規定獨立的串流內容（圖像、圖表、照片、程式碼等等）。
定義
元素的標題
#定義section 或document 的頁尾。
定義了文件的頭部區域
#定義帶有記號的文字。
定義度量衡。僅用於已知最大值和最小值的度量。
#定義導覽連結的部分。
定義任何類型的任務的進度。
定義 ruby​​ 註解（中文註音或字元）。
定義字元（中文註音或字元）的解釋或發音。
在 ruby​​ 註解中使用，定義不支援 ruby​​ 元素的瀏覽器所顯示的內容。
定義文件中的節（section、區段）。
#定義日期或時間。
規定在文本中的何處適合新增換行符號。

html5標籤的使用範例

（1）定義導覽連結


#它也是有意義的標籤，並不是在某處加上這個標籤就有了導航的樣式了，這都是有意義的p而已，在頭部header中加入菜單標籤

  • 標籤合用

    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）定義文章標籤

    #可以使用文章區塊標籤進行寫文章，這就使用這個標籤進行寫文章在section部分，可以和

    合用

    html程式碼：

    <article><!--文章块p-->
　　<h2>文章标题</h2><!--标题-->
　　<p>文章内容文章内容文章内容文章内容文章内容文章内容
　　<br>
　　文章内容文章内容文章内容文章内容文章内容文章内容<br>
　　文章内容文章内容文章内容</p>
</article>　
    登入後複製

    css樣式：

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

    這樣就可以寫一篇文章了

    #（3）定義媒介內容的分組，以及它們的標題

    A。這個標籤可以和它的配套標籤聯合使用

    ，不過
    中間寫標題

    <figure>
    <figcaption>标题</figcaption><!--配套-->
    <p>标题内容</p>
</figure>
    登入後複製

    #B。也可以和

    聯合使用，其中
    是寫標題，而
    寫內容，顯示的效果和配套使用的效果也有差異

    <figure>
    <dt>标题1</dt>
    <dd>标题内容</dd>
</figure>
    登入後複製

    （4）定義對話框或視窗

    在這個標籤中也是可以使用dd和dt標籤，對話框中的標題和內容，對話框有個屬性是open，這個標籤的相容性不是很好

    <dialog open>
          <dt>1问题</dt>
          <dd>1答案</dd>
          <dt>2问题</dt>
          <dd>2答案</dd>
</dialog>
    登入後複製

    　

    #（5）定義指令的清單或選單

    A。這個標籤可以和li合用

    <menu>
         <li>定义列表</li>
         <li>定义列表</li>
         <li>定义列表</li>
</menu>
    登入後複製

    B。可以在右鍵點擊中新增自己的內容（只有火狐瀏覽器可以相容）

    聯合（定義使用者可以從彈出式選單呼叫的指令/選單項目）標籤使用

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

    右鍵點選後出現想要的選單項目

    點選選單項，彈出內容

    （6）標題組

    裡面可以寫一些標題的結合

    合用

    <hgroup><!--标题组-->
        <h3>标题</h3>
        <h3>标题1</h3>
        <h3>标题2</h3>
        <h3>标题3</h3>
</hgroup>
    登入後複製

    #（7）定義小號文字

    這個標籤和其他的加粗什麼的標籤其實是差不多的

    <small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
    登入後複製

    ###（8）定義元素的細節
    #########裡面的內容可以配合標題和內容標籤來使用###
    <details>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
</details>　　
    登入後複製
    ###點擊詳細資訊就可以看到標題和內容了##################（9）定義ruby 註解#########碰到不認識的字了可以使用這個進行註解拼音，但有的相容性不是很好，到時候可以進行修改###
    <ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->
    登入後複製
    ######（10）定義預定義範圍內的度量######## #有幾個屬性值，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 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中文網其他相關文章！

    • 相關標籤：
    html5
    來源：php.cn
    上一篇：jquery怎麼添加類別和移除類 下一篇：javascript如何將字串轉為數組
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
    來自於 2024-04-06 15:33:12
    0
    1
    433
    PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
    來自於 2024-04-05 12:57:00
    0
    1
    456
    HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
    來自於 2024-04-02 11:47:56
    0
    1
    275
    使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
    來自於 2024-04-01 20:42:38
    0
    1
    259
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！