網(wǎng)站設(shè)計(jì)基礎(chǔ)教程整本書(shū)電子教案完整版ppt課件全書(shū)教學(xué)教程最全教學(xué)課件(最新)

1、第1章 初識(shí)HTML5HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第2版）學(xué)習(xí)目標(biāo)/Target了解HTML5發(fā)展歷程，熟悉HTML5瀏覽器支持情況。理解HTML5基本語(yǔ)法，掌握HTML5語(yǔ)法新特性。掌握文本控制標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記，能夠制作簡(jiǎn)單的網(wǎng)頁(yè)。章節(jié)概述/ SummaryHTML5是超文本標(biāo)記語(yǔ)言（Hypertext markup language）的第5代版本，目前還處于推廣階段。經(jīng)過(guò)了Web2.0時(shí)代，基于互聯(lián)網(wǎng)的應(yīng)用已經(jīng)越來(lái)越豐富，同時(shí)也對(duì)互聯(lián)網(wǎng)應(yīng)用提出了更高的要求。HTML5正在引領(lǐng)時(shí)代的潮流，必將開(kāi)創(chuàng)互聯(lián)網(wǎng)的新時(shí)代。本章將對(duì)HTML5的基本結(jié)構(gòu)和語(yǔ)法、文本控制標(biāo)記、圖像標(biāo)記以

2、及超鏈接標(biāo)記進(jìn)行詳細(xì)講解。目錄/Contents010203HTML5概述HTML5基礎(chǔ)文本控制標(biāo)記目錄/Contents0405圖像標(biāo)記超鏈接標(biāo)記06階段案例制作HTML5百科頁(yè)面HTML5概述011.1 HTML5概述隨著時(shí)代的發(fā)展，統(tǒng)一的互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)顯得尤為重要。在HTML5之前，由于各個(gè)瀏覽器之間的標(biāo)準(zhǔn)不統(tǒng)一，給網(wǎng)站開(kāi)發(fā)人員帶來(lái)了很大的麻煩。HTML5的目標(biāo)就是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)。在HTML5平臺(tái)上，視頻、音頻、圖像、動(dòng)畫(huà)以及同電腦的交互都被標(biāo)準(zhǔn)化。本節(jié)將針對(duì)HTML5發(fā)展歷程、優(yōu)勢(shì)、瀏覽器支持情況以及如何創(chuàng)建HTML5頁(yè)面進(jìn)行講解。1.1 HTML5概述1. HTML5

3、發(fā)展歷程了解HTML的發(fā)展歷程，能夠知道HTML各個(gè)發(fā)展階段的境況。學(xué)習(xí)目標(biāo)1.1 HTML5概述1. HTML5發(fā)展歷程HTML2.01995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布過(guò)時(shí)。超文本標(biāo)記語(yǔ)言（第一版）在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。HTML3.21997年1月14日，W3C推薦標(biāo)準(zhǔn)。HTML4.01997年12月18日，W3C推薦標(biāo)準(zhǔn)。HTML4.011999年12月24日，W3C推薦標(biāo)準(zhǔn)。1.1 HTML5概述1. HTML5發(fā)展歷程HTML 5第一份正式草案已于2008年1月22日公布。2014年10月

4、29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成?！究偨Y(jié)】HTML5將會(huì)逐漸取代HTML 4.01、XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的同時(shí)，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動(dòng)平臺(tái)帶來(lái)無(wú)縫銜接的豐富內(nèi)容。1.1 HTML5概述2. HTML5的優(yōu)勢(shì)了解HTML的優(yōu)勢(shì)，對(duì)比HTML能夠列舉HTML5的優(yōu)勢(shì)體現(xiàn)。學(xué)習(xí)目標(biāo)1.1 HTML5概述2. HTML5的優(yōu)勢(shì)1解決了跨瀏覽器問(wèn)題2新增了多個(gè)新特性3用戶(hù)優(yōu)先的原則4化繁為簡(jiǎn)的優(yōu)勢(shì)1.1 HTML5概述3. HTML5瀏覽器支持情況了解HTML瀏覽器支持情況。，能夠列舉幾個(gè)支持HTML5的瀏覽器。學(xué)習(xí)目標(biāo)1.1

5、HTML5概述3. HTML5瀏覽器支持情況1.1 HTML5概述4.創(chuàng)建第一個(gè)HTML5頁(yè)面掌握創(chuàng)建HTML5頁(yè)面的方法，能夠在Dreamweaver中創(chuàng)建第一個(gè)HTML5頁(yè)面。學(xué)習(xí)目標(biāo)1.1 HTML5概述4.創(chuàng)建第一個(gè)HTML5頁(yè)面注意：由于谷歌瀏覽器對(duì)HTML5及CSS3的兼容性支持較好，而且調(diào)試網(wǎng)頁(yè)非常方便，所以在HTML5網(wǎng)頁(yè)制作過(guò)程中谷歌瀏覽器是最常用的瀏覽器。本書(shū)涉及的案例將全部在谷歌瀏覽器中運(yùn)行。HTML5基礎(chǔ)021.2 HTML5基礎(chǔ)HTML5是HTML標(biāo)準(zhǔn)的新標(biāo)準(zhǔn)，是對(duì)HTML及XHTML的繼承與發(fā)展，越來(lái)越多的網(wǎng)站開(kāi)發(fā)者開(kāi)始使用HTML5構(gòu)建網(wǎng)站。學(xué)習(xí)HTML5首先需要

6、了解HTML5的語(yǔ)法基礎(chǔ)。本節(jié)將針對(duì)HTML5文檔基本格式、HTML5語(yǔ)法、HTML標(biāo)記及其屬性、HTML5文檔頭部相關(guān)標(biāo)記進(jìn)行講解。1.2 HTML5基礎(chǔ)1. HTML5文檔基本格式熟悉HTML5文檔的基本格式，能夠描述HTML5文檔中各個(gè)標(biāo)記的作用和位置。學(xué)習(xí)目標(biāo)1.2 HTML5基礎(chǔ)1. HTML5文檔基本格式傳智播客： 傳智播客教育科技有限公司是一家專(zhuān)門(mén)致力于高素質(zhì)軟件開(kāi)發(fā)人才培養(yǎng)的高科技公司。此致敬禮 傳智播客學(xué)員【結(jié)論】寫(xiě)書(shū)信要符合書(shū)信的基本格式，學(xué)習(xí)HTML標(biāo)記語(yǔ)言亦不例外，同樣需要先掌握它的基本格式，遵從相應(yīng)的格式規(guī)范。1.2 HTML5基礎(chǔ)1. HTML5文檔基本格式標(biāo)記用于

7、告知瀏覽器其是一個(gè)HTML文檔， 標(biāo)記和標(biāo)記標(biāo)志著HTML文檔的開(kāi)始和結(jié)束，在它們之間的是文檔的頭部和主體內(nèi)容。標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種 HTML或XHTML標(biāo)準(zhǔn)規(guī)范。標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于標(biāo)記內(nèi)。標(biāo)記用于定義HTML文檔的頭部信息，也稱(chēng)為頭部標(biāo)記，緊跟在標(biāo)記之后，主要用來(lái)封裝其他位于文檔頭部的標(biāo)記。1.2 HTML5基礎(chǔ)2. HTML5語(yǔ)法掌握HTML5語(yǔ)法，能夠說(shuō)出HTML5在設(shè)計(jì)和語(yǔ)法方面做了哪些改變。學(xué)習(xí)目標(biāo)1.2 HTML5基礎(chǔ)2.HTML5語(yǔ)法1.標(biāo)簽不區(qū)分大小寫(xiě)2.允許屬性值不

