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

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

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

3、基本概念、HTML知識、瀏覽器知識、網(wǎng)站和網(wǎng)頁的開發(fā)工具等知識。章節(jié)概要1.1 認(rèn)識網(wǎng)頁和網(wǎng)站1.1.1 網(wǎng)頁和網(wǎng)站的概念網(wǎng)頁（Web Page）就是一個文檔，通常由HTML語言編寫，能夠被瀏覽器解析和顯示。用戶在瀏覽器中輸入一個URL（Uniform Resource Location）地址就能訪問網(wǎng)頁。1、認(rèn)識網(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)確地傳達網(wǎng)頁要表達的信息，是網(wǎng)頁中不可或缺的構(gòu)成要素，純文本的存儲空間也很小，在網(wǎng)絡(luò)傳輸中具有優(yōu)勢，也有利于搜索引擎采集。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)頁更加生動。網(wǎng)頁上使用的圖像一般為JPG、PNG和GIF格式。2、圖像1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素超鏈接是從一個網(wǎng)頁到其他目標(biāo)的指向，其他目標(biāo)通常是一個網(wǎng)頁，也可以是一個圖像、文件、電子郵件地址甚至是同一個網(wǎng)頁中的其他位置。網(wǎng)頁中的超鏈接通常設(shè)置在文字上，也可以是圖像、視頻或按鈕等，當(dāng)我們把鼠標(biāo)移到超鏈接上，指針會變成手型，單擊鼠標(biāo)左鍵，會加載超鏈接指向的目標(biāo)內(nèi)容。一個網(wǎng)站

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

6、的網(wǎng)頁，通常它決定了訪問者對網(wǎng)站的第一印象，所以首頁的設(shè)計非常重要，不僅要把網(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)品列表信息，有的還可以對列表展示的信息按條件進行篩選顯示，列表頁在設(shè)計時要注重展示的排版效果，合理安排文字和圖片。2、列表頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成詳情頁對應(yīng)列表頁，當(dāng)訪問者在列表頁上想了解某

7、條新聞或某個產(chǎn)品的詳細信息時，單擊打開詳情頁，會展示該條新聞或產(chǎn)品的詳細信息，商城類的網(wǎng)站一般在詳情頁中提供購買功能。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è)計制作方面更加高要求、精細化。比如新浪、網(wǎng)易、搜狐等都屬于門戶類網(wǎng)站。1、門戶類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型互聯(lián)網(wǎng)是企業(yè)進行形象宣傳和網(wǎng)絡(luò)營銷的平臺，很多企業(yè)都會建立一個企業(yè)網(wǎng)站，讓別人能從網(wǎng)上了解自己，不但對企業(yè)的形象是很好的宣傳，同時也可以促進產(chǎn)品的網(wǎng)絡(luò)銷售。企業(yè)類網(wǎng)站的設(shè)計要符合企業(yè)的文化，

8、能體現(xiàn)出企業(yè)的特點。2、企業(yè)類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型相比線下傳統(tǒng)的實體店，電商商城類網(wǎng)站具有購物方便和快捷的優(yōu)勢，買家只需要在網(wǎng)上選擇心儀的商品下單，便可在家收取貨物，電商類網(wǎng)站具有省事、省時、省心、高效等特點，受到越來越多的人歡迎。電商類網(wǎng)站的網(wǎng)頁的內(nèi)容必須突出重點，避免夸張，裝飾部分不宜太多，以免喧賓奪主。在內(nèi)容編排上必須簡潔明了，便于瀏覽。3、電商類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型視頻類網(wǎng)站的主要內(nèi)容是視頻文件，這些視頻可以是網(wǎng)站發(fā)布的，也可以是用戶上傳的。訪問者可以在網(wǎ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)站類型個人網(wǎng)站是個人為某些愛好、科普或展示自己等創(chuàng)建的網(wǎng)站，給相同愛好的人提供一個了解知識、相互交流的平臺或讓其他人了解自己。個人網(wǎng)站一般有比較鮮明的特點，個性較強，沒有太多的設(shè)計限制。5、個人網(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文檔，它能獨立于各種操作系統(tǒng)平臺(如UNIX， Windows等)。利用HTML將所需表達的信息按某種規(guī)則寫成HTML文件，再經(jīng)過瀏覽器的解析，將HTML文件翻譯并展示出來，就是我們所見到的網(wǎng)頁。到目前為止，HTML已經(jīng)發(fā)展了多個版本，其中最著名的就是HTML4，2010年又推出HTML5.0，一經(jīng)推出就受到各大瀏覽器的支持。1.2.1 什么是HTML5.0HTML5是HTML的最新修訂版本，是對以前版本的繼承和發(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)用，提供更多增強網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)機。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)記位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。只有這樣瀏覽器才能將該網(wǎng)頁作為有效的HTML或XHTML文檔，并按指定的文檔類型進行解析

