HTML5 CSS3網站設計基礎教程（第3版）課件 第2章 HTML5標簽和屬性

第2章HTML5標簽和屬性《HTML5+CSS3網站設計基礎教程（第3版）》學習目標/Target掌握文本控制標簽的用法，能夠使用文本控制標簽設置文本樣式。掌握圖像標簽的用法，能夠使用圖像標簽在網頁中嵌入圖片。掌握超鏈接標簽的用法，能夠使用超鏈接實現頁面的跳轉。掌握列表標簽的用法，能夠使用列表標簽設置導航選項。學習目標/Target熟悉結構標簽的用法，能夠使用結構標簽搭建網頁結構。熟悉頁面交互標簽的用法，能夠使用頁面交互標簽設置頁面展示信息。熟悉全局屬性的用法，能夠使用全局屬性設置網頁效果。章節(jié)概述/SummaryHTML5中既包含了大部分原有的標簽和屬性，也增加了一些新的標簽和屬

性。這些標簽使網頁結構更加清晰明確，這些屬性使標簽的功能更加強大。掌握這些標簽和屬性是熟練使用HTML5構建網頁的基礎。本章將詳細講解HTML5的各類標簽和屬性。目錄/Contents2.1文本控制標簽2.2圖像標簽2.3列表標簽2.4超鏈接標簽目錄/Contents2.5結構標簽2.6頁面交互標簽2.7全局屬性2.8階段案例——影片介紹網頁文本控制標簽2.1無論網頁內容如何豐富，文字自始至終都是網頁中最基本的元素。為了使文字排版整齊、結構清晰，HTML中提供了一系列文本控制標簽。例如，頁面格式化標簽、文本格式化標簽等。本節(jié)將詳細講解HTML中的文本控制標簽。2.1文本控制標簽2.1.1頁面格式化標簽一篇結構清晰的文章通常都會通過標題、段落、分割線等對文章進行結構排列。2.1文本控制標簽2.1.1頁面格式化標簽網頁也不例外。為了使網頁中的文字有條理地顯示出來，HTML提供了相應的頁面格式化標簽，如標題標簽、段落標簽、水平線標簽、換行標簽。2.1文本控制標簽標題標簽段落標簽水平線標簽換行標簽掌握標題標簽的用法，能夠寫出標題標簽的基本語法格式。學習目標2.1文本控制標簽2.1.1頁面格式化標簽標題標簽文本控制標簽頁面格式化標簽h1h2h3h4h5h6標題標簽標題標簽用于將文本設置為標題，HTML提供了6個等級的標題標簽，即<h1>~<h6>，從<h1>~<h6>標題標簽的重要性依次遞減。標題標簽2.1文本控制標簽2.1.1頁面格式化標簽標題標簽標題標簽的基本語法格式<hn

align="對齊方式">標題文本</hn>可選屬性，用于指定標題的對齊方式?！蘬eft

：設置標題文字左對齊（默認值）√center：設置標題文字居中對齊√right：設置標題文字右對齊align屬性值2.1.1頁面格式化標簽2.1文本控制標簽標題標簽案例演示2.1文本控制標簽頁面格式化標簽標題標簽注意：一個頁面中最好只使用一個<h1>標簽，該標簽通常被用在網站的Logo部分。由于標題標簽擁有特殊的語義。初學者切勿為了設置文字加粗或更改文字的大小而使用標題標簽。HTML中一般不建議使用標題標簽的align屬性設置對齊方式，可使用CSS樣式設置。掌握段落標簽的用法，能夠寫出段落標簽的基本語法格式。學習目標2.1文本控制標簽2.1.1頁面格式化標簽段落標簽2.1文本控制標簽2.1.1頁面格式化標簽段落標簽在網頁中，可以使用<p>標簽來定義段落。<p>標簽是HTML文檔中常用的標簽，默認情況下，一個段落中的文本會根據瀏覽器窗口的大小自動換行。段落標簽的基本語法格式<p

