《Web前端開發(fā)實(shí)例教程-HTML5+CSS3+JavaScript+jQuery（第2版）》全套教學(xué)課件

Web前端開發(fā)實(shí)例教程（第2版）——HTML5+CSS3+JavaScript+jQuery全套可編輯PPT課件第1章HTML5基礎(chǔ)第2章編輯網(wǎng)頁元素第3章網(wǎng)頁的布局與交互第4章CSS3基礎(chǔ)第5章CSS3的屬性第6章盒模型與頁面布局第7章JavaScript編程基礎(chǔ)第8章對(duì)象模型及事件處理第9章CSS3變形、過渡和動(dòng)畫屬性第10章HTML5的API應(yīng)用第11章jQuery基礎(chǔ)第12章jQuery動(dòng)畫與UI插件第13章鮮品園綜合案例網(wǎng)站第1章HTML5基礎(chǔ)目錄1.1Web的基本概念1.2網(wǎng)站與網(wǎng)頁1.3Web標(biāo)準(zhǔn)1.4認(rèn)識(shí)HTML5+CSS3+JavaScript技術(shù)組合1.5HTML5語法基礎(chǔ)1.6元素的分類1.7HTML的顏色表示和字符實(shí)體1.8編輯HTML文件1.9注釋1.10案例—制作鮮品園頁面摘要和版權(quán)信息1.1Web的基本概念1.1.1WWW1.1.2Browser1.1.3URL1.1.4HTML1.1.5HTTP1.1.1WWW WWW是WorldWideWeb的縮寫，又稱3W或Web，中文譯名為“萬維網(wǎng)”。WWW是Internet的最核心部分，它是Internet上支持WWW服務(wù)和HTTP的服務(wù)器集合。WWW在使用上分為Web客戶端和Web服務(wù)器。用戶可以使用Web客戶端（瀏覽器）訪問Web服務(wù)器上的頁面。1.1.2Browser Browser（瀏覽器）是在客戶端瀏覽Web服務(wù)端的應(yīng)用程序，其主要作用是顯示網(wǎng)頁和解釋腳本。瀏覽器種類很多，目前常用的有Google的Chrome、Microsoft的Edge、Mozilla的Firefox、Opera、Apple的Safari瀏覽器等。 瀏覽器最重要的核心部分是RenderingEngine（渲染引擎），一般稱為“瀏覽器內(nèi)核”，負(fù)責(zé)對(duì)網(wǎng)頁語法（如HTML、JavaScript）進(jìn)行解釋并渲染（顯示）網(wǎng)頁。1.1.3URL URL（UniversalResourceLocator）是“統(tǒng)一資源定位器”的縮寫，URL就是Web地址，俗稱“網(wǎng)址”。Internet上的每個(gè)網(wǎng)頁都具有唯一的名稱標(biāo)識(shí)，通常稱之為URL地址。這種地址可以是本地磁盤，也可以是局域網(wǎng)上的某一臺(tái)計(jì)算機(jī)，更多的是Internet上的站點(diǎn)。URL的基本結(jié)構(gòu)為：

通信協(xié)議：//服務(wù)器名稱[:通信端口編號(hào)]/文件夾1[/文件夾2…]/文件名1.1.4HTML 網(wǎng)頁是WWW的基本文件，它是用HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）編寫的。HTML嚴(yán)格來說并不是一種標(biāo)準(zhǔn)的編程語言，它只是一些能讓瀏覽器看懂的標(biāo)記。當(dāng)網(wǎng)頁中包含正常文本和HTML標(biāo)記時(shí)，瀏覽器會(huì)“翻譯”由這些HTML標(biāo)記提供的網(wǎng)頁結(jié)構(gòu)、外觀和內(nèi)容的信息，從而將網(wǎng)頁按設(shè)計(jì)者的要求顯示出來。1.1.5HTTP HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議，用于傳送WWW方式的數(shù)據(jù)。當(dāng)用戶想瀏覽一個(gè)網(wǎng)站時(shí)，只要在瀏覽器的地址欄里輸入網(wǎng)站的地址就可以了，如輸入，在瀏覽器的地址欄里面出現(xiàn)的卻是/。

1.2網(wǎng)站與網(wǎng)頁1.2.1網(wǎng)站、網(wǎng)頁和主頁1.2.2靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁1.2.1網(wǎng)站、網(wǎng)頁和主頁 網(wǎng)站（WebSite，也稱站點(diǎn)）被定義為已注冊(cè)的域名、主頁或Web服務(wù)器。網(wǎng)站由域名（也就是網(wǎng)站地址）和網(wǎng)站空間構(gòu)成。網(wǎng)站是一系列網(wǎng)頁的組合，通過瀏覽器，可以實(shí)現(xiàn)網(wǎng)頁的跳轉(zhuǎn)，從而瀏覽整個(gè)網(wǎng)站。 網(wǎng)頁（WebPage）是存放在Web服務(wù)器上供客戶端用戶瀏覽的文件，可以在Internet上傳輸。網(wǎng)頁是按照網(wǎng)頁文件規(guī)范編寫的一個(gè)或多個(gè)文件，這種格式的文件由超文本標(biāo)記語言創(chuàng)建。

1.2.2靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 1．靜態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁是指客戶端的瀏覽器發(fā)送URL請(qǐng)求給WWW服務(wù)器，服務(wù)器查找需要的超文本文件，不加處理直接下載到客戶端。靜態(tài)網(wǎng)頁通常由純粹的HTML/CSS語言編寫。 2．動(dòng)態(tài)網(wǎng)頁 采用動(dòng)態(tài)網(wǎng)站技術(shù)生成的網(wǎng)頁都稱為動(dòng)態(tài)網(wǎng)頁，其本質(zhì)主要體現(xiàn)在交互性方面。動(dòng)態(tài)網(wǎng)頁根據(jù)程序運(yùn)行的區(qū)域不同，分為客戶端動(dòng)態(tài)網(wǎng)頁與服務(wù)器端動(dòng)態(tài)網(wǎng)頁。 1.3Web標(biāo)準(zhǔn)1.3.1Web標(biāo)準(zhǔn)簡介1.3.2建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)1.3.3網(wǎng)頁的表現(xiàn)和結(jié)構(gòu)相分離1.3.1Web標(biāo)準(zhǔn)簡介 Web標(biāo)準(zhǔn)不是某一種標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由3部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分為3類：結(jié)構(gòu)化標(biāo)準(zhǔn)語言，主要包括HTML、XML和XHTML；表現(xiàn)標(biāo)準(zhǔn)語言，主要為CSS；行為標(biāo)準(zhǔn)語言，主要包括對(duì)象模型DOM、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制定的，如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript標(biāo)準(zhǔn)。1.3.2建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn) 對(duì)于網(wǎng)站設(shè)計(jì)和開發(fā)人員來說，遵循網(wǎng)站標(biāo)準(zhǔn)就是建立和使用Web標(biāo)準(zhǔn)。建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)如下。1）提供最大利益給最多的網(wǎng)站用戶。2）確保任何網(wǎng)站文件都能夠長期有效。3）簡化代碼，降低建設(shè)成本。4）讓網(wǎng)站更容易使用，能適應(yīng)更多不同用戶和更多網(wǎng)絡(luò)設(shè)備。5）當(dāng)瀏覽器版本更新或出現(xiàn)新的網(wǎng)絡(luò)交互設(shè)備時(shí)，確保所有應(yīng)用能夠繼續(xù)正確執(zhí)行。1.3.3網(wǎng)頁的表現(xiàn)和結(jié)構(gòu)相分離 1．內(nèi)容 內(nèi)容就是頁面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文件或圖片等。注意，這里強(qiáng)調(diào)的“真正”是指純粹的數(shù)據(jù)信息本身，不包含任何輔助信息。 2．結(jié)構(gòu) 可以看到，文本信息本身已經(jīng)完整，但是混亂一團(tuán)，難以閱讀和理解，必須將其格式化。把其分成標(biāo)題、段落和列表等。1.3.3網(wǎng)頁的表現(xiàn)和結(jié)構(gòu)相分離 3．表現(xiàn) 所有這些用來改變內(nèi)容外觀的東西，稱為“表現(xiàn)”。 4．行為 行為是對(duì)內(nèi)容的交互及操作效果。 所有HTML頁面都由結(jié)構(gòu)、表現(xiàn)和行為3個(gè)方面的內(nèi)容組成。內(nèi)容是基礎(chǔ)層，然后是附加上的結(jié)構(gòu)層和表現(xiàn)層，最后再對(duì)這3個(gè)層做些“行為”。1.4認(rèn)識(shí)HTML5+CSS3+JavaScript技術(shù)組合1.4.1HTML5簡介1.4.2CSS3簡介1.4.3JavaScript簡介1.4.1HTML5簡介 HTML是HyperTextMarkupLanguage（超文本標(biāo)記語言）的縮寫，是構(gòu)成Web頁面、表示W(wǎng)eb頁面的符號(hào)標(biāo)簽語言。 1．HTML的發(fā)展歷史 HTML最早源于SGML，最著名的就是HTML

