任務(wù)1認(rèn)識(shí)網(wǎng)頁(yè)的設(shè)計(jì)與策劃HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程ContentsPage目錄頁(yè)123網(wǎng)頁(yè)和網(wǎng)站網(wǎng)站開(kāi)發(fā)流程常用網(wǎng)頁(yè)制作軟件4項(xiàng)目實(shí)戰(zhàn)：歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面設(shè)計(jì)策劃網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程5習(xí)題與項(xiàng)目實(shí)踐ContentsPage過(guò)渡頁(yè)網(wǎng)頁(yè)和網(wǎng)站11.1網(wǎng)頁(yè)和網(wǎng)站的概念

網(wǎng)頁(yè)（WebPage）是實(shí)際上是一個(gè)文件，網(wǎng)頁(yè)里可以有文字、圖像、聲音及視頻信息等。網(wǎng)頁(yè)可以看成是一個(gè)單一體，是網(wǎng)站的一個(gè)元素。網(wǎng)站(Web

Site)是一個(gè)存放網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。網(wǎng)

頁(yè)網(wǎng)站1.1網(wǎng)頁(yè)和網(wǎng)站的概念主頁(yè)：用戶(hù)進(jìn)入網(wǎng)站時(shí)看到的第一個(gè)頁(yè)面就是主頁(yè)（homepage）。內(nèi)頁(yè)：通過(guò)主頁(yè)中的超級(jí)鏈接，打開(kāi)的網(wǎng)頁(yè)就是內(nèi)頁(yè)。依據(jù)網(wǎng)頁(yè)的位置，可以分為主頁(yè)和內(nèi)頁(yè)靜態(tài)網(wǎng)頁(yè)：是指使用HTML語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)，其制作簡(jiǎn)單易學(xué)，但缺乏靈活性，在瀏覽網(wǎng)頁(yè)時(shí)瀏覽者和服務(wù)器不發(fā)生交互。動(dòng)態(tài)網(wǎng)頁(yè)：是指使用ASP、PHP、JSP、ASP.NET等程序生成的網(wǎng)頁(yè)，可以與瀏覽者進(jìn)行交互，也稱(chēng)為交互式網(wǎng)頁(yè)。依據(jù)表現(xiàn)形式，可以分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)1.1網(wǎng)頁(yè)和網(wǎng)站的概念

網(wǎng)頁(yè)一般情況下一個(gè)網(wǎng)頁(yè)都有Logo徽標(biāo)、導(dǎo)航條、Banner、內(nèi)容板塊、版尾版權(quán)板塊等。Logo徽標(biāo)Logo徽標(biāo)導(dǎo)航Banner廣告條內(nèi)容板塊1.1網(wǎng)頁(yè)和網(wǎng)站的概念版尾版權(quán)信息網(wǎng)站內(nèi)容1.2網(wǎng)頁(yè)的常用技術(shù)HTML、CSS、JavaScript是網(wǎng)頁(yè)設(shè)計(jì)最核心也是最基礎(chǔ)的技術(shù)。2.靜態(tài)網(wǎng)頁(yè)技術(shù)結(jié)構(gòu)HTML的主要功能是定義網(wǎng)頁(yè)的基本結(jié)構(gòu)外觀CSS主要功能是定義網(wǎng)頁(yè)的外觀行為JavaScript腳本的主要功能是定義網(wǎng)頁(yè)的行為。2.網(wǎng)頁(yè)的常用技術(shù)HTMLHTML(HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）HTML是由W3C（WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟）所提出，主要的用途是制作網(wǎng)頁(yè)。HTML文件是由“標(biāo)簽”（tag）和“屬性”（attribute）所組成，統(tǒng)稱(chēng)為“元素”（element），瀏覽器只要看到HTML源代碼，就能解析成網(wǎng)頁(yè)。目前，最新的HTML文件是HTML5。1.2網(wǎng)頁(yè)的常用技術(shù)CSSCSS（CascadingStyleSheets，層疊樣式表）CSS也是由W3C所提出，主要用途是控制網(wǎng)頁(yè)的外觀，也就是定義網(wǎng)頁(yè)的編排、顯示、格式化及特殊效果。W3C鼓勵(lì)網(wǎng)頁(yè)設(shè)計(jì)人員使用HTML來(lái)定義網(wǎng)頁(yè)的結(jié)構(gòu)，而使用CSS來(lái)控制網(wǎng)頁(yè)的外觀，將兩者的功能明確，語(yǔ)義更加清晰。目前，最新的CSS版本是CSS3。1.2網(wǎng)頁(yè)的常用技術(shù)瀏覽器端script瀏覽器端script的主要功能是定義網(wǎng)頁(yè)的行為。常用的有VBscript和JavaScript，其中JavaScript為主流腳本。經(jīng)常使用JavaScript腳本來(lái)嵌入動(dòng)態(tài)文本、對(duì)瀏覽器事件做出響應(yīng)、讀寫(xiě)HTML元素、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)，以及檢測(cè)訪客的瀏覽器信息等。1.2網(wǎng)頁(yè)的常用技術(shù)PHP、JSP、ASP、ASP.NET是目前主流動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)。2.動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)

PHP是當(dāng)今Internet上最為火熱的腳本語(yǔ)言，其語(yǔ)法借鑒了C、Java、PERL等語(yǔ)言，但只需要很少的編程知識(shí)你就能使用PHP建立一個(gè)真正交互的Web站點(diǎn)。

PHP

即HypertextPreprocessor（超文本預(yù)處理器）

JSP是即JavaServerPages（JAVA服務(wù)器頁(yè)面），它是由SunMicrosystem公司于1999年6月推出的新技術(shù)，是基于JavaServlet以及整個(gè)Java體系的Web開(kāi)發(fā)技術(shù)。

JSP即JavaServerPages（JAVA服務(wù)器頁(yè)面）1.2網(wǎng)頁(yè)的常用技術(shù)ASP是MicroSoft公司開(kāi)發(fā)的服務(wù)器端腳本環(huán)境，可用來(lái)創(chuàng)建動(dòng)態(tài)交互式網(wǎng)頁(yè)并建立強(qiáng)大的web應(yīng)用程序。當(dāng)服務(wù)器收到對(duì)ASP文件的請(qǐng)求時(shí)，它會(huì)處理包含在用于構(gòu)建發(fā)送給瀏覽器的HTML（HyperTextMarkupLanguage，超文本置標(biāo)語(yǔ)言）網(wǎng)頁(yè)文件中的服務(wù)器端腳本代碼。除服務(wù)器端腳本代碼外，ASP文件也可以包含文本、HTML（包括相關(guān)的客戶(hù)端腳本）和com組件調(diào)用。

ASP

即ActiveServerPages（動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè)）

ASP.NET是微軟公司推出的新一代腳本語(yǔ)言。ASP.NET基于.NETFramework的Web開(kāi)發(fā)平臺(tái)，不但吸收了ASP以前版本的最大優(yōu)點(diǎn)并參照J(rèn)ava、VB語(yǔ)言的開(kāi)發(fā)優(yōu)勢(shì)加入了許多新的特色，同時(shí)也修正了以前的ASP版本的運(yùn)行錯(cuò)誤。。

ASP.NET又稱(chēng)為ASP+ContentsPage過(guò)渡頁(yè)網(wǎng)站開(kāi)發(fā)流程2網(wǎng)站開(kāi)發(fā)流程1234前期策劃與組織網(wǎng)頁(yè)效果圖的設(shè)計(jì)制作網(wǎng)頁(yè)制作網(wǎng)站測(cè)試與發(fā)布策劃與組織具體內(nèi)容2.1前期策劃與組織了解客戶(hù)需求，客戶(hù)評(píng)估網(wǎng)站功能設(shè)計(jì)網(wǎng)站結(jié)構(gòu)規(guī)劃頁(yè)面設(shè)計(jì)內(nèi)容編輯撰寫(xiě)“網(wǎng)站功能需求分析報(bào)告”提供網(wǎng)站系統(tǒng)硬件、軟件配置方案整理相關(guān)技術(shù)資料和文字資料確定網(wǎng)頁(yè)的主題和風(fēng)格，規(guī)劃好網(wǎng)站欄目并確定網(wǎng)站的色彩、網(wǎng)頁(yè)版面布局等。

網(wǎng)頁(yè)效果圖的設(shè)計(jì)通常會(huì)使用圖像設(shè)計(jì)軟件和一些其他的軟件，應(yīng)用較為廣泛的主要是Adode公司出品的Photoshop。2.2網(wǎng)頁(yè)效果圖的設(shè)計(jì)制作網(wǎng)頁(yè)效果圖2.3網(wǎng)頁(yè)制作HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE2.3網(wǎng)頁(yè)制作VisualStudioCode工具2.4網(wǎng)站測(cè)試與發(fā)布

據(jù)瀏覽器的種類(lèi)、客戶(hù)端的要求以及網(wǎng)站的大小進(jìn)行站點(diǎn)測(cè)試，通常是將站點(diǎn)移到一個(gè)模擬調(diào)試服務(wù)器上進(jìn)行測(cè)試或編輯。檢查鏈接功能是否可用。為了使頁(yè)面對(duì)不支持的標(biāo)簽、樣式、插件等在瀏覽器中能兼容且顯示正常，需要進(jìn)行瀏覽器兼容性的檢查。ContentsPage過(guò)渡頁(yè)常用網(wǎng)頁(yè)制作軟件31.網(wǎng)頁(yè)圖形圖像處理工具網(wǎng)頁(yè)圖形圖像處理photoshop2.3網(wǎng)頁(yè)制作HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE2.3網(wǎng)頁(yè)制作VisualStudioCode工具ContentsPage過(guò)渡頁(yè)初次體驗(yàn)網(wǎng)頁(yè)編程41.網(wǎng)頁(yè)圖形圖像處理工具編寫(xiě)第一個(gè)HTML5頁(yè)面<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>第一個(gè)HTML5頁(yè)面</title> </head> <body> <h3>開(kāi)啟網(wǎng)頁(yè)設(shè)計(jì)與制作之旅!</h3> </body></html>1.網(wǎng)頁(yè)圖形圖像處理工具編寫(xiě)第一個(gè)HTML+CSS頁(yè)面舉例演示ContentsPage過(guò)渡頁(yè)項(xiàng)目實(shí)戰(zhàn)5歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面設(shè)計(jì)策劃1.網(wǎng)站開(kāi)發(fā)需求

歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面主要包含賞析視頻、技法分享、名家介紹、傳統(tǒng)墨竹畫(huà)源流析、作品賞析、名家作品展示等。其中，主頁(yè)要在banner區(qū)域設(shè)置名家作品的展播；設(shè)置傳統(tǒng)墨竹畫(huà)源流析的內(nèi)容展示；設(shè)置作品賞析的欄目以及優(yōu)秀作品展示。2.

繪制草圖網(wǎng)站logo網(wǎng)站導(dǎo)航（關(guān)于我們、賞析視頻、技法分享、名家介紹）網(wǎng)站banner區(qū)域（名家作品的展示）傳統(tǒng)墨竹畫(huà)源流析標(biāo)題書(shū)籍展示畫(huà)源流析列表作品賞析標(biāo)題墨竹圖片展示展示作品標(biāo)題墨竹圖片展示展示作品標(biāo)題作品賞析內(nèi)容文字作品賞析內(nèi)容文字墨竹圖片展示展示作品標(biāo)題墨竹圖片展示展示作品標(biāo)題作品賞析內(nèi)容文字作品賞析內(nèi)容文字作品展示圖片圖片圖片圖片圖片圖片版權(quán)信息ContentsPage過(guò)渡頁(yè)習(xí)題與項(xiàng)目實(shí)踐5理論測(cè)試（1）HTML是一種頁(yè)面（

）型的語(yǔ)言。A．程序設(shè)計(jì)B．執(zhí)行C．編譯D．描述（2）下面（

）不是動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)。A．PHPB．JSPC．ASP.NETD．CSS2實(shí)踐項(xiàng)目：網(wǎng)站策劃與草圖設(shè)計(jì)

藍(lán)天校園工程是檢察機(jī)關(guān)推廣的關(guān)愛(ài)青少年系列項(xiàng)目之一，旨在用法律護(hù)航，打造校園一片蔚藍(lán)的天空，引導(dǎo)廣大青少年樹(shù)立正確的社會(huì)主義核心價(jià)值觀，為在校青少年創(chuàng)造安全、健康和積極向上的成長(zhǎng)環(huán)境。從而借助網(wǎng)絡(luò)平臺(tái)推出“藍(lán)天網(wǎng)?！?，通過(guò)介紹典型案例、與學(xué)生互動(dòng)等形式，宣傳法律知識(shí)，增強(qiáng)學(xué)生法制意識(shí)，建立藍(lán)天校園網(wǎng)絡(luò)天空。

具體欄目要包括：網(wǎng)校動(dòng)態(tài)、法制視界、法律課堂、法規(guī)查詢(xún)、檢察官講案例、檢察官寄語(yǔ)、檢察官信箱、檢察官信箱、檢察官信箱、檢察官信箱。謝謝大家！機(jī)械工業(yè)出版社CHINAMACHINEPRESS機(jī)械工業(yè)出版社CHINAMACHINEPRESS任務(wù)2設(shè)計(jì)與制作網(wǎng)頁(yè)效果圖HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程ContentsPage目錄頁(yè)123Photoshop應(yīng)用基礎(chǔ)PhotoshopCC高級(jí)應(yīng)用4項(xiàng)目實(shí)戰(zhàn)：淮安蒸承文化傳媒有限公司網(wǎng)站效果圖制作網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程習(xí)題與項(xiàng)目實(shí)踐ContentsPage過(guò)渡頁(yè)P(yáng)hotoshop應(yīng)用基礎(chǔ)12.1Photoshop應(yīng)用基礎(chǔ)1.PhotoshopCC的軟件界面2.1Photoshop應(yīng)用基礎(chǔ)主要包括圖像文件的創(chuàng)建、保存、圖像大小與畫(huà)布大小的修改以及基本工具的使用。2.PhotoshopCC的基本操作

圖像文件的創(chuàng)建執(zhí)行“文件”→“新建”命令，打開(kāi)“新建”對(duì)話(huà)框，點(diǎn)擊“確定”按鈕即可完成圖像文件的創(chuàng)建。保存與關(guān)閉執(zhí)行“文件”→“存儲(chǔ)為”命令，打開(kāi)“存儲(chǔ)為”對(duì)話(huà)框，選擇合適的路徑，并輸入合適的文件名即可保存圖像。執(zhí)行“文件”→“關(guān)閉”命令即可關(guān)閉圖像。2.1Photoshop應(yīng)用基礎(chǔ)2.PhotoshopCC的基本操作圖像文件的打開(kāi)與屏幕模式執(zhí)行“文件”→“打開(kāi)”命令，調(diào)出“打開(kāi)”窗口，選擇圖片的路徑圖像即可。三種顯示模式：“標(biāo)準(zhǔn)屏幕模式”、“帶有菜單的全屏模式”、“全屏模式”前景色與背景色的設(shè)置

Photoshop使用前景色繪圖、填充和描邊選區(qū)，使用背景色進(jìn)行漸變和填充圖像中的被擦除的區(qū)域。工具箱的前景色與背景色的設(shè)置按鈕在工具箱中。2.1Photoshop應(yīng)用基礎(chǔ)2.PhotoshopCC的基本操作選區(qū)工具的使用執(zhí)選擇區(qū)域就是用來(lái)編輯的區(qū)域，所有的命令只對(duì)選擇區(qū)域的部分有效，對(duì)區(qū)域外無(wú)效。選擇區(qū)域是用黑白相間的“螞蟻線(xiàn)”表示，其中用于選擇區(qū)域操作的工具包括選框工具、套索工具、魔棒工具等。繪圖工具的使用（1）漸變工具的使用（2）油漆桶工具的使用（3）文字工具的使用舉例演示2.1Photoshop應(yīng)用基礎(chǔ)

圖層就好比一層透明的玻璃紙，透過(guò)這層紙，可以看到紙后的東西，而且無(wú)論在這層紙上如何涂畫(huà)都不會(huì)影響其他層的內(nèi)容。3.圖層的相關(guān)應(yīng)用2.1Photoshop應(yīng)用基礎(chǔ)圖層樣式是創(chuàng)建圖像特效的重要手段，Photoshop提供了多種提出樣式效果，可以快速更改圖層的外貌，為圖像添加陰影、發(fā)光、斜面、疊加、和描邊等效果。4.圖層樣式的應(yīng)用2.1Photoshop應(yīng)用基礎(chǔ)網(wǎng)頁(yè)設(shè)計(jì)效果圖制作過(guò)程中混合圖像時(shí)，圖層的混合模式是最為有效的技術(shù)之一，恰當(dāng)?shù)膶煞蚨喾鶊D像間使用混合模式，能夠輕松地制作出圖像間相互隱藏、疊加，混融為一體的效果。5.圖層混合模式的應(yīng)用Photoshop將混合模式分為6大類(lèi)20多種混合形式，即：組合模式（正常、溶解），加深混合模式（變暗、正片疊底、顏色加深、線(xiàn)性加深），減淡混合模式（變亮、濾色、顏色減淡、線(xiàn)性減淡），對(duì)比混合模式（疊加、柔光、強(qiáng)光、亮光、線(xiàn)性光、點(diǎn)光、實(shí)色混合），比較混合模式（差值、排除），色彩混合模式（色相、飽和度、顏色、亮度）。2.1Photoshop應(yīng)用基礎(chǔ)6.PhotoshopCC的常用快捷鍵2.1Photoshop應(yīng)用基礎(chǔ)6.PhotoshopCC的常用快捷鍵2.1Photoshop應(yīng)用基礎(chǔ)6.案例：圖層混合模式案例ContentsPage過(guò)渡頁(yè)P(yáng)hotoshopCC高級(jí)應(yīng)用2在Photoshop中通道被用來(lái)存放圖像的顏色信息以及自定義的選區(qū)，不僅可以使用通道得到非常特殊的選區(qū)，以輔助制作效果圖，還可以通過(guò)改變通道中存放的顏色信息來(lái)調(diào)整圖像的色調(diào)。無(wú)論是新建文件、打開(kāi)文件或掃描文件，當(dāng)一個(gè)圖像文件被調(diào)入Photoshop后，Photoshop就將為其建立圖像固有的顏色通道或稱(chēng)原色通道，原色通道的數(shù)目取決于圖像的色彩模式。通道2.2PhotoshopCC高級(jí)應(yīng)用舉例演示蒙版是一種遮蓋工具，就像是在圖像上用來(lái)保護(hù)圖像的一種“膜”，可以分離和保護(hù)圖像的局部區(qū)域。換句話(huà)說(shuō)，蒙版是與圖層捆綁在一起、用于控制圖層中圖像的顯示與隱藏層的蒙版，在此蒙版中裝載的全部為灰度圖像，并以蒙版中的黑、白圖像來(lái)控制圖層縮略圖中圖像的隱藏或顯示。圖層蒙版的最大優(yōu)點(diǎn)是在顯示與隱藏圖像時(shí)，所有的操作均在蒙版中進(jìn)行，不會(huì)影響圖層中的像素。蒙版2.2PhotoshopCC高級(jí)應(yīng)用舉例演示ContentsPage過(guò)渡頁(yè)項(xiàng)目實(shí)戰(zhàn)3歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面網(wǎng)頁(yè)效果圖設(shè)計(jì)與制作1.網(wǎng)站效果圖展示本效果圖設(shè)計(jì)中用到的主要知識(shí)：圖像的摳取、輔助線(xiàn)的應(yīng)用、圖層樣式的應(yīng)用、圖層混合模式的應(yīng)用、蒙版的應(yīng)用等等。舉例演示2.具體制作網(wǎng)站首部與導(dǎo)航欄的制作圖添加導(dǎo)航后的頁(yè)面效果2.ContentsPage過(guò)渡頁(yè)習(xí)題與項(xiàng)目實(shí)踐41.選擇題（1）下列()是Photoshop圖象最基本的組成單元。