align=“對齊方式”>段落文本</p>2.1文本控制標簽2.1.1頁面格式化標簽段落標簽段落示例掌握水平線標簽的用法，能夠寫出水平線標簽的基本語法格式。學習目標2.1文本控制標簽2.1.1頁面格式化標簽水平線標簽2.1文本控制標簽2.1.1頁面格式化標簽水平線標簽水平線可以通過<hr/>標簽來定義。水平線標簽的基本語法格式<hr屬性="屬性值"/>2.1文本控制標簽2.1.1頁面格式化標簽水平線標簽<hr/>標簽的常用屬性屬性名含義屬性值align設置水平線的對齊方式可選擇left、right、center三種值，默認為center，居中對齊顯示size設置水平線的粗細以像素為單位，默認為2像素color設置水平線的顏色可用顏色名稱、十六進制#RGB、rgb(r,g,b)width設置水平線的寬度可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認為100%2.1文本控制標簽2.1.1頁面格式化標簽水平線標簽水平線示例掌握換行標簽的用法，能夠寫出換行標簽的基本語法格式。學習目標2.1文本控制標簽2.1.1頁面格式化標簽換行標簽2.1文本控制標簽2.1.1頁面格式化標簽換行標簽如果想要將某段文本強制換行顯示，就需要使用換行標簽<br/>。2.1文本控制標簽2.1.1頁面格式化標簽換行標簽注意：<br/>標簽雖然可以實現換行的效果，但并不能取代結構標簽<h>、<p>等。掌握文本格式化標簽的用法，能夠為文字設置特殊顯示的文本效果。學習目標2.1.2文本格式化標簽2.1文本控制標簽2.1.2文本格式化標簽文本格式化標簽用于為文字設置粗體、斜體或下劃線等一些特殊顯示的文本效果2.1文本控制標簽2.1.2文本格式化標簽常用的文本格式化標簽及文本顯示效果2.1文本控制標簽標簽顯示效果<b>標簽和<strong>標簽文本以粗體方式顯示<u>標簽和<ins>標簽文本以添加下劃線方式顯示<i>標簽和<em>標簽文本以斜體方式顯示<s>標簽和<del>標簽文本以添加刪除線方式顯示<cite>標簽文本以斜體方式顯示，用于標注引用的參考文獻<time>標簽文本正常顯示，用于標注時間和日期<mark>標簽文本以添加底色方式顯示2.1.2文本格式化標簽1.<b>標簽和<strong>標簽2.1文本控制標簽VS<b>標簽<b>標簽是物理標簽只用于設置顯示樣式<strong>標簽<strong>標簽是邏輯標簽可以設置顯示樣式可以將標簽語義化（強調重要性）推薦使用<strong>標簽2.1.2文本格式化標簽2.<u>標簽和<ins>標簽2.1文本控制標簽VS<u>標簽<u>標簽是物理標簽只設置下劃線顯示樣式<ins>標簽<ins>標簽是邏輯標簽設置下劃線顯示樣式可以將標簽語義化推薦使用<ins>標簽2.1.2文本格式化標簽3.<i>標簽和<em>標簽2.1文本控制標簽VS<i>標簽<i>標簽是物理標簽<em>標簽em>標簽是邏輯標簽推薦使用<em>標簽2.1.2文本格式化標簽4.<s>標簽和<del>標簽2.1文本控制標簽VS<s>標簽<s>標簽是物理標簽<del>標簽del>標簽是邏輯標簽推薦使用<del>標簽2.1.2文本格式化標簽2.1文本控制標簽案例演示<b>標簽和<strong>標簽<u>標簽和<ins>標簽<i>標簽和<em>標簽<s>標簽和<del>標簽2.1.2文本格式化標簽5.<cite>標簽<cite>標簽是一個邏輯標簽，該標簽嵌套的文本是對某個參考文獻的引用。例如，書籍或者雜志中的內容。2.1文本控制標簽2.1.2文本格式化標簽5.<cite>標簽<cite>標簽中的文本會以斜體樣式顯示在頁面中。與<i>標簽、<em>標簽嵌套的文本顯示樣式相同，它們的差異在于語義不同，<cite>標簽著重強調引用內容。2.1文本控制標簽2.1文本控制標簽2.1.2文本格式化標簽<time>標簽<time>標簽是一個邏輯標簽，用于標注時間（24小時制）或日期。被<time>標簽標注的時間或日期不會在瀏覽器中呈現任何特殊效果，但是能夠以機器可讀的方式進行編碼。<time>標簽的兩個屬性datetime用于定義相應的時間或日期。其屬性值必須為一個有效的時間或日期格式，不會顯示給用戶。pubdate用于設置文檔的發(fā)布日期或時間。取值為“pubdate”，可以省略屬性值。2.1.2文本格式化標簽7.<mark>標簽<mark>標簽是一個邏輯標簽，用于高亮顯示文本。2.1文本控制標簽掌握文本樣式標簽的用法，能夠為文字設置效果，例如，字體、字號、顏色等。學習目標2.1.3文本樣式標簽2.1文本控制標簽2.1文本控制標簽2.1.3文本樣式標簽文本樣式標簽可以設置一些文字效果，例如，字體、字號、文字顏色，讓網頁中的文字樣式變得更加豐富。文本樣式標簽的基本語法格式<font屬性="屬性值">文本內容</font>√face：設置字體，例如，微軟雅黑、黑體、宋體等?！蘳ize：設置字號，可以取1到7之間的整數值，無需添加單位。√color：設置文字顏色，顏色值可以為英文單詞、十六進制顏色值等。常用屬性2.1.3文本樣式標簽2.1文本控制標簽案例演示在實際應用中，通常會使用CSS樣式替代<font>標簽。掌握特殊字符的用法，能夠為網頁添加特殊字符，例如，空格、大于號、小于號等。學習目標2.1.4特殊字符2.1文本控制標簽2.1.4特殊字符常用特殊字符對應代碼-12.1文本控制標簽特殊字符描述字符的代碼空格符