4.0，這是一個(gè)具有跨時(shí)代意義的標(biāo)準(zhǔn)。XHTML1.0是一種在HTML4.0基礎(chǔ)上優(yōu)化和改進(jìn)的新語言，不過XHTML并沒有成功，而HTML5便因此孕育而生。2012年12月17日，W3C宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范正式定稿，確定了HTML5在Web網(wǎng)絡(luò)平臺(tái)奠基石的地位。1.4.1HTML5簡介 2．HTML代碼與網(wǎng)頁結(jié)構(gòu) 網(wǎng)頁內(nèi)容是通過HTML標(biāo)簽（圖中帶有“<>”的符號(hào)）組織的，網(wǎng)頁文件其實(shí)是一個(gè)純文本文件。 3．HTML5的特性 HTML5實(shí)現(xiàn)Web應(yīng)用程序和用于更好的呈現(xiàn)內(nèi)容。 （1）實(shí)現(xiàn)Web應(yīng)用程序 （2）更好地呈現(xiàn)內(nèi)容1.4.2CSS3簡介 CSS（CascadingStyleSheets，層疊樣式表單）簡稱為樣式表，是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS是目前最好的網(wǎng)頁表現(xiàn)語言之一，所謂表現(xiàn)就是賦予結(jié)構(gòu)化文件內(nèi)容顯示的樣式，包括版式、顏色和大小等，它擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁格式?，F(xiàn)在幾乎所有漂亮的網(wǎng)頁都用了CSS，CSS已經(jīng)成為網(wǎng)頁設(shè)計(jì)必不可少的工具之一。1.4.3JavaScript簡介 在Web標(biāo)準(zhǔn)中，使用HTML設(shè)計(jì)網(wǎng)頁的結(jié)構(gòu)，使用CSS設(shè)計(jì)網(wǎng)頁的表現(xiàn)，使用JavaScript制作網(wǎng)頁的特效。CSS樣式表可以控制和美化網(wǎng)頁的外觀，但對(duì)網(wǎng)頁的交互行為卻無能為力，此時(shí)腳本語言提供了解決方案。 JavaScript是一種由Netscape公司的LiveScript發(fā)展而來的客戶端腳本語言，JavaScript的開發(fā)環(huán)境很簡單，不需要Java編譯器，而是直接運(yùn)行在瀏覽器中，JavaScript通過嵌入或調(diào)入到HTML文件中實(shí)現(xiàn)其功能。1.5HTML5語法基礎(chǔ)1.5.1HTML5語法結(jié)構(gòu)1.5.2HTML5文件結(jié)構(gòu)1.5.3HTML5開發(fā)人員編碼規(guī)范1.5.1HTML5語法結(jié)構(gòu) HTML文件由元素構(gòu)成，元素由標(biāo)簽、內(nèi)容和屬性3部分組成。 1．標(biāo)簽 HTML用標(biāo)簽來規(guī)定網(wǎng)頁元素在文件中的功能。標(biāo)簽是用一對(duì)尖括號(hào)“<”和“>”括起來的單詞或單詞縮寫。 2．內(nèi)容 HTML

文件中的元素是指從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。

3．屬性

屬性用來說明元素的特征。1.5.2HTML5文件結(jié)構(gòu) HTML5文件是一種純文本格式的文件，文件的基本結(jié)構(gòu)為：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>頁面標(biāo)題</title></head><body>網(wǎng)頁內(nèi)容</body></html>1.5.3HTML5開發(fā)人員編碼規(guī)范 1．HTML書寫規(guī)范 2．標(biāo)簽的規(guī)范 3．屬性的規(guī)范 4．元素的嵌套 5．代碼的縮進(jìn)1.6元素的分類1.6.1元信息元素1.6.2語義元素1.6.3無語義元素1.6.1元信息元素 元信息（Meta-information）或稱元數(shù)據(jù)（Metadata）元素是指用于描述文件自身信息的一類元素，meta元素定義元信息，包含頁面的描述、關(guān)鍵字、最后的修改日期、作者及其他元信息， meta元素的常用屬性如下。1）charset：定義文件的字符編碼，常用的是“UTF-8”。2）content：定義與name和http-equiv相關(guān)的元信息。3）name：關(guān)聯(lián)content的名稱（常用的有keywords關(guān)鍵字、author作者名、description頁面描述）。1.6.2語義元素 語義元素分為塊級(jí)元素、行內(nèi)元素、行內(nèi)塊元素等。 1．塊級(jí)元素（block）塊級(jí)元素是指本身屬性為display:block的元素。因?yàn)樗陨淼奶攸c(diǎn)，通常使用塊級(jí)元素進(jìn)行大布局（大結(jié)構(gòu)）的搭建。 2．行內(nèi)元素（inline）行內(nèi)元素也稱內(nèi)聯(lián)元素，是指本身屬性為display:inline的元素，行內(nèi)元素可以和相鄰的行內(nèi)元素在同一行。1.6.2語義元素 3．行內(nèi)塊元素 還有一種元素結(jié)合行內(nèi)元素和塊級(jí)元素，不僅可以對(duì)寬和高屬性值生效，還可以多個(gè)元素存在一行顯示，稱為行內(nèi)塊元素。行內(nèi)塊元素能和其他元素放在一行，可以設(shè)置寬、高。常用的行內(nèi)塊元素有img、input、textarea等。 4．可變?cè)?可變?cè)馗鶕?jù)上下文關(guān)系確定該元素是塊級(jí)元素還是行內(nèi)元素，主要有applet、button、del、iframe、ins、map等。1.6.2語義元素 5．HTML5中新增的結(jié)構(gòu)語義元素 HTML5增加的結(jié)構(gòu)語義元素明確了一個(gè)Web頁面的不同部分，如圖1-13所示。1.6.3無語義元素 無語義元素?zé)o須考慮其內(nèi)容，有兩個(gè)無語義元素div和span。div是塊級(jí)元素，span是行內(nèi)元素。 常用div元素劃分區(qū)域或節(jié)，div元素可以用作組織工具，而不使用任何格式。所謂DIV+CSS的網(wǎng)頁布局，就是用div元素組織要顯示的數(shù)據(jù)（文字、圖片、表格等）結(jié)構(gòu)，用CSS顯示數(shù)據(jù)的樣式，從而做到結(jié)構(gòu)與樣式的分離，這種布局代碼簡單，易于維護(hù)。1.7HTML的顏色表示和字符實(shí)體1.7.1HTML的顏色表示1.7.2字符實(shí)體1.7.1HTML的顏色表示 在HTML中，顏色有兩種表示方式：一種是用顏色的英文名稱表示，如blue表示藍(lán)色，red表示紅色；另一種是用十六進(jìn)制的數(shù)表示RGB值。 RGB顏色的表示方式為#rrggbb。其中，rr、gg、bb三色對(duì)應(yīng)的取值范圍都是00～FF，如白色的RGB值是（255，255，255），用#ffffff表示；黑色的RGB值是（0，0，0），用#000000表示。1.7.2字符實(shí)體 一些字符在HTML中擁有特殊的含義，例如，大于號(hào)“>”和小于號(hào)“<”已作為HTML的語法符號(hào)。因此，如果希望在瀏覽器顯示這些特殊字符，就需要在HTML源碼中插入相應(yīng)的HTML代碼，這些特殊符號(hào)對(duì)應(yīng)的HTML代碼稱為字符實(shí)體。 字符實(shí)體由三部分組成：以一個(gè)符號(hào)（&）開頭，一個(gè)實(shí)體名稱，以一個(gè)分號(hào)（;）結(jié)束。例如，要在HTML文件中顯示小于號(hào)，輸入“<”。1.8編輯HTML文件1.8.1常見的網(wǎng)頁編輯工具1.8.2HTML文件的創(chuàng)建1.8.1常見的網(wǎng)頁編輯工具 網(wǎng)站制作前端開發(fā)軟件是指用于制作HTML網(wǎng)頁的工具軟件。1．Dreamweaver2．HBuilderX3．VisualStudioCode4．SublimeText3漢化版5．Notepad++6．記事本1.8.2HTML文件的創(chuàng)建 下面使用HBuilderX創(chuàng)建一個(gè)只有文本組成的簡單頁面。1）在桌面上雙擊HBuilderX的快捷方式圖標(biāo)。2）打開HBuilderX。3）新建一個(gè)HTML文件。4）在代碼編輯區(qū)中輸入示例代碼。5）單擊窗口左上角的“保存”按鈕，保存文件。6）依次單擊“運(yùn)行”→“運(yùn)行到瀏覽器”→“Edge”，結(jié)果顯示在Edge瀏覽器中。1.9注釋1.9注釋 注釋的作用是方便閱讀和調(diào)試代碼，便于以后維護(hù)和修改。當(dāng)瀏覽器遇到注釋時(shí)會(huì)自動(dòng)忽略注釋內(nèi)容，訪問者在瀏覽器中是看不見這些注釋的，只有在用文本編輯器打開文件源代碼時(shí)才可見。注釋標(biāo)簽的格式為： <!--注釋內(nèi)容--> 注釋并不局限于一行，長度不受限制。結(jié)束標(biāo)簽與開始標(biāo)簽可以不在一行上。1.10案例—制作鮮品園頁面摘要和版權(quán)信息1.10案例—制作鮮品園頁面摘要和版權(quán)信息 【例1-1】制作鮮品園頁面摘要和版權(quán)信息，頁面中包括版權(quán)符號(hào)、空格，本例文件1-1.html在瀏覽器中顯示的效果如圖1-25所示。習(xí)題11．WWW瀏覽常用的瀏覽器是什么？URL的含義和功能是什么？2．簡述超文本和超文本標(biāo)記語言的特點(diǎn)。3．什么是Web標(biāo)準(zhǔn)？舉例說明網(wǎng)頁的表現(xiàn)和結(jié)構(gòu)相分離的含義。4．簡述HTML5文件的基本結(jié)構(gòu)及語法規(guī)范。5．簡述常見的網(wǎng)頁編輯工具。6．使用HBuilderX創(chuàng)建一個(gè)包含網(wǎng)頁基本結(jié)構(gòu)的頁面。7．制作簡單的HTML5文件，檢測(cè)瀏覽器是否支持HTML5。

