網(wǎng)頁設(shè)計(jì)基礎(chǔ)ppt課件(完整版)

1、第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)絡(luò)相關(guān)術(shù)語 瀏覽器概述 網(wǎng)絡(luò)的基本概念 認(rèn)識(shí)網(wǎng)頁和網(wǎng)站 HTML 學(xué)習(xí)目標(biāo)熟悉了解了解熟悉常用的瀏覽器和HTML語言12了解網(wǎng)頁和網(wǎng)站，能夠了解二者之間的聯(lián)系了解不同類型網(wǎng)站的特點(diǎn)和常用的網(wǎng)頁開發(fā)工具3 目錄1.1認(rèn)識(shí)網(wǎng)頁和網(wǎng)站點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)1.2HTML概述1.3瀏覽器概述點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)1.4網(wǎng)站與網(wǎng)頁開發(fā)工具 知識(shí)架構(gòu)1.1 認(rèn)識(shí)網(wǎng)頁和網(wǎng)站1.1.1網(wǎng)頁和網(wǎng)站基本概念1.1.2網(wǎng)頁構(gòu)成要素1.1.3網(wǎng)站構(gòu)成1.1.4網(wǎng)站類型 知識(shí)架構(gòu)1.2 HTML概述1.2.1HTML5的概念1.2.2HTML文檔的格式 知識(shí)架構(gòu)1.3 瀏覽器概述1.3.1HTTP協(xié)

2、議和HTTPS協(xié)議簡(jiǎn)介1.3.2常用的瀏覽器1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具 知識(shí)架構(gòu).21.4.3Adobe DreamweaverVisual Studio CodeSublime Text1.4.4jetbrains WebStorm從本章開始我們將逐步深入的講解網(wǎng)頁、網(wǎng)站的相關(guān)知識(shí)和技能。隨著互聯(lián)網(wǎng)的高速發(fā)展，網(wǎng)站和網(wǎng)頁成為了人們?cè)诰W(wǎng)上交流的重要手段，每天都會(huì)有大量的網(wǎng)站出現(xiàn)在互聯(lián)網(wǎng)上。人們可以利用網(wǎng)站展示自己，也可以在網(wǎng)站上電子購(gòu)物、瀏覽最新資訊等。我們通過學(xué)習(xí)了相關(guān)技術(shù)，也可以建立一個(gè)自己的網(wǎng)站。那么到底什么是網(wǎng)頁和網(wǎng)站呢？它們之間又有什么關(guān)系呢？本章主要介紹網(wǎng)頁和網(wǎng)站的

3、基本概念、HTML知識(shí)、瀏覽器知識(shí)、網(wǎng)站和網(wǎng)頁的開發(fā)工具等知識(shí)。章節(jié)概要1.1 認(rèn)識(shí)網(wǎng)頁和網(wǎng)站1.1.1 網(wǎng)頁和網(wǎng)站的概念網(wǎng)頁（Web Page）就是一個(gè)文檔，通常由HTML語言編寫，能夠被瀏覽器解析和顯示。用戶在瀏覽器中輸入一個(gè)URL（Uniform Resource Location）地址就能訪問網(wǎng)頁。1、認(rèn)識(shí)網(wǎng)頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素文字圖像超鏈接多媒體1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素文字是網(wǎng)頁信息的主體，能夠準(zhǔn)確地傳達(dá)網(wǎng)頁要表達(dá)的信息，是網(wǎng)頁中不可或缺的構(gòu)成要素，純文本的存儲(chǔ)空間也很小，在網(wǎng)絡(luò)傳輸中具有優(yōu)勢(shì)，也有利于搜索引擎采集。1、文字1.1

4、 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素圖像也是網(wǎng)頁中必不可少的元素，相比文字，圖像更加直觀更具有視覺沖擊力，能夠很快吸引訪問者的眼球。適當(dāng)應(yīng)用圖片可以避免網(wǎng)頁中純文字給人的枯燥感，為網(wǎng)頁增加活力，使網(wǎng)頁更加生動(dòng)。網(wǎng)頁上使用的圖像一般為JPG、PNG和GIF格式。2、圖像1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素超鏈接是從一個(gè)網(wǎng)頁到其他目標(biāo)的指向，其他目標(biāo)通常是一個(gè)網(wǎng)頁，也可以是一個(gè)圖像、文件、電子郵件地址甚至是同一個(gè)網(wǎng)頁中的其他位置。網(wǎng)頁中的超鏈接通常設(shè)置在文字上，也可以是圖像、視頻或按鈕等，當(dāng)我們把鼠標(biāo)移到超鏈接上，指針會(huì)變成手型，單擊鼠標(biāo)左鍵，會(huì)加載超鏈接指向的目標(biāo)內(nèi)容。一個(gè)網(wǎng)站

5、包含很多個(gè)網(wǎng)頁，可以利用超鏈接從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁。網(wǎng)頁中的超鏈接也需要進(jìn)行樣式設(shè)計(jì)，以滿足網(wǎng)頁的美觀需求。3、超鏈接1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素為了增加網(wǎng)頁的生動(dòng)性，有時(shí)候要增加一些多媒體元素，比如視頻、音頻、動(dòng)畫等，但是多媒體元素要適量，太多了反而會(huì)讓訪問者眼花繚亂，還會(huì)影響網(wǎng)頁的打開速度。4、多媒體1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成通常一個(gè)網(wǎng)站包含很多個(gè)相關(guān)的網(wǎng)頁，但根據(jù)網(wǎng)頁的內(nèi)容，可以把這些網(wǎng)頁分為三類：首頁、列表頁和詳情頁。認(rèn)識(shí)網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成首頁（homepage）也稱為主頁，是訪問者在瀏覽器地址欄中輸入網(wǎng)址回車后看到

6、的網(wǎng)頁，通常它決定了訪問者對(duì)網(wǎng)站的第一印象，所以首頁的設(shè)計(jì)非常重要，不僅要把網(wǎng)站最重要的內(nèi)容在首頁展示出來，還要兼顧美觀，要給訪問者留下深刻印象，引起他們的興趣。當(dāng)然，網(wǎng)站首頁還要兼顧導(dǎo)航功能，通過超鏈接引導(dǎo)訪問者瀏覽網(wǎng)站的其他頁面。靜態(tài)網(wǎng)站的首頁文件通常命名為index.html或default.html。1、首頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成列表頁一般用于展示新聞列表或產(chǎn)品列表信息，有的還可以對(duì)列表展示的信息按條件進(jìn)行篩選顯示，列表頁在設(shè)計(jì)時(shí)要注重展示的排版效果，合理安排文字和圖片。2、列表頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成詳情頁對(duì)應(yīng)列表頁，當(dāng)訪問者在列表頁上想了解某