8、使用引號(hào)3.允許部分屬性值的屬性省略1.2 HTML5基礎(chǔ)2.HTML5語(yǔ)法HTML5可以省略屬性值的屬性屬性描述checked省略屬性值后，等價(jià)于checked=checked。readonly省略屬性值后，等價(jià)于readonly=readonlydefer省略屬性值后，等價(jià)于defer=deferismap省略屬性值后，等價(jià)于ismap=ismapnohref省略屬性值后，等價(jià)于nohref=nohref noshade省略屬性值后，等價(jià)于noshade=noshadenowrap省略屬性值后，等價(jià)于nowrap=nowrapselected省略屬性值后，等價(jià)于selected=selec

9、teddisabled省略屬性值后，等價(jià)于disabled=disabledmultiple省略屬性值后，等價(jià)于multiple=multiplenoresize省略屬性值后，等價(jià)于noresize=noresize1.2 HTML5基礎(chǔ)2.HTML5語(yǔ)法注意：雖然HTML5采用比較寬松的語(yǔ)法格式，簡(jiǎn)化了代碼。但是為了代碼的完整性及嚴(yán)謹(jǐn)性，建議網(wǎng)站開(kāi)發(fā)人員采用嚴(yán)謹(jǐn)?shù)拇a編寫(xiě)模式，這樣更有利于團(tuán)隊(duì)合作及后期代碼的維護(hù)。1.2 HTML5基礎(chǔ)3. HTML標(biāo)記了解HTML標(biāo)記，能夠列舉HTML標(biāo)記的分類(lèi)。掌握HTML標(biāo)記的使用方法，能夠?qū)懗鰡螛?biāo)記、雙標(biāo)記和注釋標(biāo)記的語(yǔ)法格式。學(xué)習(xí)目標(biāo)1.2 HTM

10、L5基礎(chǔ)3. HTML標(biāo)記什么是HTML標(biāo)記？1.2 HTML5基礎(chǔ)3. HTML標(biāo)記帶有“”符號(hào)的元素被稱(chēng)為HTML標(biāo)記例如：、都是HTML標(biāo)記也稱(chēng)為HTML標(biāo)簽或HTML元素1.2 HTML5基礎(chǔ)3. HTML標(biāo)記通常將HTML標(biāo)記分為兩大類(lèi)雙標(biāo)記單標(biāo)記雙標(biāo)記也稱(chēng)體標(biāo)記，是指由開(kāi)始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)記。單標(biāo)記也稱(chēng)空標(biāo)記，是指用一個(gè)標(biāo)記符號(hào)即可完整地描述某個(gè)功能的標(biāo)記。內(nèi)容 表示該標(biāo)記的作用開(kāi)始，一般稱(chēng)為“開(kāi)始標(biāo)記”表示該標(biāo)記的作用結(jié)束，一般稱(chēng)為“結(jié)束標(biāo)記”1.2 HTML5基礎(chǔ)3. HTML標(biāo)記HTML注釋標(biāo)記如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁(yè)面中的注釋

11、文字，就需要使用注釋標(biāo)記。基本語(yǔ)法格式1.2 HTML5基礎(chǔ)4. 標(biāo)記屬性掌握HTML5標(biāo)記屬性的用法，能夠讓HTML標(biāo)記提供更多的信息，例如設(shè)置文本字體為微軟雅黑。學(xué)習(xí)目標(biāo)1.2 HTML5基礎(chǔ)4. 標(biāo)記屬性標(biāo)記的屬性字體位置字號(hào)顏色語(yǔ)法格式 內(nèi)容 1.2 HTML5基礎(chǔ)何為鍵值對(duì)？“鍵值對(duì)”簡(jiǎn)單地說(shuō)即為對(duì)“屬性”設(shè)置“值”。多學(xué)一招:color=red; width:200px;鍵鍵值值在HTML開(kāi)始標(biāo)記中，可以通過(guò)“屬性=屬性值的方式為標(biāo)記添加屬性，其中“屬性”和“屬性值”是以“鍵值對(duì)”的形式出現(xiàn)的。1.2 HTML5基礎(chǔ)5. HTML5文檔頭部相關(guān)標(biāo)記掌握HTML5文檔頭部相關(guān)標(biāo)記，能

12、夠使用不同的頭部相關(guān)標(biāo)記設(shè)置頁(yè)面的基本信息。學(xué)習(xí)目標(biāo)1.2 HTML5基礎(chǔ)5. HTML5文檔頭部相關(guān)標(biāo)記標(biāo)記用于定義HTML頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，必須位于標(biāo)記之內(nèi)。標(biāo)記用于定義頁(yè)面的元信息，可重復(fù)出現(xiàn)在頭部標(biāo)記中。在中使用標(biāo)記可引用外部文件，一個(gè)頁(yè)面允許使用多個(gè)標(biāo)記引用多個(gè)外部文件。標(biāo)記用于為HTML文檔定義樣式信息，位于頭部標(biāo)記中。1.2 HTML5基礎(chǔ)5. HTML5文檔頭部相關(guān)標(biāo)記一個(gè)HTML文檔只能含有一對(duì)標(biāo)記，之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。網(wǎng)頁(yè)標(biāo)題名稱(chēng)基本語(yǔ)法格式：1.2 HTML5基礎(chǔ)5. HTML5文檔頭部相關(guān)標(biāo)記meta定義頁(yè)面元信息設(shè)置網(wǎng)頁(yè)關(guān)鍵字設(shè)置網(wǎng)頁(yè)

13、描述設(shè)置網(wǎng)頁(yè)作者設(shè)置字符集設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)1.2 HTML5基礎(chǔ)5. HTML5文檔頭部相關(guān)標(biāo)記基本語(yǔ)法格式：屬性名常用屬性值描述hrefURL指定引用外部文檔的地址relstylesheet指定當(dāng)前文檔與引用外部文檔的關(guān)系，該屬性值通常為stylesheet，表示定義一個(gè)外部樣式表typetext/css引用外部文檔的類(lèi)型為CSS樣式表text/javascript引用外部文檔的類(lèi)型為javascript腳本1.2 HTML5基礎(chǔ)5. HTML5文檔頭部相關(guān)標(biāo)記樣式內(nèi)容基本語(yǔ)法格式：在HTML中使用style標(biāo)記時(shí)，常常定義其屬性為type，相應(yīng)的屬性值為text/css，表示使用內(nèi)嵌

14、式的CSS樣式。文本控制標(biāo)記031.3 文本控制標(biāo)記在一個(gè)網(wǎng)頁(yè)中文字往往占有較大的篇幅，為了讓文字能夠排版整齊、結(jié)構(gòu)清晰，HTML提供了一系列的文本控制標(biāo)記，如標(biāo)題標(biāo)記、段落標(biāo)記等，本節(jié)將對(duì)這些標(biāo)記進(jìn)行詳細(xì)講解。1.3 文本控制標(biāo)記1. 標(biāo)題和段落標(biāo)記掌握標(biāo)題標(biāo)記的用法，能夠?qū)懗鰳?biāo)題標(biāo)記的基本語(yǔ)法格式。掌握段落標(biāo)記的用法，能夠?qū)懗龆温錁?biāo)記的基本語(yǔ)法格式。學(xué)習(xí)目標(biāo)1.3 文本控制標(biāo)記1. 標(biāo)題和段落標(biāo)記h1h2h3h4h5h6標(biāo)題標(biāo)記1.3 文本控制標(biāo)記1. 標(biāo)題和段落標(biāo)記標(biāo)題標(biāo)記標(biāo)題文本left ：設(shè)置標(biāo)題文字左對(duì)齊（默認(rèn)值）center：設(shè)置標(biāo)題文字居中對(duì)齊right：設(shè)置標(biāo)題文字右對(duì)齊1.