Web前端開發(fā)實(shí)例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第2章編輯網(wǎng)頁元素目錄2.1文本元素2.2文本層次語義元素2.3基本排版元素2.4圖像元素img2.5超鏈接元素a2.6列表元素2.7多媒體元素2.1文本元素2.1.1字體樣式元素2.1.2短語元素2.1.1字體樣式元素 字體樣式元素可以使文本內(nèi)容在瀏覽器中呈現(xiàn)特定的文字效果。但是，這些文本格式化元素僅能實(shí)現(xiàn)簡單的、基本的文本格式化。在HTML5中，建議使用CSS樣式表來取得更加豐富的文本格式化效果。對(duì)于簡單的更改字體樣式，文本格式化元素也會(huì)經(jīng)常用到。字體樣式元素全是成對(duì)出現(xiàn)的標(biāo)簽，而且不使用屬性。2.1.1字體樣式元素 【例2-1】字體樣式元素示例。本例文件2-1.html在瀏覽器中顯示的效果如圖2-1所示。2.1.2短語元素 短語元素?fù)碛忻鞔_的語義，用以標(biāo)注特殊用途的文本，這類特殊的文本格式化元素都會(huì)呈現(xiàn)特殊的樣式?！纠?-2】短語元素示例。2.2文本層次語義元素2.2.1mark元素2.2.2cite元素2.2.3time元素2.2.1mark元素 mark元素用來定義帶有記號(hào)的文本，其主要功能是在文本中高亮顯示某個(gè)或某幾個(gè)字符，旨在引起用戶的特別注意?！纠?-3】mark元素示例。

2.2.2cite元素 cite元素可以創(chuàng)建一個(gè)引用標(biāo)記，用于對(duì)文件參考文獻(xiàn)的引用說明，以斜體的樣式展示在頁面中?！纠?-4】cite元素示例。2.2.3time元素 time元素用于定義公歷的時(shí)間或日期。time元素不會(huì)在瀏覽器中呈現(xiàn)任何特殊效果，但是能以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼?！纠?-5】time元素示例。

2.3基本排版元素2.3.1標(biāo)題元素hl～h62.3.2段落元素p和換行元素br2.3.3縮排元素blockquote2.3.4水平線元素hr2.3.5案例—制作鮮品園服務(wù)指南頁面2.3.1標(biāo)題元素hl～h6 <hl>～<h6>標(biāo)簽可定義標(biāo)題。其中，<hl>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。標(biāo)題元素的格式為：<h#align="left|center|right">標(biāo)題文字</h#>【例2-6】標(biāo)題示例。2.3.2段落元素p和換行元素br 段落標(biāo)簽<p>…</p>定義段落，瀏覽器增加段前、段后的行距。段落的行數(shù)會(huì)根據(jù)瀏覽器窗口的大小而改變。格式為：

<p>段落文字</p> 在HTML5中，推薦使用CSS設(shè)置段落元素p的屬性。若要正常地?fù)Q行，使用<br/>標(biāo)簽，<br/>標(biāo)簽定義一個(gè)換行，通常放在<p>標(biāo)簽內(nèi)。格式為：

<br/>2.3.2段落元素p和換行元素br 【例2-7】段落、換行元素示例。2.3.3縮排元素blockquote blockquote元素可定義一個(gè)塊引用，瀏覽器會(huì)把標(biāo)簽之間的所有文本都從常規(guī)文本中分離出來，在左、右兩邊縮進(jìn)，而且有時(shí)會(huì)使用斜體。blockquote元素的格式為：<blockquote>文本</blockquote>【例2-8】blockquote元素示例。2.3.4水平線元素hr 使用水平線元素hr可以在瀏覽器中創(chuàng)建一條水平標(biāo)尺線（HorizontalRules），可以在視覺上將文件分隔成多個(gè)部分。線段的樣式由標(biāo)簽的參數(shù)決定。水平線元素的格式為： <hr/>【例2-9】hr元素示例。2.3.5案例—制作鮮品園服務(wù)指南頁面【例2-10】制作鮮品園服務(wù)指南頁面。2.4圖像元素img2.4圖像元素img 在Web上常用的圖像格式有3種：GIF、JPEG和PNG。img元素向網(wǎng)頁中嵌入一幅圖像。從技術(shù)上講，<img>標(biāo)簽并不會(huì)在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像。<img>標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。img元素的格式為： <imgsrc="圖像的URL"alt="替代文字"title="鼠標(biāo)懸停提示文字"width="圖像寬度"height="圖像高度"/>2.4圖像元素img 【例2-11】img元素的基本用法。2.5超鏈接元素a2.5.1a元素2.5.2指向其他頁面的鏈接2.5.3指向書簽的鏈接2.5.4指向下載文件的鏈接2.5.5指向電子郵件的鏈接2.5.6JavaScript鏈接2.5.7用圖像作為超鏈接熱點(diǎn)2.5.8空鏈接2.5.9案例—制作鮮品園資料下載頁面2.5.1a元素 錨點(diǎn)（Anchor）由a元素定義，它在網(wǎng)頁上建立超文本鏈接。通過單擊一個(gè)詞、句或圖像，可從此處轉(zhuǎn)到另一個(gè)鏈接資源（目標(biāo)資源），這個(gè)目標(biāo)資源有唯一的地址（URL）。具有以上特點(diǎn)的詞、句或圖像就稱為熱點(diǎn)。a元素的格式為： <ahref="URL"target="打開窗口方式">熱點(diǎn)</a>2.5.2指向其他頁面的鏈接1．鏈接到同一目錄內(nèi)的網(wǎng)頁文件<ahref="目標(biāo)文件名.html">熱點(diǎn)文本</a>2．鏈接到下一級(jí)目錄中的網(wǎng)頁文件<ahref="子目錄名/目標(biāo)文件名.html">熱點(diǎn)文本</a>3．鏈接到上一級(jí)目錄中的網(wǎng)頁文件<ahref="../目標(biāo)文件名.html">熱點(diǎn)文本</a>4．鏈接到同級(jí)目錄中的網(wǎng)頁文件<ahref="../子目錄名/目標(biāo)文件名.html">熱點(diǎn)文本</a>2.5.3指向書簽的鏈接 書簽就是用<a>標(biāo)簽對(duì)網(wǎng)頁元素作一個(gè)記號(hào)，其功能類似于用于固定船的錨，所以書簽也稱為錨記或錨點(diǎn)。如果頁面中有多個(gè)書簽鏈接，則對(duì)不同目標(biāo)元素要設(shè)置不同的書簽名。書簽名在<a>標(biāo)簽的name屬性中定義，格式為： <aname="記號(hào)名">目標(biāo)文本附近的字符串</a>2.5.3指向書簽的鏈接 1．指向頁面內(nèi)書簽的鏈接 要在當(dāng)前頁面內(nèi)實(shí)現(xiàn)書簽鏈接，需要定義兩個(gè)標(biāo)簽：一個(gè)為超鏈接標(biāo)簽；另一個(gè)為書簽標(biāo)簽。超鏈接標(biāo)簽的格式為： <ahref="#記號(hào)名">熱點(diǎn)文本</a> 2．指向其他頁面書簽的鏈接 需要定義兩個(gè)標(biāo)簽：一個(gè)為當(dāng)前頁面的超鏈接標(biāo)簽；另一個(gè)為跳轉(zhuǎn)頁面的書簽標(biāo)簽。當(dāng)前頁面的超鏈接標(biāo)簽的格式為： <ahref="目標(biāo)文件名.html#記號(hào)名">熱點(diǎn)文本</a>2.5.4指向下載文件的鏈接 如果鏈接到的文件不是HTML文件，則該文件將作為下載文件。指向下載文件的鏈接格式為： <ahref="下載文件名">熱點(diǎn)文本</a> 例如，下載一個(gè)軟件的壓縮包文件softsetup.rar，可以建立如下鏈接： <ahref="softsrtup.rar">下載</a>2.5.5指向電子郵件的鏈接 單擊指向電子郵件的鏈接，將打開默認(rèn)的電子郵件程序，如FoxMail、OutlookExpress等，并自動(dòng)填寫郵件地址。指向電子郵件的鏈接格式為： <ahref="mailto:E-mail地址">熱點(diǎn)文本</a> 例如，E-mail地址是Jack@163.com，可以建立如下鏈接： 信箱:<ahref="mailto:Jack@163.com">和我聯(lián)系</a>2.5.6JavaScript鏈接 如果鏈接到JavaScript代碼，單擊鏈接將執(zhí)行該JavaScript代碼，其格式為：