A.節(jié)點(diǎn)B.色彩空間C.像素D.路徑（2）在Photoshop中將前景色和背景色恢復(fù)為默認(rèn)顏色的快捷鍵是（）。A．<D>鍵B．<X>鍵C．<Tab>鍵D．<Alt>鍵（3）在Photoshop中，如果想繪制直線(xiàn)的畫(huà)筆效果，應(yīng)該按住()鍵。A．<Ctrl>鍵B．<Shift>鍵C．<Tab>鍵D．<Alt>鍵（4）Photoshop中在使用矩形選框工具的情況下，按住()可以創(chuàng)建一個(gè)以落點(diǎn)為中心的正方形的選區(qū)。A．Ctrl+Alt鍵B．Ctrl+Shift鍵C．Alt+Shift鍵D．Shift鍵2實(shí)踐項(xiàng)目打開(kāi)河南博物院官網(wǎng)，打開(kāi)“開(kāi)放時(shí)間”欄目（如圖所示），搜集相關(guān)資料，使用Photoshop完成效果圖復(fù)原。謝謝大家！機(jī)械工業(yè)出版社CHINAMACHINEPRESS機(jī)械工業(yè)出版社CHINAMACHINEPRESS任務(wù)3實(shí)現(xiàn)HTML圖文混排HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程ContentsPage目錄頁(yè)124HTML5的簡(jiǎn)介HTML5基礎(chǔ)6項(xiàng)目實(shí)戰(zhàn)：使用HTML基本標(biāo)簽構(gòu)建歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程習(xí)題與項(xiàng)目實(shí)踐37589文字與段落標(biāo)簽列表標(biāo)簽圖像標(biāo)簽超級(jí)鏈接標(biāo)簽表格標(biāo)簽ContentsPage過(guò)渡頁(yè)HTML5的簡(jiǎn)介1HTML1時(shí)間(年)1993199519972014HTML2HTML3HTML4HTML5?版本123451.HTML5的發(fā)展史3.1HTML5的簡(jiǎn)介1HTML1.0——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。2HTML2.0——1995年11月作為RFC（RequestForComments，請(qǐng)求評(píng)議）1866發(fā)布。3HTML3.2——1997年1月14日，W3C推薦標(biāo)準(zhǔn)。4HTML4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)。5HTML5——2014年10月28日，W3C推薦標(biāo)準(zhǔn)。3.1HTML5的簡(jiǎn)介3.1HTML5的簡(jiǎn)介2.HTML5的優(yōu)勢(shì)

HTML5之前，幾大主流瀏覽器廠商為了爭(zhēng)奪市場(chǎng)占有率，在各自的瀏覽器中增加各種各樣的功能，沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)，從而使得使用不同的瀏覽器時(shí)，常常會(huì)看到不同的頁(yè)面效果。在HTML5中，納入了所有合理的擴(kuò)展功能，具備良好的跨平臺(tái)性能。兼容性3.1HTML5的簡(jiǎn)介2.HTML5的優(yōu)勢(shì)新增加了內(nèi)容元素，比如header、nav、section、article、footer。新增加了表單控件，比如calendar、date、time、email、url、search。新增加了用于繪畫(huà)的canvas元素。新增加了用于媒體播放的video和audio元素。更好的支持了本地離線(xiàn)儲(chǔ)存。支持地理位置、拖曳、攝像頭等API。新增多個(gè)特性3.1HTML5的簡(jiǎn)介2.HTML5的優(yōu)勢(shì)為保證安全性，在HTML5的規(guī)范中引入了一種新的基于來(lái)源的安全模型，該模型簡(jiǎn)單易用，同時(shí)對(duì)不同的API（ApplicationProgrammingInterface，應(yīng)用程序編程接口）都可通用。使用這個(gè)安全模型，不需要借助于任何不安全的hack就能跨域進(jìn)行安全對(duì)話(huà)。安全機(jī)制的設(shè)計(jì)3.1HTML5的簡(jiǎn)介2.HTML5的優(yōu)勢(shì)在清晰分離內(nèi)容與表現(xiàn)方面，HTML5邁出了很大一步。為了避免可訪問(wèn)性差、代碼高雜度、文件過(guò)大等問(wèn)題，HTML5規(guī)范中更細(xì)致、清晰地分離了內(nèi)容和表現(xiàn)。實(shí)際上，HTML5規(guī)范已經(jīng)不支持老版本的HTML的大部分表現(xiàn)功能的屬性。內(nèi)容和表現(xiàn)分離3.1HTML5的簡(jiǎn)介2.HTML5的優(yōu)勢(shì)HTML5要的就是簡(jiǎn)單，避免不必要的復(fù)雜性。為此，簡(jiǎn)化了DOCTYPE、簡(jiǎn)化了字符聲明，提供了簡(jiǎn)單而強(qiáng)大的HTML5API，使用瀏覽器原生能力替代復(fù)雜的JavaScript代碼。化繁為簡(jiǎn)的優(yōu)勢(shì)3.1HTML5的簡(jiǎn)介瀏覽器就是一種把再互聯(lián)網(wǎng)上的文本文檔和其他文件翻譯成網(wǎng)頁(yè)的軟件，通過(guò)瀏覽器可以快捷地閱讀Internet上的內(nèi)容。常用的瀏覽器有IE（InternetExplorer）、火狐（FireFox）、谷歌(Chrome)、Safari和Opera等，這些瀏覽器都能很好的支持HTML5。4.瀏覽器介紹3.1HTML5的簡(jiǎn)介4.瀏覽器內(nèi)核（1）Trident內(nèi)核Trident內(nèi)核代表產(chǎn)品InternetExplorer，又稱(chēng)其為IE內(nèi)核。此內(nèi)核只能應(yīng)用于Windows平臺(tái)，且不是開(kāi)源的。Trident內(nèi)核一直延續(xù)到IE11，IE11后繼者Edge采用了新內(nèi)核EdgeHTML。（2）Webkit內(nèi)核WebKit是蘋(píng)果公司自己的內(nèi)核，WebKit內(nèi)核代表作品Safari、Chrome是一個(gè)開(kāi)源項(xiàng)目，包含了來(lái)自KDE（KDesktopEnvironment，K桌面環(huán)境）項(xiàng)目和蘋(píng)果公司的一些組件，它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快。3.1HTML5的簡(jiǎn)介4.瀏覽器內(nèi)核（3）Gecko內(nèi)核Gecko內(nèi)核的特點(diǎn)是代碼完全公開(kāi)，因此，其可開(kāi)發(fā)程度很高，全世界的程序員都可以為其編寫(xiě)代碼，增加功能，這也是Geckos內(nèi)核雖然年輕但市場(chǎng)占有率能夠迅速提高的重要原因。使用它的瀏覽器有Firefox、Netscape。（4）Presto內(nèi)核Presto是由OperaSoftware開(kāi)發(fā)的瀏覽器排版引擎，曾被認(rèn)為是世界上最快的渲染引擎。Presto內(nèi)核在Opera瀏覽器7~12版本中使用（2013年前），2013年之后Opera瀏覽器使用Chromium內(nèi)核。ContentsPage過(guò)渡頁(yè)HTML5基礎(chǔ)23.2HTML5基礎(chǔ)

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <body> </body></html>1.HTML5基本結(jié)構(gòu)3.2HTML5基礎(chǔ)<!DOCTYPE>標(biāo)簽位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范，HTML5文檔中的DOCTYPE聲明非常簡(jiǎn)單，體現(xiàn)了HTML5的簡(jiǎn)介性。只有開(kāi)頭處使用<!DOCTYPE>聲明，瀏覽器才能將該頁(yè)面作為有效的HTML文檔，并按指定的文檔類(lèi)型進(jìn)行解析。只有使用HTML5的DOCTYPE聲明，才會(huì)觸發(fā)瀏覽器以標(biāo)準(zhǔn)兼容模式來(lái)顯示頁(yè)面信息。

<!DOCTYPE>標(biāo)簽3.2HTML5基礎(chǔ)<html>標(biāo)簽位于<!DOCTYPE>標(biāo)簽之后，也被稱(chēng)為根標(biāo)簽，用于告知瀏覽器其自身是一個(gè)HTML文檔，<html>文檔標(biāo)志這HTML文檔的開(kāi)始，</html>標(biāo)簽標(biāo)志著HTML文檔的結(jié)束，在它們之間的是文檔的頭部<head>和主體<body>內(nèi)容。

