HTML5的新增標(biāo)簽有哪些？

們都知道，想要成為一名合格的前端開發(fā)人員，掌握好HTML5是一個重要的先決條件，相比較于HTML，HTML5中新增了許多功能標(biāo)簽，那么這么標(biāo)簽都有哪些呢？

青島HTML5

格式：

<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置。

<mark>定義有記號的文本。

<meter>定義預(yù)定義范圍內(nèi)的度量。

<progress>定義任何類型的任務(wù)的進度。

<rp>定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。

<rt>定義 ruby 注釋的解釋。

<ruby>定義 ruby 注釋。

<time>定義日期/時間。

<wbr>定義可能的換行符。

表單：

<datalist>定義下拉列表。

<keygen>定義生成密鑰。

<output>定義輸出的一些類型。

圖像：

<canvas>定義圖形。

<figcaption>定義 figure 元素的標(biāo)題。

<figure>定義媒介內(nèi)容的分組，以及它們的標(biāo)題。

音頻和視頻：

<audio>定義聲音內(nèi)容。

<source>定義媒介源。

<track>定義用在媒體播放器中的文本軌道。

<video>定義視頻。

鏈接：

nav>定義導(dǎo)航鏈接。

列表：

<command>定義命令按鈕。

樣式：

<header>定義section或page的頁眉。

<footer>定義section或page的頁腳。

<section>定義section。

<article>定義文章。

<aside>定義頁面內(nèi)容之外的內(nèi)容。

<details>定義元素的細(xì)節(jié)。

<dialog定義對話框或窗口。

<summary>為 <details> 元素定義可見的標(biāo)題。

編程：

HTML5的優(yōu)勢：

1、做出更多好看的動畫效果，讓前端開發(fā)人員實現(xiàn)更好的頁面交互

HTML5實現(xiàn)的網(wǎng)頁更加的精美，這些動畫是基于HTML5標(biāo)簽和CSS3樣式共同實現(xiàn)的效果。

2、解決了跨瀏覽器問題

跨瀏覽器問題在HTML5出現(xiàn)之前，對于前端開發(fā)人員來說，絕對是一個噩夢級的問題。明明在一個瀏覽器中完全正常運行的HTML、CSS和JavaScript頁面，但換一個瀏覽器之后，就會出現(xiàn)很多問題，比如：JavaScript運行出錯、頁面布局混亂等。改變了這種局面的正是HTML5編程語言，目前主流瀏覽器如Internet Explorer、Chorme、Firefox、Safari都表現(xiàn)出對HTML5的極大熱情。

3、跨平臺、離線使用

HTML5 可以做到跨平臺，多數(shù)核心代碼不用重寫，JavaScript的代碼用得好的話，在許多地方都可以用到，包括移動應(yīng)用、移動網(wǎng)站、PC網(wǎng)站、各種瀏覽器插件，甚至可以用WebKit封裝作為跨平臺的應(yīng)用程序。雖然這種方式在嚴(yán)格意義上來講并非是完全跨平臺，但這樣也在后期的維護上可以節(jié)省出量的時間和精力。

用戶可以離線使用、訪問應(yīng)用，這對于無法隨時保持聯(lián)網(wǎng)狀態(tài)的移動終端用戶來說是很重要的，且用戶訪問本地的緩存文件，通常意味著更快的訪問速度，從這個角度來說，可謂是大大提高了用戶的體驗度。

航切換設(shè)計到CSS中標(biāo)簽屬性設(shè)置：隱藏、顯示

涉及html5異步傳輸?shù)奶匦?/p>

更需要知道js多標(biāo)簽時候元素選擇的寫法

再啰嗦一下：classLIst屬性返回元素的類名，可以用方法add()、remove()添加class屬性

setAttribute(name,value)設(shè)置新屬性及其值，或者修改已有屬性的值

正文

上導(dǎo)航切換的示意圖

js代碼：