<ahref="javascript:代碼;">熱點(diǎn)文本</a> javascript表示url的內(nèi)容通過javascript執(zhí)行。 例如，執(zhí)行JavaScript代碼“alert('HelloWorld');”，可以建立如下鏈接：

<ahref="javascript:alert('HelloWorld');">單擊顯示消息框</a>2.5.7用圖像作為超鏈接熱點(diǎn) 圖像也可作為超鏈接熱點(diǎn)，單擊圖像則跳轉(zhuǎn)到被鏈接的文本或其他文件，其格式為： <ahref="URL"target="打開窗口方式"><imgsrc="圖像文件名"/></a>【例2-12】超鏈接元素示例。2.5.8空鏈接 空鏈接是指未指派目標(biāo)地址的鏈接?？真溄佑糜谙蝽撁嫔系膶?duì)象或文本附加行為。創(chuàng)建空鏈接有下面兩種方法：1．第一種方法語法格式如下：<ahref="#">熱點(diǎn)文本</a>或<ahref="">熱點(diǎn)文本</a>2．第二種方法語法格式如下：<ahref="javascript:void(0);">熱點(diǎn)文本</a>2.5.9案例—制作鮮品園資料下載頁面 【例2-13】制作鮮品園資料下載頁面，本例文件2-13.html和2-13-doc.html在瀏覽器中的顯示效果如圖2-14、圖2-15所示。2.6列表元素2.6.1無序列表2.6.2有序列表2.6.3定義列表2.6.4嵌套列表2.6.5案例—制作鮮品園公司名片頁面2.6.1無序列表 無序列表就是列表中列表項(xiàng)的前導(dǎo)符號(hào)沒有一定的次序，而是用黑點(diǎn)、圓圈、方框等一些特殊符號(hào)標(biāo)識(shí)。當(dāng)創(chuàng)建一個(gè)無序列表時(shí)，主要使用HTML的<ul>標(biāo)簽和<li>標(biāo)簽來標(biāo)記。其中<ul>標(biāo)簽標(biāo)識(shí)一個(gè)無序列表的開始；<li>標(biāo)簽標(biāo)識(shí)一個(gè)無序列表項(xiàng)。格式為：<ul><li>第一個(gè)列表項(xiàng)<li>第二個(gè)列表項(xiàng)…</ul>2.6.1無序列表 【例2-14】使用無序列表顯示鮮品園的新聞分類。2.6.2有序列表 有序列表是一個(gè)有特定順序的列表項(xiàng)集合。在有序列表中，各個(gè)列表項(xiàng)有先后順序之分，它們之間以編號(hào)來標(biāo)識(shí)。使用<ol>標(biāo)簽可以建立有序列表，表項(xiàng)的標(biāo)簽仍為<li>。格式為：<ol><li>表項(xiàng)1<li>表項(xiàng)2…</ol>2.6.2有序列表 【例2-15】使用有序列表顯示鮮品園注冊(cè)步驟。2.6.3定義列表 定義列表又稱為釋義列表或字典列表。當(dāng)創(chuàng)建一個(gè)定義列表時(shí)，主要用到3個(gè)HTML標(biāo)簽：<dl>標(biāo)簽、<dt>標(biāo)簽和<dd>標(biāo)簽。格式為：<dl><dt>…第一個(gè)標(biāo)題項(xiàng)…</dt><dd>…對(duì)第一個(gè)標(biāo)題項(xiàng)的解釋文字…</dd><dt>…第二個(gè)標(biāo)題項(xiàng)…</dt>…<dd>…對(duì)第二個(gè)標(biāo)題項(xiàng)的解釋文字…</dd></dl>2.6.3定義列表 【例2-16】使用定義列表顯示鮮品園聯(lián)系方式。2.6.4嵌套列表 所謂嵌套列表就是無序列表與有序列表嵌套混合使用?！纠?-17】制作鮮品樂園頁面。2.6.5案例—制作鮮品園公司名片頁面 【例2-18】使用列表元素制作鮮品園公司名片頁面。2.7多媒體元素2.7.1audio元素2.7.2video元素2.7.1audio元素 HTML5提供了播放音頻的標(biāo)準(zhǔn)，音頻元素audio能夠播放聲音文件或音頻流。支持三種音頻格式：OGG、MP3和WAV。格式為：<audiosrc="音頻文件的URL"controls="controls"…>文本</audio>【例2-19】播放音頻控件的示例。2.7.2video元素 video元素用于定義視頻，如電影片段或其他視頻流。目前video元素支持三種視頻格式：MP4、WebM、OGG。格式為：<videosrc="視頻文件的URL"controls="controls"…>文本</video>【例2-20】播放視頻控件的示例。習(xí)題21．使用段落與文字的基本排版技術(shù)制作如圖2-23所示的頁面。2．使用列表和超鏈接元素制作如圖2-24所示的網(wǎng)頁。3．使用錨點(diǎn)鏈接和電子郵件鏈接制作如圖2-25所示的網(wǎng)頁。4．使用圖片和超鏈接元素制作如圖2-26所示的網(wǎng)頁。

Web前端開發(fā)實(shí)例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第3章網(wǎng)頁的布局與交互目錄3.1表格元素table3.2使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局3.3頁面交互元素3.4分區(qū)元素div3.5范圍元素span3.6表單3.1表格元素table3.1.1表格的結(jié)構(gòu)3.1.2基本表格3.1.3跨行跨列表格3.1.4表格數(shù)據(jù)的分組3.1.5調(diào)整列的格式3.1.6案例—使用表格布局鮮品園產(chǎn)品展示頁面3.1.1表格的結(jié)構(gòu) 表格是由指定數(shù)目的行和列組成的。表格將文本和圖像按行、列排列，它與列表一樣，有利于表達(dá)信息。表格中的內(nèi)容按照相應(yīng)的行或列進(jìn)行分類和顯示，如圖3-1所示。3.1.2基本表格 定義表格元素的格式為：<tableborder="n"width="x|x%"height="y|y%"cellspacing="i"cellpadding="j"><captionalign="left|right|top|bottomvalign=top|bottom>標(biāo)題</caption><tr><th>表頭1</th><th>表頭2</th><th>…</th><th>表頭n</th></tr><tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr>…<tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr></table>3.1.2基本表格 【例3-1】在頁面中添加一個(gè)4行3列的表格。3.1.3跨行跨列表格 定義跨行跨列表格的格式為：<table><tr><tdrowspan="所跨的行數(shù)"colspan="所跨的列數(shù)">單元格內(nèi)容</td></tr></table>【例3-2】跨行跨列表格示例。3.1.4表格數(shù)據(jù)的分組 表格數(shù)據(jù)的分組標(biāo)簽包括<thead>、<tbody>和<tfooter>，主要用于對(duì)表格數(shù)據(jù)進(jìn)行邏輯分組?！纠?-3】表格分組示例。3.1.5調(diào)整列的格式1）<colgroup>標(biāo)簽：對(duì)表格中的列組合，以便對(duì)其進(jìn)行格式化。2）<col>標(biāo)簽：對(duì)表格中一個(gè)或多個(gè)列定義屬性值，通常位于<colgroup>元素內(nèi)?！纠?-4】列格式示例。3.1.6案例—使用表格布局鮮品園產(chǎn)品展示頁面 【例3-5】使用表格布局鮮品園產(chǎn)品展示頁面。3.2使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局3.2.1section元素3.2.2nav元素3.2.3header元素3.2.4footer元素3.2.5article元素3.2.6aside元素3.2.7分組元素3.2.8案例—制作鮮品園新品發(fā)布頁面3.2.1section元素 section元素用來定義文件中的節(jié)（section、區(qū)段），如章節(jié)、頁眉、頁腳或文件中的其他部分。例如，下面的代碼定義了文件中的區(qū)段，解釋了CSS的含義。<section><h1>CSS</h1><p>是CascadingStyleSheets（層疊樣式表單）的簡稱</p></section>3.2.2nav元素