<html>標(biāo)簽3.2HTML5基礎(chǔ)<head>標(biāo)簽用于定義HTML文檔的頭部信息，也成為頭部標(biāo)簽，緊跟在<html>標(biāo)簽之后，主要用來(lái)封裝其他位于文檔頭部的標(biāo)簽。<meta>標(biāo)簽中charset="UTF-8"指定了代碼的字符集為“UTF-8”。<title>標(biāo)簽可以顯示網(wǎng)頁(yè)的標(biāo)題信息。一個(gè)HTML文檔只能含有一對(duì)<head>標(biāo)簽，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁(yè)面中。<head>標(biāo)簽3.2HTML5基礎(chǔ)<body>標(biāo)簽用于定義HTML文檔所要顯示的內(nèi)容，也成為主體標(biāo)簽。瀏覽器中顯示的所有文本、圖像、表單與多媒體元素等信息都必須位于<body>標(biāo)簽內(nèi)，<body>標(biāo)簽中的信息才是最終展示給用戶(hù)看的。<body>標(biāo)簽一個(gè)HTML文檔只能含有一對(duì)<body>標(biāo)簽，且<body>標(biāo)簽必須在<html>標(biāo)簽內(nèi)，位于<head>頭部標(biāo)簽之后，與<head>標(biāo)簽是并列關(guān)系。注意：3.2HTML5基礎(chǔ)2.HTML5的基本語(yǔ)法內(nèi)容類(lèi)型HTML5的文件擴(kuò)展名與內(nèi)容類(lèi)型保持不變，文件擴(kuò)展名仍為.html和.htm，內(nèi)容類(lèi)型仍為text/html。3.2HTML5基礎(chǔ)2.HTML5的基本語(yǔ)法文檔類(lèi)型聲明在HTML5中，刻意不使用版本聲明，一份文檔將會(huì)適用于所有版本的HTML。HTML5中的DOCIYPE聲明方法（不區(qū)分大小寫(xiě)）如下。<!DOCTYPEhtml>3.2HTML5基礎(chǔ)2.HTML5的基本語(yǔ)法字符編碼在HTML5中，使用<meta>元素直接追加charset屬性的方式來(lái)指定字符編碼，代碼如下：<metacharset="UTF-8"/>代碼的注釋3.2HTML5基礎(chǔ)2.HTML5的基本語(yǔ)法不區(qū)分英文字母的大小寫(xiě)HTML5不區(qū)分英文字母的大小寫(xiě)，如果要兼顧XHTML的兼容性，建議采用小寫(xiě)英文字母。HTML5代碼注釋采用<!--...-->標(biāo)簽，例如。<!--這是一段注釋。注釋不會(huì)在瀏覽器中顯示。--><h1>這是標(biāo)題1。</h1>3.2HTML5基礎(chǔ)2.HTML5的基本語(yǔ)法版本兼容性省略標(biāo)簽的元素在HTML5中，元素的標(biāo)簽可以省略。具體包括3種類(lèi)型：不允許寫(xiě)結(jié)束標(biāo)簽、可以省略結(jié)束標(biāo)簽、開(kāi)始與結(jié)束標(biāo)簽都可以省略。省略引號(hào)屬性值兩邊既可以使用雙引號(hào)，也可以使用單引號(hào)，還可以省略引號(hào)。布爾值的屬性對(duì)于具有boolean值的屬性，如disabled與readonly等，當(dāng)只寫(xiě)屬性而不指定屬性值時(shí)，表示屬性值為true；如果想要將屬性值設(shè)置為false，可以不使用該屬性。另外，要想將屬性值設(shè)定為true，也可以將屬性名設(shè)置為屬性值，或?qū)⒖兆址O(shè)定為屬性值。ContentsPage過(guò)渡頁(yè)文字與段落標(biāo)簽3

注意：通常一個(gè)頁(yè)面只能使用一個(gè)<h1>標(biāo)簽，常常被用在網(wǎng)站名稱(chēng)部分。由于<hn>擁有確切的語(yǔ)義，請(qǐng)慎重選擇恰當(dāng)?shù)臉?biāo)簽來(lái)構(gòu)建文檔結(jié)構(gòu)。一般不用<hn>標(biāo)簽來(lái)設(shè)置文字加粗或更改文字的大小。為了使網(wǎng)頁(yè)更具有語(yǔ)義化，在頁(yè)面中經(jīng)常會(huì)用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的標(biāo)題，即<h1><h2><h3><h4><h5>和<h6>，從<h1>到<h6>重要性遞減。語(yǔ)法：<hnalign="對(duì)齊方式">標(biāo)題內(nèi)容</hn>該語(yǔ)法中n的取值為1到6，1級(jí)標(biāo)題字號(hào)最大，6級(jí)標(biāo)題字號(hào)最小。align屬性為可選屬性（left文本左對(duì)齊，center文本居中對(duì)齊，right文本右對(duì)齊），用于指定標(biāo)題的對(duì)齊方式。標(biāo)題標(biāo)簽3.3文字與段落標(biāo)簽為了排列的整齊、清晰，在文字段落之間常用<p></p>來(lái)做標(biāo)簽。文件段落的開(kāi)始由<p>來(lái)標(biāo)簽，段落的結(jié)束由</p>來(lái)結(jié)束標(biāo)簽，</p>是可以省略的，因?yàn)橄乱粋€(gè)<p>的開(kāi)始就意味著上一個(gè)<p>的結(jié)束。語(yǔ)法：<palign="對(duì)齊方式">段落文本</p>該語(yǔ)法中align屬性為<p>標(biāo)簽的可選屬性，和標(biāo)題標(biāo)簽<h1>~<h6>一樣，同樣可以使用align屬性來(lái)設(shè)置段落文本的對(duì)齊方式。段落標(biāo)簽3.3文字與段落標(biāo)簽

<hr>標(biāo)簽是水平線(xiàn)標(biāo)簽，用于段落與段落之間的分隔，使文檔結(jié)構(gòu)清晰明了，使文字的編排更整齊。語(yǔ)法：<hr屬性="屬性值"/><hr>標(biāo)簽是單標(biāo)簽，通過(guò)設(shè)置<hr>標(biāo)簽的屬性值，可以控制水平分隔線(xiàn)的樣式。常用屬性說(shuō)明如表所示。水平分隔線(xiàn)標(biāo)簽3.3文字與段落標(biāo)簽屬性參數(shù)功能單位默認(rèn)值size

設(shè)置水平分隔線(xiàn)的粗細(xì)pixel（像素）2alignLeft、center、right設(shè)置水平分隔線(xiàn)的對(duì)齊方式

centerwidth

設(shè)置水平分隔線(xiàn)的寬度pixel（像素）、%100%color

設(shè)置水平分隔線(xiàn)的顏色

blacknoshade

設(shè)置水平分隔線(xiàn)的3D陰影

【例3-1】文字與段落標(biāo)簽的使用，在HTML中，一個(gè)段落的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽<br/>?！纠?-1】文字與段落標(biāo)簽的使用<body> <h2align="center">竹石</h2> <h4align="center">清·鄭燮</h4> <hrwidth=100%size="1"align="left"color="#ff0000"> <palign="center">

咬定青山不放松，立根原在破巖中。<br>