7、條新聞或某個(gè)產(chǎn)品的詳細(xì)信息時(shí)，單擊打開詳情頁，會(huì)展示該條新聞或產(chǎn)品的詳細(xì)信息，商城類的網(wǎng)站一般在詳情頁中提供購(gòu)買功能。3、詳情頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型門戶類網(wǎng)站主要功能是提供信息資訊和綜合服務(wù)，屬于綜合性質(zhì)的網(wǎng)站，網(wǎng)站內(nèi)容的覆蓋面廣，面向的用戶群體也很多，在網(wǎng)站設(shè)計(jì)制作方面更加高要求、精細(xì)化。比如新浪、網(wǎng)易、搜狐等都屬于門戶類網(wǎng)站。1、門戶類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型互聯(lián)網(wǎng)是企業(yè)進(jìn)行形象宣傳和網(wǎng)絡(luò)營(yíng)銷的平臺(tái)，很多企業(yè)都會(huì)建立一個(gè)企業(yè)網(wǎng)站，讓別人能從網(wǎng)上了解自己，不但對(duì)企業(yè)的形象是很好的宣傳，同時(shí)也可以促進(jìn)產(chǎn)品的網(wǎng)絡(luò)銷售。企業(yè)類網(wǎng)站的設(shè)計(jì)要符合企業(yè)的文化，

8、能體現(xiàn)出企業(yè)的特點(diǎn)。2、企業(yè)類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型相比線下傳統(tǒng)的實(shí)體店，電商商城類網(wǎng)站具有購(gòu)物方便和快捷的優(yōu)勢(shì)，買家只需要在網(wǎng)上選擇心儀的商品下單，便可在家收取貨物，電商類網(wǎng)站具有省事、省時(shí)、省心、高效等特點(diǎn)，受到越來越多的人歡迎。電商類網(wǎng)站的網(wǎng)頁的內(nèi)容必須突出重點(diǎn)，避免夸張，裝飾部分不宜太多，以免喧賓奪主。在內(nèi)容編排上必須簡(jiǎn)潔明了，便于瀏覽。3、電商類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型視頻類網(wǎng)站的主要內(nèi)容是視頻文件，這些視頻可以是網(wǎng)站發(fā)布的，也可以是用戶上傳的。訪問者可以在網(wǎng)站上觀看視頻，還可以進(jìn)行互動(dòng)、評(píng)論、分享等操作。隨著移動(dòng)互聯(lián)網(wǎng)的持續(xù)發(fā)展，視頻類

9、網(wǎng)站的用戶越來越多，比如愛奇藝、優(yōu)酷等都屬于視頻類網(wǎng)站。4、視頻類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型個(gè)人網(wǎng)站是個(gè)人為某些愛好、科普或展示自己等創(chuàng)建的網(wǎng)站，給相同愛好的人提供一個(gè)了解知識(shí)、相互交流的平臺(tái)或讓其他人了解自己。個(gè)人網(wǎng)站一般有比較鮮明的特點(diǎn)，個(gè)性較強(qiáng)，沒有太多的設(shè)計(jì)限制。5、個(gè)人網(wǎng)站1.2 HTML概述HTML是Hypertext Markup Language（超文本標(biāo)記語言）的縮寫，是一種用來編寫超文本文檔的標(biāo)記語言，HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語言，它最早源于SGML（

10、Standard General Markup Language，標(biāo)準(zhǔn)通用化標(biāo)記語言）的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)(如UNIX， Windows等)。利用HTML將所需表達(dá)的信息按某種規(guī)則寫成HTML文件，再經(jīng)過瀏覽器的解析，將HTML文件翻譯并展示出來，就是我們所見到的網(wǎng)頁。到目前為止，HTML已經(jīng)發(fā)展了多個(gè)版本，其中最著名的就是HTML4，2010年又推出HTML5.0，一經(jīng)推出就受到各大瀏覽器的支持。1.2.1 什么是HTML5.0HTML5是HTML的最新修訂版本，是對(duì)以前版本的繼承和發(fā)展，舊的HTML標(biāo)簽在HTML5中依然適用。HTM

11、L5 技術(shù)結(jié)合了 HTML4.01 的相關(guān)標(biāo)準(zhǔn)并革新，符合現(xiàn)代網(wǎng)絡(luò)發(fā)展要求，在 2008 年正式發(fā)布。HTML5 由不同的技術(shù)構(gòu)成，其在互聯(lián)網(wǎng)中得到了非常廣泛的應(yīng)用，提供更多增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)機(jī)。1.2 HTML概述1.2.2 HTML文檔的格式HTML文檔的基本格式主要包括：文檔類型聲明、根標(biāo)記、頭部標(biāo)記和主體標(biāo)記，具體文檔結(jié)構(gòu)如下所示。1.2 HTML概述Document1.2 HTML概述1.2.2 HTML文檔的格式標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。只有這樣瀏覽器才能將該網(wǎng)頁作為有效的HTML或XHTML文檔，并按指定的文檔類型進(jìn)行解析

12、。1、標(biāo)記1.2 HTML概述1.2.2 HTML文檔的格式標(biāo)記位于標(biāo)記之后，稱為根標(biāo)記，用于告知瀏覽器其自身是一個(gè)HTML文檔，標(biāo)記標(biāo)志著HTML文檔的開始，標(biāo)記標(biāo)志著HTML文檔的結(jié)束，在它們之間是文檔的頭部和主體內(nèi)容。2、標(biāo)記1.2 HTML概述1.2.2 HTML文檔的格式標(biāo)記用于定義HTML文檔的頭部信息，也稱頭部標(biāo)記，主要用來封裝其他位于文檔頭部的標(biāo)記，例如、及等，用來描述文檔的標(biāo)題、作者以及與其他文檔的關(guān)系。需要注意的是，一個(gè)HTML文檔只能含有一對(duì)標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁面中。3、標(biāo)記1.2 HTML概述1.2.2 HTML文檔的格式標(biāo)記用于定

13、義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于標(biāo)記內(nèi)，標(biāo)記中的信息才是最終展示給用戶看的。一個(gè)HTML文檔只能有一對(duì)標(biāo)記，且標(biāo)記必須在標(biāo)記內(nèi)，位于頭部標(biāo)記之后，與標(biāo)記是并列關(guān)系。4、標(biāo)記1.3 瀏覽器概述瀏覽器是瀏覽網(wǎng)頁的必備軟件，目前常用的瀏覽器有IE瀏覽器（Internet Explorer）、谷歌瀏覽器（Google Chrome）、火狐瀏覽器（Mozilla Firefox）、歐朋瀏覽器（Opera）和Safari瀏覽器等。1.3.1 http協(xié)議和https協(xié)議簡(jiǎn)介http協(xié)議是Hyper Text Transfer Proto

14、col（超文本傳輸協(xié)議）的縮寫，是用于從萬維網(wǎng)（World Wide Web，www）服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議。當(dāng)我們?cè)跒g覽器的地址欄輸入一個(gè)地址的時(shí)候，就能夠訪問服務(wù)器的某個(gè)頁面，這個(gè)過程本身就是兩個(gè)應(yīng)用程序之間的交互，一個(gè)應(yīng)用程序是瀏覽器，另一個(gè)應(yīng)用程序是服務(wù)器。瀏覽器作為http客戶端通過URL向http服務(wù)端即WEB服務(wù)器發(fā)送所有請(qǐng)求。Web服務(wù)器根據(jù)接收到的請(qǐng)求后，向客戶端發(fā)送響應(yīng)信息。1.3 瀏覽器概述1.3.1 http協(xié)議和https協(xié)議簡(jiǎn)介https協(xié)議（HyperText Transfer Protocol over Secure Socket Layer）是