nav元素用來定義導(dǎo)航鏈接的部分。例如，下面的代碼定義了導(dǎo)航條中常見的首頁、上一頁和下一頁鏈接。<nav><ahref="index.html">首頁</a><ahref="prev.html">上一頁</a><ahref="next.html">下一頁</a></nav>3.2.3header元素 header元素用來定義文件的頁眉。例如，下面的代碼定義了文件的歡迎信息。<header><h1>歡迎光臨我的主頁</h1><p>我的名字是王小虎</p></header> 3.2.4footer元素 footer元素用來定義section或document的頁腳，通常該標(biāo)簽包含網(wǎng)站的版權(quán)、創(chuàng)作者的姓名、文件的創(chuàng)作日期及聯(lián)系信息。例如，下面的代碼定義了網(wǎng)站的版權(quán)信息。<footer><p>Copyright©2021鮮品園版權(quán)所有</p></footer>3.2.5article元素 article元素用來定義獨(dú)立的內(nèi)容，該元素定義的內(nèi)容可獨(dú)立于頁面中的其他內(nèi)容使用。article元素經(jīng)常應(yīng)用于論壇帖子、新聞文章、博客條目和用戶評(píng)論等應(yīng)用中。 section元素可以包含article元素，article元素標(biāo)簽也可以包含section元素。section元素用來分組相類似的信息，article元素則用來放置諸如一篇文章或博客一類的信息，這些內(nèi)容可在不影響內(nèi)容含義的情況下被刪除或是被放置到新的上下文中。3.2.5article元素 【例3-6】使用article元素定義新聞內(nèi)容。3.2.6aside元素 aside元素用來表示當(dāng)前頁面或新聞的附屬信息部分?！纠?-7】使用aside元素定義了網(wǎng)頁的側(cè)邊欄信息。3.2.7分組元素 分組元素用于對(duì)頁面中的內(nèi)容進(jìn)行分組。HTML5中包含3個(gè)分組元素，分別是figure元素、figcaption元素和hgroup元素。 1．figure元素和figcaption元素 figure元素用于定義獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等），一般是指一個(gè)單獨(dú)的單元。figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不會(huì)對(duì)文件流產(chǎn)生影響。3.2.7分組元素 【例3-8】使用figure元素和figcaption元素分組頁面內(nèi)容。3.2.7分組元素 2．hgroup元素 hgroup元素用于將多個(gè)標(biāo)題（主標(biāo)題和副標(biāo)題或子標(biāo)題）組成一個(gè)標(biāo)題組，通常它與h1~h6元素組合使用?！纠?-9】使用hgroup元素分組頁面內(nèi)容3.2.8案例—制作鮮品園新品發(fā)布頁面 【例3-10】使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局，制作鮮品園新品發(fā)布頁面。3.3頁面交互元素3.3.1details元素和summary元素3.3.2progress元素3.3.1details元素和summary元素 details元素用于描述文件或文件某個(gè)部分的細(xì)節(jié)。summary元素經(jīng)常與details元素配合使用?！纠?-11】使用details元素和summary元素描述文件。3.3.2progress元素 progress元素用于表示一個(gè)任務(wù)的完成進(jìn)度。【例3-12】使用progress元素顯示項(xiàng)目開發(fā)進(jìn)度。3.4分區(qū)元素div3.4分區(qū)元素div 分區(qū)元素div常用于頁面布局時(shí)對(duì)區(qū)塊的劃分，它相當(dāng)于一個(gè)大“容器”。div元素可以容納無序列表、有序列表、表格、表單塊級(jí)標(biāo)簽，同時(shí)也可以容納普通的標(biāo)題、段落、文字、圖像內(nèi)容。 div元素是一個(gè)塊級(jí)元素，通常使用div元素來組合塊級(jí)元素，這樣即可使用樣式對(duì)它們進(jìn)行格式化。由于div元素沒有明顯的外觀效果，因此需要為其添加CSS樣式屬性。div元素的格式為：<divid="控件id"class="類名">文本、圖像或表格</div>3.4分區(qū)元素div 【例3-13】使用div元素組織網(wǎng)頁內(nèi)容示例。3.5范圍元素span3.5范圍元素span span元素被用來組合文件中的行內(nèi)元素。span元素沒有固定的格式，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺上的變化。其格式為：<span>內(nèi)容</span> 例如，<p><span>文本內(nèi)容</span>其他內(nèi)容</p>。 span元素與div元素的區(qū)別在于，span元素是個(gè)行內(nèi)元素，不會(huì)換行，而div元素是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行。3.6表單3.6.1表單元素form3.6.2輸入元素input3.6.3標(biāo)簽元素label3.6.4選擇欄元素select3.6.5按鈕元素button3.6.6多行文本元素textarea3.6.7表單分組3.6.8使用表格布局表單3.6.1表單元素form 網(wǎng)頁上具有可輸入表項(xiàng)及項(xiàng)目選擇等控制所組成的欄目稱為表單。<form>標(biāo)簽用于創(chuàng)建供用戶輸入的HTML表單。form元素是塊級(jí)元素，其前后會(huì)產(chǎn)生折行。form元素的基本格式為：<formname="表單名"action="URL"method="get|post"…>…</form>3.6.2輸入元素input

input元素用來定義用戶輸入數(shù)據(jù)的輸入字段，根據(jù)不同的type屬性值，輸入字段可以是文本字段、密碼字段、復(fù)選框、單選按鈕、按鈕、隱藏域、圖像、文件等。input元素的基本格式為：

<inputtype="表項(xiàng)類型"name="元素名"size="x"maxlength="y"/>3.6.2輸入元素input

【例3-14】制作不同類型的input元素示例。3.6.3標(biāo)簽元素label label元素為表單中的其他控件元素添加說明文字。在瀏覽器中，當(dāng)用戶單擊label元素生成標(biāo)簽時(shí)，就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到與該標(biāo)簽相關(guān)的表單控件上。label元素的格式為：<labelfor="id">說明文字</label>【例3-15】label元素的示例。3.6.4選擇欄元素select

select元素可創(chuàng)建下拉菜單或列表，實(shí)現(xiàn)單選或多選菜單。

1．select元素<selectsize="x"name="控件名"multiple="multiple"><optgroup><option…>…</option><option…>…</option>…</optgroup>…</select>3.6.4選擇欄元素select

2．option元素

option元素定義下拉列表中的一個(gè)選項(xiàng)。瀏覽器將<option>標(biāo)簽中的內(nèi)容作為<select>標(biāo)簽的菜單或是滾動(dòng)列表中的一個(gè)元素顯示。

option元素必須位于select元素內(nèi)部。格式為：<optionvalue="選項(xiàng)值"selected="selected">…</option>3.6.4選擇欄元素select

3．optgroup標(biāo)簽如果列表選項(xiàng)有很多，則可以使用<optgroup>標(biāo)簽對(duì)相關(guān)選項(xiàng)分組。optgroup元素的格式為：<optgroup><option…>…</option><option…>…</option>…</optgroup>3.6.4選擇欄元素select【例3-16】制作問卷調(diào)查的下拉菜單示例。3.6.5按鈕元素button <button>標(biāo)簽定義一個(gè)按鈕。<button>與</button>標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的內(nèi)容，包括文本、圖像或多媒體內(nèi)容。這是該元素與input元素創(chuàng)建的按鈕之間的不同之處。button元素與<inputtype="button">相比，前者提供了更強(qiáng)大的功能和更豐富的內(nèi)容。button元素的格式為：<buttontype="按鈕的類型">文本、圖像元素</button>3.6.5按鈕元素button 【例3-17】按鈕元素示例。3.6.6多行文本元素textarea

textarea元素定義多行的文本輸入控件?？梢暂斎攵鄠€(gè)段落的文字，文本區(qū)中可容納無限數(shù)量的文本。

textarea元素的格式為：<textareaname="名稱"rows="行數(shù)"cols="列數(shù)">初始文本內(nèi)容</textarea>3.6.6多行文本元素textarea

【例3-18】多行文本元素示例。3.6.7表單分組 大型表單容易在視覺上產(chǎn)生混淆，可以通過表單分組將表單上的元素在形式上進(jìn)行組合，以達(dá)到一目了然的效果。常見的分組標(biāo)簽有<fieldset>和<legend>。格式為：<form><fieldset><legend>分組標(biāo)題</legend>表單元素…</fieldset>…</form>3.6.7表單分組 【例3-19】表單分組示例。3.6.8使用表格布局表單 【例3-20】使用表格布局制作鮮品園聯(lián)系我們表單。習(xí)題31．制作如圖3-25所示的課程表。2．制作如圖3-26所示的產(chǎn)品銷量表。3．使用<div>標(biāo)簽組織段落等網(wǎng)頁內(nèi)容，制作精選信息欄目，如圖3-27所示。4．制作鮮品園會(huì)員注冊(cè)表單，如圖3-28所示。

