柚子快報邀請碼778899分享：前端 HTML5-基礎(chǔ)知識點

http://yzkb.51969.com/

第二章：HTML5 頁面元素及屬性

HTML5 新增元素分為 結(jié)構(gòu)元素，分組元素，頁面交互元素和文本層次語義元素

列表元素

分為 ul 無序列表；ol 有序列表；dl 定義列表

ul 元素

無序列表是網(wǎng)頁中最常用的列表，各個列表項之間沒有順序級別之分，通常是并列的。

• 列表1
• 列表2
• 列表3

ol 元素

有序列表，各個列表按照一定的順序排列

?

1. 蘋果
2. 香蕉
3. 雪梨

// 設(shè)置反向排序

dl 元素

定義列表通常用于對術(shù)語或名詞進行解釋和描述

名詞1

名詞1 解釋1

名詞1 解釋2

名詞2

名詞2 解釋1

名詞2 解釋2

dl 用于定義列表， dt 指定術(shù)語名詞， dd 用于描述解釋，并列嵌套于 dl 中。

列表嵌套使用

• 咖啡

1. 拿鐵
2. 摩卡

• 茶

  • 碧螺春
  • 龍井

結(jié)構(gòu)元素

header 元素

頁面或頁面內(nèi)區(qū)域塊的 頭部，導(dǎo)航

nav

元素用于定義導(dǎo)航鏈接

場合：

傳統(tǒng)導(dǎo)航條：轉(zhuǎn)跳到網(wǎng)站的其他頁面 側(cè)邊欄導(dǎo)航： 頁內(nèi)導(dǎo)航 翻頁操作

article 元素

代表文檔，頁面或者應(yīng)用程序中的上下文不相關(guān)的獨立部分，通常用于定義一篇日志，一條新聞或用戶評論。article 元素通常 使用 section 元素配合使用，進行劃分部分。

aside 元素

定義當(dāng)前頁面或者文章的附屬信息部分，最常用場景：側(cè)邊欄，廣告，導(dǎo)航條

section 元素

用于網(wǎng)站或者應(yīng)用程序中頁面的內(nèi)容進行分塊，一個 section 元素通常由內(nèi)容和標(biāo)題組成

footer 元素

用于定義一個頁面或者區(qū)域的底部

分組元素

figure 和 figcaption 元素

figure元素用于定義獨立的流內(nèi)容（圖像，圖標(biāo)，照片，代碼等）一般指單獨的單元。figcaption 用于為 figure 添加標(biāo)題，位于 figure 元素的第一個或最后一個子元素位置。

hgroup 元素

用于將多個標(biāo)題組成一個標(biāo)題組，通常與 h1 - h6 元素組合使用。通過將 hgroup 元素放于 header 元素中。

頁面交互元素

details 和 summary 元素

details 元素用于描述文檔或者文檔某個部分的細節(jié)。summary 元素作為 details 元素的第一個子元素，用于定義 detial 的標(biāo)題。標(biāo)題是可見的，當(dāng)用戶點擊標(biāo)題時，會顯示或隱藏 details 中的其他內(nèi)容。

progress 元素

表示一個任務(wù)的完成進度，兩個屬性值

value：已經(jīng)完成的工作量，必須大于 0 ，小于 max max：總共有多少工作量，必須大于0

我的工作量

meter 元素

用于指定范圍內(nèi)的數(shù)值，例如，顯示硬盤容量或者對某個后選者的投票人數(shù)占總?cè)藬?shù)的比例。

常用屬性

屬性描述high定義度量值位于那個點被界定為高的值low定義度量值位于那個點被界定為低的值max定義最大值，默認(rèn)為1min定義最小值，默認(rèn)為0optimum定義什么樣的度量值是最佳的值。如果高于 high ，則意味著越高越好。如果低于 low，則是越低越好value定義度量的值

學(xué)生成績列表

小紅：

low="60" high="80" title="65 分" optimum="100">65

文本層次語義元素

time 元素

用于定義日期或時間

mark 元素

主要功能是在 文中高亮某些字符

哦合法趙傲客戶客戶當(dāng)升科技

高亮的文字

cite 元素

創(chuàng)建引用標(biāo)記，用于文檔參考文獻的引用說明，斜體方式展示。

床前明月光，

? 疑是地上霜。

舉頭望明月，

低頭思故鄉(xiāng)。

靜夜思-<李白>

全局屬性

全局屬性是指在任意元素中都可以使用的屬性。

HTML5 中的全局屬性有： draggable，hidden, spellcheck, 和 contenteditable

draggable ：屬性定義元素是否可以拖動，屬性值為 true 或 false，需要結(jié)合 javascript

hidden: 屬性 顯示與隱藏 元素，屬性值為 true 或 false

spellcheck 屬性，主要針對 input 和 textarea 文本輸入框，對用戶輸入的文本內(nèi)容進行拼寫和語法檢驗，屬性值為 true（默認(rèn)值） 或 false

contenteditable 屬性規(guī)定是否可以編輯元素的內(nèi)容，前提是該元素必須可以獲得焦點，并且其內(nèi)容不是只讀的，屬性值為 true 或 false。

床前明月光，

? 疑是地上霜。

舉頭望明月，

低頭思故鄉(xiāng)。

靜夜思-<李白>

spellcheck 屬性值為 true

?html5

spellcheck 屬性值為 false

?html5

可編輯列表

• 列表1
• 列表2
• 列表3

柚子快報邀請碼778899分享：前端 HTML5-基礎(chǔ)知識點

http://yzkb.51969.com/

相關(guān)鏈接