15、以安全為目標(biāo)的http通道，在http的基礎(chǔ)上通過傳輸加密和身份認(rèn)證保證了傳輸過程的安全性.https在http的基礎(chǔ)下加入SSL層 （Secure Socket Layer，安全套接字層），https的安全基礎(chǔ)是 SSL，因此加密的詳細(xì)內(nèi)容就需要 SSL。https存在不同于http的默認(rèn)端口及一個(gè)加密/身份驗(yàn)證層（在http與 TCP 之間）。這個(gè)系統(tǒng)提供了身份驗(yàn)證與加密通訊方法，它被廣泛用于萬維網(wǎng)上安全敏感的通訊，例如交易支付等方面。1.3 瀏覽器概述1.3 瀏覽器概述1.3.2 常用瀏覽器IE瀏覽器是微軟公司推出的一款網(wǎng)頁瀏覽器。IE自1995年誕生以來，共有11個(gè)主版本。IE瀏覽器是

16、直接綁定在Windows操作系統(tǒng)中，一般不需要單獨(dú)下載和安裝。目前還有一些用戶在使用低版本的IE瀏覽器，所以在網(wǎng)頁設(shè)計(jì)中，要充分考慮這些用戶的兼容性，也就是說，設(shè)計(jì)的網(wǎng)頁要在IE瀏覽器低版本比如IE6、IE7等中測(cè)試兼容性。1、IE瀏覽器（Internet Explorer）1.3 瀏覽器概述1.3.2 常用瀏覽器谷歌瀏覽器是一款由Google公司開發(fā)一款設(shè)計(jì)簡(jiǎn)單、高效的網(wǎng)頁瀏覽器，該瀏覽器基于其他開源軟件撰寫。早期谷歌瀏覽器采用WebKit內(nèi)核，2013年后采用Blink內(nèi)核。谷歌瀏覽器自帶開發(fā)者工具，也可以實(shí)現(xiàn)代碼修改并預(yù)覽。在谷歌瀏覽器右上角的選項(xiàng)中單擊選擇“更多工具-開發(fā)者工具”（或者

17、按快捷鍵F12），打開開發(fā)者工具后，在瀏覽器右側(cè)出現(xiàn)一個(gè)調(diào)試面板。包括網(wǎng)頁HTML調(diào)試查看和CSS代碼調(diào)試，還有一些其他資源面板。谷歌瀏覽器調(diào)試的好處是可以實(shí)現(xiàn)元素定位，把鼠標(biāo)放在指定的元素上，就可以在瀏覽器的上面視圖中加灰突出顯示所對(duì)應(yīng)的元素。2、谷歌瀏覽器（Google Chrome）1.3 瀏覽器概述1.3.2 常用瀏覽器火狐瀏覽器是一個(gè)自由及開放源代碼的網(wǎng)頁瀏覽器，使用Gecko排版引擎，支持多種操作系統(tǒng)，如Windows、Mac OS X及GNU/Linux等。Firebug是火狐瀏覽器一個(gè)開發(fā)插件，主要用來調(diào)試瀏覽器的兼容性，它集HTML查看和編輯、JavaScript控制臺(tái)、網(wǎng)絡(luò)

18、狀況監(jiān)視器于一體，是開發(fā)HTML、CSS和JavaScript的好幫手。新版火狐瀏覽器中已經(jīng)將Firebug整合到“Web開發(fā)者”工具中，用戶可以在火狐瀏覽器菜單欄選擇“打開菜單-Web開發(fā)者”選項(xiàng)，再選擇“查看器”命令，即可查看網(wǎng)頁的各個(gè)模塊。3、火狐瀏覽器（Mozilla Firefox）1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具網(wǎng)頁開發(fā)工具很多，常用的編輯器軟件比如記事本都可以用來進(jìn)行HTML編碼和制作網(wǎng)頁，但記事本沒有任何代碼提示功能，所以使用不太方便。網(wǎng)站開發(fā)時(shí)應(yīng)該選擇效率高的工具，常用的網(wǎng)頁開發(fā)工具有Adobe Dreamweaver、Visual Studio Code、Sublime Text

19、和WebStorm等。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.1 Adobe DreamweaverAdobe Dreamweaver，簡(jiǎn)稱DW，中文名稱 夢(mèng)想編織者，Dreamweaver是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用對(duì) HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計(jì)師和程序員可以方便快速地進(jìn)行網(wǎng)頁設(shè)計(jì)。目前常用的版本是Adobe Dreamweaver CS6和Adobe Dreamweaver CC。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.2 Visual Studio CodeVisual Studio C

20、ode是Microsoft開發(fā)的一個(gè)可以運(yùn)行于 Mac OS X、Windows和 Linux 之上的針對(duì)于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺(tái)源代碼編輯器。這款軟件具備了很多特性，包括語法高亮（syntax high lighting）、可定制的熱鍵綁定（customizable keyboard bindings）、括號(hào)匹配（bracket matching）以及代碼片段收集（snippets）等。該編輯器支持多種語言和文件格式的編寫，目前已經(jīng)支持了37種語言或文件。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.3 Sublime TextSublime Text 是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Wind

21、ows、Linux、Mac OS X等操作系統(tǒng)，是由程序員Jon Skinner于2008年1月份所開發(fā)出來。Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能。Sublime Text還具有良好的擴(kuò)展功能，官方稱之為安裝包（Package），可以根據(jù)需要安裝和卸載安裝包。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.4 jetbrains WebStormWebStorm 是jetbrains公司的一款開發(fā)工具，被開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。可以訪問WebStorm的官方網(wǎng)站/webstorm/download/下載最新

22、版本的安裝包，下載后根據(jù)提示按步驟安裝即可。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具我們?cè)谠O(shè)計(jì)一個(gè)網(wǎng)站時(shí)，首先要確定網(wǎng)站主題、規(guī)劃網(wǎng)站結(jié)構(gòu)、尋找素材、設(shè)計(jì)網(wǎng)頁效果圖等，這些工作完成后，我們要?jiǎng)?chuàng)建網(wǎng)站文件夾，開始利用Adobe Dreamweaver、Sublime Text等軟件制作首頁和子頁面。下面通過一個(gè)簡(jiǎn)單的例子來說明制作網(wǎng)站和頁面的基本過程。案例1-1設(shè)計(jì)一個(gè)網(wǎng)站和網(wǎng)站的起始頁面在本地硬盤中創(chuàng)建一個(gè)網(wǎng)站文件夾，如chapter1，用來存放網(wǎng)站中所有的文件，在chapter1文件夾內(nèi)再新建images、css、video、audio、fonts等子文件夾，用來分類存放圖片、樣式文件、視頻文件、音頻文件