12、。1、標(biāo)記1.2 HTML概述1.2.2 HTML文檔的格式標(biāo)記位于標(biāo)記之后，稱為根標(biāo)記，用于告知瀏覽器其自身是一個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)系。需要注意的是，一個HTML文檔只能含有一對標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(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)記中的信息才是最終展示給用戶看的。一個HTML文檔只能有一對標(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é)議簡介http協(xié)議是Hyper Text Transfer Proto

14、col（超文本傳輸協(xié)議）的縮寫，是用于從萬維網(wǎng)（World Wide Web，www）服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議。當(dāng)我們在瀏覽器的地址欄輸入一個地址的時候，就能夠訪問服務(wù)器的某個頁面，這個過程本身就是兩個應(yīng)用程序之間的交互，一個應(yīng)用程序是瀏覽器，另一個應(yīng)用程序是服務(wù)器。瀏覽器作為http客戶端通過URL向http服務(wù)端即WEB服務(wù)器發(fā)送所有請求。Web服務(wù)器根據(jù)接收到的請求后，向客戶端發(fā)送響應(yīng)信息。1.3 瀏覽器概述1.3.1 http協(xié)議和https協(xié)議簡介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，因此加密的詳細內(nèi)容就需要 SSL。https存在不同于http的默認(rèn)端口及一個加密/身份驗證層（在http與 TCP 之間）。這個系統(tǒng)提供了身份驗證與加密通訊方法，它被廣泛用于萬維網(wǎng)上安全敏感的通訊，例如交易支付等方面。1.3 瀏覽器概述1.3 瀏覽器概述1.3.2 常用瀏覽器IE瀏覽器是微軟公司推出的一款網(wǎng)頁瀏覽器。IE自1995年誕生以來，共有11個主版本。IE瀏覽器是

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

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

18、狀況監(jiān)視器于一體，是開發(fā)HTML、CSS和JavaScript的好幫手。新版火狐瀏覽器中已經(jīng)將Firebug整合到“Web開發(fā)者”工具中，用戶可以在火狐瀏覽器菜單欄選擇“打開菜單-Web開發(fā)者”選項，再選擇“查看器”命令，即可查看網(wǎng)頁的各個模塊。3、火狐瀏覽器（Mozilla Firefox）1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具網(wǎng)頁開發(fā)工具很多，常用的編輯器軟件比如記事本都可以用來進行HTML編碼和制作網(wǎng)頁，但記事本沒有任何代碼提示功能，所以使用不太方便。網(wǎng)站開發(fā)時應(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，簡稱DW，中文名稱 夢想編織者，Dreamweaver是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用對 HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計師和程序員可以方便快速地進行網(wǎng)頁設(shè)計。目前常用的版本是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ā)的一個可以運行于 Mac OS X、Windows和 Linux 之上的針對于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺源代碼編輯器。這款軟件具備了很多特性，包括語法高亮（syntax high lighting）、可定制的熱鍵綁定（customizable keyboard bindings）、括號匹配（bracket matching）以及代碼片段收集（snippets）等。該編輯器支持多種語言和文件格式的編寫，目前已經(jīng)支持了37種語言或文件。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.3 Sublime TextSublime Text 是一個跨平臺的編輯器，同時支持Wind

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

22、版本的安裝包，下載后根據(jù)提示按步驟安裝即可。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具我們在設(shè)計一個網(wǎng)站時，首先要確定網(wǎng)站主題、規(guī)劃網(wǎng)站結(jié)構(gòu)、尋找素材、設(shè)計網(wǎng)頁效果圖等，這些工作完成后，我們要創(chuàng)建網(wǎng)站文件夾，開始利用Adobe Dreamweaver、Sublime Text等軟件制作首頁和子頁面。下面通過一個簡單的例子來說明制作網(wǎng)站和頁面的基本過程。案例1-1設(shè)計一個網(wǎng)站和網(wǎng)站的起始頁面在本地硬盤中創(chuàng)建一個網(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è)計一個網(wǎng)站和網(wǎng)站的起始頁面打開Adobe Dreamweaver軟件，選擇“站點-新建站點”，在彈出的對話框中輸入站點名稱，單擊“瀏覽文件夾”圖標(biāo)，選擇D盤的網(wǎng)站文件夾，如圖1-6所示。2、創(chuàng)建站點案例1-1設(shè)計一個網(wǎng)站和網(wǎng)站的起始頁面在Adobe Dreamweaver軟件中選擇菜單“文件-新建”命令，在打開的對話框中選擇“空白頁”，在“文檔類型”的下拉列表中選擇“HTML 5”，如圖1-8所示。單擊“創(chuàng)建”按鈕即創(chuàng)建了一個空白頁面，單擊菜單“文件-保存”命令，把網(wǎng)頁以文件名index.html保存在網(wǎng)站文件夾內(nèi)，

