第2章HTML5頁面元素及屬性學(xué)習(xí)目標(biāo)/Target掌握結(jié)構(gòu)元素的使用，可以使頁面分區(qū)更明確理解分組元素的使用，能夠建立簡單的標(biāo)題組。掌握頁面交互元素的使用，能夠?qū)崿F(xiàn)簡單的交互效果。理解文本層次語義元素，能夠在頁面中突出所標(biāo)記的文本內(nèi)容。掌握全局屬性的應(yīng)用，能夠使頁面元素實現(xiàn)相應(yīng)的操作。章節(jié)概述/SummaryHTML5中引入了很多新的標(biāo)記元素和屬性，這是HTML5的一大亮點，這些新增元素使文檔結(jié)構(gòu)更加清晰明確，屬性則使標(biāo)記的功能更加強(qiáng)大，掌握這些元素和屬性是正確使用HTML5構(gòu)建網(wǎng)頁的基礎(chǔ)。本章將HTML5中的新增元素分為結(jié)構(gòu)元素、分組元素、頁面交互元素和文本層次語義元素，除了介紹這些元素外，還會介紹HTML5中常用的幾種標(biāo)準(zhǔn)屬性。目錄/Contents010203列表元素結(jié)構(gòu)元素分組元素04頁面交互元素目錄/Contents0506文本層次語義元素全局屬性07階段案例—制作電影影評網(wǎng)列表元素01章節(jié)概述HTML5中引入了很多新的標(biāo)記元素和屬性，這是HTML5的一大亮點，這些新增元素使文檔結(jié)構(gòu)更加清晰明確，屬性則使標(biāo)記的功能更加強(qiáng)大，掌握這些元素和屬性是正確使用HTML5構(gòu)建網(wǎng)頁的基礎(chǔ)。本章將HTML5中的新增元素分為結(jié)構(gòu)元素、分組元素、頁面交互元素和文本層次語義元素，除了介紹這些元素外，還會介紹HTML5中常用的幾種標(biāo)準(zhǔn)屬性。2.1列表元素為了使網(wǎng)頁更易讀，經(jīng)常將網(wǎng)頁信息以列表的形式呈現(xiàn)，例如，淘寶商城首頁的商品服務(wù)分類，排列有序、條理清晰，呈現(xiàn)為列表的形式。為了滿足網(wǎng)頁排版的需求，HTML語言提供了3種常用的列表元素，分別為ul元素（無序列表）、ol元素（有序列表）和dl元素（定義列表），本節(jié)將對這3種元素進(jìn)行詳細(xì)講解。2.1列表元素1.ul元素了解無序列表的概念，能夠說出無序列表的特點。掌握無序列表的基本語法格式，能夠在網(wǎng)頁中定義無序列表。學(xué)習(xí)目標(biāo)2.1列表元素1.

ul元素?zé)o序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因為其各個列表項之間沒有順序級別之分，通常是并列的。無序列表京東官網(wǎng)的導(dǎo)航欄結(jié)構(gòu)清晰，各項之間排序不分先后，這個導(dǎo)航欄就可以看做一個無序列表。2.1列表元素1.

ul元素?zé)o序列表無序列表（unorderedlist）是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因為其各個列表項(listitem)之間沒有順序級別之分，通常是并列的。<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>......</ul><ul></ul>標(biāo)記用于定義無序列表<li></li>標(biāo)記用于描述具體的列表項每對<ul></ul>中至少應(yīng)包含一對<li></li>。2.1列表元素1.

ul元素注意：1.在HTML5中不再支持該元素的type屬性。2.<li>與</li>之間相當(dāng)于一個容器，可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)記中輸入文字的做法是不被允許的。無序列表2.1列表元素2.

ol元素了解有序列表的概念，能夠說出有序列表的特點。掌握有序列表的基本語法格式，能夠在網(wǎng)頁中定義有序列表。學(xué)習(xí)目標(biāo)2.1列表元素2.

ol元素有序列表（orderedlist）即為有排列順序的列表，其各個列表項按照一定的順序排列，例如網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。有序列表有序列表即為有排列順序的列表。網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。2.1列表元素2.ol元素有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列，例如網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>......</ol><ol></ol>標(biāo)記用于定義有序列表<li></li>標(biāo)記用于描述具體的列表項每對<ol></ol>中至少應(yīng)包含一對<li></li>。有序列表2.1列表元素1.