23、和字體文件等，具體網(wǎng)站文件夾結(jié)構(gòu)如圖1-5所示。1、創(chuàng)建網(wǎng)站文件夾案例1-1設(shè)計(jì)一個(gè)網(wǎng)站和網(wǎng)站的起始頁面打開Adobe Dreamweaver軟件，選擇“站點(diǎn)-新建站點(diǎn)”，在彈出的對(duì)話框中輸入站點(diǎn)名稱，單擊“瀏覽文件夾”圖標(biāo)，選擇D盤的網(wǎng)站文件夾，如圖1-6所示。2、創(chuàng)建站點(diǎn)案例1-1設(shè)計(jì)一個(gè)網(wǎng)站和網(wǎng)站的起始頁面在Adobe Dreamweaver軟件中選擇菜單“文件-新建”命令，在打開的對(duì)話框中選擇“空白頁”，在“文檔類型”的下拉列表中選擇“HTML 5”，如圖1-8所示。單擊“創(chuàng)建”按鈕即創(chuàng)建了一個(gè)空白頁面，單擊菜單“文件-保存”命令，把網(wǎng)頁以文件名index.html保存在網(wǎng)站文件夾內(nèi)，

24、如圖1-9所示。3、創(chuàng)建頁面案例1-1設(shè)計(jì)一個(gè)網(wǎng)站和網(wǎng)站的起始頁面本章首先介紹了網(wǎng)站和網(wǎng)頁的概念、網(wǎng)頁的組成元素和網(wǎng)站的構(gòu)成及類型，接著又介紹了HTML和瀏覽器的基本知識(shí)，還介紹了常用的網(wǎng)站與網(wǎng)頁開發(fā)工具，最后通過一個(gè)案例講解了設(shè)計(jì)一個(gè)網(wǎng)站的基本過程。通過本章的學(xué)習(xí)，讀者應(yīng)該能理解網(wǎng)站和網(wǎng)頁的相關(guān)知識(shí)以及HTML文件的結(jié)構(gòu)，也能掌握網(wǎng)站開發(fā)的基本步驟，為后續(xù)章節(jié)的學(xué)習(xí)打好基礎(chǔ)。本章小結(jié)推薦兩個(gè)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的網(wǎng)站：1、菜鳥教程 2、W3School 第 2 章 基本的HTML標(biāo)簽文檔頭部標(biāo)簽圖像標(biāo)簽HTML標(biāo)簽語法文本控制標(biāo)簽HTML列表標(biāo)簽超級(jí)鏈接標(biāo)簽HTML5新增結(jié)構(gòu)性標(biāo)簽 學(xué)習(xí)目標(biāo)掌握HT

25、ML5標(biāo)簽的語法格式12熟練使用文檔頭部標(biāo)簽文本控制標(biāo)簽圖像標(biāo)簽了解HTML5新增結(jié)構(gòu)性標(biāo)簽3掌握了解掌握掌握熟練使用列表標(biāo)簽超級(jí)鏈接標(biāo)簽4本章將對(duì)HTML5中，基本元素標(biāo)簽與新增元素標(biāo)簽的作用以及標(biāo)準(zhǔn)屬性的使用方法予以詳細(xì)介紹。HTML5中引入了很多新的標(biāo)簽元素和屬性，這是HTML5的一大亮點(diǎn)，這些新增元素使文檔結(jié)構(gòu)更加清晰明確，屬性則使標(biāo)簽的功能更加強(qiáng)大，掌握這些元素和屬性是正確使用 HTML5構(gòu)建網(wǎng)頁的基礎(chǔ)。章節(jié)概要 目錄2.1HTML標(biāo)簽語法2.2文檔頭部標(biāo)簽2.3文本控制標(biāo)簽2.4圖像標(biāo)簽2.5列表標(biāo)簽2.6超級(jí)鏈接標(biāo)簽2.7音頻和視頻標(biāo)簽2.8HTML5新增結(jié)構(gòu)性標(biāo)簽 知識(shí)架構(gòu)2.

26、1 HTML標(biāo)簽語法.2單標(biāo)簽和雙標(biāo)簽注釋標(biāo)簽2.1.3標(biāo)簽的屬性2.1 HTML標(biāo)簽語法什么是標(biāo)簽？所謂標(biāo)簽就是放在“”標(biāo)記符中表示某個(gè)功能的編碼命令，也稱為HTML標(biāo)記或HTML元素。2.1.1 單標(biāo)簽和雙標(biāo)簽雙標(biāo)簽單標(biāo)簽雙標(biāo)簽也稱體標(biāo)簽，是指由開始和結(jié)束兩個(gè)標(biāo)簽符組成的標(biāo)簽。單標(biāo)簽也稱空標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽。內(nèi)容 表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽表示該標(biāo)簽的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽”注釋標(biāo)簽如果需要在HTML文檔中不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。2.1.3 標(biāo)簽的屬性標(biāo)簽的屬性字體位置字號(hào)顏色語法格式 內(nèi)容 以

27、一段代碼為例，分析標(biāo)簽的屬性標(biāo)題文本align為屬性名center為屬性值，表示標(biāo)題文本居中對(duì)齊2.1.3 標(biāo)簽的屬性2.1.3 標(biāo)簽的屬性以一段代碼為例，分析嵌套結(jié)構(gòu) 更行時(shí)間：2013年09月28日14時(shí)08分 來源： 傳智播客 標(biāo)簽中包含標(biāo)簽標(biāo)簽中又包含了一個(gè)內(nèi)層的標(biāo)簽在嵌套結(jié)構(gòu)中，HTML元素的樣式總是遵從“就近原則”。2.1.3 標(biāo)簽的屬性例如： 我們正在學(xué)習(xí)標(biāo)簽的嵌套。 我們正在學(xué)習(xí)標(biāo)簽的嵌套。 【結(jié)論】在標(biāo)簽的嵌套過程中，必須先結(jié)束最靠近內(nèi)容的標(biāo)簽，再按照由內(nèi)及外的順序依次關(guān)閉標(biāo)簽。 知識(shí)架構(gòu)2.2文檔頭部標(biāo)簽.2title標(biāo)簽meta標(biāo)簽2.2.3link標(biāo)簽H

28、TML5文檔頭部相關(guān)標(biāo)簽標(biāo)簽用于定義HTML頁面的標(biāo)題，即給網(wǎng)頁取一個(gè)名字，必須位于標(biāo)簽之內(nèi)。標(biāo)簽用于定義頁面的元信息，可重復(fù)出現(xiàn)在頭部標(biāo)簽中。在中使用標(biāo)簽可引用外部文件，一個(gè)頁面允許使用多個(gè)標(biāo)簽引用多個(gè)外部文件。2.2.1 title標(biāo)簽一個(gè)HTML文檔只能含有一對(duì)標(biāo)簽，之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。網(wǎng)頁標(biāo)題名稱基本語法格式：2.2.2 meta標(biāo)簽meta定義頁面參數(shù)設(shè)置網(wǎng)頁關(guān)鍵字設(shè)置網(wǎng)頁描述設(shè)置網(wǎng)頁作者設(shè)置字符集設(shè)置頁面自動(dòng)刷新與跳轉(zhuǎn)2.2.3 link標(biāo)簽基本語法格式： 知識(shí)架構(gòu)2.3文本控制標(biāo)簽.2標(biāo)題和段落標(biāo)簽文本樣式標(biāo)簽2.3.3格式化文本標(biāo)簽2.3.4

