社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 前端問答 html5新增的標籤有哪些

html5新增的標籤有哪些

青灯夜游
青灯夜游
Nov 23, 2022 pm 06:55 PM
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可定義嵌入的內容等。

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中文網其他相關文章！

    • 本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序，用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    顯示更多

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳圖形設置
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    刺客信條陰影：貝殼謎語解決方案
    2 週前 By DDD
    R.E.P.O.如果您聽不到任何人，如何修復音頻
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25：如何解鎖Myrise中的所有內容
    4 週前 By 尊渡假赌尊渡假赌尊渡假赌
    顯示更多

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版，非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    顯示更多

    熱門話題

    gmail信箱登陸入口在哪裡
    7478
    15
    CakePHP 教程
    1377
    52
    steam的賬戶名稱是什麼格式
    77
    11
    win11激活密鑰永久
    50
    19
    NYT連接提示和答案
    19
    33
    顯示更多
    Related knowledge
    HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

    HTML 表格邊框指南。在這裡，我們以 HTML 中的表格邊框為例，討論定義表格邊框的多種方法。

    HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

    HTML 左邊距指南。在這裡，我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

    HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

    這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

    HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

    HTML 表格佈局指南。在這裡，我們詳細討論 HTML 表格佈局的值以及範例和輸出。

    HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

    HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

    HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

    HTML 輸入佔位符指南。在這裡，我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

    在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

    HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

    HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

    HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

    See all articles