千磨萬(wàn)擊還堅(jiān)勁，任爾東西南北風(fēng)。 </p> <hrwidth=100%size="1"align="right"color="#ff0000"></body>換行標(biāo)簽3.3文字與段落標(biāo)簽【例3-1】文字與段落標(biāo)簽的使用，HTML網(wǎng)頁(yè)中，為了讓文字富有變化，或者為了著重強(qiáng)調(diào)某一部分，例如為文字設(shè)置粗體、斜體或下劃線(xiàn)效果，為此HTML準(zhǔn)備了專(zhuān)門(mén)的文本格式化標(biāo)簽，HTML提供了一些標(biāo)簽來(lái)實(shí)現(xiàn)這些效果。文本的格式化標(biāo)簽3.3文字與段落標(biāo)簽【例3-1】文字與段落標(biāo)簽的使用，HTML中有些字符無(wú)法直接顯示出來(lái)，例如“?”。使用特殊字符可以將鍵盤(pán)上沒(méi)有的字符表達(dá)出來(lái)，而有些HTML文檔的特殊字符（如“<”等）在鍵盤(pán)上雖然可以得到，但瀏覽器在解析HTML文檔時(shí)會(huì)報(bào)錯(cuò)，為防止代碼混淆，必須用一些代碼來(lái)表示它們，可以用字符代碼來(lái)表示，也可以用數(shù)字代碼來(lái)表示。特殊字符標(biāo)簽3.3文字與段落標(biāo)簽3.3文字與段落標(biāo)簽舉例演示ContentsPage過(guò)渡頁(yè)列表標(biāo)簽4【例3-1】文字與段落標(biāo)簽的使用，3.4列表標(biāo)簽<ul>標(biāo)簽定義無(wú)序列表，無(wú)序列表指沒(méi)有進(jìn)行編號(hào)的列表，每一個(gè)列表項(xiàng)前使用<li>，<li>的屬性type決定列表的圖標(biāo)類(lèi)型無(wú)序列表【例3-1】文字與段落標(biāo)簽的使用，語(yǔ)法：<ultype=編號(hào)類(lèi)型> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li> <li>第三項(xiàng)</li></ul>3.4列表標(biāo)簽<ul>標(biāo)簽定義無(wú)序列表，無(wú)序列表指沒(méi)有進(jìn)行編號(hào)的列表，每一個(gè)列表項(xiàng)前使用<li>，<li>的屬性type決定列表的圖標(biāo)類(lèi)型無(wú)序列表【例3-1】文字與段落標(biāo)簽的使用，語(yǔ)法：<oltype=編號(hào)類(lèi)型start=value> <li>項(xiàng)目?jī)?nèi)容1</li> <li>項(xiàng)目?jī)?nèi)容2</li> <li>項(xiàng)目?jī)?nèi)容3</li></ol>3.4列表標(biāo)簽有序列表和無(wú)序列表的使用格式基本相同，它使用標(biāo)簽<ol></ol>，每一個(gè)列表項(xiàng)前使用<li>。<ol>列表的結(jié)果是帶有前后順序之分的編號(hào)。如果插入和刪除一個(gè)列表項(xiàng)，編號(hào)會(huì)自動(dòng)調(diào)整。有序列表type的屬性如表3-5所示。有序列表【例3-1】文字與段落標(biāo)簽的使用，【例3-3】列表的嵌套與使用方法3.4列表標(biāo)簽列表嵌套能將制作的網(wǎng)頁(yè)頁(yè)面分割為多層次，比如圖書(shū)的目錄，讓人覺(jué)得有很強(qiáng)的層次感。有序列表和無(wú)序列表不僅能自身嵌套，而且也能互相嵌套。嵌套列表舉例演示【例3-1】文字與段落標(biāo)簽的使用，語(yǔ)法：<dl><dt>第1項(xiàng)</dt><dd>注釋1</dd><dt>第2項(xiàng)</dt><dd>注釋2</dd><dt>第3項(xiàng)</dt><dd>注釋3</dd></dl>【例3-4】定義列表的使用3.4列表標(biāo)簽使用<dl>標(biāo)簽定義了定義列表（definitionlist），定義列表多用于對(duì)術(shù)語(yǔ)或名詞的描述，同時(shí)，定義列表項(xiàng)前面無(wú)任何項(xiàng)目符號(hào)。<dl>標(biāo)簽用于結(jié)合<dt>（定義列表中的項(xiàng)目）和<dd>（描述列表中的項(xiàng)目）。定義列表【例3-1】文字與段落標(biāo)簽的使用，【例3-4】定義列表的使用3.4列表標(biāo)簽定義列表舉例演示ContentsPage過(guò)渡頁(yè)圖像標(biāo)簽5【例3-1】文字與段落標(biāo)簽的使用，語(yǔ)法：<imgsrc="圖像URL"/>該語(yǔ)法中src是source的縮寫(xiě)，這里是源文件的意思，src屬性用于指定圖像文件的路徑和文件名，它的語(yǔ)義就是，它是img標(biāo)簽的必需屬性。3.5圖像標(biāo)簽【例3-1】文字與段落標(biāo)簽的使用，如果要對(duì)插入的圖片進(jìn)行修飾，僅用這一個(gè)屬性是不夠的，還要配合其他屬性來(lái)完成，<img>標(biāo)簽屬性如表3-6所示。3.5圖像標(biāo)簽【例3-1】文字與段落標(biāo)簽的使用，3.5圖像標(biāo)簽舉例演示ContentsPage過(guò)渡頁(yè)超級(jí)鏈接標(biāo)簽6【例3-1】文字與段落標(biāo)簽的使用，超鏈接是網(wǎng)頁(yè)頁(yè)面中最重要的元素之一。一個(gè)網(wǎng)站是由多個(gè)頁(yè)面組成的，頁(yè)面之間依據(jù)鏈接確定相互的導(dǎo)航關(guān)系。鏈接能使瀏覽者從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，實(shí)現(xiàn)文檔互聯(lián)、網(wǎng)站互聯(lián)。超文本鏈接通常簡(jiǎn)稱(chēng)為超鏈接或鏈接。鏈接是指文檔中的文字或者圖像與另一個(gè)文檔、文檔的一部分或者一幅圖像鏈接在一起，它是HTML的一個(gè)最強(qiáng)大、最有價(jià)值的功能。3.6超級(jí)鏈接標(biāo)簽3.6超級(jí)鏈接標(biāo)簽超級(jí)鏈接主要通過(guò)<a></a>標(biāo)簽環(huán)繞鏈接對(duì)象創(chuàng)建。語(yǔ)法：<ahref=“資源地址”target=“窗口名稱(chēng)”title=“鏈接提示文字">鏈接對(duì)象</a>標(biāo)簽<a>表示超鏈接的開(kāi)始，</a>表示超鏈接的結(jié)束。href屬性定義了這個(gè)鏈接所指的目標(biāo)地址。目標(biāo)地址是最重要的，一旦路徑上出現(xiàn)差錯(cuò)，該資源就無(wú)法訪問(wèn)。target屬性用于指定打開(kāi)鏈接的目標(biāo)窗口，其取值有_self和_blank兩種，其中_self為默認(rèn)值，意為在原窗口中打開(kāi)，_blank為在新窗口中打開(kāi)。創(chuàng)建超鏈接3.6超級(jí)鏈接標(biāo)簽【例3-6】超鏈接的創(chuàng)建創(chuàng)建超鏈接舉例演示3.6超級(jí)鏈接標(biāo)簽絕對(duì)路徑就是主頁(yè)上的文件或目錄在硬盤(pán)上的真正路徑。例如：“例3-5”中的圖片地址“D:\素材與源代碼\任務(wù)3\images\zun.png”，這個(gè)圖片路徑就為圖片在電腦上的絕對(duì)路徑。此外，還有圖片在網(wǎng)絡(luò)上的絕對(duì)路徑，例如：河南博物院的logo圖片網(wǎng)絡(luò)地址“/webfile/ch_assets/images/public/logo.png”。絕對(duì)路徑相對(duì)路徑是最適合網(wǎng)站的內(nèi)部鏈接的。只要是屬于同一網(wǎng)站之下的，即使不在同一個(gè)目錄下，相對(duì)鏈接也非常適合。文件相對(duì)地址是書(shū)寫(xiě)內(nèi)部鏈接的理想形式。只要是處于站點(diǎn)文件夾之內(nèi)，相對(duì)地址可以自由地在文件之間構(gòu)建鏈接。這種地址形式利用的是構(gòu)建鏈接的兩個(gè)文件之間的相對(duì)關(guān)系，不受站點(diǎn)文件夾所處服務(wù)器位置的影響。因此這種書(shū)寫(xiě)形式省略了絕對(duì)地址中的相同部分。相對(duì)路徑3.6超級(jí)鏈接標(biāo)簽相對(duì)路徑3.6超級(jí)鏈接標(biāo)簽在瀏覽頁(yè)面的時(shí)候，如果頁(yè)面的內(nèi)容較多，頁(yè)面過(guò)長(zhǎng)，就需要不斷地拖動(dòng)滾動(dòng)條，很不方便，如果要尋找特定的內(nèi)容，就更加不方便。這時(shí)如果能在該網(wǎng)頁(yè)或另外一個(gè)頁(yè)面上建立目錄，瀏覽者只要單擊目錄上的項(xiàng)目就能自動(dòng)跳到網(wǎng)頁(yè)相應(yīng)的位置進(jìn)行閱讀。錨點(diǎn)鏈接就可以實(shí)現(xiàn)這一功能。錨點(diǎn)可以與鏈接的文字在同一個(gè)頁(yè)面，也可以在不同的頁(yè)面。但要實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)部的錨點(diǎn)鏈接，都需要先建立錨點(diǎn)。通過(guò)建立的錨點(diǎn)才能對(duì)頁(yè)面的內(nèi)容進(jìn)行引導(dǎo)和跳轉(zhuǎn)。創(chuàng)建錨點(diǎn)鏈接分為兩步，先定義錨點(diǎn)，再通過(guò)id名標(biāo)注跳轉(zhuǎn)到錨點(diǎn)目標(biāo)的位置。錨點(diǎn)的定義語(yǔ)法：<aname="錨點(diǎn)名稱(chēng)">文字</a>或者<aid="錨點(diǎn)名稱(chēng)">文字</a>在該語(yǔ)法中，書(shū)簽名稱(chēng)就是對(duì)后面跳轉(zhuǎn)所創(chuàng)建的書(shū)簽，文字則是設(shè)置鏈接后跳轉(zhuǎn)的位置。錨點(diǎn)鏈接的語(yǔ)法：<ahref="#書(shū)簽的名稱(chēng)"＞鏈接的文字</a>在該語(yǔ)法中，書(shū)簽的名稱(chēng)就是剛才定義的書(shū)簽名，也就是name的賦值。而#則代表這個(gè)書(shū)簽的鏈接地址。錨點(diǎn)鏈接3.6超級(jí)鏈接標(biāo)簽錨點(diǎn)鏈接舉例演示3.6超級(jí)鏈接標(biāo)簽除了對(duì)整個(gè)圖像進(jìn)行超鏈接的設(shè)置外，還可以將圖像劃分成不同的區(qū)域進(jìn)行超鏈接設(shè)置。而包含熱區(qū)的圖像也可以稱(chēng)為圖像熱區(qū)鏈接。影像地圖的定義與使用方法：首先需要在圖像文件中映射圖像名，在圖像的屬性中使用usemap屬性添加圖像要引用的映射圖像的名稱(chēng)如下：<imgsrc="圖像地址"usemap="影像地圖名稱(chēng)">然后需要定義影像地圖以及熱區(qū)的鏈接屬性如下：<mapname="影像地圖名稱(chēng)"> <areashape="熱區(qū)形狀"coords="熱區(qū)坐標(biāo)"href="鏈接地址"></map>在該語(yǔ)法中要先定義映射圖像的名稱(chēng)，然后再引用這個(gè)映射圖像。在<area>標(biāo)記中定義了熱區(qū)的位置和鏈接，其中shape用來(lái)定義熱區(qū)形狀，可以取值為rect（矩形區(qū)域）、circle（圓形區(qū)域）以及poly（多邊形區(qū)域）；coords參數(shù)則用來(lái)設(shè)置熱區(qū)坐標(biāo)，對(duì)于不同形狀，coords設(shè)置的方式也不同。圖像熱區(qū)鏈接3.6超級(jí)鏈接標(biāo)簽對(duì)于矩形區(qū)域rect來(lái)說(shuō)，coords包含4個(gè)參數(shù)，分別為left、top、right和bottom，也可以將這4個(gè)參數(shù)看作矩形兩個(gè)對(duì)角的點(diǎn)坐標(biāo)；對(duì)于圓形區(qū)域circle來(lái)說(shuō)，coords包含3個(gè)參數(shù)，分別為center-x、center-y和tadius，也可以看作圓形的圓心坐標(biāo)(x，y)與半徑的值；對(duì)于多邊形區(qū)域poly設(shè)置坐標(biāo)參數(shù)比較復(fù)雜，與多邊形的形狀息息相關(guān)。coords參數(shù)需要按照順序（可以是逆時(shí)針，也可以是順時(shí)針）取各個(gè)點(diǎn)的x、y坐標(biāo)值。由于定義坐標(biāo)比較復(fù)雜且難以控制，一般情況下可以使用可視化軟件進(jìn)行這種參數(shù)的置。