<小于號<>大于號>&和號&￥人民幣￥?版權?2.1.4特殊字符常用特殊字符對應代碼-22.1文本控制標簽特殊字符描述字符的代碼?注冊商標®°度數符號°±正負號±×乘號×÷除號÷2平方2（上標2）23立方3（上標3）3圖像標簽2.2在網頁中巧妙地使用圖像可以讓網頁豐富多彩。本節(jié)將通過常用圖像格式、圖像標簽、相對路徑和絕對路徑3個知識點，詳細講解HTML5中圖像的應用方法。2.2圖像標簽熟悉常用的圖像格式，能夠說出不同圖像格式的特點。學習目標2.2.1常用圖像格式2.2圖像標簽2.2.1常用圖像格式2.2圖像標簽GIFPNGJPGGIF格式最突出的特點是支持動畫，它是一種無損壓縮的圖像格式，即修改圖像之后GIF格式的圖像質量沒有損失。而且GIF格式支持透明，很適合在互聯網上使用。但GIF格式只能處理256種顏色。因此在網頁制作中，GIF格式常常用于Logo、小圖標和其他色彩相對單一的圖像。2.2.1常用圖像格式2.2圖像標簽GIFPNGJPGPNG格式包括PNG-8格式和真色彩PNG格式（包括PNG-24格式和PNG-32格式）。相對于GIF格式，PNG格式最大的優(yōu)勢是體積更小，支持Alpha透明（全透明、半透明），并且顏色過渡更平滑，但PNG格式不支持動畫。其中，PNG-8格式與GIF格式類似，只能支持256種顏色，如果用作靜態(tài)圖可以取代GIF格式；真色彩PNG格式可以支持更多的顏色，同時真色彩PNG格式（特指PNG-32格式）支持半透明圖像效果。圖像標簽常用圖像格式GIFPNGJPEGJPEG格式是一種有損壓縮的圖像格式，該格式的圖像稍小，但每修改一次圖像都會造成一些圖像數據的丟失。JPEG格式是專為照片設計的圖像格式，網頁中類似于照片的圖像（如橫幅廣告、商品圖像、較大的插圖等）都可以保存為JPEG格式。掌握定義圖像的方法，能夠寫出定義圖像的語法格式。學習目標2.2.2圖像標簽及其屬性2.2圖像標簽2.2圖像標簽定義圖像的基本語法格式<img