window.onload = function () { //window.onload:就是等整個頁面內(nèi)容全部加載完畢

//填寫js邏輯

//獲取ul里li的個數(shù)

var tab_ui = document.getElementsByTagName("ul");

var tab_li= tab_ui[0].getElementsByTagName("li")

//獲取要顯示的div的個數(shù)

var content = document.getElementById("content");

var content_div = content.getElementsByTagName("div");

//給li添加鼠標(biāo)點擊事件

for(var i= 0;i<tab_li.length;i++){

tab_li[i].index = i; //異步傳輸，不設(shè)置的話，得到的都是i的最大值

tab_li[i].onclick = function () {

//清除之前的樣式

for(var j=0;j<tab_li.length;j++){

//沒有點擊事件，j=0,1,2

tab_li[j].classList.remove("active");

content_div[j].setAttribute("class","hidden");

}

//設(shè)置自己本身的樣式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 無效，i=3導(dǎo)致

//將對應(yīng)的內(nèi)容顯示出來

content_div[this.index].classList.remove("hidden");

}

//給li添加鼠標(biāo)點擊事件

var tab_ui = document.getElementsByTagName("ul");

var tab_li1= tab_ui[1].getElementsByTagName("li")

//var tab_li1= document.getElementsById("li")

var content1 = document.getElementById("content1");

var content1_div = content1.getElementsByTagName("div");

for(var i= 0;i<tab_li1.length;i++){

tab_li1[i].index = i; //重點，為了讓i在循環(huán)體內(nèi)

tab_li1[i].onmouseover = function () {

//這里的i永遠(yuǎn)=3，如果不設(shè)置 tab_li[i].index = i

//清除之前的樣式

for(var j=0;j<tab_li1.length;j++){

//沒有點擊事件，j=0,1,2

tab_li1[j].classList.remove("active");

content1_div[j].setAttribute("class","hidden");

}

//設(shè)置自己本身的樣式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 無效，i=3導(dǎo)致

//將對應(yīng)的內(nèi)容顯示出來

content1_div[this.index].classList.remove("hidden");

}

</script>

css代碼

<style>

.hidden{

display: none;

}

.tabdemo>.active{

background: red;

border-bottom-color:white ;

}

#wrap{

height: 58px;

background-color: #c7eafa;

}

.tabdemo {

width: 100%;

list-style: none;

margin: 0 auto;

background-color: blue;

}

.tabdemo1 {

width: auto;

list-style: none;

margin: 0 auto;

background-color: pink;

float:left;

}

li{

color: rgb(0, 0, 0);

display:inline-block;

}

ul.tabdemo1 li {

color: rgb(224, 9, 9);

display:block;

}

li:hover{

background-color: lavender;

}

一定注意要把a轉(zhuǎn)成行內(nèi)塊元素，

如果轉(zhuǎn)的是塊元素那么短豎線會掉下去，

因為塊級元素是獨占一行的

display:inline-block;

padding: 0 20px;

line-height: 58px;

text-decoration: none;

color: black;

}

</style>

html代碼

<!DOCTYPE html>

<html>

<head>

</head>

//js代碼、css代碼放在這里

<body>

<div>

</ul>

</div>

</div>

</div>

</div>

<div>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

們上一篇文章已經(jīng)對HTML5有了一定了解。（了解HTML5語義化標(biāo)簽——小白們看過來）

今天我們總結(jié)一些常用的語義化標(biāo)簽，剛學(xué)完HTML標(biāo)簽的童靴們趕緊趁熱打鐵吧！

<header></header> 頁眉

頁眉通常包括網(wǎng)站標(biāo)志、主導(dǎo)航、全站鏈接以及搜索框。

也適合對頁面內(nèi)部一組介紹性或?qū)Ш叫詢?nèi)容進行標(biāo)記。

如下例子中，頁眉中包含了一個導(dǎo)航：

<nav></nav> 導(dǎo)航，僅對文檔中重要的鏈接群使用。

html5規(guī)范不推薦對輔助性頁腳鏈接使用nav，除非頁腳再次顯示頂級全局導(dǎo)航、或者包含招聘信息等重要鏈接。

例子參考上面。

<footer></footer> 頁腳

頁腳通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果
元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。

<footer> ? 2018 toutiao.com All Rights Reserved </footer>

<section></section>

具有相似主題的一組內(nèi)容，比如網(wǎng)站的主頁可以分成介紹、新聞條目、聯(lián)系信息等條塊。類似于div。

如下例子中，關(guān)于section的介紹放在了一個<section>里面：

<article></article>

可以作為文章的標(biāo)簽。 article可以嵌套article，只要里面的article與外面的是部分與整體的關(guān)系。

愛學(xué)習(xí)的孩子運氣不會差哦~

關(guān)注小白前端，持續(xù)收到文章推送！

在線咨詢

上一篇：Jenkins操作手冊 - 巨詳細(xì)，一篇足矣
下一篇：HTML <hr> 標(biāo)簽

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5的新增標(biāo)簽有哪些？

<header></header> 頁眉

<nav></nav> 導(dǎo)航，僅對文檔中重要的鏈接群使用。

<footer></footer> 頁腳

<section></section>

<article></article>

您的項目需求