圖像熱區(qū)鏈接3.6超級(jí)鏈接標(biāo)簽【例3-8】圖像熱區(qū)鏈接的使用。圖像熱區(qū)鏈接舉例演示ContentsPage過(guò)渡頁(yè)表格標(biāo)簽73.7表格標(biāo)簽HTML表格通過(guò)<table>標(biāo)簽來(lái)定義。表格主要由表格標(biāo)記、行標(biāo)記、單元格標(biāo)記構(gòu)成，具體說(shuō)明如表3-8所示。表格的構(gòu)成與屬性3.7表格標(biāo)簽<table>和<／table>標(biāo)記分別標(biāo)志著一個(gè)表格的開(kāi)始和結(jié)束；而<tr>和<／tr>標(biāo)記則分別表示表格中一行的開(kāi)始和結(jié)束，在表格中包含幾組<tr>…<／tr>，就表示該表格為幾行；<td>和<／td>標(biāo)記表示一個(gè)單元格的起始和結(jié)束，也可以說(shuō)表示一行中包含了幾列。HTML表格也可能包括caption、thead、tbody以及tfoot等元素。<caption>標(biāo)簽定義表格的標(biāo)題。<thead>標(biāo)簽定義表格的表頭。該標(biāo)簽用于組合HTML表格的表頭內(nèi)容。<thead>元素應(yīng)該與<tbody>和<tfoot>元素結(jié)合起來(lái)使用。<tbody>標(biāo)簽用于對(duì)HTML表格中的主體內(nèi)容進(jìn)行分組。<tfoot>標(biāo)簽用于對(duì)HTML表格中的表注（頁(yè)腳）內(nèi)容進(jìn)行分組。表格的構(gòu)成與屬性3.7表格標(biāo)簽表格標(biāo)簽<table>有很多屬性，最常用的屬性如表3-9所示。表格的構(gòu)成與屬性【例3-9】表格的使用3.7表格標(biāo)簽<td>是插入單元格的標(biāo)簽，<td>標(biāo)簽必須嵌套在<tr>標(biāo)簽內(nèi)，需要成對(duì)出現(xiàn)的。數(shù)據(jù)標(biāo)簽<td>就是該單元格中的具體數(shù)據(jù)內(nèi)容，屬性設(shè)定如表3-10所示。單元格的設(shè)置3.7表格標(biāo)簽舉例演示3.7表格標(biāo)簽舉例演示3.8HTML的塊級(jí)元素或內(nèi)聯(lián)元素大多數(shù)HTML元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素。塊級(jí)元素在瀏覽器顯示時(shí)，通常會(huì)以新行來(lái)開(kāi)始，例如：<h1>元素、<p>元素、<ul>元素、<table>、<div>元素等。內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開(kāi)始，而是能顯示在同行，或者根據(jù)實(shí)際情況自然換行，例如：<b>元素、<td>元素、<a>元素、<img>元素、<span>元素等。下面分別介紹常用的<div>塊級(jí)元素和<span>內(nèi)聯(lián)元素。3.8HTML的塊級(jí)元素或內(nèi)聯(lián)元素1.<div>元素HTML中<div>元素是塊級(jí)元素，它可用于組合其他HTML元素的容器。<div>元素沒(méi)有特定的含義。除此之外，由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行。如果與CSS一同使用，<div>元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。<div>元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用<table>元素進(jìn)行文檔布局不是表格的正確用法。<table>元素的作用是顯示表格化的數(shù)據(jù)。2.<span>元素HTML中<span>元素是內(nèi)聯(lián)元素，可用作文本的容器。<span>元素也沒(méi)有特定的含義。當(dāng)與CSS一同使用時(shí)，<span>元素可用于為部分文本設(shè)置樣式屬性。ContentsPage過(guò)渡頁(yè)項(xiàng)目實(shí)戰(zhàn)8使用HTML基本標(biāo)簽構(gòu)建歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面8.1.網(wǎng)站效果圖展示舉例演示ContentsPage過(guò)渡頁(yè)習(xí)題與項(xiàng)目實(shí)踐91.選擇題（1）HTML5

中DOCTYPE聲明正確的是()A.<!DOCTYPE

html>B.<!DOCTYPE

HTML5>C.<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

5.0//EN"

"/TR/html5/strict.dtd">D.<--!DOCTYPE

HTML-->2

.

在

HTML5

中，()元素用于表示無(wú)序列表。A.<ol>B.<ul>C.<li>D.<dd>3.用于正確表示圖像元素的

HTML5

標(biāo)簽是()。A.<movie>B.<media>C.<video>D.<img>2實(shí)踐項(xiàng)目1.按要求制作以下頁(yè)面：首頁(yè)面如圖1所示。當(dāng)單擊頁(yè)面中的圖片時(shí)，頁(yè)面跳轉(zhuǎn)到page1.html頁(yè)面，該頁(yè)面如圖2所示。謝謝大家！機(jī)械工業(yè)出版社CHINAMACHINEPRESS機(jī)械工業(yè)出版社CHINAMACHINEPRESS任務(wù)4使用HTML5新元素頁(yè)面布局HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程ContentsPage目錄頁(yè)124HTML5的元素分類(lèi)結(jié)構(gòu)性元素6項(xiàng)目實(shí)戰(zhàn)：使用HTML5結(jié)構(gòu)標(biāo)簽構(gòu)建墨竹作品賞析頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程習(xí)題與項(xiàng)目實(shí)踐3758級(jí)塊性元素行內(nèi)語(yǔ)義性元素交互性元素多媒體對(duì)象的使用ContentsPage過(guò)渡頁(yè)HTML5的元素分類(lèi)14.1HTML5的元素分類(lèi)結(jié)構(gòu)性元素主要負(fù)責(zé)Web的上下文結(jié)構(gòu)的定義，確保HTML文檔的完整性，這類(lèi)元素包含以下幾個(gè)。section:在Web頁(yè)面應(yīng)用中，該元素也可以用于區(qū)域的章節(jié)表述。header:頁(yè)面主體上的頭部。footer:頁(yè)面的底部（頁(yè)腳）。通常會(huì)在這里標(biāo)出網(wǎng)站的一些相關(guān)信息。nav:是專(zhuān)門(mén)用于菜單導(dǎo)航、鏈接導(dǎo)航的元素，是navigator的縮寫(xiě)。article：用于表示一篇文章的主體內(nèi)容，一般為文字集中顯示的區(qū)域。結(jié)構(gòu)性元素4.1HTML5的元素分類(lèi)級(jí)塊性元素主要完成Web頁(yè)面區(qū)域的劃分，確保內(nèi)容的有效分隔，這類(lèi)元素包括以下幾個(gè)。aside:用以表達(dá)側(cè)欄、摘要、插入的引用等作為補(bǔ)充主體的內(nèi)容。從簡(jiǎn)單頁(yè)面顯示上看，就是側(cè)邊欄，可以在左邊，也可以在右邊。從一個(gè)頁(yè)面的局部看，就是摘要。figure:是對(duì)多個(gè)元素進(jìn)行組合并展示的元素，通常與figcaption聯(lián)合使用。code:表示一段代碼塊。dialog:用于表達(dá)人與人之間的對(duì)話(huà)。該元素還包括dt和dd這兩個(gè)組合元素，它們常常同時(shí)使用。dt用于表示說(shuō)話(huà)者，而dd則用來(lái)表示說(shuō)話(huà)者說(shuō)的內(nèi)容。級(jí)塊性元素4.1HTML5的元素分類(lèi)行內(nèi)語(yǔ)義性元素主要完成Web頁(yè)面具體內(nèi)容的引用和表述，是豐富內(nèi)容展示的基礎(chǔ)，這類(lèi)元素包括以下幾個(gè)。meter:表示特定范圍內(nèi)的數(shù)值，可用于工資、數(shù)量、百分比等。time:表示時(shí)間值。progress:用來(lái)表示進(jìn)度條，可通過(guò)對(duì)其max、min、step等屬性進(jìn)行控制，完成對(duì)進(jìn)度的表示和監(jiān)視。video:視頻元素，用于支持和實(shí)現(xiàn)視頻（含視頻流）文件的直接播放，支持緩沖預(yù)載和多種視頻媒體格式，如MPEG-4、OggV和WebM等。audio：音頻元素，用于支持和實(shí)現(xiàn)音頻（音頻流）文件的直接播放，支持緩沖預(yù)載和多種音頻媒體格式。行內(nèi)語(yǔ)義性元素4.1HTML5的元素分類(lèi)交互性元素主要用于功能性的內(nèi)容表達(dá)，會(huì)有一定的內(nèi)容與數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)，這類(lèi)元素包括以下幾個(gè)。details：用來(lái)表示一段具體的內(nèi)容，但是內(nèi)容默認(rèn)可能不顯示，通過(guò)某種手段（如單擊）與legend交互才會(huì)顯示出來(lái)。datagrid：用來(lái)控制客戶(hù)端數(shù)據(jù)與顯示，可以由動(dòng)態(tài)腳本及時(shí)更新。menu：主要用于交互菜單（這是一個(gè)曾被廢棄現(xiàn)在又被重新啟用的元素）。command:用來(lái)處理命令按鈕。交互性元素ContentsPage過(guò)渡頁(yè)結(jié)構(gòu)性元素24.2結(jié)構(gòu)性元素認(rèn)知結(jié)構(gòu)性元素傳統(tǒng)布局方式1figure標(biāo)簽HTML5結(jié)構(gòu)性標(biāo)簽4.2結(jié)構(gòu)性元素