src="圖像URL"/>src屬性用于指定圖像的路徑，它是<img/>標簽的必需屬性。2.2.2圖像標簽及其屬性要想在網頁中顯示圖像就需要使用圖像標簽。在HTML中使用<img/>標簽來定義圖像2.2.2圖像標簽及其屬性<img/>標簽的其他的屬性-12.2圖像標簽屬性屬性值描述alt文本圖像不能顯示時的替換文本。title文本鼠標指針懸停時顯示的內容。width像素值設置圖像的寬度。height像素值設置圖像的高度。border數字設置圖像邊框的寬度。vspace像素值設置圖像頂部和底部的空白（垂直邊距）。.com2.2.2圖像標簽及其屬性<img/>標簽的其他的屬性-2yx.ityxb2.2圖像標簽屬性屬性值描述hspace像素值設置圖像左側和右側的空白（水平邊距）。alignleft將圖像對齊到左邊。right將圖像對齊到右邊。top將圖像的頂端和文本的第一行文字對齊，其他文字居圖像下方。middle將圖像的水平中線和文本的第一行文字對齊，其他文字居圖像下方。bottom將圖像的底部和文本的第一行文字對齊，其他文字居圖像下方。2.2.2圖像標簽及其屬性2.2圖像標簽alt圖像的替換文本屬性，在圖像無法顯示時告訴用戶該圖片的內容。案例演示2.2.2圖像標簽及其屬性2.2圖像標簽title設置鼠標指針懸停時，圖像的提示文字案例演示2.2.2圖像標簽及其屬性2.2圖像標簽width和height用于自定義圖像的寬度和高度，通常只設置一個屬性，另一個會依據已設置的屬性而變化，以等比例顯示原圖。2.2.2圖像標簽及其屬性2.2圖像標簽border√可以為圖像添加邊框，并且可以設置邊框的寬度；√使用HTML的border屬性無法更改邊框顏色。√border屬性的取值無需添加單位。案例演示2.2.2圖像標簽及其屬性2.2圖像標簽在HTML

4.01之前，可以通過vspace屬性和hspace屬性分別調整圖像的垂直邊距和水平邊距。Vspace和hspace2.2.2圖像標簽及其屬性2.2圖像標簽align使用align屬性實現圖像和文字環(huán)繞效果案例演示注意：1.實際制作網頁時，HTML5并不支持<img/>標簽中使用

border、vspace、hspace和align屬性，這四個屬性在HTML4.01已廢棄，可用CSS樣式替代。2.網頁制作中，裝飾性的圖像不建議直接插入<img/>標簽，最好通過CSS設置背景圖像的方式來實現。2.2.2圖像標簽及其屬性2.2圖像標簽熟悉絕對路徑和相對路徑，能夠說出不推薦使用絕對路徑的原因。學習目標2.2.3絕對路徑和相對路徑2.2圖像標簽2.2.3絕對路徑和相對路徑2.2圖像標簽什么是路徑？2.2.3絕對路徑和相對路徑2.2圖像標簽路徑在使用計算機查找需要的文件時，需要知道文件的位置，而表示文件位置的方式就是路徑。2.2.3絕對路徑和相對路徑2.2圖像標簽相對路徑絕對路徑相對路徑不帶有盤符，通常是以HTML網頁文件為起點，通過層級關系描述目標圖像的位置。絕對路徑就是網頁上的文檔或目錄在盤符（即C盤、D盤等）中的真正路徑。例如，“D:\案例源碼\chapter02\images\tao.png”是一個盤符中的絕對路徑。2.2.3絕對路徑和相對路徑2.2圖像標簽相對路徑設置方法圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img