15、3 文本控制標(biāo)記1. 標(biāo)題和段落標(biāo)記標(biāo)題標(biāo)記注意：1、一個(gè)頁(yè)面中只能使用一個(gè)標(biāo)記，常常被用在網(wǎng)站的logo部分。2、由于h元素?fù)碛写_切的語(yǔ)義，請(qǐng)慎重選擇恰當(dāng)?shù)臉?biāo)記來(lái)構(gòu)建文檔結(jié)構(gòu)。禁止僅僅使用h標(biāo)記設(shè)置文字加粗或更改文字的大小。1.3 文本控制標(biāo)記1. 標(biāo)題和段落標(biāo)記段落標(biāo)記段落文本1.3 文本控制標(biāo)記1. 標(biāo)題和段落標(biāo)記水平線(xiàn)標(biāo)記屬性名含義屬性值align設(shè)置水平線(xiàn)的對(duì)齊方式 可選擇left、right、center三種值，默認(rèn)為center，居中對(duì)齊size設(shè)置水平線(xiàn)的粗細(xì) 以像素為單位，默認(rèn)為2像素color設(shè)置水平線(xiàn)的顏色可用顏色名稱(chēng)、十六進(jìn)制#RGB、rgb(r,g,b)width設(shè)置

16、水平線(xiàn)的寬度可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認(rèn)為100%注意：在實(shí)際工作中，不贊成使用的所有外觀屬性，可通過(guò)CSS樣式進(jìn)行設(shè)置。1.3 文本控制標(biāo)記1. 標(biāo)題和段落標(biāo)記換行標(biāo)記注意：標(biāo)記雖然可以實(shí)現(xiàn)換行的效果，但并不能取代結(jié)構(gòu)標(biāo)記、等。換行標(biāo)記的效果1.3 文本控制標(biāo)記2. 文本格式化標(biāo)記了解文本格式化標(biāo)記，能夠列舉常用的文本格式化標(biāo)記及其顯示效果。學(xué)習(xí)目標(biāo)1.3 文本控制標(biāo)記2. 文本格式化標(biāo)記在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線(xiàn)效果，為此HTML準(zhǔn)備了專(zhuān)門(mén)的文本格式化標(biāo)記，使文字以特殊的方式顯示。標(biāo)記顯示效果和文字以粗體方式顯示（b定義文本粗體，strong定義

17、強(qiáng)調(diào)文本。）和文字以斜體方式顯示（i定義斜體字，em定義強(qiáng)調(diào)文本。）和文字以加刪除線(xiàn)方式顯示（HTML5不贊成使用s）和文字以加下劃線(xiàn)方式顯示（HTML5不贊成使用u）注意：以上文本格式化標(biāo)記均可使用標(biāo)記配合CSS樣式替代，關(guān)于標(biāo)記將在第六章具體講解。1.3 文本控制標(biāo)記3. 特殊字符標(biāo)記了解特殊字符標(biāo)記，能夠列舉常用的特殊字符標(biāo)記及其顯示效果。學(xué)習(xí)目標(biāo)1.3 文本控制標(biāo)記3. 特殊字符標(biāo)記特殊字符描述字符的代碼空格符小于號(hào)大于號(hào)&和號(hào)&￥人民幣版權(quán)注冊(cè)商標(biāo)攝氏度正負(fù)號(hào)乘號(hào)除號(hào)平方2（上標(biāo)2）立方3（上標(biāo)3）圖像標(biāo)記041.4 圖像標(biāo)記1. 常用圖像格式了解網(wǎng)頁(yè)中常用的圖像格式，能夠選擇合適的

18、圖像格式應(yīng)用于網(wǎng)頁(yè)上。學(xué)習(xí)目標(biāo)1.4 圖像標(biāo)記1. 常用圖像格式GIFPNGJPGGIF最突出的地方就是它支持動(dòng)畫(huà)，同時(shí)GIF也是一種無(wú)損的圖像格式，也就是說(shuō)修改圖片之后，圖片質(zhì)量幾乎沒(méi)有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。1.4 圖像標(biāo)記1. 常用圖像格式GIFPNGJPGPNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對(duì)于GIF，PNG最大的優(yōu)勢(shì)是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過(guò)渡更平滑，但PNG不支持動(dòng)畫(huà)。IE6是可以支持PNG-8，但

19、在處理PNG-24的透明時(shí)會(huì)顯示灰色。1.4 圖像標(biāo)記1. 常用圖像格式GIFPNGJPGJPG所能顯示的顏色比GIF和PNG要多的多，可以用來(lái)保存超過(guò)256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。小圖片考慮GIF或PNG-8，半透明圖像考慮PNG-24，類(lèi)似照片的圖像則考慮JPG。1.4 圖像標(biāo)記2. 圖像標(biāo)記掌握?qǐng)D像標(biāo)記，能夠?qū)懗鰣D像標(biāo)記的基本語(yǔ)法格式。熟悉圖像標(biāo)記的相關(guān)屬性，能夠知道不同屬性的作用。學(xué)習(xí)目標(biāo)1.4 圖像標(biāo)記2. 圖像標(biāo)記瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到精美的圖片在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)記1.4 圖像標(biāo)記2. 圖像標(biāo)

20、記src屬性用于指定圖像文件的路徑和文件名圖像標(biāo)記的基本語(yǔ)法格式屬性屬性值描述srcURL圖像的路徑alt文本圖像不能顯示時(shí)的替換文本title文本鼠標(biāo)懸停時(shí)顯示的內(nèi)容width像素（XHTML不支持%頁(yè)面百分比）設(shè)置圖像的寬度height像素（XHTML不支持%頁(yè)面百分比）設(shè)置圖像的高度border數(shù)字設(shè)置圖像邊框的寬度vspace像素設(shè)置圖像頂部和底部的空白（垂直邊距）1.4 圖像標(biāo)記2. 圖像標(biāo)記src屬性用于指定圖像文件的路徑和文件名圖像標(biāo)記的基本語(yǔ)法格式屬性屬性值描述hspace像素設(shè)置圖像左側(cè)和右側(cè)的空白（水平邊距）alignleft將圖像對(duì)齊到左邊right將圖像對(duì)齊到右邊top

21、將圖像的頂端和文本的第一行文字對(duì)齊，其他文字居圖像下方middle將圖像的水平中線(xiàn)和文本的第一行文字對(duì)齊，其他文字居圖像下方bottom將圖像的底部和文本的第一行文字對(duì)齊，其他文字居圖像下方1.4 圖像標(biāo)記2. 圖像標(biāo)記widthheight用來(lái)定義圖片的寬度和高度，通常我們只設(shè)置其中的一個(gè)，另一個(gè)會(huì)按原圖等比例顯示。border為圖像添加邊框、設(shè)置邊框的寬度。但邊框顏色的調(diào)整僅僅通過(guò)HTML屬性是不能夠?qū)崿F(xiàn)的。alt圖像的替換文本屬性，在圖像無(wú)法顯示時(shí)告訴用戶(hù)該圖片的內(nèi)容。1.4 圖像標(biāo)記2. 圖像標(biāo)記vspacehspaceHTML中通過(guò)vspace和hspace屬性可以分別調(diào)整圖像的垂直