29、特殊字符標(biāo)簽案例文本控制標(biāo)簽綜合應(yīng)用2.3.1標(biāo)題和段落標(biāo)簽h1h2h3h4h5h6標(biāo)題標(biāo)簽2.3.1標(biāo)題和段落標(biāo)簽段落標(biāo)簽主要用于把文字有條理地顯示出來基本語法格式段落文本2.3.1標(biāo)題和段落標(biāo)簽換行標(biāo)簽用于實(shí)現(xiàn)段落強(qiáng)制換行的效果。換行標(biāo)簽的效果2.3.2 文本樣式標(biāo)簽文本樣式標(biāo)簽用來控制網(wǎng)頁中文本的字體、字號(hào)和顏色?；菊Z法格式文本內(nèi)容 2.3.2 文本樣式標(biāo)簽文本樣式標(biāo)簽常用屬性62.3.2 文本樣式標(biāo)簽顏色屬性值值屬性顏色名通過顏色名指定文本顏色（例如：“red”）/html/html-colornames.html十六進(jìn)制顏色值通過十六進(jìn)制顏色值指定文本顏色（例如：“#ff0000”

30、）RGB顏色值通過RGB顏色值指定文本顏色（例如：“rgb(255,0,0)”）2.3.3 格式化文本標(biāo)簽2.3.4 特殊字符標(biāo)簽2.3.5 水平線標(biāo)簽水平線標(biāo)簽的格式為：示例如下所示。文本控制標(biāo)簽綜合應(yīng)用案例常用屬性語法 知識(shí)架構(gòu)2.4圖像標(biāo)簽.2支持的圖像格式絕對(duì)路徑和相對(duì)路徑2.4.3 img標(biāo)簽案例圖像標(biāo)簽的綜合應(yīng)用2.4.1 支持的圖像格式用法GIFPNGJPGPNGJPGGIF最突出的地方就是它支持動(dòng)畫，同時(shí)GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量幾乎沒有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。GIF格式常常用于

31、Logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。JPGSVG2.4.1 支持的圖像格式用法GIFPNGJPGSVGPNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對(duì)于GIF，PNG最大的優(yōu)勢(shì)是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持動(dòng)畫。圖片保存為PNG-8 會(huì)在同等質(zhì)量下獲得比GIF更小的體積JPGJPG2.4.1 支持的圖像格式用法GIFPNGJPGJPGSVGJPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟

32、失。小圖片考慮GIF或PNG-8，半透明圖像考慮PNG-24，類似照片的圖像則考慮JPG。2.4.1 支持的圖像格式用法GIFPNGJPGJPG嚴(yán)格來說SVG應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言，可讓你設(shè)計(jì)激動(dòng)人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像。，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，SVG2.4.2 絕對(duì)路徑和相對(duì)路徑什么是路徑？2.4.2 絕對(duì)路徑和相對(duì)路徑實(shí)際工作中，通常新建一個(gè)文件夾專門用于存放圖像文件。路徑這時(shí)再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。通過設(shè)置“路徑”來幫助瀏覽器找到圖像文件。圖像文件文件夾

33、絕對(duì)路徑絕對(duì)路徑就是網(wǎng)頁上的文件或目錄在硬盤上的真正路徑。例如“D：HTML5+CSS3imageslogo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http：/images/logo.gif”。相對(duì)路徑2.4.2 絕對(duì)路徑和相對(duì)路徑相對(duì)路徑相對(duì)路徑就是相對(duì)于當(dāng)前文件的路徑，相對(duì)路徑不帶有盤符，通常是以 HTML網(wǎng)頁文件為起點(diǎn)，通過層級(jí)關(guān)系描述目標(biāo)圖像的位置?？偨Y(jié)起來，相對(duì)路徑的設(shè)置分為以下3種：1. 圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如。2. 圖像文件位于html文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用“/”隔開，如。3. 圖像文件位于html文件的上一級(jí)文

34、件夾：在文件名之前加入“./”，如果是上兩級(jí)，則需要使用 “./ ./”，以此類推，如絕對(duì)路徑2.4.2 絕對(duì)路徑和相對(duì)路徑2.4.3 img標(biāo)簽瀏覽網(wǎng)頁時(shí)經(jīng)常會(huì)看到精美的圖片在網(wǎng)頁中如何才能顯示圖像呢？2.4.3 img標(biāo)簽基本語法格式src屬性用于指定圖像文件的路徑和文件名2.4.3 img標(biāo)簽widthheight用來定義圖片的寬度和高度，通常我們只設(shè)置其中的一個(gè)，另一個(gè)會(huì)按原圖等比例顯示。border為圖像添加邊框、設(shè)置邊框的寬度。但邊框顏色的調(diào)整僅僅通過HTML屬性是不能夠?qū)崿F(xiàn)的。alt圖像的替換文本屬性，在圖像無法顯示時(shí)告訴用戶該圖片的內(nèi)容。2.4.3 img標(biāo)簽vspacehsp

35、aceHTML中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。align圖像的對(duì)齊屬性align。用于調(diào)整圖像的位置2.4.3 img標(biāo)簽常用屬性語法圖像標(biāo)簽的綜合應(yīng)用案例 知識(shí)架構(gòu)2.5列表標(biāo)簽.2無序列表有序列表2.5.3自定義列表案例列表標(biāo)簽的綜合應(yīng)用什么是列表？進(jìn)一步了解列表說到列表大家并不陌生，在瀏覽網(wǎng)頁時(shí)，隨處可見。HTML語言提供了3種常用的列表，分別為無序列表、有序列表和定義列表。無序列表有序列表定義列表網(wǎng)頁中最常用的列表，其各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，通常是并列的。有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列。用于對(duì)術(shù)語或名詞

36、進(jìn)行解釋和描述。與無序和有序列表不同，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。2.5.1 無序列表以某教育機(jī)構(gòu)的官網(wǎng)導(dǎo)航欄為例，認(rèn)識(shí)無序列表。無序列表有序列表定義列表導(dǎo)航欄結(jié)構(gòu)清晰，各項(xiàng)之間（如“網(wǎng)頁平面”與“java培訓(xùn)”）排序不分先后，這個(gè)導(dǎo)航欄就可以看做一個(gè)無序列表。2.5.2 有序列表無序列表有序列表定義列表定義無序列表的基本語法格式如下： 列表項(xiàng)1 列表項(xiàng)2 列表項(xiàng)3標(biāo)簽用于定義無序列表標(biāo)簽用于描述具體的列表項(xiàng)每對(duì)中至少應(yīng)包含一對(duì)。注意：2.5.3 有序列表有序列表即為有排列順序的列表。網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。無序列表有序列表定義列表以百度歌曲排行榜