24、如圖1-9所示。3、創(chuàng)建頁面案例1-1設(shè)計一個網(wǎng)站和網(wǎng)站的起始頁面本章首先介紹了網(wǎng)站和網(wǎng)頁的概念、網(wǎng)頁的組成元素和網(wǎng)站的構(gòu)成及類型，接著又介紹了HTML和瀏覽器的基本知識，還介紹了常用的網(wǎng)站與網(wǎng)頁開發(fā)工具，最后通過一個案例講解了設(shè)計一個網(wǎng)站的基本過程。通過本章的學(xué)習(xí)，讀者應(yīng)該能理解網(wǎng)站和網(wǎng)頁的相關(guān)知識以及HTML文件的結(jié)構(gòu)，也能掌握網(wǎng)站開發(fā)的基本步驟，為后續(xù)章節(jié)的學(xué)習(xí)打好基礎(chǔ)。本章小結(jié)推薦兩個學(xué)習(xí)網(wǎng)頁設(shè)計的網(wǎng)站：1、菜鳥教程 2、W3School 第 2 章 基本的HTML標(biāo)簽文檔頭部標(biāo)簽圖像標(biāo)簽HTML標(biāo)簽語法文本控制標(biāo)簽HTML列表標(biāo)簽超級鏈接標(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)簽超級鏈接標(biāo)簽4本章將對HTML5中，基本元素標(biāo)簽與新增元素標(biāo)簽的作用以及標(biāo)準(zhǔn)屬性的使用方法予以詳細介紹。HTML5中引入了很多新的標(biāo)簽元素和屬性，這是HTML5的一大亮點，這些新增元素使文檔結(jié)構(gòu)更加清晰明確，屬性則使標(biāo)簽的功能更加強大，掌握這些元素和屬性是正確使用 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超級鏈接標(biāo)簽2.7音頻和視頻標(biāo)簽2.8HTML5新增結(jié)構(gòu)性標(biāo)簽 知識架構(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)記符中表示某個功能的編碼命令，也稱為HTML標(biāo)記或HTML元素。2.1.1 單標(biāo)簽和雙標(biāo)簽雙標(biāo)簽單標(biāo)簽雙標(biāo)簽也稱體標(biāo)簽，是指由開始和結(jié)束兩個標(biāo)簽符組成的標(biāo)簽。單標(biāo)簽也稱空標(biāo)簽，是指用一個標(biāo)簽符號即可完整地描述某個功能的標(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)簽的屬性字體位置字號顏色語法格式 內(nèi)容 以

27、一段代碼為例，分析標(biāo)簽的屬性標(biāo)題文本align為屬性名center為屬性值，表示標(biāo)題文本居中對齊2.1.3 標(biāo)簽的屬性2.1.3 標(biāo)簽的屬性以一段代碼為例，分析嵌套結(jié)構(gòu) 更行時間：2013年09月28日14時08分 來源： 傳智播客 標(biāo)簽中包含標(biāo)簽標(biāo)簽中又包含了一個內(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)簽。 知識架構(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)頁取一個名字，必須位于標(biāo)簽之內(nèi)。標(biāo)簽用于定義頁面的元信息，可重復(fù)出現(xiàn)在頭部標(biāo)簽中。在中使用標(biāo)簽可引用外部文件，一個頁面允許使用多個標(biāo)簽引用多個外部文件。2.2.1 title標(biāo)簽一個HTML文檔只能含有一對標(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è)置頁面自動刷新與跳轉(zhuǎn)2.2.3 link標(biāo)簽基本語法格式： 知識架構(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)簽用于實現(xiàn)段落強制換行的效果。換行標(biāo)簽的效果2.3.2 文本樣式標(biāo)簽文本樣式標(biāo)簽用來控制網(wǎng)頁中文本的字體、字號和顏色?；菊Z法格式文本內(nèi)容 2.3.2 文本樣式標(biāo)簽文本樣式標(biāo)簽常用屬性62.3.2 文本樣式標(biāo)簽顏色屬性值值屬性顏色名通過顏色名指定文本顏色（例如：“red”）/html/html-colornames.html十六進制顏色值通過十六進制顏色值指定文本顏色（例如：“#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)用案例常用屬性語法 知識架構(gòu)2.4圖像標(biāo)簽.2支持的圖像格式絕對路徑和相對路徑2.4.3 img標(biāo)簽案例圖像標(biāo)簽的綜合應(yīng)用2.4.1 支持的圖像格式用法GIFPNGJPGPNGJPGGIF最突出的地方就是它支持動畫，同時GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量幾乎沒有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。GIF格式常常用于

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

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

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

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

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

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

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

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

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