22、邊距和水平邊距。align圖像的對(duì)齊屬性align。用于調(diào)整圖像的位置多學(xué)一招使用title屬性設(shè)置提示文字圖像標(biāo)記中的屬性title可以用于設(shè)置鼠標(biāo)懸停時(shí)圖像的提示文字。多學(xué)一招:例如：1.4 圖像標(biāo)記3. 絕對(duì)路徑和相對(duì)路徑掌握絕對(duì)路徑和相對(duì)路徑的設(shè)置方法，能夠?yàn)榫W(wǎng)頁(yè)上的文件設(shè)置路徑。學(xué)習(xí)目標(biāo)1.4 圖像標(biāo)記什么是路徑？3. 絕對(duì)路徑和相對(duì)路徑1.4 圖像標(biāo)記實(shí)際工作中，通常新建一個(gè)文件夾專(zhuān)門(mén)用于存放圖像文件。路徑在使用計(jì)算機(jī)查找需要的文件時(shí)，需要知道文件的位置，而表示文件位置的方式就是路徑。圖像文件文件夾3. 絕對(duì)路徑和相對(duì)路徑1.4 圖像標(biāo)記相對(duì)路徑絕對(duì)路徑相對(duì)路徑不帶有盤(pán)符，通常是以

23、HTML網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述目標(biāo)圖像的位置。絕對(duì)路徑一般是指帶有盤(pán)符的路徑，例如完整的網(wǎng)絡(luò)地址 “/images/logo.gif”。3. 絕對(duì)路徑和相對(duì)路徑1.4 圖像標(biāo)記相對(duì)路徑設(shè)置分類(lèi)1圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱(chēng)即可，如。2圖像文件位于html文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用“/”隔開(kāi)，如。3圖像文件位于html文件的上一級(jí)文件夾：在文件名之前加入“./” ，如果是上兩級(jí)，則需要使用 “./ ./”，以此類(lèi)推，如。3. 絕對(duì)路徑和相對(duì)路徑超鏈接標(biāo)記051.5 超鏈接標(biāo)記一個(gè)網(wǎng)站通常由多個(gè)頁(yè)面構(gòu)成，以傳智播客官網(wǎng)為例，登錄傳智播

24、客官網(wǎng)時(shí)，首先看到的是其首頁(yè)，當(dāng)點(diǎn)擊導(dǎo)航欄中的“網(wǎng)頁(yè)平面”時(shí)，會(huì)跳轉(zhuǎn)到“網(wǎng)頁(yè)平面設(shè)計(jì)學(xué)院”頁(yè)面，這是因?yàn)閷?dǎo)航欄中的“網(wǎng)頁(yè)平面”添加了超鏈接功能。本節(jié)將對(duì)超鏈接標(biāo)記進(jìn)行詳細(xì)地講解。1.5 超鏈接標(biāo)記1. 創(chuàng)建超鏈接掌握創(chuàng)建超鏈接的方法，能夠在網(wǎng)頁(yè)中創(chuàng)建超鏈接。學(xué)習(xí)目標(biāo)1.5 超鏈接標(biāo)記1. 創(chuàng)建超鏈接在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)記環(huán)繞需要被鏈接的對(duì)象即可。 文本或圖像1.5 超鏈接標(biāo)記1. 創(chuàng)建超鏈接在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)記環(huán)繞需要被鏈接的對(duì)象即可。對(duì)超鏈接標(biāo)記的常用屬性解釋?zhuān)篽ref用于指定鏈接目標(biāo)的url地址，當(dāng)為標(biāo)記應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。

25、target用于指定鏈接頁(yè)面的打開(kāi)方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，意為在原窗口中打開(kāi)，_blank為在新窗口中打開(kāi)。1.5 超鏈接標(biāo)記2. 錨點(diǎn)鏈接掌握創(chuàng)建錨點(diǎn)鏈接的步驟，能夠在頁(yè)面中創(chuàng)建錨點(diǎn)鏈接。學(xué)習(xí)目標(biāo)1.5 超鏈接標(biāo)記2. 錨點(diǎn)鏈接如果網(wǎng)頁(yè)內(nèi)容較多，頁(yè)面過(guò)長(zhǎng)。瀏覽網(wǎng)頁(yè)時(shí)就需要不斷地拖動(dòng)滾動(dòng)條，來(lái)查看所需要的內(nèi)容。效率較低不方便1.5 超鏈接標(biāo)記2. 錨點(diǎn)鏈接為了提高信息的檢索速度HTML語(yǔ)言提供了一種特殊的鏈接錨點(diǎn)鏈接，通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶(hù)能夠快速定位到目標(biāo)內(nèi)容。1.5 超鏈接標(biāo)記2. 錨點(diǎn)鏈接步驟1步驟2使用“鏈接文本”創(chuàng)建鏈接文本1.5 超鏈接標(biāo)

26、記2. 錨點(diǎn)鏈接步驟1使用“鏈接文本”創(chuàng)建鏈接文本步驟2使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置階段案例制作HTML5百科頁(yè)面061.6 階段案例制作HTML5百科頁(yè)面1.6.1 分析效果圖 21 3使用標(biāo)記嵌套標(biāo)記布局，使用標(biāo)記插入圖像，并通過(guò)標(biāo)記設(shè)置超鏈接。首頁(yè)面效果分析使用標(biāo)記設(shè)置標(biāo)題，標(biāo)記設(shè)置段落，標(biāo)記加粗文本。使用水平線(xiàn)標(biāo)記將標(biāo)題與內(nèi)容隔開(kāi)，并設(shè)置水平線(xiàn)的粗細(xì)及顏色。page01頁(yè)面效果分析使用標(biāo)記設(shè)置標(biāo)題，標(biāo)記插入圖像。另外，圖片需要應(yīng)用align屬性和hspace屬性設(shè)置對(duì)齊方式和垂直距離，并通過(guò)標(biāo)記設(shè)置超鏈接。page02頁(yè)面效果分析效果圖1.6 階段案例制作HTML5百科頁(yè)面1.6

27、.2 制作頁(yè)面1.6 階段案例制作HTML5百科頁(yè)面1.6.3 制作頁(yè)面鏈接制作首頁(yè)面鏈接刷新首頁(yè)面，當(dāng)點(diǎn)擊頁(yè)面中的圖片時(shí)，頁(yè)面將跳轉(zhuǎn)到page01.html頁(yè)面。制作page01頁(yè)面鏈接刷新page01.html頁(yè)面，當(dāng)點(diǎn)擊page01頁(yè)面中的“返回”按鈕時(shí)，頁(yè)面將返回到首頁(yè)面；點(diǎn)擊 “下一頁(yè)”按鈕時(shí)，頁(yè)面將跳轉(zhuǎn)到page02.html頁(yè)面。制作page02頁(yè)面鏈接刷新page02.html頁(yè)面，當(dāng)點(diǎn)擊page02頁(yè)面中的“上一頁(yè)”按鈕時(shí)，頁(yè)面將跳轉(zhuǎn)到page01.html頁(yè)面；點(diǎn)擊“返回”按鈕時(shí)，頁(yè)面將返回到首頁(yè)面。本章小結(jié) 本章首先概述了HTML5的發(fā)展情況，然后介紹了HTML5文檔的基

28、本格式及語(yǔ)法、標(biāo)記及屬性。最后，講解了文本、圖像及超鏈接相關(guān)標(biāo)記及屬性，并且制作了一個(gè)HTML5百科頁(yè)面。 通過(guò)本章的學(xué)習(xí)，讀者應(yīng)該能夠了解HTML5文檔的基本結(jié)構(gòu)，熟練運(yùn)用文本、圖像及超鏈接標(biāo)記，理解HTML屬性控制文本和圖像的方法。熟練掌握好這些知識(shí)，可以為后面章節(jié)的學(xué)習(xí)打下基礎(chǔ)。本章小結(jié)第2章 HTML5頁(yè)面元素及屬性HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第2版）學(xué)習(xí)目標(biāo)/Target掌握結(jié)構(gòu)元素的使用，可以使頁(yè)面分區(qū)更明確理解分組元素的使用，能夠建立簡(jiǎn)單的標(biāo)題組。掌握頁(yè)面交互元素的使用，能夠?qū)崿F(xiàn)簡(jiǎn)單的交互效果。理解文本層次語(yǔ)義元素，能夠在頁(yè)面中突出所標(biāo)記的文本內(nèi)容。掌握全局屬性的應(yīng)用，

