header

樣式展示

2.nav標(biāo)記 nav標(biāo)記代表頁面的一個(gè)部分，是一個(gè)可以作為頁面導(dǎo)航的鏈接組。建議不要在footer元素中使用 nav元素，否則易造成頁面顯示不正確。配置相應(yīng)的CSS代碼可以實(shí)現(xiàn)水平導(dǎo)航。

代碼樣式

3.article標(biāo)記

article標(biāo)記是一個(gè)特殊的section標(biāo)記，它比section具有更明確的語義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁面其他內(nèi)容使用。例如論壇帖子、博客文章、新聞故事、評(píng)論等。一般來說,article會(huì)有標(biāo)題部分，通常包含在header內(nèi),有時(shí)也會(huì)包含footer。article標(biāo)記可以嵌套，內(nèi)層的 article對(duì)外層的article標(biāo)記有隸屬關(guān)系。例如一篇博客的文章可以用article顯示，然后后續(xù)的一些評(píng)論可以用article的形式嵌入其中。

樣式展示

4.section標(biāo)記 section標(biāo)記定義文檔中的節(jié)。例如章節(jié)、頁眉、頁腳或文檔中的其他部分。一般用于成節(jié)的內(nèi)容，會(huì)在文檔流中開始一不新的節(jié)。它用來表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊，通常由內(nèi)容及其標(biāo)題組成。section元素不是一個(gè)普通的容器元素,它表示一段專題性的內(nèi)容可以帶有標(biāo)題。如果描述一件具體的事物,建議使用article來代替section;如果使用section,仍可以使用h1作為標(biāo)題，而不用擔(dān)心它所處的位置。如果一個(gè)容器需要定義樣式或定義行為，建議用div元素。

5.aside標(biāo)記 aside(側(cè)欄，也稱為旁注)標(biāo)記用來說明其所包含的內(nèi)容與頁面主要內(nèi)容相關(guān)，但不是該頁面的一部分，類似于使用括號(hào)對(duì)正文進(jìn)行注釋(就像這樣)。括號(hào)中的內(nèi)容提供關(guān)于該元素的一些附加信息，例如廣告、成組的鏈接、側(cè)欄等。

6.footer標(biāo)記 footer標(biāo)記定義section或文檔的頁腳，包含了與頁面、文章或部分內(nèi)容有關(guān)的信息，例如文章的作者或者日期。作為頁面的頁腳時(shí)，一般包含了版權(quán)、相關(guān)文件和鏈接。它與頁眉header標(biāo)記用法相同，在一個(gè)頁面中可以多次使用，若在一個(gè)區(qū)段的最后使用footer標(biāo)記，那么它就相當(dāng)于該區(qū)段的頁腳。

HTML5新增頁面元素

HIML5除了新增的結(jié)構(gòu)元素header、nav、article、aside、section、footer 外，還增加了新的內(nèi)聯(lián)元素(time、meter 及progress等)、新的內(nèi)元素 (video和audio)、新的交互元素 (details、datagrid和command等)及其他頁面元素。

1.hgroup標(biāo)記

標(biāo)題組合hgroup標(biāo)記是對(duì)網(wǎng)頁或區(qū)段section的標(biāo)題元素 (hl~h6) 進(jìn)行組合。例如在某一區(qū)段中需要連續(xù)設(shè)置多個(gè)標(biāo)題標(biāo)記，可以使用hgroup標(biāo)記來組合。

編寫JSDo是為了增強(qiáng)代碼的可讀性

，以及方使導(dǎo)出API文檔。它的規(guī)范可參考JSDoc 3。

對(duì)于代碼規(guī)范要求高的工程師和JS框架的開發(fā)者，

熟悉JSDoc是必需的技能。

2.figure標(biāo)記與figcaption標(biāo)記

figure標(biāo)記用于對(duì)元素進(jìn)行組合，常用于圖像與圖像描述組合。figcaption (圖題)標(biāo)記用于定義figure元素的標(biāo)題 (caption)，可以給一組圖像標(biāo)記定義標(biāo)題，但figcaption標(biāo)記不是必需的。如果包含了figcaption元素，那么它必須放置在figure元素的第一個(gè)或最后一個(gè)子元素的位置上。

3.mark標(biāo)記與time標(biāo)記

記號(hào)mark標(biāo)記用來定義帶有記號(hào)的文本。在需要突出顯示文本時(shí)可以使用mark標(biāo)記此標(biāo)記對(duì)關(guān)鍵字做高亮處理(黃底色標(biāo)注)，突出顯示，標(biāo)注重點(diǎn)，在搜索方面可以應(yīng)用。時(shí)間time標(biāo)記用來定義公歷的時(shí)間(24 小時(shí)制) 或日期，時(shí)間和時(shí)區(qū)偏移是可選的該標(biāo)記能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼。該標(biāo)記不會(huì)在任何瀏覽器中呈現(xiàn)任何特殊效果。

1.基本語法

重點(diǎn)標(biāo)注的內(nèi)容

9:00

國際勞動(dòng)節(jié)

2.屬性說明

time標(biāo)記的pubdate屬性: 指示該標(biāo)記中的日期/時(shí)間是文檔(或最近的article 標(biāo)記)的發(fā)布日期。 time標(biāo)記的datetime屬性: 規(guī)定日期/時(shí)間。否則，由元素的內(nèi)容給定日期/時(shí)間。

4.details標(biāo)記與summary標(biāo)記

