第2章

HTML5常用元素和屬性學習目標123了解HTML5保留元素、保留的通用屬性和新特性掌握HTML5新增的文檔結構元素、文本格式化元素掌握HTML5新增的頁面增強元素、多媒體元素45掌握HTML5新增的通用屬性能夠正確使用HTML5新增的元素和屬性本章架構★★★2.1HTML5保留的元素2.2HTML5新增文檔結構元素的應用2.3HTML5新增文本格式化元素的應用2.4HTML5頁面增強元素的應用2.5HTML5多媒體元素的應用2.6HTML5保留的通用屬性 2.7HTML5新增通用屬性的應用2.8綜合案例★★2.1HTML5的保留原素2.1HTML5的保留元素

HTML5是最新版本的超文本標記語言，它在HTML4.01基礎上進行了繼承與發展。HTML5保留了HTML早期版本的大部分元素，這些元素成為HTML5的重要組成部分，把它們按照功能劃分，包括頁面基本元素、文本格式化元素、超鏈接和錨點元素、列表相關元素、表格相關元素等，它們都是HTML5的常用元素。2.1HTML5的保留元素

HTML5保留了HTML4.01的頁面基本元素，它們是構成Web頁面最基礎、最常用的元素。

●<!---->：用于定義HTML文檔中的注釋，作為注釋的內容不會被瀏覽器解析，不會在瀏覽器中顯示。恰到好處的注釋，可以增加Web代碼的可讀性，有助于后續對代碼的編輯修改。

●html元素：html元素是HTML文檔的根元素。

●head元素：用于定義HTML文檔的頁面頭部分，其內部可以包含腳本、樣式表、元信息等內容。可以書寫在head元素中的其他元素主要有base、link、meta、script、style、title等。1

頁面基本元素

2.1HTML5的保留元素

●base元素：用于定義HTML文檔中所有鏈接規定的默認地址或者默認目標。

●meta元素：用于定義HTML文檔的元信息。

●title元素：用于定義HTML文檔的頁面標題。

●style元素：用于定義HTML文檔引入的樣式，該元素的type屬性是必需的，其屬性值為“text/css”。

●body元素：用于定義HTML文檔的頁面主體部分，包含頁面所要顯示的所有內容，例如：文本、超鏈接、列表、表格、表單、圖像等。

●h1、h2、h3、h4、h5、h6元素：用于定義標題，共6個級別。h1元素顯示的標題文字最大，h6元素顯示的標題文字最小。1

頁面基本元素

2.1HTML5的保留元素

●p元素：用于定義段落。瀏覽器會在p元素定義的段落前后自動創建一定的空白。

●div元素：定義文檔中的分區或節。該元素是塊級元素，瀏覽器會在div元素定義的塊的前后自動放置換行符。

●span元素：功能與div元素基本相似，區別是span元素定義的節默認不會換行。

●br元素：用于插入一個換行符。

●hr元素：用于在頁面插入一條水平線。1

頁面基本元素

2.1HTML5的保留元素

在設計制作Web頁面時，有時需要使頁面中的文字呈現出特定的效果。如果需要呈現的效果相對簡單，HTML5的文本格式化元素就可以實現。如果希望呈現更為多樣化和吸引用戶的頁面樣式，就需要依靠CSS樣式來完成。

●b元素：b是bold的縮寫，用于定義粗體文本。

●strong元素：用于定義粗體文本，與b元素的作用和語法基本一樣。

●i元素：用于定義斜體文本。

●em元素：em是emphasized的縮寫，用于定義強調文本，顯示效果與i元素定義的斜體文本相似。

●sup元素：用于定義作為上標顯示的文本。2文本格式化元素

2.1HTML5的保留元素

●sub元素：用于定義作為下標顯示的文本。

●bdo元素：用于定義文本的顯示方向。通過設置其dir屬性來實現文本顯示方向的設置，其屬性值可以是ltr或者rtl，ltr的含義為從左至右，rtl的含義為從右至左。

●abbr元素：用于表示一個縮寫。

●address元素：用于定義一個地址，表現形式與斜體相同。

●blockquote元素：用于定義一段長的引用文本。

●code元素：用于定義計算機代碼文本。

●cite元素：用于表示對某個參考文獻的引用，表現形式與斜體相同。

●dfn元素：用于定義專業術語，通常用粗體或斜體顯示。2文本格式化元素

2.1HTML5的保留元素

●del元素：用于定義文檔中被刪除的文本，會將文字用添加刪除線的效果顯示。

●ins元素：用于定義文檔中插入的文本，會將文字用添加下劃線的效果顯示。