src=“l(fā)ogo.gif”/>。圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img

src="img/img01/logo.gif"/>。3

圖像文件位于html文件的上一級文件夾：在文件名之前加入“../”，如果是上兩級，則需要使用“../../”，以此類推，如<img

src="../logo.gif"/>。2.2.3絕對路徑和相對路徑2.2圖像標簽網頁中不推薦使用絕對路徑，因為網頁制作完成之后需要將所有的文檔上傳到服務器。在服務器中，路徑存儲根目錄會發(fā)生改變，有可能不存在“D:\案例源碼\chapter02\images\banner1.jpg”這樣很精準的路徑。若路徑錯誤，網頁就無法正常顯示圖像。使用相對路徑，可以很好的避免這個問題。列表標簽2.3一個網站由多個網頁構成，每個網頁上都有響應的信息。將這些信息以列表的方式呈現，可以使信息排列有序，條理清晰。HTML語言提供了3種列表，分別

為無序列表、有序列表和定義列表，本節(jié)將對這3種列表以及列表的嵌套進行詳細講解。2.3列表標簽掌握無序列表的用法，能夠寫出無序列表的語法格式。學習目標2.3.1無序列表2.3列表標簽2.3.1無序列表無序列表是網頁中最常用的列表，之所以稱為“無序列表”，是因為其各個列表項之間沒有順序級別之分，通常是并列的。2.3列表標簽2.3.1無序列表2.3列表標簽無序列表的基本語法格式<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ul><ul>標簽用于定義無序列表<li>標簽用于描述具體的列表項每對<ul>中至少應包含一對<li>2.3.1無序列表<ul>標簽和<li>標簽都擁有type屬性，用于指定列表項目符號。列表項目符號是列表項前顯示的符號。當為type屬性設置不同的屬性值，可以呈現不同的符號。無序列表的type屬性值與顯示效果2.3列表標簽type屬性值顯示效果disc（默認值）●circle○square■2.3.1無序列表2.3列表標簽案例演示注意：在HTML中不建議直接使用<ul>標簽的type屬性。<ul>標簽中需要嵌套<li>標簽，不建議在<ul>標簽中直接輸入文本內容。2.3.1無序列表2.3列表標簽掌握有序列表的用法，能夠寫出有序列表的語法格式。學習目標2.3.2有序列表2.3列表標簽2.3.2有序列表有序列表的各個列表項按照一定的順序排列。例如，網頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。2.3列表標簽2.3.2有序列表2.3列表標簽<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ol><ol>標簽用于定義有序列表<li>標簽用于描述具體的列表項每對<ol>中至少應包含一對<li>有序列表的基本語法格式.com2.3.2有序列表在有序列表中，除了type屬性之外，還可以為<ol>標簽定義start屬性、為<li>標簽定義value屬性。有序列表的屬性和屬性值及相關描述yx.ityxb2.3列表標簽屬性屬性值描述type1（默認）項目符號顯示為數字1、2、3……a或A項目符號顯示為英文字母a、b、c……或A、B、C……i或I項目符號顯示為羅馬數字i、ii、iii……或I、II、III……start數字規(guī)定全部列表項的初始值。value數字規(guī)定當前列表項的初始值。reversedreversed（可以省略）規(guī)定列表順序為降序。2.3.2有序列表2.3列表標簽案例演示掌握定義列表的用法，能夠寫出定義列表的語法格式。學習目標2.3.3定義列表2.3列表標簽2.3.3定義列表定義列表常用于對名詞進行解釋和描述，與無序列表和有序列表不同，定義列表的列表項前沒有任何項目符號。2.3列表標簽2.3.3定義列表定義列表的基本語法格式2.3列表標簽<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>...<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd>...</dl><dl>標簽用于指定定義列表<dt>標簽用于指定術語名詞<dd>標簽用于對名詞進行解釋和描述案例演示2.3.3定義列表2.3列表標簽2.3.3定義列表在網頁設計中，定義列表常用于實現圖文混排效果。其中，<dt>標簽中插入圖片，<dd>標簽中放入對圖片解釋說明的文字。2.3列表標簽注意：<dl>、<dt>、<dd>三個標簽之間不允許出現其他標簽。<dl>標簽必須與<dt>標簽相鄰。2.3.3定義列表2.3列表標簽掌握列表的嵌套，能夠在列表中創(chuàng)建子列表。學習目標2.3.4列表的嵌套2.3列表標簽2.3列表標簽2.3.4列表的嵌套在使用列表時，列表項中也有可能包含若干子列表項，我們要想在列表項中定義子列表項就需要將列表進行嵌套。列表嵌套的示例<ul><li>列表項1</li><li>列表項2</li><li><ol><li>列表項1</li><li>列表項2</li></ol></li></ul>2.3.4列表的嵌套2.3列表標簽案例演示注意：在制作網頁時，不建議直接使用列表標簽的屬性，通常使用CSS樣式替代。2.3列表標簽2.3.4列表的嵌套超鏈接標簽2.4一個網站通常由多個頁面構成，打開網站，通常先看到的是首頁。如果想從首頁跳轉到其他頁面，就需要在首頁的相應位置添加超鏈接。在網頁中使用超鏈接標簽添加超鏈接，本節(jié)將對超鏈接標簽進行詳細講解。2.4超鏈接標簽掌握創(chuàng)建超鏈接的方法，能夠在網頁中創(chuàng)建超鏈接。學習目標2.4.1創(chuàng)建超鏈接2.4超鏈接標簽2.4.1創(chuàng)建超鏈接使用<a>標簽可以創(chuàng)建超鏈接。創(chuàng)建超鏈接的語法格式2.4超鏈接標簽<a