Web前端開發(fā)實(shí)例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第4章CSS3基礎(chǔ)目錄4.1CSS3概述4.2在網(wǎng)頁中引用CSS的方法4.3CSS的主要特性4.4CSS的基本語法4.5CSS的選擇器4.6CSS屬性值的寫法和單位4.7文件結(jié)構(gòu)與元素類型4.8案例—制作鮮品園行業(yè)資訊頁面4.1CSS3概述4.1.1CSS3的編寫規(guī)范4.1.2CSS3的工作環(huán)境4.1.1CSS3的編寫規(guī)范 1．目錄結(jié)構(gòu)命名規(guī)范 存放CSS樣式文件的目錄一般命名為style或css。 2．樣式文件的命名規(guī)范 為了網(wǎng)站性能上的考慮會(huì)整合不同的CSS文件到一個(gè)CSS文件，這個(gè)文件一般命名為style.css或css.css。 3．選擇符的命名規(guī)范 所有選擇符必須由英文字母或“_”（下畫線）組成，必須以字母開頭，不能為純數(shù)字。4.1.1CSS3的編寫規(guī)范 4．CSS代碼注釋 在CSS中添加注釋非常簡單，它以“/*”開始，以“*/”結(jié)尾。注釋可以是單行的，也可以是多行的。 （1）結(jié)構(gòu)性注釋 結(jié)構(gòu)性注釋僅僅是用風(fēng)格統(tǒng)一的大注釋塊從視覺上區(qū)分被分隔部分。 （2）提示性注釋 在編寫CSS文件時(shí)，可能需要某種技巧解決某個(gè)問題。4.1.2CSS3的工作環(huán)境 1．CSS3的顯示環(huán)境 瀏覽器是CSS3的顯示環(huán)境。目前，瀏覽器的種類多種多樣，主流瀏覽器都支持CSS3，但它們之間仍存在符合標(biāo)準(zhǔn)的差異，相同的CSS樣式代碼在不同的瀏覽器中可能顯示的效果有所不同。 2．CSS3的編輯環(huán)境 能夠編輯CSS3的軟件有很多，如Dreamweaver、HBuilderX、EditPlus和topStyle等。4.2在網(wǎng)頁中引用CSS的方法4.2.1行內(nèi)樣式4.2.2內(nèi)部樣式表4.2.3鏈入外部樣式表4.2.4導(dǎo)入外部樣式表4.2.5案例—制作鮮品園業(yè)務(wù)簡介頁面4.2.1行內(nèi)樣式 行內(nèi)樣式是各種引用CSS中最直接的一種。行內(nèi)樣式就是通過直接設(shè)置各個(gè)元素的style屬性，從而達(dá)到設(shè)置樣式的目的。這樣的設(shè)置方式，使得各個(gè)元素都有自己獨(dú)立的樣式，但是會(huì)使整個(gè)頁面變得臃腫。 這種樣式表只對(duì)所定義的標(biāo)簽起作用，并不對(duì)整個(gè)頁面起作用。行內(nèi)樣式的格式為：<標(biāo)簽style="屬性:屬性值;屬性:屬性值;…">4.2.1行內(nèi)樣式 【例4-1】使用行內(nèi)樣式將樣式表的功能加入到網(wǎng)頁中。4.2.2內(nèi)部樣式表

內(nèi)部樣式表是指把樣式定義<style>…</style>作為網(wǎng)頁代碼的一部分放到頭部定義<head>…</head>中，定義的樣式可以在整個(gè)HTML文件中調(diào)用。

1．內(nèi)部樣式表的格式

<styletype="text/css">選擇符1{屬性:屬性值;屬性:屬性值;…}/*注釋內(nèi)容*/…選擇符n{屬性:屬性值;屬性:屬性值;…}/*注釋內(nèi)容*/</style>4.2.2內(nèi)部樣式表

2．組合選擇符的格式

除了在<style>…</style>內(nèi)分別定義各種選擇符的樣式，如果多個(gè)選擇符具有相同的樣式，那么還可以采用組合選擇符，以減少重復(fù)定義的麻煩，其格式為：<styletype="text/css">選擇符1,選擇符2,…,選擇符n{屬性:屬性值;屬性:屬性值;…}選擇符a,選擇符b,…,選擇符m{屬性:屬性值;屬性:屬性值;…}</style>4.2.2內(nèi)部樣式表