29、能夠使頁(yè)面元素實(shí)現(xiàn)相應(yīng)的操作。章節(jié)概述/ SummaryHTML5中引入了很多新的標(biāo)記元素和屬性，這是HTML5的一大亮點(diǎn)，這些新增元素使文檔結(jié)構(gòu)更加清晰明確，屬性則使標(biāo)記的功能更加強(qiáng)大，掌握這些元素和屬性是正確使用HTML5構(gòu)建網(wǎng)頁(yè)的基礎(chǔ)。本章將HTML5中的新增元素分為結(jié)構(gòu)元素、分組元素、頁(yè)面交互元素和文本層次語(yǔ)義元素，除了介紹這些元素外，還會(huì)介紹HTML5中常用的幾種標(biāo)準(zhǔn)屬性。目錄/Contents010203列表元素結(jié)構(gòu)元素分組元素04頁(yè)面交互元素目錄/Contents0506文本層次語(yǔ)義元素全局屬性07階段案例制作電影影評(píng)網(wǎng)列表元素01章節(jié)概述HTML5中引入了很多新的標(biāo)記元素和屬性

30、，這是HTML5的一大亮點(diǎn)，這些新增元素使文檔結(jié)構(gòu)更加清晰明確，屬性則使標(biāo)記的功能更加強(qiáng)大，掌握這些元素和屬性是正確使用HTML5構(gòu)建網(wǎng)頁(yè)的基礎(chǔ)。本章將HTML5中的新增元素分為結(jié)構(gòu)元素、分組元素、頁(yè)面交互元素和文本層次語(yǔ)義元素，除了介紹這些元素外，還會(huì)介紹HTML5中常用的幾種標(biāo)準(zhǔn)屬性。2.1 列表元素為了使網(wǎng)頁(yè)更易讀，經(jīng)常將網(wǎng)頁(yè)信息以列表的形式呈現(xiàn)，例如，淘寶商城首頁(yè)的商品服務(wù)分類(lèi)，排列有序、條理清晰，呈現(xiàn)為列表的形式。為了滿(mǎn)足網(wǎng)頁(yè)排版的需求，HTML語(yǔ)言提供了3種常用的列表元素，分別為ul元素（無(wú)序列表）、ol元素（有序列表）和dl元素（定義列表），本節(jié)將對(duì)這3種元素進(jìn)行詳細(xì)講解。2.1

31、 列表元素1.ul元素了解無(wú)序列表的概念，能夠說(shuō)出無(wú)序列表的特點(diǎn)。掌握無(wú)序列表的基本語(yǔ)法格式，能夠在網(wǎng)頁(yè)中定義無(wú)序列表。學(xué)習(xí)目標(biāo)2.1 列表元素1. ul元素?zé)o序列表是網(wǎng)頁(yè)中最常用的列表，之所以稱(chēng)為“無(wú)序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，通常是并列的。無(wú)序列表傳智播客官網(wǎng)的導(dǎo)航欄結(jié)構(gòu)清晰，各項(xiàng)之間（如“網(wǎng)頁(yè)平面”與“java培訓(xùn)”）排序不分先后，這個(gè)導(dǎo)航欄就可以看做一個(gè)無(wú)序列表。2.1 列表元素1. ul元素?zé)o序列表無(wú)序列表是網(wǎng)頁(yè)中最常用的列表，之所以稱(chēng)為“無(wú)序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，通常是并列的。 列表項(xiàng)1 列表項(xiàng)2 列表項(xiàng)3標(biāo)記用于定義無(wú)序列表標(biāo)記用于

32、描述具體的列表項(xiàng)每對(duì)中至少應(yīng)包含一對(duì)。2.1 列表元素1. ul元素注意：1.在HTML5中不再支持該元素的type屬性。2.與之間相當(dāng)于一個(gè)容器，可以容納所有的元素。但是中只能嵌套，直接在標(biāo)記中輸入文字的做法是不被允許的。無(wú)序列表2.1 列表元素2. ol元素了解有序列表的概念，能夠說(shuō)出有序列表的特點(diǎn)。掌握有序列表的基本語(yǔ)法格式，能夠在網(wǎng)頁(yè)中定義有序列表。學(xué)習(xí)目標(biāo)2.1 列表元素2. ol元素有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列，例如網(wǎng)頁(yè)中常見(jiàn)的歌曲排行榜、游戲排行榜等都可以通過(guò)有序列表來(lái)定義。有序列表有序列表即為有排列順序的列表。網(wǎng)頁(yè)中常見(jiàn)的歌曲排行榜、游戲排行榜等

33、都可以通過(guò)有序列表來(lái)定義。2.1 列表元素2.ol元素有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列，例如網(wǎng)頁(yè)中常見(jiàn)的歌曲排行榜、游戲排行榜等都可以通過(guò)有序列表來(lái)定義。 列表項(xiàng)1 列表項(xiàng)2 列表項(xiàng)3標(biāo)記用于定義有序列表標(biāo)記用于描述具體的列表項(xiàng)每對(duì)中至少應(yīng)包含一對(duì)。有序列表2.1 列表元素3.dl元素了解定義列表的概念，能夠說(shuō)出定義列表的特點(diǎn)。掌握定義列表的基本語(yǔ)法格式，能夠在網(wǎng)頁(yè)中定義定義列表。學(xué)習(xí)目標(biāo)2.1 列表元素3.dl元素定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，與無(wú)序和有序列表不同，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。定義列表標(biāo)記標(biāo)記定義列表常用于圖文混排，其中標(biāo)記中插

34、入圖片，標(biāo)記中放入對(duì)圖片解釋說(shuō)明的文字。2.1 列表元素3.dl元素 名詞1 名詞1解釋1 名詞1解釋2 . 名詞2 名詞2解釋1 名詞2解釋2 .標(biāo)記用于指定定義列表標(biāo)記用于指定術(shù)語(yǔ)名詞標(biāo)記用于對(duì)名詞進(jìn)行解釋和描述定義列表2.1 列表元素4.列表的嵌套應(yīng)用掌握列表的嵌套應(yīng)用，能夠在列表項(xiàng)中定義子列表項(xiàng)。學(xué)習(xí)目標(biāo)2.1 列表元素4.列表的嵌套應(yīng)用什么是列表的嵌套？2.1 列表元素4.列表的嵌套應(yīng)用商品分類(lèi)子分類(lèi)【結(jié)論】在網(wǎng)上購(gòu)物商城中瀏覽商品時(shí)，經(jīng)常會(huì)看到某一類(lèi)商品被分為若干小類(lèi)，這些小類(lèi)通常還包含若干的子類(lèi)。結(jié)構(gòu)元素022.2 結(jié)構(gòu)元素HTML5中所有的元素都是有結(jié)構(gòu)性的，且這些元素的作用與

35、塊元素非常相似。本節(jié)將介紹常用的結(jié)構(gòu)元素來(lái)幫助讀者進(jìn)一步了解HTML5，包括header元素、nav元素、article元素等。2.2 結(jié)構(gòu)元素1.header元素熟悉header元素，能夠描述header元素的作用。掌握header元素使用方法，能夠?qū)懗鰄eader元素的基本語(yǔ)法格式。學(xué)習(xí)目標(biāo)2.2 結(jié)構(gòu)元素1.header元素HTML5中的header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，該元素可以包含所有通常放在頁(yè)面頭部的內(nèi)容。 網(wǎng)頁(yè)主題.注意：header元素并非head元素。在HTML網(wǎng)頁(yè)中，并不限制header元素的個(gè)數(shù)，一個(gè)網(wǎng)頁(yè)中可以使用多個(gè)header元素，也可以為每一個(gè)內(nèi)容