37、為例，認(rèn)識(shí)有序列表。2.5.3 自定義列表無序列表有序列表定義列表以某教育機(jī)構(gòu)師資介紹為例，認(rèn)識(shí)定義列表定義列表常用于圖文混排，其中標(biāo)簽中插入圖片，標(biāo)簽中放入對(duì)圖片解釋說明的文字。標(biāo)簽例6-32.5.3 自定義列表定義列表的基本語法格式如下： 名詞1 名詞1解釋1 名詞1解釋2 . 名詞2 名詞2解釋1 名詞2解釋2 .無序列表有序列表定義列表標(biāo)簽用于指定定義列表標(biāo)簽用于指定術(shù)語名詞標(biāo)簽用于對(duì)名詞進(jìn)行解釋和描述列表標(biāo)簽的綜合應(yīng)用案例 知識(shí)架構(gòu)2.6超鏈接標(biāo)簽.2創(chuàng)建超級(jí)鏈接超級(jí)的分類2.6.3錨點(diǎn)鏈接案例超級(jí)鏈接綜合應(yīng)用2.6.1 創(chuàng)建超級(jí)鏈接一個(gè)網(wǎng)站通常由多個(gè)頁面構(gòu)成，進(jìn)入網(wǎng)

38、站時(shí)首先看到的是其首頁。列表頁內(nèi)容頁首頁通過超鏈接，實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)2.6.1創(chuàng)建超級(jí)鏈接如何創(chuàng)建超鏈接？在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可。 文本或圖像基本語法格式2.6.1創(chuàng)建超級(jí)鏈接對(duì)超鏈接標(biāo)簽的常用屬性解釋如下：href用于指定鏈接目標(biāo)的url地址，當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。target用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，意為在原窗口中打開，_blank為在新窗口中打開。2.6.1創(chuàng)建超級(jí)鏈接如何創(chuàng)建超鏈接？在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可

39、。 文本或圖像基本語法格式2.6.2 超級(jí)的分類按照鏈接源分類超級(jí)鏈接通?？梢苑譃槲谋境溄雍头俏谋境溄觾煞N。文本超鏈接是把文本作為源端點(diǎn)，而非文本超鏈接是用除文本外的其他對(duì)象作為源端點(diǎn)。上例介紹的就是最基本的文本鏈接。按照鏈接目標(biāo)分類超級(jí)鏈接可分為外部鏈接和內(nèi)部鏈接。內(nèi)部鏈接的目標(biāo)端點(diǎn)是本站點(diǎn)內(nèi)的其他文檔，可以實(shí)現(xiàn)同一站點(diǎn)內(nèi)網(wǎng)頁互相跳轉(zhuǎn)。外部鏈接的目標(biāo)端點(diǎn)在本站點(diǎn)之外，利用外部鏈接可以跳轉(zhuǎn)到其他網(wǎng)站。2.6.3 錨點(diǎn)鏈接如果網(wǎng)頁內(nèi)容較多，頁面過長(zhǎng)。瀏覽網(wǎng)頁時(shí)就需要不斷地拖動(dòng)滾動(dòng)條，來查看所需要的內(nèi)容。效率較低不方便2.6.3 錨點(diǎn)鏈接為了提高信息的檢索速度HTML語言提供了一種特殊的鏈接錨

40、點(diǎn)鏈接，通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。2.6.3 錨點(diǎn)鏈接創(chuàng)建錨點(diǎn)鏈接分為兩步1使用“鏈接文本”創(chuàng)建鏈接文本2使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置超級(jí)鏈接的綜合應(yīng)用案例 知識(shí)架構(gòu)2.7音頻和視頻標(biāo)簽.2H5支持的音視頻格式插入視頻2.7.3插入音頻2.7.4音視頻中的source元素2.7.5瀏覽器兼容性案例音視頻標(biāo)簽綜合應(yīng)用案例2.7.1 H5支持的音視頻格式在HTML5出現(xiàn)之前并沒有將視頻和音頻嵌入到頁面的標(biāo)準(zhǔn)方式，多媒體內(nèi)容在大多數(shù)情況下都是通過第三方插件或集成在Web瀏覽器的應(yīng)用程序置于頁面中。復(fù)雜冗長(zhǎng)運(yùn)用HTML5中新增的video標(biāo)簽和audio標(biāo)簽可

41、以避免這樣的問題。2.7.1 H5支持的音視頻格式運(yùn)用HTML5的video和audio標(biāo)簽可以在頁面中嵌入視頻或音頻文件，如果想要這些文件在頁面中加載播放，還需要設(shè)置正確的多媒體格式。視頻格式視頻格式包含視頻編碼、音頻編碼和容器格式。音頻格式音頻格式是指要在計(jì)算機(jī)內(nèi)播放或是處理音頻文件。2.7.1 H5支持的音視頻格式HTML5支持的視頻格式oggmpeg4 webm2.7.1 H5支持的音視頻格式HTML5支持的音頻格式oggmpeg4 webm2.7.2 插入視頻使用video嵌入視頻基本語法格式：瀏覽器不支持video標(biāo)簽例如：使用video標(biāo)簽來嵌入視頻2.7.2 插入視頻播放進(jìn)度條

42、聲音全屏2.7.2 插入視頻屬性值描述autoplayautoplay當(dāng)頁面載入完成后自動(dòng)播放視頻。looploop視頻結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 autoplay，則忽略該屬性。posterurl當(dāng)視頻緩沖不足時(shí)，該屬性值鏈接一個(gè)圖像，并將該圖像按照一定的比例顯示出來。Video元素的其他屬性2.7.3 插入音頻使用audio嵌入音頻基本語法格式如下：瀏覽器不支持audio標(biāo)簽例如：使用audio標(biāo)簽來嵌入音頻2.7.3 插入音頻音頻控件，用于控制音頻文件的播放狀態(tài)播放進(jìn)度條聲音2.7.3 插入音頻audi

43、o元素的其他屬性屬性值描述autoplayautoplay當(dāng)頁面載入完成后自動(dòng)播放音頻。looploop音頻結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 autoplay，則忽略該屬性。注意：以上列舉的audio元素的屬性和video元素是相同的，這些相同的屬性在嵌入音視頻時(shí)是通用的。2.7.4 音視頻中的source元素在HTML5中，運(yùn)用source元素可以為video元素或audio元素提供多個(gè)備用文件。基本語法格式src用于指定媒體文件的URL地址。type指定媒體文件的類型。2.7.5 瀏覽器的兼容性雖然html5支