【例4-2】使用內(nèi)部樣式表將樣式表的功能加入到網(wǎng)頁中。4.2.3鏈入外部樣式表 外部樣式表通過在某個(gè)HTML頁面中添加鏈接的方式生效。 1．使用<link>標(biāo)簽鏈接樣式表文件 <link>標(biāo)簽放到頁面的<head>…</head>標(biāo)簽內(nèi)。其格式為：<head>…<linkrel="stylesheet"href="外部樣式表文件名.css"type="text/css">…</head>4.2.3鏈入外部樣式表 2．樣式表文件的格式 樣式表文件的內(nèi)容是定義的樣式表，不包含HTML標(biāo)簽。樣式表文件的格式為：選擇符1{屬性:屬性值;屬性:屬性值…}/*注釋內(nèi)容*/選擇符2{屬性:屬性值;屬性:屬性值…}…選擇符n{屬性:屬性值;屬性:屬性值…}4.2.3鏈入外部樣式表 【例4-3】使用鏈入外部樣式表將樣式表的功能加入到網(wǎng)頁中，鏈入外部樣式表文件至少需要兩個(gè)文件：一個(gè)是HTML文件；另一個(gè)是CSS文件。4.2.4導(dǎo)入外部樣式表 導(dǎo)入外部樣式表是指在內(nèi)部樣式表的<style>標(biāo)簽里導(dǎo)入一個(gè)外部樣式表，當(dāng)瀏覽器讀取HTML文件時(shí)，復(fù)制一份樣式表到這個(gè)HTML文件中。其格式為：<styletype="text/css"><!--@importurl("外部樣式表的文件名1.css");@importurl("外部樣式表的文件名2.css");其他樣式表的聲明--></style>4.2.4導(dǎo)入外部樣式表 【例4-4】使用導(dǎo)入外部樣式表將樣式表的功能加入到網(wǎng)頁中，導(dǎo)入外部樣式表文件至少需要兩個(gè)文件：一個(gè)是HTML文件；另一個(gè)是CSS文件。4.2.5案例—制作鮮品園業(yè)務(wù)簡介頁面 【例4-5】使用鏈入外部樣式表的方法制作鮮品園業(yè)務(wù)簡介頁面。4.3CSS的主要特性4.3.1繼承4.3.2層疊4.3.3優(yōu)先級(jí)4.3.1繼承 繼承指的是特定的CSS屬性可以從父元素向下傳遞給子元素。這種特性允許樣式不僅應(yīng)用于某個(gè)特定的元素，同時(shí)也應(yīng)用于其后代，而后代所定義的新樣式，不會(huì)影響父代樣式?！纠?-6】CSS繼承示例。4.3.2層疊 層疊是指CSS能夠?qū)ν粋€(gè)元素應(yīng)用多個(gè)樣式表的能力。樣式生效的優(yōu)先級(jí)從高到低的順序?yàn)椋簝?nèi)聯(lián)樣式→內(nèi)部樣式→外部樣式→瀏覽器默認(rèn)設(shè)置?！纠?-7】樣式表層疊示例。4.3.3優(yōu)先級(jí) 定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一個(gè)元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。 1．特殊性 在編寫CSS代碼時(shí)，會(huì)出現(xiàn)多個(gè)樣式規(guī)則作用于同一個(gè)元素的情況，特殊性描述了不同規(guī)則的相對(duì)權(quán)重，當(dāng)多個(gè)規(guī)則應(yīng)用到同一個(gè)元素時(shí)權(quán)重越大的樣式會(huì)被優(yōu)先采用。4.3.3優(yōu)先級(jí) 2．重要性 不同的選擇符定義相同的元素時(shí)，要考慮不同選擇符之間的優(yōu)先級(jí)（id選擇符、類選擇符和HTML標(biāo)簽選擇符），id選擇符的優(yōu)先級(jí)最高，其次是類選擇符，HTML標(biāo)簽選擇符最低。如果想超越這三者之間的關(guān)系，可以用!important來提升樣式表的優(yōu)先級(jí)：p{color:#f00!important}.blue{color:#00f}#id1{color:#ff0}4.4CSS的基本語法4.4.1基本語法4.4.2注意事項(xiàng)4.4.1基本語法 CSS的基本語法由兩部分組成，其格式為：selector{property1:value1;property2:value2;…} selector稱為選擇器，選擇器決定了樣式定義需要改變的HTML元素。 property:value稱為樣式聲明，每一條樣式聲明由property（屬性）和value（屬性的值）組成，并用冒號(hào)隔開，以分號(hào)結(jié)束，由一條或多條樣式組成，包含在一對(duì)花括號(hào)“{}”內(nèi)。用于告訴瀏覽器如何渲染頁面中與選擇符相匹配的對(duì)象4.4.2注意事項(xiàng) 1．屬性名和屬性值要正確 property（屬性）是由官方CSS規(guī)范約定的，而不是自定義的。屬性是希望設(shè)置的樣式屬性。每個(gè)屬性有一個(gè)值value（屬性值），屬性和值用冒號(hào)分開，屬性值跟隨屬性的類別而呈現(xiàn)不同的形式，一般包括數(shù)值、單位及關(guān)鍵字。 2．需要加引號(hào) 如果值為若干單詞，單詞之間有空格，則要給值加引號(hào)。4.4.2注意事項(xiàng) 3．多重聲明 如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。 4．代碼的可讀性 一般來說，為了方便閱讀，應(yīng)該在每行只描述一個(gè)屬性，并且在屬性末尾都加上分號(hào)。 5．空格 大多數(shù)樣式表包含多條規(guī)則，而大多數(shù)規(guī)則包含多個(gè)聲明。4.4.2注意事項(xiàng) 6．大小寫 CSS對(duì)大小寫不敏感，但在編寫樣式時(shí)，推薦屬性名和屬性值都用小寫。但是，也有例外，如果涉及與HTML文件一起工作，那么class和id名稱對(duì)大小寫是敏感的。因此，W3C推薦HTML文件中的代碼用小寫字母來命名。 7．選擇器的分組 對(duì)于具有相同樣式的選擇器，可以將這些選擇器分成一組，用逗號(hào)將每個(gè)選擇器隔開。4.5CSS的選擇器4.5.1元素選擇器4.5.2通配符選擇器4.5.3派生選擇器4.5.4兄弟選擇器4.5.5id選擇器4.5.6類選擇器4.5.7偽類選擇器4.5.8偽元素選擇器4.5.1元素選擇器 元素選擇器也稱標(biāo)簽選擇器。HTML頁面是由多個(gè)不同的標(biāo)簽元素組成的，如h1、p、img等。CSS的元素選擇器用于聲明這些元素的樣式。元素選擇器是最簡單的，選擇器是某個(gè)HTML元素。元素選擇器的格式為：E{property1:value1;property2:value2;…}4.5.2通配符選擇器 通配符選擇器也稱全局選擇器，其作用是定義網(wǎng)頁中所有標(biāo)記元素都使用同一種樣式。格式為：*{property1:value1;property2:value2;…}【例4-8】通配符選擇器示例。4.5.3派生選擇器 派生選擇器是指依據(jù)元素在其位置的上下文關(guān)系定義樣式。派生選擇器可以分成3種：后代選擇器、子元素選擇器、相鄰兄弟選擇器。 1．后代選擇器 后代選擇器（DescendantSelector）又稱包含選擇器，后代選擇器可以選擇某元素后代的元素，兩個(gè)元素之間的層次間隔可以是無限的。其格式為：父元素子元素{property1:value1;property2:value2;…}4.5.3派生選擇器 【例4-9】后代選擇器示例。4.5.3派生選擇器 2．子元素選擇器 子元素選擇器（ChildSelectors）只能選擇作為某元素子元素的元素。它與后代選擇器最大的不同就是元素間隔不同，后代選擇器將該元素作為父元素，它所有的后代元素都是符合條件的，而子元素選擇器只有相對(duì)于父元素來說的第一級(jí)子元素符合條件。其格式為：父元素>子元素{property1:value1;property2:value2;…}4.5.3派生選擇器 3．相鄰兄弟選擇器 相鄰兄弟選擇器（AdjacentSiblingSelector）可選擇緊接在另一個(gè)元素后的元素，并且二者有相同的父元素。與后代選擇器和子元素選擇器不同的是，相鄰兄弟選擇器針對(duì)的元素是同級(jí)元素，且兩個(gè)元素是相鄰的，擁有相同的父元素。其格式為：兄弟1+兄弟2{property1:value1;property2:value2;…}4.5.3派生選擇器 【例4-10】相鄰兄弟選擇器示例。4.5.4兄弟選擇器 兄弟選擇器使用了波浪號(hào)（~），即兄弟結(jié)合符（SiblingCombinator）。兄弟元素選擇器用來指定位于同一個(gè)父元素中的某個(gè)元素之后的其他所有某個(gè)種類的兄弟元素所使用的樣式。當(dāng)兩個(gè)標(biāo)簽不相鄰時(shí)，要想修改后一個(gè)標(biāo)簽的樣式，需要使用兄弟選擇器。其格式為：元素1~元素2{property1:value1;property2:value2;…}4.5.4兄弟選擇器 【例4-11】兄弟選擇器示例。4.5.5id選擇器 id選擇器可以為標(biāo)有特定id的單一HTML元素指定單獨(dú)的樣式。定義id選擇器時(shí)要在id名稱前加上一個(gè)“#”號(hào)。其格式為：E#idValue{property1:value1;property2:value2;…}【例4-12】id選擇器示例。4.5.6類選擇器 類選擇器可以為指定類的HTML元素指定樣式。其格式為：E.classValue{property1:value1;property2:value2;…}【例4-13】class選擇器示例。4.5.7偽類選擇器 偽類是指同一個(gè)標(biāo)簽，根據(jù)其不同狀態(tài)，有不同的樣式。偽類選擇器和類選擇器不同，不能像類選擇器一樣隨意用別的名字。偽類是指那些處在特殊狀態(tài)的元素。偽類名可以單獨(dú)使用，泛指所有元素，也可以和元素名稱連起來使用，特指某類元素。偽類以冒號(hào)（:）開頭，元素選擇符和冒號(hào)之間不能有空格，偽類名中間也不能有空格。偽類選擇器的語法格式為：selector:pseudo-class{property1:value1;property2:value2;…}4.5.7偽類選擇器 【例4-14】偽類應(yīng)用示例。當(dāng)鼠標(biāo)指針懸停在超鏈接時(shí)背景色變?yōu)槠渌伾?，并且添加了邊框線，待鼠標(biāo)指針離開超鏈接時(shí)又恢復(fù)到默認(rèn)狀態(tài)，這種效果就可以通過偽類實(shí)現(xiàn)。4.5.7偽類選擇器 【例4-15】:first-child偽類示例。使用:first-child偽類選擇元素的第一個(gè)子元素。4.5.8偽元素選擇器 偽元素不是真正的頁面元素，在HTML中沒有對(duì)應(yīng)的元素。偽類的效果可以通過添加一個(gè)實(shí)際的類來達(dá)到，而偽元素的效果則需要通過添加一個(gè)實(shí)際的元素才能達(dá)到，這也是為什么一個(gè)稱為偽類，另一個(gè)稱為偽元素的原因。 CSS3為了區(qū)分偽類和偽元素，規(guī)定偽類用一個(gè)冒號(hào)（:）來表示，偽元素用兩個(gè)冒號(hào)（::）來表示。偽元素由雙冒號(hào)和偽元素名稱組成。偽元素的語法格式為：selector::pseudo-element{property1:value1;property2:value2;…}4.5.8偽元素選擇器 【例4-16】偽元素選擇器示例。本例文件4-16.html在瀏覽器中的顯示效果如圖4-18（a）所示；當(dāng)用鼠標(biāo)選中內(nèi)容時(shí)，被選中內(nèi)容的背景改變顏色，如圖4-18（b）所示。4.6CSS屬性值的寫法和單位4.6.1長度、百分比單位4.6.2色彩單位4.6.1長度、百分比單位 使用CSS進(jìn)行排版時(shí)，常常會(huì)在屬性值后面加上長度單位或百分比單位。 1．長度單位 長度單位有相對(duì)長度單位和絕對(duì)長度單位兩種類型。 相對(duì)長度單位是指，以該屬性前一個(gè)屬性的單位值為基礎(chǔ)來完成目前的設(shè)置。 絕對(duì)長度單位將不會(huì)隨著顯示設(shè)備的不同而改變。4.6.1長度、百分比單位 2．百分比單位 百分比單位也是一種常用的相對(duì)類型。百分比值總是相對(duì)于另一個(gè)值來說的，該值可以是長度單位或其他單位。每一個(gè)可以使用百分比值單位指定的屬性，也自定義了這個(gè)百分比值的參照值。 一個(gè)百分比值由可選的正號(hào)“+”或負(fù)號(hào)“-”，接著一個(gè)數(shù)字，后跟百分號(hào)“%”組成。如果百分比值是正的，則正號(hào)可以不寫。正負(fù)號(hào)、數(shù)字與百分號(hào)之間不能有空格。4.6.2色彩單位

CSS則提供了四種定義色彩的方式：顏色英文名稱、十六進(jìn)制數(shù)、rgb函數(shù)和rgba函數(shù)。

1．用顏色英文名稱方式表示色彩值

CSS中提供了與HTML一樣的用顏色英文名稱表示色彩的方式。

2．用十六進(jìn)制數(shù)方式表示色彩值

在計(jì)算機(jī)中，定義每種色彩的強(qiáng)度范圍為0～255。當(dāng)所有色彩的強(qiáng)度都為0時(shí)，將產(chǎn)生黑色；當(dāng)所有色彩的強(qiáng)度都為255時(shí)，將產(chǎn)生白色。4.6.2色彩單位

3．用rgb函數(shù)方式表示色彩值

在CSS中，可以用rgb函數(shù)設(shè)置所要的色彩。語法格式為：rgb(R,G,B)。

4．用rgba函數(shù)方式表示色彩值

rgba函數(shù)在rgb函數(shù)的基礎(chǔ)上增加了控制alpha透明度的參數(shù)。語法格式為：rgba(R,G,B,A)。4.7文件結(jié)構(gòu)與元素類型4.7.1文件結(jié)構(gòu)的基本概念4.7.2元素類型4.7.1文件結(jié)構(gòu)的基本概念 為了更好地理解“CSS采用HTML文件結(jié)構(gòu)來決定其樣式的應(yīng)用”這句話，首先需要理解文件是怎樣結(jié)構(gòu)化的，也為以后學(xué)習(xí)繼承、層疊等知識(shí)打下基礎(chǔ)?！纠?-17】文件結(jié)構(gòu)示例。4.7.2元素類型

CSS使用display屬性規(guī)定元素應(yīng)該生成的框的類型，任何元素都可以通過display屬性改變默認(rèn)的顯示類型。

1．塊級(jí)元素（display:block）

2．行內(nèi)元素（display:inline）

3．列表項(xiàng)元素（display:list-item）

4．隱藏元素（display:none）4.7.2元素類型

5．其他分類

除了上述常用的分類，還包括以下分類：display:inline-table|run-in|table|table-caption|table-cell|table-column|table-column-group|table-row|table-row-group|inherit

從布局角度來分析，上述類型都可以劃歸為block和inline兩種，其他類型都是這兩種類型的特殊顯示，真正能夠應(yīng)用并獲得所有瀏覽器支持的只有4個(gè)：none、block、inline和list-item。4.8案例—制作鮮品園行業(yè)資訊頁面4.7.1文件結(jié)構(gòu)的基本概念4.7.2元素類型4.8案例—制作鮮品園行業(yè)資訊頁面 【例4-18】制作鮮品園行業(yè)資訊頁面。習(xí)題41．建立內(nèi)部樣式表，制作如圖4-23所示的頁面。2．使用偽類相關(guān)的知識(shí)制作鼠標(biāo)指針懸停效果，當(dāng)鼠標(biāo)指針懸停在鏈接上時(shí)，呈現(xiàn)不同的顯示，如圖4-24所示。3．使用文件結(jié)構(gòu)的基本知識(shí)制作如圖4-25所示的頁面。4．使用CSS制作商機(jī)發(fā)布信息局部頁面，如圖4-26所示。5．使用CSS制作鮮品園服務(wù)向?qū)Ь植宽撁?，如圖4-27所示。