●q元素：用于定義一段短的引用文本。

●pre元素：用于表示該元素包含的文本已經進行了“預格式化”。

●samp元素：用于定義示范文本的內容。

●kbd元素：用于定義鍵盤文本。

●var元素：用于表示一個變量，表現形式與斜體相同。2文本格式化元素

2.1HTML5的保留元素

HTML5保留了定義超鏈接和錨點的a元素，該元素可以指定id、class、style等核心屬性，也可以指定onclick等各種事件屬性，它還可以指定以下三個重要屬性。

●href屬性：用于指定超鏈接所關聯的另一個資源。

●target屬性：用于指定使用框架集中的哪個框架來裝載另一個資源。該屬性的屬性值可以是_self、_blank、_top、_parent四個值之一，分別表示使用自身、新窗口、頂層框架、父框架來裝載新資源。

●media屬性：它是HTML5新增的屬性，用于指定目標URL所引用的媒體類型。其默認值為all，只有當指定了href屬性時，該屬性才有效。3超鏈接和錨點元素

2.1HTML5的保留元素

此外，HTML5為a元素新增了download屬性，并廢棄了charset、cords、name、rev、shape屬性。注意：當使用a元素時，href屬性值既可以是絕對路徑，也可以是相對路徑。當指定絕對路徑時，href屬性值為一個URL。URL用于對互聯網上的文檔進行尋址。一個完整的網址，例如/123/index.html,需要遵守如下的語法規則。

scheme://host.domain:port/path/filename

關于這個URL地址的解釋如下：

●scheme字段：指定因特網服務類型，比較常見的類型是http。

●domain字段：指定因特網域名，例如、等。

●host字段：指定此域中的主機。如果被省略,則http的默認主機為www。

●port字段：指定主機的端口號。

●path字段：指定遠程服務器上的路徑。

●filename字段：指定遠程服務器上網頁文檔的名稱。3超鏈接和錨點元素

2.1HTML5的保留元素

列表可以使Web頁面呈現的信息嚴整有序。HTML5保留了HTML中與列表相關的元素，HTML5支持有序列表、無序列表、自定義列表。

●ul元素：用于定義無序列表

●ol元素：用于定義有序列表。

●dl元素：用于定義列表，該元素只能包含dt和dd兩種子元素。

●li元素：用于定義列表項。

●dt元素：用于定義標題列表項。

●dd元素：用于定義普通列表項。4列表元素

2.1HTML5的保留元素

表格是Web頁面呈現數據信息的常用形式，表格的使用可以使數據間的關系更加清晰直觀。HTML5保留了HTML4.01中與表格相關的元素。

●table元素：用于定義表格。HTML5廢棄了table元素原有的align、bgcolor、boder等屬性。按照HTML5標準的建議，table元素的cellpadding、cellspacing、width屬性也不應使用，而是全部放到CSS中定義。

●caption元素：用于定義表格的標題，該元素只能包含文本、圖片、超鏈接、文本格式化元素和表單控件元素等。

●tr元素：用于定義表格行，該元素只能包含td和th兩種子元素。

●td元素：用于定義單元格，該元素可以包含各種類型的子元素。

●th元素：用于定義表格頁眉處的單元格。

●tbody元素：用于定義表格的主體，該元素只能包含tr子元素。

●thead元素：用于定義表格頭。

●tfoot元素：用于定義表格腳。

●col元素：用于為表格的一個或者多個列指定屬性，該元素只能出現在table元素或colgroup元素中。

●colgroup元素：用于為表格中的一個或者多個列指定屬性值，該元素只能出現table元素或colgroup元素中。5表格元素

2.2HTML5新增文檔結構元素的應用2.2HTML5新增文檔結構元素的應用

header元素用于定義文檔或者節的頁眉，展示介紹性內容。該元素通常包含一組介紹性的或者輔助導航的實用元素。該元素可能包含一些標題元素，但也可能包含其他元素，如Logo圖片、搜索框、作者名稱等。1header元素

2.2HTML5新增文檔結構元素的應用

footer元素用于定義文檔或者節的頁腳，頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等。2footer元素

2.2HTML5新增文檔結構元素的應用

article元素用于定義文檔內的文章，該元素可以嵌套使用。article元素可以是一個論壇帖子，可以是一篇新聞報道，可以是一個博客條目，也可以是一條用戶評論。只要是一篇獨立的文檔內容，就可以使用該元素。3article元素

2.2HTML5新增文檔結構元素的應用