href="跳轉目標"target="目標窗口的彈出方式">文本或圖像</a>href用于指定鏈接目標的url地址，當為<a>標簽應用href屬性時，它就具有了超鏈接的功能。target用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，意為在原窗口中打開，_blank為在新窗口中打開。2.4.1創(chuàng)建超鏈接2.4超鏈接標簽案例演示注意：暫時沒有確定鏈接目標時，通常將<a>標簽的href屬性值定義為

“#”(即href="#")，表示該鏈接暫時為一個空鏈接。在網頁中不僅可以創(chuàng)建文本超鏈接，各種網頁元素，如圖像、音頻、視頻等都可以添加超鏈接。2.4.1創(chuàng)建超鏈接2.4超鏈接標簽掌握錨點鏈接的使用方法，能夠在網頁中創(chuàng)建錨點鏈接。學習目標2.4.2錨點鏈接2.4超鏈接標簽2.4.1創(chuàng)建超鏈接2.4超鏈接標簽如果網頁內容較多，頁面過長瀏覽網頁時就需要不斷地拖動滾動條，來查看所需要的內容。效率較低不方便2.4.1創(chuàng)建超鏈接2.4超鏈接標簽為了提高信息的檢索速度HTML語言提供了一種特殊的鏈接——錨點鏈接，通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內容。步驟1步驟2創(chuàng)建錨點鏈接對象：<a

href="#id名">鏈接文本</a>2.4.1創(chuàng)建超鏈接創(chuàng)建錨點鏈接分為兩步：2.4超鏈接標簽創(chuàng)建錨點跳轉目標：<標簽id=“id”>顯示內容</標簽>2.4.1創(chuàng)建超鏈接2.4超鏈接標簽案例演示結構標簽2.5結構標簽是HTML5中新增的標簽，用于豐富頁面的功能結構，主要包括<header>標簽、<nav>標簽、<article>標簽等。本節(jié)將介紹常用的結構標簽。2.5結構標簽熟悉<header>標簽的使用方法，能夠使用<header>標簽定義網頁的頭部。學習目標2.5.1<header>標簽2.5結構標簽2.5.1<header>標簽HTML5中的<header>標簽是一種具有引導作用的結構標簽，可以包含所有放在頁面頭部的內容。此外<header>標簽也可以用來放置整個頁面或頁面內的某個內容區(qū)塊的標題，還可以包含網站Logo圖像、表單或者其他相關內容。2.5結構標簽2.5.1<header>標簽2.5結構標簽<header><h1>文字內容</h1>…</header><header>標簽的示例代碼2.5.1<header>標簽2.5結構標簽案例演示熟悉<nav>標簽的使用方法，能夠定義導航鏈接。學習目標2.5.2<nav>標簽2.5結構標簽2.5結構標簽2.5.2<nav>標簽<nav>標簽是HTML5新增的標簽,用于定義導航鏈接。<nav>標簽可以將具有導航性質的鏈接歸納在一個區(qū)域中，使頁面元素的語義更加明確。<nav>標簽的示例代碼<nav><ul><li><a