<header>標(biāo)簽定義文檔的頁(yè)眉，通常是一些引導(dǎo)和導(dǎo)航信息。它不局限于寫(xiě)在網(wǎng)頁(yè)頭部，也可以寫(xiě)在網(wǎng)頁(yè)內(nèi)容里面。通常<header>標(biāo)簽至少包含一個(gè)標(biāo)題標(biāo)記（<h1>-<h6>），還可以包括<hgroup>標(biāo)簽，還可以包括表格內(nèi)容、標(biāo)識(shí)Logo、搜索表單、<nav>導(dǎo)航等。例如：<header><h1>網(wǎng)站標(biāo)題</h1><h2>網(wǎng)站副標(biāo)題</h2></header>header標(biāo)簽【例4-1】article標(biāo)簽的使用4.2結(jié)構(gòu)性元素它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁(yè)面其它內(nèi)容使用。例如一篇完整的論壇帖子，一篇博客文章，一個(gè)用戶(hù)評(píng)論等等。一般來(lái)說(shuō)，article會(huì)有標(biāo)題部分，通常包含在header內(nèi)，有時(shí)也會(huì)包含footer。article可以嵌套，內(nèi)層的article對(duì)外層的article標(biāo)簽有隸屬關(guān)系。例如，一篇博客的文章，可以用article顯示，然后一些評(píng)論也可以以article的形式嵌入其中。aritcle標(biāo)簽 舉例演示舉例演示4.2結(jié)構(gòu)性元素<section>標(biāo)簽用于對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行分區(qū)、分塊，定義文檔中的節(jié)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其它部分。一般情況下，section標(biāo)簽通常由內(nèi)容和標(biāo)題組成。<section>標(biāo)簽表示一段專(zhuān)題性的內(nèi)容，一般會(huì)帶有標(biāo)題，沒(méi)有標(biāo)題的內(nèi)容區(qū)塊不要使用section標(biāo)簽定義。根據(jù)實(shí)際情況，如果article標(biāo)簽、aside標(biāo)簽或nav標(biāo)簽更符合使用條件，那么不要使用section標(biāo)簽。當(dāng)一個(gè)容器需要被直接定義樣式或通過(guò)腳本定義行為時(shí)，推薦使用div標(biāo)簽而非section。section標(biāo)簽4.2結(jié)構(gòu)性元素

【例4-2】section標(biāo)簽的使用舉例演示舉例演示nav標(biāo)簽代表頁(yè)面的一個(gè)部分，是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組，是navigator的縮寫(xiě)。其中的導(dǎo)航標(biāo)簽鏈接到其它頁(yè)面或者當(dāng)前頁(yè)面的其它部分，使html代碼在語(yǔ)義化方面更加精確，同時(shí)對(duì)于屏幕閱讀器等設(shè)備的支持也更好?！纠?-3】nav標(biāo)簽的使用

nav標(biāo)簽 4.2結(jié)構(gòu)性元素舉例演示footer標(biāo)簽定義section或document的頁(yè)腳，包含了與頁(yè)面、文章或是部分內(nèi)容有關(guān)的信息，比如說(shuō)文章的作者或者日期。作為頁(yè)面的頁(yè)腳時(shí)，一般包含了版權(quán)、相關(guān)文件和鏈接。它和<header>標(biāo)簽使用基本一樣，可以在一個(gè)頁(yè)面中多次使用，也可以在article標(biāo)簽或者section標(biāo)簽中添加footer標(biāo)簽，那么它就相當(dāng)于該區(qū)段的頁(yè)腳了。例如：<<footer>Copyright@2013-2024中國(guó)科學(xué)技術(shù)館AllRightsReserved</footer>footer標(biāo)簽

4.2結(jié)構(gòu)性元素ContentsPage過(guò)渡頁(yè)級(jí)塊性元素34.3級(jí)塊性元素aside標(biāo)簽用來(lái)裝載非正文的內(nèi)容，被視為頁(yè)面里面一個(gè)單獨(dú)的部分。它包含的內(nèi)容與頁(yè)面的主要內(nèi)容是分開(kāi)的，可以被刪除，而不影響到網(wǎng)頁(yè)的內(nèi)容、章節(jié)或是頁(yè)面所要傳達(dá)的信息。aside標(biāo)簽可以被包含在article標(biāo)簽內(nèi)作為主要內(nèi)容的附屬信息。也可以在article標(biāo)簽之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分。例如廣告、友情鏈接、側(cè)邊欄、導(dǎo)航條等等。aside標(biāo)簽【例4-4】aside標(biāo)簽的使用舉例演示舉例演示figure標(biāo)簽用于定義獨(dú)立的流內(nèi)容，例如圖像、圖表、照片、代碼等，一般指一個(gè)單獨(dú)的單元。figcaption標(biāo)簽用于為figure標(biāo)簽組添加標(biāo)題，一個(gè)figure標(biāo)簽內(nèi)最多允許使用一個(gè)figcaption標(biāo)簽，該標(biāo)簽應(yīng)該放在figure標(biāo)簽的第一個(gè)或者最后一個(gè)子標(biāo)簽的位置?！纠?-5】figure標(biāo)簽使用方法

figure標(biāo)簽 4.3級(jí)塊性元素舉例演示ContentsPage過(guò)渡頁(yè)行內(nèi)語(yǔ)義性元素44.4行內(nèi)語(yǔ)義性元素progress標(biāo)簽標(biāo)示任務(wù)的進(jìn)度或進(jìn)程。progress元素的常用屬性值有兩個(gè)，value表示已經(jīng)完成的工作量，max表示總共有多少工作量。需要注意的是value和max屬性的值必須大于0，且value的值要小于或等于max屬性的值。通常<progress>標(biāo)簽與Javascript一同使用，來(lái)顯示任務(wù)的進(jìn)度。【例4-6】progress標(biāo)簽的使用progress標(biāo)簽舉例演示4.4行內(nèi)語(yǔ)義性元素meter標(biāo)簽定義度量衡，為已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測(cè)量。也被稱(chēng)為gauge（尺度）。例如，顯示硬盤(pán)容量、對(duì)某個(gè)選項(xiàng)的比例統(tǒng)計(jì)等，都可以使用meter元素。<meter>標(biāo)簽不應(yīng)用于指示進(jìn)度（在進(jìn)度條中），如果標(biāo)記進(jìn)度條，請(qǐng)使用<progress>標(biāo)簽。meter標(biāo)簽

【例4-7】meter標(biāo)簽的使用舉例演示4.4行內(nèi)語(yǔ)義性元素舉例演示4.4行內(nèi)語(yǔ)義性元素time標(biāo)簽表示時(shí)間值，主要加強(qiáng)了html的語(yǔ)義化結(jié)構(gòu)。而是讓網(wǎng)頁(yè)的代碼有條理，讓計(jì)算機(jī)，例如百度或者谷歌搜索機(jī)器人能夠理解網(wǎng)頁(yè)的意思。time元素有兩個(gè)屬性。datetime:用于定義相應(yīng)的時(shí)間或日期。取值為具體時(shí)間（如14:00）或具體日期（如2024-10-10），不定義該屬性時(shí)，由元素的內(nèi)容給定日期/時(shí)間。pubdate:用于定義time元素中的日期/時(shí)間是文檔（或article元素）的發(fā)布日期。取值一般為“pubdate”。time標(biāo)簽ContentsPage過(guò)渡頁(yè)交互性元素54.5交互性元素details標(biāo)簽用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。summary標(biāo)簽經(jīng)常與details標(biāo)簽配合使用，作為details標(biāo)簽的第一個(gè)子標(biāo)簽，用于為details定義標(biāo)題。標(biāo)題是可見(jiàn)的，當(dāng)用戶(hù)單擊標(biāo)題時(shí)，會(huì)顯示或隱藏details中的其他內(nèi)容。details標(biāo)簽和summary標(biāo)簽

【例4-9】details標(biāo)簽和summary標(biāo)簽的使用。舉例演示44.5交互性元素4.5交互性元素<menu>標(biāo)簽定義命令的列表或菜單，<menu>標(biāo)簽用于上下文菜單、工具欄以及用于列出表單控件和命令。command元素表示用戶(hù)能夠調(diào)用的命令。只有當(dāng)command元素位于menu元素內(nèi)時(shí)，該元素才是可見(jiàn)的。否則不會(huì)顯示這個(gè)元素，但是可以用它規(guī)定鍵盤(pán)快捷鍵。由于目前所有主流瀏覽器都不支持<command>和<menu>標(biāo)簽，在此不作深入講解。menu標(biāo)簽與command標(biāo)簽ContentsPage過(guò)渡頁(yè)多媒體對(duì)象的使用64.6視頻與音頻格式視頻格式4.6視頻與音頻格式音頻格式4.6視頻與音頻格式插入視頻HTML5中，使用video標(biāo)簽來(lái)定義播放視頻文件。語(yǔ)法：<videosrc="視頻的路徑"controls="controls"></video>HTML5中，video元素支持三種視頻格式Ogg、WebM和MPEG4，src屬性用于設(shè)置視頻文件的路徑，controls屬性用于為視頻提供播放控件，這兩個(gè)屬性是video元素的基本屬性。并且<video>和</video>之間還可以插入文字，用于在不支持video元素的瀏覽器中顯示。4.6視頻與音頻格式在video元素中還可以添加其他屬性，可以?xún)?yōu)化視頻的播放效果，具體如表4-4所示?！纠?-9】實(shí)現(xiàn)網(wǎng)頁(yè)中插入視頻