44、持ogg、mpeg 4和webm的視頻格式以及ogg、mp3和wav的音頻格式，但各瀏覽器對(duì)這些格式卻不完全支持。視頻格式格式IE 9Firefox 4.0Opera 10.6Chrome 6.0Safari 3.0ogg支持支持支持mpeg4支持支持支持webm支持支持支持音頻格式ogg支持支持支持mp3支持支持支持wav支持支持支持音視頻標(biāo)簽的綜合應(yīng)用案例 知識(shí)架構(gòu)2.8HTML5新增結(jié)構(gòu)性標(biāo)簽為了增強(qiáng)網(wǎng)頁的可讀性，HTML5為提供了一系列語義標(biāo)簽用來描述網(wǎng)頁的結(jié)構(gòu)。這些特殊的標(biāo)簽可以見名知義，使頁面的結(jié)構(gòu)更加清晰，方便維護(hù)和開發(fā)。HTML5語義結(jié)構(gòu)標(biāo)簽標(biāo)簽標(biāo)簽代表文檔、頁面或者應(yīng)用程序中

45、與上下文不相關(guān)的獨(dú)立部分，該標(biāo)簽經(jīng)常被用于定義一篇日志、一條新聞或用戶評(píng)論等。標(biāo)簽通常使用多個(gè)section標(biāo)簽進(jìn)行劃分，一個(gè)頁面中標(biāo)簽可以多次出現(xiàn)。標(biāo)簽HTML5 中標(biāo)簽是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)標(biāo)簽，包含放在頁面頭部的各種信息。標(biāo)簽用來放置頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊標(biāo)題，可以包含網(wǎng)站Logo圖片、搜索表單或者其他相關(guān)內(nèi)容。HTML5語義結(jié)構(gòu)標(biāo)簽標(biāo)簽標(biāo)簽用于定義導(dǎo)航鏈接，是 HTML5 新增的標(biāo)簽，可以將導(dǎo)航鏈接歸納在這個(gè)區(qū)域中，使頁面標(biāo)簽的語義更加明確。導(dǎo)航標(biāo)簽可以鏈接到站點(diǎn)的其他頁面，或者當(dāng)前頁的其他部分。標(biāo)簽標(biāo)簽用于對(duì)網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊，一個(gè)標(biāo)簽通常由內(nèi)容和標(biāo)題組成。在

46、使用標(biāo)簽時(shí)，需要注意標(biāo)簽和標(biāo)簽區(qū)別。它們都是分塊標(biāo)簽，前者強(qiáng)調(diào)內(nèi)容分塊，后者強(qiáng)調(diào)空間分塊。當(dāng)一個(gè)分塊容器需要直接定義樣式或通過腳本定義行為時(shí)，推薦使用標(biāo)簽。HTML5語義結(jié)構(gòu)標(biāo)簽標(biāo)簽標(biāo)簽用來定義當(dāng)前頁面或者文章的附屬信息部分，可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等。標(biāo)簽有兩種使用方法，一種是包含在標(biāo)簽內(nèi)部，作為主要內(nèi)容的附屬信息。另一種是在標(biāo)簽之外使用，作為頁面或站點(diǎn)全局的附屬信息部分。最常用的使用形式是側(cè)邊欄， 其中的內(nèi)容可以是友情鏈接、廣告單元等。標(biāo)簽標(biāo)簽用于定義一個(gè)頁面或者區(qū)域的底部，包含放在頁面底部的各種信息。在 HTML5之前，一般使用標(biāo)簽來定義頁面底部，而通

47、過 HTML5 的標(biāo)簽可以輕松實(shí)現(xiàn)。HTML5語義結(jié)構(gòu)標(biāo)簽標(biāo)簽標(biāo)簽呈現(xiàn)了文檔或應(yīng)用的主體部分。主體部分與文檔直接相關(guān)，或者擴(kuò)展文檔中心主題、應(yīng)用主要功能的部分內(nèi)容。這部分內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無二的，不包含任何在一系列文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框等。和標(biāo)簽在 HTML5 中，figure 標(biāo)簽用于定義獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等），是一個(gè)獨(dú)立單元。標(biāo)簽的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不會(huì)對(duì)文檔流產(chǎn)生影響。標(biāo)簽用于為標(biāo)簽組添加標(biāo)題，一個(gè)標(biāo)簽內(nèi)最多允許使用一個(gè)標(biāo)簽，該標(biāo)簽應(yīng)該放在標(biāo)簽的第一個(gè)或者最后一個(gè)子標(biāo)簽的位置。第 3 章 表格和

48、表單表單表格標(biāo)簽表單控件HTML 目錄3.1表格標(biāo)簽3.2表單3.3表單控件 知識(shí)架構(gòu)3.1 表格標(biāo)簽3.1.1標(biāo)簽的屬性3.1.2標(biāo)簽的屬性3.1.3標(biāo)簽的屬性3.1.4標(biāo)簽的屬性 知識(shí)架構(gòu)3.2 表單.2表單的構(gòu)成表單的創(chuàng)建3.2.3表單的屬性 知識(shí)架構(gòu)3.3表單控件3.3.1input控件3.3.2標(biāo)簽的type屬性3.3.3標(biāo)簽的其他屬性3.3.4textarea控件3.3.5select控件3.3.6datalist控件本章將對(duì)表格相關(guān)標(biāo)簽、表單相關(guān)標(biāo)簽以及CSS控制表格與表單的樣式進(jìn)行詳細(xì)地講解。表格與表單是HTML網(wǎng)頁中的重要標(biāo)簽，利用表格可以對(duì)網(wǎng)頁進(jìn)行排版，使網(wǎng)

49、頁信息有條理地顯示出來，而表單的出現(xiàn)則使網(wǎng)頁從單向的信息傳遞發(fā)展到能夠與用戶進(jìn)行交互對(duì)話，實(shí)現(xiàn)了網(wǎng)上注冊(cè)、網(wǎng)上登錄、網(wǎng)上交易等多種功能。章節(jié)概要3.1 表格標(biāo)簽什么是表格？3.1 表格標(biāo)簽如何創(chuàng)建表格？說到表格，其實(shí)大家并不陌生課程表網(wǎng)上購(gòu)物查票3.1 表格標(biāo)簽定義一個(gè)表格定義表格中的一行，嵌套在中定義表格中的單元格，嵌套在中創(chuàng)建table表格，離不開以下3對(duì)標(biāo)簽:3.1 表格標(biāo)簽標(biāo)簽的屬性屬性描述常用屬性值border規(guī)定表格邊框的寬度（默認(rèn)border=0為無邊框）像素值cellspacing規(guī)定單元格之間的空白像素值（默認(rèn)為2像素）cellpadding規(guī)定單元邊沿與其內(nèi)容之間的空白像素

50、值（默認(rèn)為1像素）width規(guī)定表格的寬度像素值height規(guī)定表格的高度像素值align規(guī)定表格相對(duì)周圍元素的對(duì)齊方式left、center、rightbgcolor規(guī)定表格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)3.1 表格標(biāo)簽標(biāo)簽屬性在實(shí)體表格中的表現(xiàn)如下圖所示：widthheightbordercellspacingcellspadding標(biāo)簽的屬性3.1 表格標(biāo)簽標(biāo)簽屬性在實(shí)體表格中的表現(xiàn)如下圖所示：標(biāo)簽的屬性align=centerbgcolor=CCCCCC3.1 表格標(biāo)簽標(biāo)簽的屬性屬性描述常用屬性值height規(guī)定表格的行高像素值 align定義表格行的