細(xì)節(jié)details標(biāo)記是一個(gè)開關(guān)式、交互式控件，用來定義用戶可見的或者隱藏的需求補(bǔ)充細(xì)節(jié)，任何形式的內(nèi)容都能被放在該標(biāo)記中。該元素的內(nèi)容對(duì)用戶是不可見的，除非設(shè)置了open屬性。與摘要summary標(biāo)記配合使用可以為details定義標(biāo)題，summary元素應(yīng)該是details元素的第一個(gè)子元素。標(biāo)題是可見的，用戶單擊標(biāo)題時(shí)，會(huì)顯示出details。只有Chrome、Safari6以上支持summary標(biāo)記。

1.基本語法

應(yīng)用

結(jié)果：

5.progress標(biāo)記與meter標(biāo)記

進(jìn)度progress標(biāo)記用來定義運(yùn)行中的任務(wù)進(jìn)度(進(jìn)程)。該標(biāo)記有兩個(gè)屬性:max表示規(guī)定需要完成的值;value規(guī)定進(jìn)程的當(dāng)前值。 度量meter標(biāo)記定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量，也被稱為gauge(尺度)。如磁盤用量、CPU 使用率等、meter標(biāo)記屬性如表。

屬性值說明formform_id規(guī)定 meter 元素所屬的表單highnumber規(guī)定被界定為高值的范圍lownumber規(guī)定被界定為低值的范圍maxnumber規(guī)定范圍的最大值minnumber規(guī)定范圍的最小值optimumnumber規(guī)定度量的最優(yōu)值valuenumber必需。規(guī)定度量的當(dāng)前值

示例代碼

25% (25MB / 100MB)

6.input標(biāo)記與datalist標(biāo)記

input標(biāo)記用于搜集用戶信息。input標(biāo)記的list屬性與datalist標(biāo)記的id屬性進(jìn)行關(guān)聯(lián)，即將此兩個(gè)屬性的值設(shè)置為相同的值，通過datalist標(biāo)記列出所有合法的輸入值列表。 選項(xiàng)列表datalist標(biāo)記用來定義input標(biāo)記可能的選項(xiàng)列表。一般與input標(biāo)記配合使用，主要用來定義input可能的值，提供“自動(dòng)完成”的功能，方便用戶輸入。datalist標(biāo)記及其選項(xiàng)不會(huì)被顯示出來，只有當(dāng)用戶鼠標(biāo)盤旋在input 標(biāo)記域時(shí)，才能看到“▼”，然后單擊“▼”彈出一個(gè)下拉列表，提供用戶選擇作為用戶的輸入數(shù)據(jù)。

data-屬性

1.自定義數(shù)據(jù)屬性（data-*）

HTML5 引入了一個(gè)非常有用的特性，允許開發(fā)者在HTML元素上添加自定義數(shù)據(jù)的能力。自定義數(shù)據(jù)屬性是以 data- 為前綴的屬性，并可以包含任何字符串值。

例如，您可以在HTML元素上添加這樣的屬性：

2.如何使用 dataset 訪問自定義數(shù)據(jù)屬性

所有以 data- 開頭的屬性都可以通過元素的 dataset 屬性來訪問。dataset 屬性本質(zhì)上是一個(gè)對(duì)象，其中包含了元素上所有 data-* 屬性的集合。

通過JavaScript訪問這些自定義數(shù)據(jù)屬性的示例：

let div = document.querySelector('div'); // 假設(shè)這是上面含有data-*屬性的div

console.log(div.dataset.id); // 輸出 "123"

console.log(div.dataset.user); // 輸出 "JohnDoe"

console.log(div.dataset.info); // 輸出 "extra data here"

3.轉(zhuǎn)換規(guī)則

dataset 屬性在訪問時(shí)會(huì)將屬性名轉(zhuǎn)為駝峰命名法。這意味著，如果您的自定義數(shù)據(jù)屬性名稱為 data-some-info，那么在訪問時(shí)會(huì)成為 dataset.someInfo。

4.數(shù)據(jù)類型

需要注意的是，從 dataset 獲取的數(shù)據(jù)類型永遠(yuǎn)是字符串。如果您存儲(chǔ)的數(shù)據(jù)是數(shù)字或者JSON對(duì)象，取出時(shí)會(huì)得到它們的字符串形式，可能需要通過parseInt, parseFloat, JSON.parse, 等方法進(jìn)行轉(zhuǎn)換。

5.安全性

雖然使用 data-* 屬性來存儲(chǔ)額外信息非常方便，但是您需要注意不要存儲(chǔ)敏感信息，因?yàn)檫@些信息是可以被用戶看到的，只要他們查看元素的源代碼就可以獲取。

6.性能

當(dāng)您使用 data-* 屬性時(shí)，它們并不會(huì)對(duì)頁面的表現(xiàn)產(chǎn)生明顯影響，但如果您存儲(chǔ)大量的數(shù)據(jù)在 data-* 屬性中，或者頻繁地訪問這些屬性，可能會(huì)對(duì)性能有微弱的影響，因?yàn)槊看卧L問 dataset 都可能涉及到一定的屬性讀取開銷。

掌握了這些 data-* 屬性和 dataset 相關(guān)的知識(shí)，你現(xiàn)在可以更加自信地使用它們來增強(qiáng)你的Web應(yīng)用程序了。

柚子快報(bào)激活碼778899分享：前端 HTML5文檔

http://yzkb.51969.com/

好文推薦