HTML5 CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第3版）課件 第2章 HTML5標(biāo)簽和屬性

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

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

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

：設(shè)置標(biāo)題文字左對齊（默認(rèn)值）√center：設(shè)置標(biāo)題文字居中對齊√right：設(shè)置標(biāo)題文字右對齊align屬性值2.1.1頁面格式化標(biāo)簽2.1文本控制標(biāo)簽標(biāo)題標(biāo)簽案例演示2.1文本控制標(biāo)簽頁面格式化標(biāo)簽標(biāo)題標(biāo)簽注意：一個(gè)頁面中最好只使用一個(gè)<h1>標(biāo)簽，該標(biāo)簽通常被用在網(wǎng)站的Logo部分。由于標(biāo)題標(biāo)簽擁有特殊的語義。初學(xué)者切勿為了設(shè)置文字加粗或更改文字的大小而使用標(biāo)題標(biāo)簽。HTML中一般不建議使用標(biāo)題標(biāo)簽的align屬性設(shè)置對齊方式，可使用CSS樣式設(shè)置。掌握段落標(biāo)簽的用法，能夠?qū)懗龆温錁?biāo)簽的基本語法格式。學(xué)習(xí)目標(biāo)2.1文本控制標(biāo)簽2.1.1頁面格式化標(biāo)簽段落標(biāo)簽2.1文本控制標(biāo)簽2.1.1頁面格式化標(biāo)簽段落標(biāo)簽在網(wǎng)頁中，可以使用<p>標(biāo)簽來定義段落。<p>標(biāo)簽是HTML文檔中常用的標(biāo)簽，默認(rèn)情況下，一個(gè)段落中的文本會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。段落標(biāo)簽的基本語法格式<p

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

href="#">產(chǎn)品展示</li><li><a

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

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

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