Web前端開發(fā)實(shí)例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第5章CSS3的屬性目錄5.1CSS字體屬性5.2CSS文本屬性5.3CSS背景屬性5.4CSS尺寸屬性5.5CSS列表屬性5.6CSS表格屬性5.7CSS屬性的應(yīng)用5.8綜合案例—制作鮮品園夢(mèng)想社區(qū)頁面5.1CSS字體屬性5.1.1字體類型屬性5.1.2字體尺寸屬性5.1.3字體傾斜屬性5.1.4小寫字體屬性5.1.5字體粗細(xì)5.1.1字體類型屬性 font-family屬性設(shè)置文本元素的字體類型。語法：font-family:name1,name2,…參數(shù)：name是字體名稱。字體名稱按優(yōu)先順序排列，以逗號(hào)隔開。如果字體名稱包含空格，則要用引號(hào)括起。說明：用font-family屬性可控制顯示字體。不同的操作系統(tǒng)，其字體名是不同的。對(duì)于Windows系統(tǒng)，其字體名就如Word的“字體”列表中所列出的字體名稱一樣。5.1.2字體尺寸屬性 font-size屬性設(shè)置字體的大小，實(shí)際上它設(shè)置的是字體中字符框的高度，實(shí)際的字符字體可能比這些框高或低。語法：font-size:absolute-size|relative-size|length|percentage參數(shù)：其值可以是絕對(duì)值也可以是相對(duì)值。5.1.3字體傾斜屬性 font-style屬性設(shè)置字體的傾斜。語法：font-style:normal|italic|oblique參數(shù)：normal為正常字體（默認(rèn)值），italic為斜體，對(duì)于沒有斜體變量的特殊字體，將應(yīng)用oblique。oblique為傾斜的字體。5.1.4小寫字體屬性 font-variant設(shè)置元素中的文本是否為小型的大寫字母。語法：font-variant:normal|small-caps參數(shù)：normal默認(rèn)為正常的字體。small-caps設(shè)置將使所有的小寫字母轉(zhuǎn)換為大寫字母字體，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。5.1.5字體粗細(xì)font-weight屬性設(shè)置元素中文本字體的粗細(xì)。語法：font-weight:normal|bold|bolder|lighter|number參數(shù)：normal是正常的字體，相當(dāng)于number為400，聲明此值將取消之前的任何設(shè)置。bold表示粗體，相當(dāng)于number為700，也相當(dāng)于htmlb加粗元素的作用。bolder表示粗體再加粗，即特粗體。lighter表示比默認(rèn)字體還細(xì)。number數(shù)字越大字體越粗，包括100、200、300、400、500、600、700、800和900。5.1.5字體粗細(xì)【例5-1】設(shè)置字體樣式示例。5.2CSS文本屬性5.2.1文本顏色屬性5.2.2行高屬性5.2.3文本水平對(duì)齊方式屬性5.2.4為文本添加修飾屬性5.2.5段落首行縮進(jìn)屬性5.2.6文本的陰影屬性5.2.7元素內(nèi)部的空白屬性5.2.8文本的截?cái)嘈Ч麑傩?.2.1文本顏色屬性 color屬性設(shè)置文本的顏色。語法：color:color參數(shù)：color指定顏色，顏色取值前面已經(jīng)介紹過，顏色值可以使用多種書寫方式，可以用顏色英文名稱，也可以用十六進(jìn)制數(shù)，還可以是rgb函數(shù)。5.2.2行高屬性

line-height屬性設(shè)置元素的行高，即字體底端與字體內(nèi)部頂端之間的距離，如圖5-2所示。語法：line-height:length|normal|inherit參數(shù)：length為由百分比數(shù)字或由數(shù)值、單位標(biāo)識(shí)符組成的長度值，允許為負(fù)值。其百分比取值基于字體的高度尺寸。normal為默認(rèn)行高。inherit為從父元素繼承l(wèi)ine-height設(shè)置。5.2.3文本水平對(duì)齊方式屬性

使用text-align屬性可以設(shè)置元素中文本的水平對(duì)齊方式。語法：text-align:left|right|center|justify參數(shù)：left為左對(duì)齊，right為右對(duì)齊，center為居中，justify為兩端對(duì)齊。說明：設(shè)置對(duì)象中文本的對(duì)齊方式。5.2.4為文本添加修飾屬性

使用CSS樣式可以對(duì)文本進(jìn)行簡單的修飾，text屬性所提供的text-decoration屬性，主要實(shí)現(xiàn)文本加下畫線、頂線、刪除線及文本閃爍等效果。語法：text-decoration:none|underline|blink|overline|line-through參數(shù)：none為無裝飾。underline為下畫線，blink為閃爍，overline為上畫線，line-through為刪除線。5.2.5段落首行縮進(jìn)屬性

段落首行縮進(jìn)指的是段落的第一行從左向右縮進(jìn)一定的距離，而首行以外的其他行保持不變，其目的是便于閱讀和區(qū)分文章整體結(jié)構(gòu)。text-indent屬性用于設(shè)置文本塊首行文本的縮進(jìn)。語法：text-indent:length參數(shù)：length為百分比數(shù)字或由浮點(diǎn)數(shù)字、單位標(biāo)識(shí)符組成的長度值，允許為負(fù)值。它的屬性可以是固定的長度值，也可以是相對(duì)于父元素寬度的百分比，默認(rèn)值為0。5.2.6文本的陰影屬性 text-shadow設(shè)置對(duì)象中文