section元素用于定義文檔中的一個區域或者節。一般通過是否包含一個標題，作為子節點辨識的每一個section元素。section元素可以包含多個article，表示該區域內部包含多篇文章。同樣，section元素也可以嵌套使用，用于表示該區域的子區域。4section元素

2.2HTML5新增文檔結構元素的應用

aside元素用于定義與當前頁面或者當前文章內容無關的附屬信息，可以被單獨拆分出來，不會使整體受影響。aside元素通常表現為側邊欄或者嵌入內容。5aside元素

2.2HTML5新增文檔結構元素的應用

figure元素用于定義一段獨立的引用，常與figcaption元素配合使用，該元素常用在主文中的圖片、代碼、表格之中。6figure元素

2.2HTML5新增文檔結構元素的應用

figcaption元素用于表示與其相關聯的引用的說明或標題，描述其父節點figure元素的其他數據。7figcaption元素

2.2HTML5新增文檔結構元素的應用

hgroup元素用于對多個h1～h6元素進行組合,用來展示標題的多個層級或者副標題。該元素目前并沒有廣泛使用。8hgroup元素

2.2HTML5新增文檔結構元素的應用

nav元素用于定義頁面上的導航鏈接部分。導航條樣式有很多，常見的有頂部導航、底部導航、側邊導航。9nav元素

2.3HTML5新增文本格式化元素的應用2.3HTML5新增文本格式化元素的應用

bdi元素會使位于該標簽內部的文本脫離其父元素設置好的文本方向。目前這個元素的語義和支持性不是很好，所以使用并不廣泛。1bdi元素

2.3HTML5新增文本格式化元素的應用

mark元素用于定義高亮文本，會為文本加上黃色的背景色。2mark元素

2.3HTML5新增文本格式化元素的應用

time元素用于顯示被標注的內容是日期或時間，它采用的是24小時制。3time元素

2.4HTML5頁面增強元素的應用2.4HTML5頁面增強元素的應用

meter用于表示已知最大值和最小值的計數器，常用于電池電量、磁盤用量、速度表等。1meter元素

2.4HTML5頁面增強元素的應用

progress元素常用于下載進度、加載進度等顯示任務進度的場景。2progress元素

2.5HTML5多媒體元素的應用2.5HTML5多媒體元素的應用

audio元素用于支持播放音頻。1audio元素

2.5HTML5多媒體元素的應用

video元素用于支持播放視頻。2video元素

2.6HTML5保留的通用屬性2.6HTML5保留的通用屬性

在HTML中，元素可以指定屬性，不同元素支持的屬性可能略有區別，不過有些屬性是所有的元素都支持的，例如id、style、class等，這種屬性被稱為通用屬性。HTML5規范保留了大量原有的通用屬性，包括id、style、class、dir、title、lang、accesskey、tableindex等。

●id屬性：用于為HTML元素指定唯一標識。當使用CSS或JavaScript時，可通過該屬性值來獲取該HTML元素。

●style屬性：用于為HTML元素指定CSS樣式。

●class屬性：用于匹配CSS樣式的class選擇器。

●dir屬性：用于設置元素中內容排列的方向，該屬性支持ltr和rtl兩個屬性值。

●title屬性：用于為HTML元素添加額外的信息。當用戶將鼠標移動到該元素上時，會自動顯示title屬性所指定的信息。

●lang屬性：用于告之瀏覽器和搜索引擎，頁面中元素的內容所使用的語言。該屬性值應符合標準代碼，例如zh代表中文、en代表英文、fr代表法語、ja代表日文等。

●accesskey屬性：當頁面中有多個元素時，可以通過accesskey屬性來指定激活該元素的快捷鍵，這樣用戶通過快捷鍵可以激活對應的HTML元素。

●tabindex屬性：當用戶瀏覽頁面時，可以通過鍵盤上的Tab鍵來切換窗口或頁面中HTML元素來獲得焦點，tabindex屬性則用于控制窗口、獲取焦點的順序。例如將某元素的tabindex屬性設置為1,則表示第一次按下Tab鍵時該元素獲得焦點。2.7HTML5新增通用屬性的應用2.7HTML5新增通用屬性的應用

HTML5為大部分HTML元素增加了contenteditable屬性，該屬性規定元素內容是否可編輯。如果將該屬性值設置為true，那么瀏覽器將允許用戶直接編輯該HTML元素中的內容。修改后的內容會直接顯示在該頁面上，但是一旦刷新頁面，頁面會重新加載，修改的內容會丟失。1contenteditable屬性

2.7HTML5新增通用屬性的應用

designMode屬性相當于一個全局的