高等學(xué)校規(guī)劃教材Web前端開發(fā)實例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第1章HTML5基礎(chǔ)目錄1.1Web的基本概念1.2網(wǎng)站與網(wǎng)頁1.3Web標(biāo)準(zhǔn)1.4認(rèn)識HTML5+CSS3+JavaScript技術(shù)組合1.5HTML5語法基礎(chǔ)1.6元素的分類1.7HTML的顏色表示和字符實體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é)對網(wǎng)頁語法（如HTML、JavaScript）進(jìn)行解釋并渲染（顯示）網(wǎng)頁。1.1.3URL URL（UniversalResourceLocator）是“統(tǒng)一資源定位器”的縮寫，URL就是Web地址，俗稱“網(wǎng)址”。Internet上的每個網(wǎng)頁都具有唯一的名稱標(biāo)識，通常稱之為URL地址。這種地址可以是本地磁盤，也可以是局域網(wǎng)上的某一臺計算機(jī)，更多的是Internet上的站點。URL的基本結(jié)構(gòu)為：

通信協(xié)議：//服務(wù)器名稱[:通信端口編號]/文件夾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)記時，瀏覽器會“翻譯”由這些HTML標(biāo)記提供的網(wǎng)頁結(jié)構(gòu)、外觀和內(nèi)容的信息，從而將網(wǎng)頁按設(shè)計者的要求顯示出來。1.1.5HTTP HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議，用于傳送WWW方式的數(shù)據(jù)。當(dāng)用戶想瀏覽一個網(wǎng)站時，只要在瀏覽器的地址欄里輸入網(wǎng)站的地址就可以了，如輸入，在瀏覽器的地址欄里面出現(xiàn)的卻是/。

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

1.2.2靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 1．靜態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁是指客戶端的瀏覽器發(fā)送URL請求給WWW服務(wù)器，服務(wù)器查找需要的超文本文件，不加處理直接下載到客戶端。靜態(tài)網(wǎng)頁通常由純粹的HTML/CSS語言編寫。 2．動態(tài)網(wǎng)頁 采用動態(tài)網(wǎng)站技術(shù)生成的網(wǎng)頁都稱為動態(tài)網(wǎng)頁，其本質(zhì)主要體現(xiàn)在交互性方面。動態(tài)網(wǎng)頁根據(jù)程序運行的區(qū)域不同，分為客戶端動態(tài)網(wǎng)頁與服務(wù)器端動態(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)點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）。對應(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)語言，主要包括對象模型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)點 對于網(wǎng)站設(shè)計和開發(fā)人員來說，遵循網(wǎng)站標(biāo)準(zhǔn)就是建立和使用Web標(biāo)準(zhǔn)。建立Web標(biāo)準(zhǔn)的優(yōu)點如下。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è)備時，確保所有應(yīng)用能夠繼續(xù)正確執(zhí)行。1.3.3網(wǎng)頁的表現(xiàn)和結(jié)構(gòu)相分離 1．內(nèi)容 內(nèi)容就是頁面實際要傳達(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．行為 行為是對內(nèi)容的交互及操作效果。 所有HTML頁面都由結(jié)構(gòu)、表現(xiàn)和行為3個方面的內(nèi)容組成。內(nèi)容是基礎(chǔ)層，然后是附加上的結(jié)構(gòu)層和表現(xiàn)層，最后再對這3個層做些“行為”。1.4認(rèn)識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頁面的符號標(biāo)簽語言。 1．HTML的發(fā)展歷史 HTML最早源于SGML，最著名的就是HTML

4.0，這是一個具有跨時代意義的標(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ò)平臺奠基石的地位。1.4.1HTML5簡介 2．HTML代碼與網(wǎng)頁結(jié)構(gòu) 網(wǎng)頁內(nèi)容是通過HTML標(biāo)簽（圖中帶有“<>”的符號）組織的，網(wǎng)頁文件其實是一個純文本文件。 3．HTML5的特性 HTML5實現(xiàn)Web應(yīng)用程序和用于更好的呈現(xiàn)內(nèi)容。 （1）實現(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è)計者能夠以更有效的方式設(shè)置網(wǎng)頁格式?，F(xiàn)在幾乎所有漂亮的網(wǎng)頁都用了CSS，CSS已經(jīng)成為網(wǎng)頁設(shè)計必不可少的工具之一。1.4.3JavaScript簡介 在Web標(biāo)準(zhǔn)中，使用HTML設(shè)計網(wǎng)頁的結(jié)構(gòu)，使用CSS設(shè)計網(wǎng)頁的表現(xiàn)，使用JavaScript制作網(wǎng)頁的特效。CSS樣式表可以控制和美化網(wǎng)頁的外觀，但對網(wǎng)頁的交互行為卻無能為力，此時腳本語言提供了解決方案。 JavaScript是一種由Netscape公司的LiveScript發(fā)展而來的客戶端腳本語言，JavaScript的開發(fā)環(huán)境很簡單，不需要Java編譯器，而是直接運行在瀏覽器中，JavaScript通過嵌入或調(diào)入到HTML文件中實現(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)簽是用一對尖括號“<”和“>”括起來的單詞或單詞縮寫。 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語義元素 語義元素分為塊級元素、行內(nèi)元素、行內(nèi)塊元素等。 1．塊級元素（block）塊級元素是指本身屬性為display:block的元素。因為它自身的特點，通常使用塊級元素進(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)元素和塊級元素，不僅可以對寬和高屬性值生效，還可以多個元素存在一行顯示，稱為行內(nèi)塊元素。行內(nèi)塊元素能和其他元素放在一行，可以設(shè)置寬、高。常用的行內(nèi)塊元素有img、input、textarea等。 4．可變元素 可變元素根據(jù)上下文關(guān)系確定該元素是塊級元素還是行內(nèi)元素，主要有applet、button、del、iframe、ins、map等。1.6.2語義元素 5．HTML5中新增的結(jié)構(gòu)語義元素 HTML5增加的結(jié)構(gòu)語義元素明確了一個Web頁面的不同部分，如圖1-13所示。1.6.3無語義元素 無語義元素?zé)o須考慮其內(nèi)容，有兩個無語義元素div和span。div是塊級元素，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的顏色表示和字符實體1.7.1HTML的顏色表示1.7.2字符實體1.7.1HTML的顏色表示 在HTML中，顏色有兩種表示方式：一種是用顏色的英文名稱表示，如blue表示藍(lán)色，red表示紅色；另一種是用十六進(jìn)制的數(shù)表示RGB值。 RGB顏色的表示方式為#rrggbb。其中，rr、gg、bb三色對應(yīng)的取值范圍都是00～FF，如白色的RGB值是（255，255，255），用#ffffff表示；黑色的RGB值是（0，0，0），用#000000表示。1.7.2字符實體 一些字符在HTML中擁有特殊的含義，例如，大于號“>”和小于號“<”已作為HTML的語法符號。因此，如果希望在瀏覽器顯示這些特殊字符，就需要在HTML源碼中插入相應(yīng)的HTML代碼，這些特殊符號對應(yīng)的HTML代碼稱為字符實體。 字符實體由三部分組成：以一個符號（&）開頭，一個實體名稱，以一個分號（;）結(jié)束。例如，要在HTML文件中顯示小于號，輸入“<”。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)建一個只