36、塊添加header元素。2.2 結(jié)構(gòu)元素2.nav元素熟悉nav元素，能夠描述nav元素的作用。掌握nav元素的使用方法，能夠?qū)懗鰊av元素的基本語(yǔ)法格式。學(xué)習(xí)目標(biāo)2.2 結(jié)構(gòu)元素2.nav元素nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。 首頁(yè) 公司概況 產(chǎn)品展示 聯(lián)系我們 2.2 結(jié)構(gòu)元素2.nav元素傳統(tǒng)導(dǎo)航條側(cè)邊欄導(dǎo)航頁(yè)內(nèi)導(dǎo)航翻頁(yè)操作nav元素的應(yīng)用2.2 結(jié)構(gòu)元素3.article元素熟悉article元素，能夠描述article元素的作用。掌握article元素的使用方法，能夠獨(dú)立定義一片日志或一條新聞

37、。學(xué)習(xí)目標(biāo)2.2 結(jié)構(gòu)元素3.article元素article元素代表文檔、頁(yè)面或者應(yīng)用程序中與上下文不相關(guān)的獨(dú)立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶(hù)評(píng)論等。2.2 結(jié)構(gòu)元素4.aside元素熟悉aside元素，能夠描述aside元素的作用。掌握aside元素的用法，能夠?yàn)槲恼绿砑痈綄傩畔?。學(xué)習(xí)目標(biāo)2.2 結(jié)構(gòu)元素4.aside元素aside元素用來(lái)定義當(dāng)前頁(yè)面或者文章的附屬信息部分，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等其他類(lèi)似的有別于主要內(nèi)容的部分。被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息。用法1aside元素的用法:在article元素之

38、外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分。用法22.2 結(jié)構(gòu)元素5.section元素熟悉section元素，能夠描述section元素的作用。了解section元素的注意事項(xiàng)，能夠舉例說(shuō)明section元素的注意事項(xiàng)有哪些。學(xué)習(xí)目標(biāo)2.2 結(jié)構(gòu)元素5.section元素section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。使用aside元素的注意事項(xiàng):213不要將section元素用作設(shè)置樣式的頁(yè)面容器，那是div的特性。如果article元素、aside元素或nav元素更符合使用條件，那么不要使用section元素。沒(méi)有標(biāo)題的內(nèi)容區(qū)塊不要

39、使用section元素定義。2.2 結(jié)構(gòu)元素6.footer元素熟悉footer元素，能夠說(shuō)出footer元素的作用。掌握f(shuō)ooter元素的使用方法，能夠獨(dú)立定義頁(yè)面底部。學(xué)習(xí)目標(biāo)文章內(nèi)容文章分頁(yè)列表頁(yè)面底部2.2 結(jié)構(gòu)元素6.footer元素footer元素用于定義一個(gè)頁(yè)面或者區(qū)域的底部，它可以包含所有通常放在頁(yè)面底部的內(nèi)容。例如：分組元素032.3 分組元素分組元素用于對(duì)頁(yè)面中的內(nèi)容進(jìn)行分組。HTML5中涉及到3個(gè)與分組有關(guān)的元素，分別是figure元素、figcaption元素和hgroup元素。本節(jié)將對(duì)它們進(jìn)行詳細(xì)講解。2.3 分組元素1. figure和figcaption元素熟悉f

40、igure和figcaption元素，能夠分別說(shuō)出這兩個(gè)元素的作用。掌握f(shuō)igure和figcaption元素的使用方法，能夠定義獨(dú)立的流內(nèi)容。學(xué)習(xí)目標(biāo)2.3 分組元素1. figure和figcaption元素figure元素用于定義獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等），一般指一個(gè)單獨(dú)的單元。figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不會(huì)對(duì)文檔流產(chǎn)生影響。figcaption元素用于為figure元素組添加標(biāo)題，一個(gè)figure元素內(nèi)最多允許使用一個(gè)figcaption元素，該元素應(yīng)該放在figure元素的第一個(gè)或者最后一個(gè)子元素的位置。2.3 分組元素2. hgroup

41、元素熟悉hgroup元素，能夠說(shuō)出hgroup元素的作用。熟悉hgroup元素的注意事項(xiàng)，能夠說(shuō)出在使用hgroup元素時(shí)需要注意的問(wèn)題。學(xué)習(xí)目標(biāo)2.3 分組元素2. hgroup元素hgroup元素用于將多個(gè)標(biāo)題（主標(biāo)題和副標(biāo)題或者子標(biāo)題）組成一個(gè)標(biāo)題組，通常它與h1h6元素組合使用。通常，將hgroup元素放在header元素中。使用hgroup元素的注意事項(xiàng):213如果只有一個(gè)標(biāo)題元素不建議使用hgroup元素。當(dāng)出現(xiàn)一個(gè)或者一個(gè)以上的標(biāo)題與元素時(shí)，推薦使用hgroup元素作為標(biāo)題元素。當(dāng)一個(gè)標(biāo)題包含副標(biāo)題、section或者article元素時(shí)，建議將hgroup元素和標(biāo)題相關(guān)元素存放

42、到header元素容器中。頁(yè)面交互元素042.4 頁(yè)面交互元素HTML5是一些獨(dú)立特性的集合，它不僅增加了許多Web頁(yè)面特性，而且本身也是一個(gè)應(yīng)用程序。對(duì)于應(yīng)用程序而言，表現(xiàn)最為突出的就是交互操作。HTML5為操作新增加了對(duì)應(yīng)的交互體驗(yàn)元素，在本節(jié)將詳細(xì)介紹這些元素。2.4 頁(yè)面交互元素1. details和summary元素熟悉details和summary元素，能夠分別說(shuō)出details和summary元素的作用和用法。學(xué)習(xí)目標(biāo)2.4 頁(yè)面交互元素1. details和summary元素details元素用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。summary元素經(jīng)常與details 元素配合使用

43、，作為details 元素的第一個(gè)子元素，用于為details定義標(biāo)題。標(biāo)題是可見(jiàn)的，當(dāng)用戶(hù)點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示或隱藏details中的其他內(nèi)容。2.4 頁(yè)面交互元素2.progress元素熟悉progress元素，能夠說(shuō)出progress元素的作用。掌握progress元素的常用屬性值，能夠區(qū)分不同屬性值的含義。學(xué)習(xí)目標(biāo)2.4 頁(yè)面交互元素2.progress元素progress元素用于定義一個(gè)正在完成的進(jìn)度條，這個(gè)進(jìn)度可以是不確定的，只是表示進(jìn)度正在進(jìn)行，但是不清楚還有多少工作量沒(méi)有完成。 progress元素常用屬性值value：已經(jīng)完成的工作量。max：總共有多少工作量。2.4 頁(yè)面交互

44、元素3. meter元素熟悉meter元素，能夠說(shuō)出meter元素的作用。掌握meter元素的常用屬性，能夠區(qū)分不同的屬性所代表的含義。學(xué)習(xí)目標(biāo)2.4 頁(yè)面交互元素3. meter元素meter元素用于表示指定范圍內(nèi)的數(shù)值。屬性說(shuō)明high定義度量的值位于哪個(gè)點(diǎn)被界定為高的值。low定義度量的值位于哪個(gè)點(diǎn)被界定為低的值。max定義最大值，默認(rèn)值是 1。min定義最小值，默認(rèn)值是 0。optimum定義什么樣的度量值是最佳的值。如果該值高于 high屬性，則意味著值越高越好。如果該值低于low屬性的值，則意味著值越低越好。value定義度量的值。文本層次語(yǔ)義元素052.5 頁(yè)面交互元素為了使HT