ol元素ol列表屬性屬性值描述reversedreversed指定列表倒序(9,8,7...)startnumber一個整數(shù)值屬性，指定了列表編號的起始值。這個屬性在HTML4中棄用，但是在HTML5中被重新引入。typea表示小寫英文字母編號A表示大寫英文字母編號i表示小寫羅馬數(shù)字編號I表示大寫羅馬數(shù)字編號1表示數(shù)字編號（默認(rèn)）2.1列表元素3.dl元素了解定義列表（definitionlist）的概念，能夠說出定義列表的特點。掌握定義列表的基本語法格式，能夠在網(wǎng)頁中定義定義列表。學(xué)習(xí)目標(biāo)2.1列表元素3.dl元素定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，與無序和有序列表不同，定義列表的列表項前沒有任何項目符號。定義列表<dt>標(biāo)記（definitiontitle）<dd>標(biāo)記（definitiondescription）定義列表常用于圖文混排，其中<dt></dt>標(biāo)記中插入圖片，<dd></dd>標(biāo)記中放入對圖片解釋說明的文字。2.1列表元素3.dl元素定義列表2.1列表元素4.列表的嵌套應(yīng)用掌握列表的嵌套應(yīng)用，能夠在列表項中定義子列表項。學(xué)習(xí)目標(biāo)2.1列表元素4.列表的嵌套應(yīng)用什么是列表的嵌套？2.1列表元素4.列表的嵌套應(yīng)用商品分類子分類【結(jié)論】在網(wǎng)上購物商城中瀏覽商品時，經(jīng)常會看到某一類商品被分為若干小類，這些小類通常還包含若干的子類。2.1列表元素4.列表的嵌套應(yīng)用結(jié)構(gòu)元素022.2結(jié)構(gòu)元素HTML5中所有的元素都是有結(jié)構(gòu)性的，且這些元素的作用與塊元素非常相似。本節(jié)將介紹常用的結(jié)構(gòu)元素來幫助讀者進(jìn)一步了解HTML5，包括header元素、nav元素、article元素等。2.2結(jié)構(gòu)元素1.header元素熟悉header元素，能夠描述header元素的作用。掌握header元素使用方法，能夠?qū)懗鰄eader元素的基本語法格式。學(xué)習(xí)目標(biāo)2.2結(jié)構(gòu)元素1.header元素HTML5中的header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，該元素可以包含所有通常放在頁面頭部的內(nèi)容。<header><h1>網(wǎng)頁主題</h1> ...</header>注意：header元素并非head元素。在HTML網(wǎng)頁中，并不限制header元素的個數(shù)，一個網(wǎng)頁中可以使用多個header元素，也可以為每一個內(nèi)容塊添加header元素。2.2結(jié)構(gòu)元素2.nav元素熟悉nav元素，能夠描述nav元素的作用。掌握nav元素的使用方法，能夠?qū)懗鰊av元素的基本語法格式。學(xué)習(xí)目標(biāo)2.2結(jié)構(gòu)元素2.nav元素nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個區(qū)域中，使頁面元素的語義更加明確。<nav><ul><li><ahref="#">首頁</li><li><ahref="#">公司概況</li><li><ahref="#">產(chǎn)品展示</li><li><ahref="#">聯(lián)系我們</li></ul></nav>2.2結(jié)構(gòu)元素2.nav元素傳統(tǒng)導(dǎo)航條側(cè)邊欄導(dǎo)航頁內(nèi)導(dǎo)航翻頁操作nav元素的應(yīng)用2.2結(jié)構(gòu)元素3.article元素熟悉article元素，能夠描述article元素的作用。掌握article元素的使用方法，能夠獨立定義一片日志或一條新聞。學(xué)習(xí)目標(biāo)2.2結(jié)構(gòu)元素3.article元素article元素代表文檔、頁面或者應(yīng)用程序中與上下文不相關(guān)的獨立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。2.2結(jié)構(gòu)元素4.aside元素熟悉aside元素，能夠描述aside元素的作用。掌握aside元素的用法，能夠為文章添加附屬信息。學(xué)習(xí)目標(biāo)2.2結(jié)構(gòu)元素4.aside元素aside元素用來定義當(dāng)前頁面或者文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息。用法1aside元素的用法:在article元素之外使用，作為頁面或站點全局的附屬信息部分。用法22.2結(jié)構(gòu)元素5.section元素熟悉section元素，能夠描述section元素的作用。了解section元素的注意事項，能夠舉例說明section元素的注意事項有哪些。學(xué)習(xí)目標(biāo)2.2結(jié)構(gòu)元素5.section元素section元素用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊，一個section元素通常由內(nèi)容和標(biāo)題組成。使用aside元素的注意事項:213不要將section元素用作設(shè)置樣式的頁面容器，那是div的特性。如果article元素、aside元素或nav元素更符合使用條件，那么不要使用section元素。沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。2.2結(jié)構(gòu)元素6.footer元素熟悉footer元素，能夠說出footer元素的作用。掌握footer元素的使用方法，能夠獨立定義頁面底部。學(xué)習(xí)目標(biāo)<article>

文章內(nèi)容

<footer>

文章分頁列表

</footer></article><footer>

頁面底部</footer>2.2結(jié)構(gòu)元素6.footer元素footer元素用于定義一個頁面或者區(qū)域的底部，它可以包含所有通常放在頁面底部的內(nèi)容。例如：分組元素032.3分組元素分組元素用于對頁面中的內(nèi)容進(jìn)行分組。HTML5中涉及到3個與分組有關(guān)的元素，分別是figure元素、figcaption元素和hgroup元素。本節(jié)將對它們進(jìn)行詳細(xì)講解。2.3分組元素1.