href="#">首頁</li><li><a

href="#">公司概況</li><li><a

href="#">產品展示</li><li><a

href="#">聯系我們</li></ul></nav>2.5.2<nav>標簽2.5結構標簽<nav>可以設置的導航傳統(tǒng)導航條側邊欄導航頁內導航翻頁導航熟悉<footer>標簽的使用方法，能夠定義網頁的底部。學習目標2.5.3<footer>標簽2.5結構標簽2.5.3<footer>標簽<footer>標簽用于定義一個頁面或者區(qū)域的底部，它可以包含所有放在頁面底部的內容。與<header>標簽類似，一個頁面中可以包含多個<footer>標簽。2.5結構標簽2.5.3<footer>標簽2.5結構標簽<footer>頁面底部內容</footer><footer>標簽的示例代碼熟悉<artical>標簽的使用方法，能夠定義頁面中與上下文不相關的獨立部分。學習目標2.5.4<artical>標簽2.5結構標簽2.5.4<artical>標簽<article>標簽用于定義文檔、頁面或者應用程序中與上下文不相關的獨立部分，該元素經常被用于定義日志、新聞或用戶評論等。2.5結構標簽2.5.4<artical>標簽<artical>標簽的示例代碼<article><header><h1>秋天的味道</h1><p>你想不想知道秋天的味道？它是甜、是苦、是澀。</p></header><footer><p>著作權歸XXXXXX公司所有。</p></footer></article>2.5結構標簽熟悉<section>標簽的使用方法，能夠使用<section>標簽把段落標注起來。學習目標2.5.5<section>標簽2.5結構標簽2.5.5<section>標簽<section>標簽用于定義一段專題性的內容，一般會帶有標題，主要應用在文章的章節(jié)中。2.5結構標簽2.5.5<section>標簽使用<section>標簽的原則:2.5結構標簽1<section>標簽具有語義化。當一個標簽只是為了樣式化或者方便腳本使用時，應該使用無語義化的標簽。2如果<article>標簽、<aside>標簽或<nav>標簽更符合使用條件，則無需使用<section>標簽。3沒有標題的內容模塊不要使用<section>標簽。4<section>標簽和<article>標簽可以互相嵌套，沒有上下級關系。2.5.5<section>標簽2.5結構標簽案例演示熟悉<aside>標簽的使用方法，能夠使用<aside>標簽定義網頁中的附屬信息。學習目標2.5.6<aside>標簽2.5結構標簽2.5.6<aside>標簽<aside>標簽用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等有別于主要內容的部分。2.5結構標簽<aside>標簽的用法2.5.6<aside>標簽2.5結構標簽被包含在article元素內，用于定義主要內容的附屬信息部分。用法1在article元素之外使用，用于定義頁面或網站的附屬信息部分。用法21<article>23456<header><h1>標題</h1></header><section>文章主要內容</section><aside>文章的其他相關信息</aside>7</article>8<aside>右側菜單</aside>2.5.6<aside>標簽<aside>標簽的使用示例代碼2.5結構標簽熟悉<figure>標簽和<figcaption>標簽的使用方法，能夠定義獨立的網頁內容。學習目標2.5.7<figure>標簽和<figcaption>標簽2.5結構標簽<figure>標簽用于定義獨立的網頁內容，例如，圖像、圖表、照片、代碼等。<figure>標簽嵌套的內容應該與網頁內容相關，如果刪除<figure>標簽嵌套的內容，也不應對文檔流產生影響。<figcaption>標簽嵌套在<figure>標簽中，用于為<figure>標簽添加標題。一個<figure>標簽內

