html5新增的標籤有哪些
- 青灯夜游原創
- 2022-11-23 18:55:219182瀏覽
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 新元素
| #標籤 | ##描述|
|---|---|
| 標籤定義圖形，例如圖表和其他圖像。此標籤基於JavaScript 的繪圖API | |
| 新多媒體元素 | |
| 標籤 | 描述 |
| b97864c2e0ef2353a16c4d64c7734e92 | 定義音訊內容 |
39000f942b2545a5315c57fa3276f220 #定義影片（video 或movie）
| 定義多媒體資源39000f942b2545a5315c57fa3276f220 和b97864c2e0ef2353a16c4d64c7734e92 | |
|---|---|
| 定義嵌入的內容，例如外掛程式。 | |
| 為諸如 39000f942b2545a5315c57fa3276f220 和 b97864c2e0ef2353a16c4d64c7734e92 元素之類的媒介規定外部文字軌道。 | |
| 新表單元素 |
新的語意與結構元素
| #標籤 | 描述 |
|---|---|
| 23c3de37f2f9ebcb477c4a90aac6fffd | 定義頁面獨立的內容區域。 |
| 15221ee8cba27fc1d7a26c47a001eb9b | 定義頁面的側邊欄內容。 |
| af4e6c3c591431c4583becd75d1c3582 | 允許您設定一段文本，使其脫離其父元素的文本方向設定。 |
| e2b9f03cad787b9644e1f51fd23b7dac | 定義指令按鈕，例如單選按鈕、複選框或按鈕 |
| 4646b701c1f738fb936aa20967492bb3 | 用來描述文件或文件某個部分的細節 |
| 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中加入菜單標籤f948a1aadc72a1ea6358f61a20b4e72525edfb22a4f469ecb59f1190150159c6標籤合用
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>
聯合（定義使用者可以從彈出式選單呼叫的指令/選單項目）9b8d7b889acba92c978f783c55ba01dc標籤使用
<menu type="context" id="cai">
<!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" 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>
<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中文網其他相關文章！