舉例演示4.6視頻與音頻格式舉例演示4.6視頻與音頻格式插入音頻HTML5中，使用audio標(biāo)簽來(lái)定義播放視頻文件。語(yǔ)法：<audiosrc="音頻的路徑"controls="controls"></video>HTML5中，audio元素支持三種視頻格式Ogg、MP3和Wav，src屬性用于設(shè)置音頻文件的路徑，controls屬性用于為音頻提供播放控件，這兩個(gè)屬性是audio元素的基本屬性。并且<audio>和</audio>之間還可以插入文字，用于在不支持audio元素的瀏覽器中顯示。【例4-10】實(shí)現(xiàn)網(wǎng)頁(yè)中插入音頻舉例演示4.6視頻與音頻格式舉例演示ContentsPage過(guò)渡頁(yè)項(xiàng)目實(shí)戰(zhàn)7使用HTML5結(jié)構(gòu)標(biāo)簽構(gòu)建墨竹作品賞析頁(yè)面7.1.網(wǎng)站效果圖展示舉例演示7.2案例實(shí)現(xiàn)分析案例實(shí)現(xiàn)分析ContentsPage過(guò)渡頁(yè)習(xí)題與項(xiàng)目實(shí)踐81.選擇題（1）以下（

）標(biāo)簽代表頁(yè)面的一個(gè)部分，是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組A.<aside> B.<isindex> C.<video> D.<nav>（2）HTML5中使用（

）標(biāo)簽來(lái)定義播放視頻文件。A.<video> B.<audio> C.<samp> D.<nav>2實(shí)踐項(xiàng)目1.根據(jù)中國(guó)科學(xué)技術(shù)館官網(wǎng)網(wǎng)站頁(yè)面，如圖所示，分析其相應(yīng)的HTML5代碼結(jié)構(gòu)。謝謝大家！機(jī)械工業(yè)出版社CHINAMACHINEPRESS機(jī)械工業(yè)出版社CHINAMACHINEPRESS任務(wù)5使用層疊樣式表HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程ContentsPage目錄頁(yè)123CSS3的介紹CSS樣式4項(xiàng)目實(shí)戰(zhàn)：歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面的CSS設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程習(xí)題與項(xiàng)目實(shí)踐567CSS基本選擇器其它CSS選擇器CSS的繼承與層疊ContentsPage過(guò)渡頁(yè)CSS3的介紹15.1CSS3的介紹

CSS是CascadingStyleSheet的縮寫(xiě)，可以翻譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”，即樣式表。CSS的屬性在HTML元素中是依次出現(xiàn)的，并不顯示在瀏覽器中。它可以定義在HTML文檔的標(biāo)記里，也可以在外部附加文檔中作為外加文件。此時(shí)，一個(gè)樣式表可以作用多個(gè)頁(yè)面，乃至整個(gè)站點(diǎn)，因此具有更好的易用性和拓展性。CSS3是CSS技術(shù)的升級(jí)版本，CSS3的新特點(diǎn)是被分為若干個(gè)相互獨(dú)立的模塊。CSS3把很多以前需要使用圖片和腳本來(lái)實(shí)現(xiàn)的效果、甚至動(dòng)畫(huà)效果，只需要短短幾行代碼就能搞定。比如圓角，圖片邊框，文字陰影和盒陰影，過(guò)渡、動(dòng)畫(huà)等。CSS3簡(jiǎn)化了前端開(kāi)發(fā)工作人員的設(shè)計(jì)過(guò)程，加快頁(yè)面載入速度。5.1CSS3的介紹目前主流瀏覽器Chrome、Safari、Firefox、Opera、甚至360瀏覽器都已經(jīng)支持了CSS3大部分功能了，IE10以后也開(kāi)始全面支持CSS3了。在編寫(xiě)CSS3樣式時(shí)，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的。具體前綴和瀏覽器如表5-1所示。ContentsPage過(guò)渡頁(yè)CSS樣式2CSS樣式設(shè)置規(guī)則由選擇器和聲明部分組成。語(yǔ)法：選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}選擇器是標(biāo)識(shí)已設(shè)置格式元素（例如：body、table、td、p、類(lèi)名、ID名稱(chēng)）的術(shù)語(yǔ)，大括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。而聲明則用于定義樣式屬性，聲明由屬性和值兩部分組成，其中屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)，屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，如字體大小、文本顏色等，屬性和屬性值之間用英文冒號(hào)“：”鏈接，多個(gè)“鍵值對(duì)”之間用英文分號(hào)“；”進(jìn)行區(qū)分。在下面的示例中，body為選擇器，介于“{}”中的所有內(nèi)容為聲明塊。body{ color:red; font-size:18px;}以上代碼表示了<body>標(biāo)簽內(nèi)的所有文本的字體顏色為紅色，字體大小為18px。設(shè)置規(guī)則5.2CSS樣式編寫(xiě)CSS樣式時(shí)，遵循CSS樣式規(guī)則同時(shí)，還需注意以下幾點(diǎn)。盡量統(tǒng)一使用英文、英文簡(jiǎn)寫(xiě)或者統(tǒng)一使用拼音。盡量不縮寫(xiě)，除非是一看就懂得單詞。在編寫(xiě)CSS代碼時(shí)，為了提高代碼的可讀性，通常會(huì)加上CSS注釋?zhuān)梢允褂?**/（斜杠和星號(hào)）進(jìn)行注釋。CSS樣式中的類(lèi)和id選擇器嚴(yán)格區(qū)分大小寫(xiě)，屬性和值不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般將“選擇器、屬性和值”都采用小寫(xiě)的方式。多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后用的分號(hào)可以省略，但是為了便于增加新樣式最好保留。如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。例如：p{font-family:"arialblack";}設(shè)置規(guī)則5.2CSS樣式行內(nèi)樣式表語(yǔ)法：<標(biāo)簽名稱(chēng)style="樣式屬性1:屬性值1;樣式屬性2:屬性值2;樣式屬性…">直接在HTML代碼行中加入樣式規(guī)則。適用于指定網(wǎng)頁(yè)內(nèi)的某一小段文字的顯示規(guī)則，效果僅可控制該標(biāo)簽?！纠?-1】行內(nèi)樣式表的使用。<body> <pstyle="background-color:#cc0808;color:#fde367;font-size:36px;text-align:center;">

弘揚(yáng)和踐行社會(huì)主義核心價(jià)值觀 </p></body>引入方法5.2CSS樣式使用CSS修飾網(wǎng)頁(yè)，需要在HTML文檔中引入CSS樣式表。引入CSS樣式表的常用方法有行內(nèi)樣式表、內(nèi)部樣式表、鏈入外部樣式表、導(dǎo)入外部樣式表。舉例演示5.2CSS樣式舉例演示將樣式表嵌入到HTML文件的文件頭<head>。語(yǔ)法：<head><styletype="text/css">選擇器{樣式屬性:屬性值;…}</style></head>語(yǔ)法中，<style>標(biāo)簽的位置在<head>標(biāo)簽內(nèi)嵌入樣式表。設(shè)置type的屬性值為“text/css”。將CSS代碼放在頭部便于提前被下載和解析，避免網(wǎng)頁(yè)內(nèi)容下載后沒(méi)有樣式修飾而不美觀。設(shè)置type屬性讓瀏覽器知道<style>標(biāo)簽包含的是CSS代碼。內(nèi)部樣式表5.2CSS樣式5.2CSS樣式【例5-2】?jī)?nèi)部樣式表的使用舉例演示舉例演示<body><p>弘揚(yáng)和踐行社會(huì)主義核心價(jià)值觀</p></body><styletyle="text/css"> p{ background-color:#cc0808;/*設(shè)置背景顏色*/ color:#fde367;/*設(shè)置文本顏色*/ font-size:32px;/*設(shè)置文字大小*/ text-align:center;/*設(shè)置文本居中*/ }</style>將一個(gè)外部樣式表鏈接到HTML文檔中。語(yǔ)法：<linkhref="*.css"type="text/css"rel="stylesheet">使用鏈接樣式表需要注意一下幾點(diǎn)：<link>標(biāo)簽需要放在<head>頭部標(biāo)簽中，并且必須設(shè)置<link>標(biāo)簽的三個(gè)屬性。href用于設(shè)置鏈接的CSS文件的位置，可以為絕對(duì)地址或相對(duì)地址，type：定義所鏈接文檔的類(lèi)型，在這里需要制定為“text/css”，表示鏈接的外部文件為CSS樣式表。rel="stylesheet"表示是鏈接樣式表，是鏈接樣式表的必有屬性。樣式定義在獨(dú)立的CSS文件中，并將該文件鏈接到要運(yùn)用該樣式的HTML文件中。*.css為已編輯好的CSS文件（CSS文件的路徑），CSS文件只能由樣式表規(guī)則或聲明組成。可以將多個(gè)HTML文件鏈接到同一個(gè)樣式表上，如果改變樣式表文件中的一個(gè)設(shè)置，所有的網(wǎng)頁(yè)都會(huì)隨之改變。鏈接樣式表5.2CSS樣式5.2CSS樣式【例5-3】鏈接樣式表的使用舉例演示舉例演示導(dǎo)入外部樣式表是指在HTML文件頭部的<style>元素里導(dǎo)入一個(gè)外部樣式表，采用import方式。語(yǔ)法：@importurl("樣式表路徑")如果使用導(dǎo)入外部樣式表的方法，只需要將上例的代碼：<linkhref="style.css"rel="stylesheet"type="text/css"/>刪除，并改為：<styletype="text/css">@importurl("style.css");</style>鏈接樣式表和導(dǎo)入外部樣式表最大的好處是同一個(gè)CSS樣式表可以被不同的HTML頁(yè)面鏈接使用，同時(shí)一個(gè)HTML頁(yè)面也可以通過(guò)多個(gè)標(biāo)簽鏈接多個(gè)CSS樣式表。導(dǎo)入外部樣式表5.2C