40、點鏈接，通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。2.6.3 錨點鏈接創(chuàng)建錨點鏈接分為兩步1使用“鏈接文本”創(chuàng)建鏈接文本2使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置超級鏈接的綜合應(yīng)用案例 知識架構(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ù)雜冗長運用HTML5中新增的video標(biāo)簽和audio標(biāo)簽可

41、以避免這樣的問題。2.7.1 H5支持的音視頻格式運用HTML5的video和audio標(biāo)簽可以在頁面中嵌入視頻或音頻文件，如果想要這些文件在頁面中加載播放，還需要設(shè)置正確的多媒體格式。視頻格式視頻格式包含視頻編碼、音頻編碼和容器格式。音頻格式音頻格式是指要在計算機內(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 插入視頻播放進度條

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

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

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

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

46、使用標(biāo)簽時，需要注意標(biāo)簽和標(biāo)簽區(qū)別。它們都是分塊標(biāo)簽，前者強調(diào)內(nèi)容分塊，后者強調(diào)空間分塊。當(dāng)一個分塊容器需要直接定義樣式或通過腳本定義行為時，推薦使用標(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)簽之外使用，作為頁面或站點全局的附屬信息部分。最常用的使用形式是側(cè)邊欄， 其中的內(nèi)容可以是友情鏈接、廣告單元等。標(biāo)簽標(biāo)簽用于定義一個頁面或者區(qū)域的底部，包含放在頁面底部的各種信息。在 HTML5之前，一般使用標(biāo)簽來定義頁面底部，而通

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

48、表單表單表格標(biāo)簽表單控件HTML 目錄3.1表格標(biāo)簽3.2表單3.3表單控件 知識架構(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)簽的屬性 知識架構(gòu)3.2 表單.2表單的構(gòu)成表單的創(chuàng)建3.2.3表單的屬性 知識架構(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控件本章將對表格相關(guān)標(biāo)簽、表單相關(guān)標(biāo)簽以及CSS控制表格與表單的樣式進行詳細地講解。表格與表單是HTML網(wǎng)頁中的重要標(biāo)簽，利用表格可以對網(wǎng)頁進行排版，使網(wǎng)

49、頁信息有條理地顯示出來，而表單的出現(xiàn)則使網(wǎng)頁從單向的信息傳遞發(fā)展到能夠與用戶進行交互對話，實現(xiàn)了網(wǎng)上注冊、網(wǎng)上登錄、網(wǎng)上交易等多種功能。章節(jié)概要3.1 表格標(biāo)簽什么是表格？3.1 表格標(biāo)簽如何創(chuàng)建表格？說到表格，其實大家并不陌生課程表網(wǎng)上購物查票3.1 表格標(biāo)簽定義一個表格定義表格中的一行，嵌套在中定義表格中的單元格，嵌套在中創(chuàng)建table表格，離不開以下3對標(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ī)定表格相對周圍元素的對齊方式left、center、rightbgcolor規(guī)定表格的背景顏色預(yù)定義的顏色值、十六進制#RGB、rgb(r,g,b)3.1 表格標(biāo)簽標(biāo)簽屬性在實體表格中的表現(xiàn)如下圖所示：widthheightbordercellspacingcellspadding標(biāo)簽的屬性3.1 表格標(biāo)簽標(biāo)簽屬性在實體表格中的表現(xiàn)如下圖所示：標(biāo)簽的屬性align=centerbgcolor=CCCCCC3.1 表格標(biāo)簽標(biāo)簽的屬性屬性描述常用屬性值height規(guī)定表格的行高像素值 align定義表格行的

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

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

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

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

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

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

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

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

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

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