45、ML頁(yè)面中的文本內(nèi)容更加形象生動(dòng)，需要使用一些特殊的元素來(lái)突出文本之間的層次關(guān)系，這樣的元素被稱(chēng)為層次語(yǔ)義元素。文本層次語(yǔ)義元素主要包括time元素、mark元素和cite元素，本節(jié)將詳細(xì)介紹這些元素。2.5 頁(yè)面交互元素1. time元素了解time元素，能夠說(shuō)出time元素的作用。掌握time元素的屬性，能夠區(qū)分兩個(gè)不同屬性所代表的含義。學(xué)習(xí)目標(biāo)2.5 頁(yè)面交互元素1. time元素time元素用于定義時(shí)間或日期，可以代表24小時(shí)中的某一時(shí)間。time元素不會(huì)在瀏覽器中呈現(xiàn)任何特殊效果，但是該元素以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼。這樣，用戶(hù)能夠?qū)⑸仗嵝鸦蚱渌录砑拥饺粘瘫碇校阉饕?/p>

46、擎也能夠生成更智能的搜索結(jié)果。time元素常用屬性值datetime：用于定義相應(yīng)的時(shí)間或日期。pubdate：用于定義time元素中的日期/時(shí)間是文檔（或article元素）的發(fā)布日期。2.5 頁(yè)面交互元素2. mark元素了解mark元素，能夠說(shuō)出mark元素的作用。掌握mark元素的用法，能夠高亮顯示文本中的字符。學(xué)習(xí)目標(biāo)2.5 頁(yè)面交互元素2. mark元素mark元素的主要功能是在文本中高亮顯示某些字符，以引起用戶(hù)注意。該元素的用法與em和strong有相似之處，但是使用mark元素在突出顯示樣式時(shí)更隨意靈活。2.5 頁(yè)面交互元素3.cite元素了解cite元素，能夠說(shuō)出cite元素

47、的作用。掌握cite元素的用法，能夠?qū)ξ臋n進(jìn)行引用說(shuō)明。學(xué)習(xí)目標(biāo)2.5 頁(yè)面交互元素3.cite元素cite元素可以創(chuàng)建一個(gè)引用標(biāo)記，用于對(duì)文檔參考文獻(xiàn)的引用說(shuō)明，一旦在文檔中使用了該標(biāo)記，被標(biāo)記的文檔內(nèi)容將以斜體的樣式展示在頁(yè)面中，以區(qū)別于段落中的其他字符。全局屬性062.6 全局屬性全局屬性是指在任何元素中都可以使用的屬性，在HTML5中常用的的全局屬性有draggable、hidden、spellcheck和contenteditable，本節(jié)將對(duì)它們進(jìn)行具體講解。2.6 全局屬性了解hidden屬性，能夠隱藏或顯示元素。掌握spellcheck屬性的用法，能夠?qū)τ脩?hù)輸入的文本內(nèi)容進(jìn)行拼

48、寫(xiě)和語(yǔ)法檢查。掌握contenteditable屬性的用法，能夠設(shè)置元素內(nèi)容的可編輯性。學(xué)習(xí)目標(biāo)2.6 全局屬性1. draggable屬性draggable屬性用來(lái)定義元素是否可以拖動(dòng)，該屬性有兩個(gè)值：true和false，默認(rèn)為false，當(dāng)值為true時(shí)表示元素選中之后可以進(jìn)行拖動(dòng)操作，否則不能拖動(dòng)。注意：本案例在網(wǎng)頁(yè)中所實(shí)現(xiàn)的效果并不能拖動(dòng)，如果要想真正實(shí)現(xiàn)拖動(dòng)功能，必須與JavaScript結(jié)合使用。2.6 全局屬性2.hidden屬性在HTML5中，大多數(shù)元素都支持hidden屬性。truefalse元素被隱藏元素被顯示元素中的內(nèi)容是通過(guò)瀏覽器創(chuàng)建的，頁(yè)面裝載后允許使用JavaSc

49、ript腳本將該屬性取消，取消后該元素變?yōu)榭梢?jiàn)狀態(tài)，同時(shí)元素中的內(nèi)容也及時(shí)顯示出來(lái)。2.6 全局屬性3. spellcheck屬性 spellcheck屬性主要針對(duì)于input元素和textarea文本輸入框，對(duì)用戶(hù)輸入的文本內(nèi)容進(jìn)行拼寫(xiě)和語(yǔ)法檢查。spellcheck屬性有兩個(gè)值：true（默認(rèn)值）和false，值為true時(shí)檢測(cè)輸入框中的值，反之不檢測(cè)。2.6 全局屬性4. contenteditable屬性contenteditable屬性規(guī)定是否可編輯元素的內(nèi)容，但是前提是該元素必須可以獲得鼠標(biāo)焦點(diǎn)并且其內(nèi)容不是只讀的。階段案例制作電影影評(píng)網(wǎng)072.7 階段案例制作電影影評(píng)網(wǎng)2.7.1

50、 分析效果圖2.7 階段案例制作電影影評(píng)網(wǎng)制作頭部信息在網(wǎng)頁(yè)結(jié)構(gòu)代碼中添加header模塊的結(jié)構(gòu)代碼。2.7.2 制作頁(yè)面2.7 階段案例制作電影影評(píng)網(wǎng)制作導(dǎo)航鏈接在網(wǎng)頁(yè)結(jié)構(gòu)代碼中添加nav模塊的結(jié)構(gòu)代碼。2.7.2 制作頁(yè)面2.7 階段案例制作電影影評(píng)網(wǎng) 制作文章內(nèi)容鏈接在網(wǎng)頁(yè)結(jié)構(gòu)代碼中添加article模塊的結(jié)構(gòu)代碼。2.7.2 制作頁(yè)面本章小結(jié)本章從頁(yè)面結(jié)構(gòu)元素開(kāi)始介紹，然后針對(duì)分組元素、頁(yè)面交互元素、文本層次語(yǔ)義元素等HTML5中的重要元素分別進(jìn)行了講解，而且針對(duì)每個(gè)元素設(shè)置實(shí)例。除了介紹HTML5中的相關(guān)元素外，本章還對(duì)HTML5中的全局屬性做了詳細(xì)介紹。最后通過(guò)階段案例剖析HTML

51、5元素的實(shí)際應(yīng)用。HTML5中的相關(guān)元素還有很多，在后面的章節(jié)中將會(huì)做進(jìn)一步介紹。希望通過(guò)本章的學(xué)習(xí)，讀者能夠加深對(duì)各元素的理解，為后面章節(jié)的學(xué)習(xí)打下扎實(shí)的基礎(chǔ)。本章小結(jié)第3章 CSS3入門(mén)HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第2版）學(xué)習(xí)目標(biāo)/Target了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器定義標(biāo)記樣式。熟悉CSS文本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式。理解CSS優(yōu)先級(jí)，能夠區(qū)分復(fù)合選擇器權(quán)重的大小。章節(jié)概述/ Summary隨著網(wǎng)頁(yè)制作技術(shù)的不斷發(fā)展，陳舊的CSS特性和標(biāo)準(zhǔn)已經(jīng)無(wú)法滿(mǎn)足現(xiàn)今的交互設(shè)計(jì)需求，開(kāi)發(fā)者往往需要更多的字體選