figure和figcaption元素熟悉figure和figcaption元素，能夠分別說出這兩個元素的作用。掌握figure和figcaption元素的使用方法，能夠定義獨立的流內(nèi)容。學(xué)習(xí)目標(biāo)2.3分組元素1.

figure和figcaption元素figure元素用于定義獨立的流內(nèi)容（圖像、圖表、照片、代碼等等），一般指一個單獨的單元。figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不會對文檔流產(chǎn)生影響。figcaption元素用于為figure元素組添加標(biāo)題，一個figure元素內(nèi)最多允許使用一個figcaption元素，該元素應(yīng)該放在figure元素的第一個或者最后一個子元素的位置。頁面交互元素042.4頁面交互元素HTML5是一些獨立特性的集合，它不僅增加了許多Web頁面特性，而且本身也是一個應(yīng)用程序。對于應(yīng)用程序而言，表現(xiàn)最為突出的就是交互操作。HTML5為操作新增加了對應(yīng)的交互體驗元素，在本節(jié)將詳細(xì)介紹這些元素。2.4頁面交互元素1.

details和summary元素熟悉details和summary元素，能夠分別說出details和summary元素的作用和用法。學(xué)習(xí)目標(biāo)2.4頁面交互元素1.

details和summary元素details元素（目前，Chrome、Edge和Safari6支持details標(biāo)簽。）用于描述文檔或文檔某個部分的細(xì)節(jié)。summary元素經(jīng)常與details元素配合使用，作為details元素的第一個子元素，用于為details定義標(biāo)題。標(biāo)題是可見的，當(dāng)用戶點擊標(biāo)題時，會顯示或隱藏details中的其他內(nèi)容。內(nèi)容部分可自行使用任意標(biāo)簽完成<details><summary>點我進(jìn)行展開</summary><h3>這是一篇文章的標(biāo)題</h3><p>這是文章的內(nèi)容</p></details>2.4頁面交互元素2.progress元素熟悉progress元素，能夠說出progress元素的作用。掌握progress元素的常用屬性值，能夠區(qū)分不同屬性值的含義。學(xué)習(xí)目標(biāo)2.4頁面交互元素2.progress元素progress元素用于定義一個正在完成的進(jìn)度條，這個進(jìn)度可以是不確定的，只是表示進(jìn)度正在進(jìn)行，但是不清楚還有多少工作量沒有完成。progress元素屬性值value：已經(jīng)完成的工作量。max：總共有多少工作量。2.4頁面交互元素3.meter元素熟悉meter元素，能夠說出meter元素的作用。掌握meter元素的常用屬性，能夠區(qū)分不同的屬性所代表的含義。學(xué)習(xí)目標(biāo)2.4頁面交互元素3.meter元素meter元素用于表示指定范圍內(nèi)的數(shù)值。屬性說明high定義度量的值位于哪個點被界定為高的值。low定義度量的值位于哪個點被界定為低的值。max定義最大值，默認(rèn)值是1。min定義最小值，默認(rèn)值是0。optimum定義什么樣的度量值是最佳的值。如果該值高于high屬性，則意味著值越高越好。如果該值低于low屬性的值，則意味著值越低越好。value定義度量的值。表格元素052.5表格元素<table>標(biāo)簽定義HTML表格一個HTML表格包括<table>元素，一個或多個<tr>、<th>以及<td>元素。<tr>元素定義表格行，<th>元素定義表頭單元格，<td>元素定義表格單元。更復(fù)雜的HTML表格也可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>以及<tbody>元素。<table>表格元素開始標(biāo)記：必需內(nèi)容：<caption>：表格標(biāo)題元素<th>：定義表格的表頭<thead>：表頭行分組元素<tbody>：表主體行分組元素<tfoot>：表尾行分組元素<tr>：行元素<td>：單元格元素結(jié)束標(biāo)記：必需2.5table元素屬性說明alignleft|center|right,水平對齊方式，默認(rèn)居左對齊border設(shè)置像素值，定義表格的邊框，默認(rèn)無邊框cellpadding設(shè)置像素值，定義單元格間距，即內(nèi)容與邊框的距離cellspacing設(shè)置像素值，定義單元格邊距，即單元格之間的距離width設(shè)置像素值或百分比，定義表格的寬度height設(shè)置像素值或百分比，定義表格的高度<tr>行元素,用于生成表格中的行標(biāo)簽，一個標(biāo)簽對表示表格的一行，內(nèi)部可包含多個<td>或<th>標(biāo)簽表示單元格主要屬性橫向?qū)R屬性：align?？扇≈禐閞ight,left,center,justify（兩端對齊）,char(字符對齊)縱向?qū)R屬性:valign。可取值為top,middle,bottom,baseline(基線對齊)高度屬性：height?？稍O(shè)置為像素值，定義表格行的高度2.5tr元素<td>單元格元素，<th>表頭單元格語法開始標(biāo)記：必需內(nèi)容：單元格數(shù)據(jù) 結(jié)束標(biāo)記：必須屬性：align：水平對齊方式，td默認(rèn)居左對齊，