51、內(nèi)容對(duì)齊方式left、center、right、justifyvalign規(guī)定表格行中內(nèi)容的垂直對(duì)齊方式top、middle、bottombgcolor規(guī)定表格行的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)3.1 表格標(biāo)簽標(biāo)簽的屬性屬性名含義常用屬性值width規(guī)定表格單元格的寬度像素值 height規(guī)定表格單元格的高度像素值align規(guī)定單元格內(nèi)容的水平對(duì)齊方式left、center、right、justifyvalign規(guī)定單元格內(nèi)容的垂直排列方式top、middle、bottombgcolor規(guī)定單元格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)c

52、olspan規(guī)定單元格可橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan規(guī)定單元格可橫跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)3.1 表格標(biāo)簽標(biāo)簽的屬性知識(shí)概述標(biāo)簽用來設(shè)置表頭，其文本默認(rèn)加粗居中顯示。表頭表頭3.1 表格標(biāo)簽案例3-1 表格的綜合應(yīng)用3.2 認(rèn)識(shí)表單什么是表單？3.2 認(rèn)識(shí)表單“表單”在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能和向服務(wù)器傳送數(shù)據(jù)。如注冊(cè)頁面的用戶名密碼輸入、網(wǎng)上訂單頁面等，都是以表單的形式來收集用戶信息，并將這些信息傳遞給后臺(tái)服務(wù)器，實(shí)現(xiàn)網(wǎng)頁與用戶間的數(shù)據(jù)傳輸和交互，本節(jié)將對(duì)表單進(jìn)行詳細(xì)的講解。3.2 認(rèn)識(shí)表單以電商注冊(cè)頁面為例，分析表單的構(gòu)成。提示信息表單域表

53、單控件表單的構(gòu)成3.2 認(rèn)識(shí)表單一個(gè)表單中通常需要包含一些說明性的文字，提示用戶進(jìn)行操作。相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息。包含了具體的表單功能項(xiàng)，如文本框、密碼框、復(fù)選框、單選框等。提示信息表單控件表單域表單的構(gòu)成3.2 認(rèn)識(shí)表單創(chuàng)建表單知識(shí)概述標(biāo)簽用來創(chuàng)建表單。 各種表單控件【結(jié)論】與之間的表單控件是由用戶自定義的，action、method和name為表單標(biāo)簽的常用屬性。3.2 認(rèn)識(shí)表單表單屬性action 屬性定義在提交表單時(shí)接受并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。action屬性method 屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法（GET 或 POST）met

54、hod屬性name屬性用于定義表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。name屬性autocomplete屬性規(guī)定瀏覽器是否應(yīng)該自動(dòng)完成表單。autocomplete屬性novalidate屬性規(guī)定瀏覽器不驗(yàn)證表單。novalidate屬性3.3 表單控件什么是表單控件？3.3 認(rèn)識(shí)表單你了解這些表單控件？表單控件常用在登錄和注冊(cè)模塊3.3 認(rèn)識(shí)表單大致可分為input控件、textarea控件、select控件三大類。select控件textarea控件3.3 表單控件input控件知識(shí)概述元素是表單中最常見的元素，網(wǎng)頁中常見的單行文本框、單選按鈕、復(fù)選框等都是通過它定義的。標(biāo)簽為單標(biāo)簽，

55、type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。3.3 表單控件單行文本輸入框單行文本輸入框常用來輸入簡(jiǎn)短的信息，如用戶名、賬號(hào)、證件號(hào)碼等，常用的屬性有name、value、maxlength。在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。密碼輸入框密碼輸入框用來輸入密碼，其內(nèi)容將以圓點(diǎn)或星號(hào)的形式顯示。標(biāo)簽的type屬性3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。單選按鈕單選按鈕用于單項(xiàng)選擇，如選擇性別、是

56、否操作等。男3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。復(fù)選框復(fù)選框常用于多項(xiàng)選擇，如選擇興趣、愛好等，可對(duì)其應(yīng)用checked屬性，指定默認(rèn)選中項(xiàng)。唱歌3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。普通按鈕button普通按鈕類型常用于在用戶點(diǎn)擊按鈕時(shí)啟動(dòng) JavaScript 程序。 3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。提交按鈕提交按鈕用于向服務(wù)器發(fā)送表單數(shù)據(jù)。數(shù)據(jù)會(huì)發(fā)送到表單的 action 屬性中指定的頁面。

57、3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。重置按鈕重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。 3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。圖像形式的提交按鈕圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認(rèn)的按鈕，外觀上更加美觀。3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。隱藏域隱藏域?qū)τ谟脩羰遣豢梢姷?，通常用于后臺(tái)的程序。 3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于

58、定義不同的控件類型。文件域當(dāng)定義文件域時(shí)，頁面中將出現(xiàn)一個(gè)文本框和一個(gè)“瀏覽.”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后臺(tái)服務(wù)器。3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。email類型email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框，用來驗(yàn)證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應(yīng)的錯(cuò)誤信息。請(qǐng)輸入您的郵箱：3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。url類型url類型的input元素

59、是一種用于輸入U(xiǎn)RL地址的文本框。請(qǐng)輸入個(gè)人網(wǎng)址：3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。tel類型tel類型用于提供輸入電話號(hào)碼的文本框，由于電話號(hào)碼的格式千差萬別，很難實(shí)現(xiàn)一個(gè)通用的格式。因此，tel類型通常會(huì)和pattern屬性配合使用。請(qǐng)輸入電話號(hào)碼：3.3 表單控件標(biāo)簽的type屬性在HTML5中，標(biāo)簽擁有多個(gè)type屬性值，用于定義不同的控件類型。number類型number類型的input元素用于提供輸入數(shù)值的文本框。在提交表單時(shí)，會(huì)自動(dòng)檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會(huì)

60、出現(xiàn)錯(cuò)誤提示。請(qǐng)輸入數(shù)值：3.3 表單控件標(biāo)簽的的其他屬性除了type屬性之外，標(biāo)簽還可以定義很多其他的屬性，以實(shí)現(xiàn)不同的功能。autofocus屬性用于指定頁面加載后是否自動(dòng)獲取焦點(diǎn)，將標(biāo)簽的屬性值指定為true時(shí)，表示頁面加載完畢后會(huì)自動(dòng)獲取該焦點(diǎn)。autofocus屬性13.3 表單控件除了type屬性之外，標(biāo)簽還可以定義很多其他的屬性，以實(shí)現(xiàn)不同的功能。HTML5中的form屬性，可以把表單內(nèi)的子元素寫在頁面中的任一位置，只需為這個(gè)元素指定form屬性并設(shè)置屬性值為該表單的id即可。form屬性 2標(biāo)簽的的其他屬性3.3 表單控件標(biāo)簽的的其他屬性除了type屬性之外，標(biāo)簽還可以定義很多