52、擇、更方便的樣式效果、更絢麗的圖形動(dòng)畫(huà)。CSS3的出現(xiàn)，在不需要改變?cè)性O(shè)計(jì)結(jié)構(gòu)的情況下，增加了許多新特性，極大地滿(mǎn)足了開(kāi)發(fā)者的需求。本章將對(duì)CSS3的發(fā)展史、瀏覽器的支持情況以及相關(guān)文本樣式屬性進(jìn)行詳細(xì)講解。目錄/Contents0102CSS3簡(jiǎn)介CSS核心基礎(chǔ)03文本樣式屬性04CSS高級(jí)特性05階段案例制作服裝推廣軟文CSS3簡(jiǎn)介013.1 CSS3簡(jiǎn)介在網(wǎng)頁(yè)設(shè)計(jì)中，運(yùn)用CSS3技術(shù)能夠讓原有的網(wǎng)站變得趣味盎然，很多站點(diǎn)都為自己的頁(yè)面添加了各種炫酷的CSS3效果。但是CSS3技術(shù)是怎樣發(fā)展起來(lái)的？哪些瀏覽器能夠很好的兼容CSS3？本節(jié)將對(duì)CSS的發(fā)展史及瀏覽器兼容情況進(jìn)行介紹。3.1

53、CSS3簡(jiǎn)介了解CSS3，能夠說(shuō)出CSS的概念、CSS3的發(fā)展歷史和CSS3瀏覽器支持情況。學(xué)習(xí)目標(biāo)3.1 CSS3簡(jiǎn)介1. CSS概述使用HTML對(duì)網(wǎng)頁(yè)進(jìn)行修飾，存在很大的局限和不足維護(hù)困難不利于代碼的閱讀3.1 CSS3簡(jiǎn)介1. CSS概述該如何解決這些問(wèn)題呢？3.1 CSS3簡(jiǎn)介1. CSS概述如果希望網(wǎng)頁(yè)美觀、大方，并且升級(jí)輕松、維護(hù)方便，就需要使用CSS，實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。3.1 CSS3簡(jiǎn)介1. CSS概述認(rèn)識(shí)CSS樣式CSS提供了豐富的樣式font:屬性值;字體屬性color:屬性值;顏色屬性float:屬性值;浮動(dòng)屬性background:屬性值;背景屬性3.1 CSS3簡(jiǎn)

54、介1. CSS概述例如：圖中文字的顏色、粗體、背景、行間距和左右兩列的排版等，都是通過(guò)CSS控制的。3.1 CSS3簡(jiǎn)介1. CSS概述CSS非常靈活，既可以嵌入在HTML文檔中，也可以是一個(gè)單獨(dú)的外部文件，如果是獨(dú)立的文件，則必須以.css為后綴名。3.1 CSS3簡(jiǎn)介2. CSS發(fā)展史CSS21985年5月，CSS2正式推出，這個(gè)版本開(kāi)始使用樣式表結(jié)構(gòu)CSS11996年12月W3C發(fā)布了第一個(gè)有關(guān)樣式的標(biāo)準(zhǔn)CSS1。CSS2.12004年2月，CSS2.1正Z式推出。CSS3早在2001年，W3C就著手開(kāi)始準(zhǔn)備開(kāi)發(fā)CSS第三版規(guī)范。雖然完整的、規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒(méi)有塵埃落定。但是各主

55、流瀏覽器已經(jīng)開(kāi)始支持其中的絕大部分特性。3.1 CSS3簡(jiǎn)介3.CSS3瀏覽器支持情況CSS3模塊Chrome4Safari4Firefox3.6Opera10.5IE10RGBAHSLAMultiple BackgroundBorder ImageBorder RadiusBox ShadowOpacityCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS Transforms CSS Transforms 3DCSS TransitionsCSS FontFace3.1 CSS3簡(jiǎn)介3.CSS3瀏覽器支持情況由于各瀏覽器廠商對(duì)C

56、SS3各屬性的支持程度不一樣，因此在標(biāo)準(zhǔn)尚未明確的情況下，會(huì)用廠商的前綴加以區(qū)分，通常把這些加上私有前綴的屬性稱(chēng)之為“私有屬性”。各主流瀏覽器都定義了自己的私有屬性，以便讓用戶(hù)更好的體驗(yàn)CSS的新特性。內(nèi)核類(lèi)型相關(guān)瀏覽器私有前綴TridentIE8/ IE9/ IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o3.1 CSS3簡(jiǎn)介3.CSS3瀏覽器支持情況注意：1、運(yùn)用CSS3私有屬性時(shí)，要遵從一定的書(shū)寫(xiě)順序，即先寫(xiě)私有的CSS3屬性，再寫(xiě)標(biāo)準(zhǔn)的CSS3屬性。2、當(dāng)一個(gè)CSS3屬性成為標(biāo)準(zhǔn)屬性，并且被主流瀏

57、覽器的最新版普遍兼容的時(shí)候，就可以省略私有的CSS3屬性。CSS核心基礎(chǔ)023.2 CSS核心基礎(chǔ)1.CSS樣式規(guī)則掌握CSS樣式規(guī)則，能夠列舉代碼進(jìn)行演示。了解CSS代碼結(jié)構(gòu)的特點(diǎn)，能夠知道在書(shū)寫(xiě)CSS樣式時(shí)，需要注意的特點(diǎn)。學(xué)習(xí)目標(biāo)3.2 CSS核心基礎(chǔ)1.CSS樣式規(guī)則選擇器屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;CSS樣式規(guī)則在上面的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)，用英文“:”連接，多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。3.2 CSS核心基礎(chǔ)1.CSS樣式規(guī)則CSS代

58、碼結(jié)構(gòu)中的特點(diǎn)：12345CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫(xiě)，屬性和值不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般將“選擇器、屬性和值”都采用小寫(xiě)的方式。多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后一個(gè)屬性后的分號(hào)可以省略，但是為了便于增加新樣式最好保留。如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。在編寫(xiě)CSS代碼時(shí)，為了提高代碼的可讀性，通常會(huì)加上CSS注釋。在CSS代碼中空格是不被解析的，花括號(hào)以及分號(hào)前后的空格可有可無(wú)。3.2 CSS核心基礎(chǔ)2.引入CSS樣式表掌握行內(nèi)式，能夠?qū)懗鲂袃?nèi)式的語(yǔ)法格式。掌握內(nèi)嵌式，能夠?qū)懗鰞?nèi)嵌式的語(yǔ)法格式。掌握鏈入式，能夠?qū)懗鲂袃?nèi)式的

59、語(yǔ)法格式。學(xué)習(xí)目標(biāo)3.2 CSS核心基礎(chǔ)2.引入CSS樣式表引入CSS樣式表的方式有哪些？3.2 CSS核心基礎(chǔ)2.引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式 內(nèi)容 行內(nèi)式也稱(chēng)為內(nèi)聯(lián)樣式，是通過(guò)標(biāo)記的style屬性來(lái)設(shè)置元素的樣式。3.2 CSS核心基礎(chǔ)2.引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式選擇器 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;內(nèi)嵌式是將CSS代碼集中寫(xiě)在HTML文檔的頭部標(biāo)記中，并且用標(biāo)記定義。3.2 CSS核心基礎(chǔ)2.引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過(guò)標(biāo)記將外部樣式表文件鏈接到HTML文檔中。3

60、.2 CSS核心基礎(chǔ)什么是CSS選擇器？3.CSS基礎(chǔ)選擇器3.2 CSS核心基礎(chǔ)要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱(chēng)為選擇器。3.CSS基礎(chǔ)選擇器3.2 CSS核心基礎(chǔ)掌握標(biāo)記選擇器的使用方法，能夠?qū)懗鰳?biāo)記選擇器的的語(yǔ)法格式。學(xué)習(xí)目標(biāo)3.CSS基礎(chǔ)選擇器3.2 CSS核心基礎(chǔ)標(biāo)記選擇器是指用HTML標(biāo)記名稱(chēng)作為選擇器，按標(biāo)記名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)記指定統(tǒng)一的CSS樣式。標(biāo)記名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 標(biāo)記選擇器3.CSS基礎(chǔ)選擇器3.2 CSS核心基礎(chǔ)掌握類(lèi)選擇器的使用方法，能夠?qū)懗?/p>