最多允許使用一個<figcaption>標簽，該<figcaption>標簽應該放在<figure>標簽的第一個或者最后一個子標簽的位置。2.5.7<figure>標簽和<figcaption>標簽2.5結構標簽2.5結構標簽案例演示2.5.7<figure>標簽和<figcaption>標簽熟悉<hgroup>標簽的使用方法，能夠將多個標題組成一個標題組。學習目標2.5.8<hgroup>標簽2.5結構標簽2.5.8<hgroup>標簽<hgroup>標簽用于將多個標題（主標題、副標題或子標題）組成一個標題組，通常與<h1>~<h6>標簽組合使用。<hgroup>標簽不會改變標題的樣式。使用hgroup元素的注意事項:2.5結構標簽2當一個標題標簽中包含其他標題標簽、<section>標簽或者<article>標簽，通常將<hgroup>標簽和這些標簽放到<header>標簽中1如果只有一個標題元素不建議使用hgroup元素。案例演示2.5.8<hgroup>標簽2.5結構標簽頁面交互標簽2.6在HTML5中，新增了一些頁面交互標簽，例如，<details>標簽、<summary>標簽等。這些頁面交互標簽可以通過用戶操作或圖文展示給用戶帶來良好的使用體驗，極大的豐富了網頁內容展現形式。本節(jié)將對HTML5中一些常用的頁面交互標簽進行詳細講

解。2.6頁面交互標簽學習目標熟悉<details>標簽的使用方法，能夠在網頁中創(chuàng)建一個可展開折疊的元素。熟悉<summary>標簽的使用方法，能夠定義標題。2.6.1<details>標簽和<summary>標簽2.6頁面交互標簽<details>標簽可以在網頁中創(chuàng)建一個可展開折疊的元素，讓一段文字或標題包含一些隱藏的信息。在使用<details>標簽時，可以在<details>標簽中嵌入<summary>標簽。<summary>標簽可以作為<details>標簽的第一個子標簽，用于為<details>標簽定義標題。當用戶單擊<summary>標簽定義的標題時，會顯示或隱藏<details>標簽中嵌入的其他內容。2.6.1<details>標簽和<summary>標簽2.6頁面交互標簽2.6.1<details>標簽和<summary>標簽2.6頁面交互標簽案例演示熟悉<progress>標簽的使用方法，能夠定義任務進度條。學習目標2.6.2<progress>標簽2.6頁面交互標簽2.6頁面交互標簽2.6.2<progress>標簽<progress>標簽用來定義任務進度條，該標簽可以配合JavaScript代碼實現一些進度條動畫效果。<progress>標簽的語法格式<progress屬性="屬性值"></progress><progress>標簽屬性說明value：已經完成的工作量。max：總共有多少工作量。案例演示2.6.2<progress>標簽2.6頁面交互標簽學習目標熟悉<meter>標簽的使用方法，可以定義給定范圍的數據。2.6.3<meter>標簽2.6頁面交互標簽2.6.3<meter>標簽<meter>標簽用來定義給定范圍的數據。在網頁中，<meter>標簽的顯示效果很像進度條，但是<meter>標簽不能用來定義進度條。如果要定義進度條，需要使用<progress>標簽。<meter>標簽的語法格式<meter屬性="屬性值"></meter>2.6頁面交互標簽屬性說明value表示實際數據。如果不做指定該數據，那么<meter>標簽中的第一個數字就會被認為實際數據，如果標簽內沒有數字，那么實際數據為0。min表示數據范圍的最小數值。max表示數據范圍的最大數值。2.6.3<meter>標簽<meter>標簽的常用屬性-12.6頁