電子教案-HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程

第1章網(wǎng)頁(yè)設(shè)計(jì)新時(shí)代本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述從2010年開(kāi)始，HTML5和CSS3就一直是互聯(lián)網(wǎng)技術(shù)中最受關(guān)注的兩個(gè)話題。2010年MIX10大會(huì)上微軟的工程師在介紹IE9時(shí)，從前端技術(shù)的角度把互聯(lián)網(wǎng)的發(fā)展分為3個(gè)階段：第一階段是以Web1.0為主的網(wǎng)絡(luò)階段，前端主流技術(shù)是HTML和CSS；第二階段是Web2.0的Ajax應(yīng)用階段，熱門技術(shù)是JavaScript/DOM/異步數(shù)據(jù)請(qǐng)求；第三階段即為HTML5+CSS3階段，這兩者相輔相成，使網(wǎng)頁(yè)設(shè)計(jì)進(jìn)入了一個(gè)嶄新的時(shí)代。第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解WEB開(kāi)發(fā)基本原則了解HTML5是如何形成的了解HTML5的設(shè)計(jì)原則了解HTML5頁(yè)面的特征了解網(wǎng)頁(yè)的基本元素和網(wǎng)頁(yè)設(shè)計(jì)的常用技術(shù)使用HTML創(chuàng)建一些Web頁(yè)面第4頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第5頁(yè)1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則本節(jié)介紹開(kāi)放Web標(biāo)準(zhǔn)的重要性、構(gòu)造良好的語(yǔ)義化標(biāo)記技術(shù)，以及編寫良好的HTML是網(wǎng)頁(yè)設(shè)計(jì)過(guò)程的一部分；簡(jiǎn)單、直白的HTML結(jié)構(gòu)應(yīng)當(dāng)用CSS進(jìn)行樣式化等。第6頁(yè)Web標(biāo)準(zhǔn)成立于1998年的WebStandardsProject(Web標(biāo)準(zhǔn)項(xiàng)目，WaSP)一直致力于跨不同瀏覽器的標(biāo)準(zhǔn)實(shí)現(xiàn)和基于標(biāo)準(zhǔn)的Web設(shè)計(jì)方法。其目標(biāo)是降低Web開(kāi)發(fā)的成本與復(fù)雜性，并通過(guò)使Web內(nèi)容在不同設(shè)備和輔助技術(shù)之間更具一致性和兼容性的辦法，提高Web頁(yè)面的可訪問(wèn)性。什么是Web標(biāo)準(zhǔn)使用Web標(biāo)準(zhǔn)的好處語(yǔ)義化標(biāo)記Web標(biāo)準(zhǔn)層次。第7頁(yè)Web標(biāo)準(zhǔn)與瀏覽器的兼容性瀏覽器的前景正在朝著標(biāo)準(zhǔn)的方向演化和靠攏。Firefox、Safari、Opera、Chrome，當(dāng)然也包括古老的IE，都在以不同的速度朝著全面支持HTML5、CSS3等標(biāo)準(zhǔn)的方向前進(jìn)。隨著訪問(wèn)Web內(nèi)容的設(shè)備種類越來(lái)越多，精確預(yù)測(cè)網(wǎng)站在各種用戶設(shè)備上的外觀變得越來(lái)越困難。因此，網(wǎng)頁(yè)的設(shè)計(jì)不應(yīng)受像素完美控制的困擾，而是要接納這種不確定性，設(shè)計(jì)出可適應(yīng)不同瀏覽環(huán)境的柔性網(wǎng)站。第8頁(yè)可訪問(wèn)性使用Web設(shè)計(jì)標(biāo)準(zhǔn)會(huì)在更廣泛的設(shè)備上有更好的可訪問(wèn)性、帶來(lái)更多樣的用戶等。設(shè)計(jì)網(wǎng)頁(yè)首先要關(guān)注不同用戶如何使用Web。有些人使用不同的設(shè)備或低速的Web連接；有些人只使用鍵盤；有些人使用屏幕閱讀器閱讀Web頁(yè)面；有些人聽(tīng)不到音頻內(nèi)容。因此要熟悉形形色色的Web用戶。不要只是假設(shè)所有人都用相同的模式在使用Web。HTML5給Web網(wǎng)頁(yè)的可訪問(wèn)性帶來(lái)的更廣泛的便利。第9頁(yè)結(jié)構(gòu)化文檔的Web可以把Web想象成一個(gè)由文檔組成的大海，文檔之間相互關(guān)聯(lián)，并且與日常生活中遇到的打印文檔有著很多相似性新聞網(wǎng)站中文章的結(jié)構(gòu)與報(bào)紙上的文章結(jié)構(gòu)類似。每一篇文章包含標(biāo)題、文本段落以及一些圖片（有時(shí)可能以視頻代替圖片）。相同點(diǎn)非常明顯，而唯一的不同就是，在報(bào)紙上可以在一個(gè)版面上擁有多篇故事，而在網(wǎng)頁(yè)上每篇故事則傾向于獨(dú)占一個(gè)頁(yè)面。新聞網(wǎng)站還經(jīng)常使用首頁(yè)顯示新聞?lì)^條以及故事梗概。在編寫Web頁(yè)面時(shí)，HTML代碼會(huì)告知Web瀏覽器需要顯示的信息結(jié)構(gòu)，即什么文本放在標(biāo)題、段落或表格中等，從而瀏覽器能夠恰當(dāng)?shù)貙⑵涑尸F(xiàn)給用戶。第10頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第11頁(yè)1.2HTML5概述2004年成立的Web超文本應(yīng)用技術(shù)工作組（WHATWG）創(chuàng)立了HTML5規(guī)范，同時(shí)開(kāi)始專門針對(duì)Web應(yīng)用開(kāi)發(fā)新的功能。2006年，W3C介入HTML5的開(kāi)發(fā)，并于2008年發(fā)布了HTML5的工作草案。2009年，W3C停止了對(duì)XHTML2的更新。2010年HTML5開(kāi)始用于解決實(shí)際問(wèn)題。這時(shí)各大瀏覽器廠商開(kāi)始對(duì)旗下產(chǎn)品進(jìn)行升級(jí)以支持HTML5的新功能，因此，HTML5規(guī)范也得到了持續(xù)性的完善。第12頁(yè)傳統(tǒng)HTML與XHTML標(biāo)記語(yǔ)言在我們的日常計(jì)算中無(wú)處不在。在傳統(tǒng)的文字處理文檔中，用于描述結(jié)構(gòu)與外觀的標(biāo)記代碼常常不是后臺(tái)編碼的。在Web文檔中，傳統(tǒng)HTML和XHTML（XHTML是HTML基于XML語(yǔ)法規(guī)則建立的標(biāo)記語(yǔ)言）的標(biāo)記代碼是明顯可見(jiàn)的。這些非后臺(tái)的標(biāo)記語(yǔ)言能夠?qū)eb頁(yè)面的結(jié)構(gòu)與外觀傳遞給Web瀏覽器。從1991年底開(kāi)始推出至今，HTML和基于XML的XHTML都發(fā)生了許多變化。最早構(gòu)建Web頁(yè)面的HTML版本并沒(méi)有嚴(yán)格的定義。然而在1993年，InternetEngineeringTaskForce(IETF)開(kāi)始標(biāo)準(zhǔn)化語(yǔ)言，且在1995年發(fā)布了第一個(gè)真正意義上的HTML標(biāo)準(zhǔn)——HTML2.0。第13頁(yè)HTML5是如何形成的HTML5是HTML長(zhǎng)期發(fā)展過(guò)程中的一個(gè)里程碑，各種版本HTML以不同規(guī)范形成了各種編碼風(fēng)格。盡管它們可能在細(xì)節(jié)方面有所不同，但的HTML都有一個(gè)共同的基本方面：HTML是一種標(biāo)記語(yǔ)言。超越HTML4轉(zhuǎn)向XHTML1.0XHTML2.0的失敗HTML5的成功第14頁(yè)HTML5的設(shè)計(jì)原則HTML5的形成基于許多設(shè)計(jì)原則，在應(yīng)用新標(biāo)記法時(shí)，還要有計(jì)劃地支持現(xiàn)有內(nèi)容。另外，W3C還定義了以下原則：確保支持現(xiàn)有內(nèi)容在舊式瀏覽器中讓新特性能夠優(yōu)雅降級(jí)不要重新發(fā)明鋪平老路進(jìn)化而非革命能夠普遍訪問(wèn)第15頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第16頁(yè)1.3HTML5頁(yè)面的特征本節(jié)通過(guò)一個(gè)較為完整的頁(yè)面來(lái)介紹HTML5的頁(yè)面特征。第17頁(yè)使用HTML5結(jié)構(gòu)化元素通過(guò)研究Web頁(yè)面發(fā)現(xiàn)，如果使用一些帶有語(yǔ)義性的標(biāo)記，可以加快瀏覽器解釋頁(yè)面中元素的速度，如早期的<samp>、<var>元素，HTML5繼承了這些元素，并根據(jù)用戶使用最為頻繁的類名稱和ID號(hào)不斷開(kāi)發(fā)新的標(biāo)記，因?yàn)檫@些標(biāo)記能真正體現(xiàn)開(kāi)發(fā)者真實(shí)意圖所在。下面通過(guò)示例說(shuō)明HTML5是如何使用這些全新的HTML5特征來(lái)結(jié)構(gòu)化元素的。使用HTML5新增元素后的網(wǎng)頁(yè)布局第18頁(yè)使用CSS3美化HTML5文檔在支持HTML5新元素的瀏覽器中，樣式化各新增元素變得十分簡(jiǎn)單，可以對(duì)任意一個(gè)元素應(yīng)用CSS，包括直接設(shè)置或引入CSS文件。。使用CSS3美化HTML5文檔第19頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第20頁(yè)1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)要設(shè)計(jì)WEB網(wǎng)頁(yè)，應(yīng)該了解網(wǎng)頁(yè)的基本元素和網(wǎng)頁(yè)設(shè)計(jì)的常用技術(shù)等基礎(chǔ)知識(shí)。

第21頁(yè)網(wǎng)頁(yè)的基本元素網(wǎng)頁(yè)作為信息的載體，包含各種各樣的元素。從網(wǎng)頁(yè)的內(nèi)容或者多媒體元素的角度出發(fā)，網(wǎng)頁(yè)包含文本、圖像、動(dòng)畫、音頻和視頻等；從布局設(shè)計(jì)的角度看，網(wǎng)頁(yè)包含頁(yè)眉、主內(nèi)容區(qū)和頁(yè)腳等。網(wǎng)頁(yè)的基本媒體元素網(wǎng)頁(yè)的基本布局元素第22頁(yè)網(wǎng)頁(yè)設(shè)計(jì)常用技術(shù)在Web標(biāo)準(zhǔn)中，網(wǎng)頁(yè)主要由三部分組成，結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。對(duì)應(yīng)的標(biāo)準(zhǔn)也分為三方面，結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言，主要包括HTML、XHTML和XML；表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言，主要包括CSS；行為標(biāo)準(zhǔn)，主要包括ECNAScript（網(wǎng)頁(yè)腳本語(yǔ)言規(guī)范）等。網(wǎng)頁(yè)標(biāo)記語(yǔ)言HTML網(wǎng)頁(yè)表現(xiàn)技術(shù)CSS網(wǎng)頁(yè)腳本語(yǔ)言動(dòng)態(tài)網(wǎng)頁(yè)編程技術(shù)第23頁(yè)網(wǎng)頁(yè)設(shè)計(jì)常用工具HTML文件的編寫可以使用任何文本編輯器，如記事本、寫字板、Word等，不過(guò)在保存時(shí)都必須保存為.html或者.htm格式。為了使設(shè)計(jì)網(wǎng)頁(yè)更加簡(jiǎn)單、方便，有些公司和人員設(shè)計(jì)了專業(yè)的HTML編輯工具，這些工具絕大多數(shù)可以分為兩類：第一類是基于文本的HTML編輯器，第二類是所見(jiàn)即所得編輯器?；谖谋镜木庉嬈魉?jiàn)即所得編輯器如何選擇工具第24頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第25頁(yè)1.5編寫一個(gè)簡(jiǎn)單的Web頁(yè)面搭建瀏覽環(huán)境盡管各主流瀏覽器都對(duì)HTML5提供了很好的支持，但畢竟HTML5是一種全新的HTML標(biāo)記語(yǔ)言，許多新的功能必須在搭建好的瀏覽環(huán)境后才可以正常瀏覽。為此，我們?cè)谡綀?zhí)行一個(gè)HTML5頁(yè)面之前，必須先搭建支持HTML5的瀏覽器環(huán)境，并檢查瀏覽器是否支持HTML5標(biāo)記。第26頁(yè)檢測(cè)瀏覽環(huán)境是否支持

IE8不支持HTML5的畫布標(biāo)記Chrome支持HTML5的畫布標(biāo)記為了能進(jìn)一步了解瀏覽器支持HTML5新標(biāo)簽功能的情況，可以在引入新標(biāo)簽前，通過(guò)編寫JavaScript代碼來(lái)檢測(cè)瀏覽器是否技術(shù)該標(biāo)簽。第27頁(yè)使用HTML5編寫簡(jiǎn)單的Web頁(yè)面

一個(gè)簡(jiǎn)單的Web頁(yè)面第28頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第29頁(yè)1.6本章小結(jié)在本章中，我們討論了Web標(biāo)準(zhǔn)辦法、最重要的Web設(shè)計(jì)原則、語(yǔ)義標(biāo)記及層次分離的重要性、現(xiàn)代Web瀏覽器的前景、接受不確定性，以及倡導(dǎo)可訪問(wèn)性；介紹了HTML5的歷史和起源、指導(dǎo)其開(kāi)發(fā)的原則，以及HTML5要解決的問(wèn)題；舉例介紹了HTML5的頁(yè)面特征。我們還介紹了網(wǎng)頁(yè)的基本元素和網(wǎng)頁(yè)設(shè)計(jì)的常用技術(shù)等基礎(chǔ)知識(shí)，并編寫了一個(gè)簡(jiǎn)單的Web頁(yè)面。第2章HTML5的演進(jìn)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第31頁(yè)本章概述“超文本標(biāo)記語(yǔ)言”(HyperTextMarkupLanguage，HTML)的代碼，用于創(chuàng)建Web頁(yè)面。從Web誕生起，至今出現(xiàn)過(guò)5個(gè)版本的HTML。HTML5是這門語(yǔ)言的最新版本。另外兩個(gè)版本是HTML4.0.1，于1999年12月發(fā)布的該語(yǔ)言的上一個(gè)主要版本；以及2000年發(fā)布的更嚴(yán)格版本，被稱為“可擴(kuò)展超文本標(biāo)記語(yǔ)言”(ExtensibleHyperTextMarkupLanguage，XHTML)。本章將介紹HTML5的演變進(jìn)化過(guò)程，以及與XHTML之間的重要區(qū)別。第32頁(yè)本章的學(xué)習(xí)目標(biāo)了解HTML與XHTML基礎(chǔ)知識(shí)了解網(wǎng)頁(yè)設(shè)計(jì)的一些關(guān)鍵術(shù)語(yǔ)如“元素”、“特性”、“標(biāo)簽”及“標(biāo)記”的含義掌握如何將一個(gè)HTML或XHTML頁(yè)面轉(zhuǎn)換成HTML5了解HTML5的新的結(jié)構(gòu)化元素第33頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第34頁(yè)2.1HTML與XHTML基礎(chǔ)標(biāo)記語(yǔ)言在我們的日常計(jì)算中無(wú)處不在。文字處理文檔中填充了大量的標(biāo)記指令來(lái)描述其結(jié)構(gòu)與外觀。在傳統(tǒng)的文字處理文檔中，用于描述結(jié)構(gòu)與外觀的標(biāo)記代碼常常不是后臺(tái)編碼的，然而在Web文檔中，傳統(tǒng)HTML和XHTML（它是基于HTML的擴(kuò)展標(biāo)記語(yǔ)言(XML)的變體）的標(biāo)記代碼是明顯可見(jiàn)的。這些前臺(tái)的標(biāo)記語(yǔ)言能夠?qū)eb頁(yè)面的結(jié)構(gòu)與外觀傳遞給Web瀏覽器。第35頁(yè)標(biāo)簽與元素帶有HTML標(biāo)記的文檔語(yǔ)法結(jié)構(gòu)圖第36頁(yè)特性組特性位于元素的開(kāi)標(biāo)簽中，并為所屬元素提供額外的特性信息。很多特性由“名稱”和“值”兩部分組成。名稱反映該特性所描述元素的某一方面屬性，而值則是該屬性的值。例如，lang特性描述了元素中所使用的語(yǔ)言(language)，而值(比如“EN-US”)則表明該元素中使用的語(yǔ)言為美國(guó)英語(yǔ)(U.S.English)。有些特性則只含有一個(gè)名稱，如required或者checked。這些特性被稱作“布爾特性”。核心特性國(guó)際化第37頁(yè)HTML和XHTML實(shí)例“你好HTML4世界”網(wǎng)頁(yè)“你好XHTML世界”網(wǎng)頁(yè)第38頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第39頁(yè)2.2認(rèn)識(shí)HTML5本節(jié)首先選用XHTML1標(biāo)記一個(gè)頁(yè)面，然后將把它轉(zhuǎn)換成HTML5，以此讓我們認(rèn)識(shí)HTML5，并能夠利用它所提供的優(yōu)勢(shì)。雖然有些方面屬于新內(nèi)容，但許多背景知識(shí)都是我們所熟悉的。第40頁(yè)用XHTML1標(biāo)記的頁(yè)面用XHTML1標(biāo)記的“貝克小姐”頁(yè)面第41頁(yè)84.8%的標(biāo)記可以保留雖不能保證100%，但從科學(xué)上講大約有84.8%，這一數(shù)據(jù)基本是準(zhǔn)確的。正如第1章曾提到的，HTML5的指導(dǎo)原則包括不要重新發(fā)明、鋪平老路，以及倡導(dǎo)進(jìn)化而非革命。簡(jiǎn)言之，HTML5提倡沿原有基礎(chǔ)向前發(fā)展。因此，在著手從事HTML5開(kāi)發(fā)時(shí)，并不需要重新學(xué)習(xí)所有東西。所有熟知的語(yǔ)義化好處仍適用。有一些新元素可供我們使用，但大量仍是我們所熟知的。第42頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第43頁(yè)2.3關(guān)于<head>在開(kāi)始創(chuàng)建傳統(tǒng)的“HelloWorld!”頁(yè)面之前，讓我們先看看要碰到的一些修改，特別是在向HTML5推進(jìn)時(shí)要在<head>中進(jìn)行的修改。在開(kāi)始進(jìn)入<body>標(biāo)記的實(shí)際細(xì)節(jié)之前，須要先理解這些基礎(chǔ)。本小節(jié)將介紹HTML5中新的DOCTYPE、解釋在HTML5中如何聲明語(yǔ)言，并介紹一個(gè)新的、更簡(jiǎn)單的metacharset屬性。第44頁(yè)更完美的DOCTYPE令人畏懼的DOCTYPE，以前很少有人能記住它——有超群記憶的人除外。之前，無(wú)論選擇的風(fēng)格是XHTML1Strict或HTML4Strict（或其他可用模式），DOCTYPE都一直是一串讓人無(wú)法理解的字符。。無(wú)須讓DOCTYPE如此復(fù)雜且難以記憶。W3C在開(kāi)始創(chuàng)建標(biāo)記規(guī)范時(shí)，或許對(duì)DOCTYPE的目的有宏偉設(shè)計(jì)，但實(shí)際上它的作用只是告訴瀏覽器，以標(biāo)準(zhǔn)模式而不是以怪異模式去呈現(xiàn)頁(yè)面。在編寫HTML5規(guī)范時(shí)，WHATWG意識(shí)到了這一點(diǎn)，并將它改為構(gòu)成有效DOCTYPE的最短字符序列：<!DOCTYPEhtml>。第45頁(yè)在HTML5中聲明語(yǔ)言現(xiàn)在來(lái)看看如何在HTML5中聲明語(yǔ)言。但為什么總是要聲明語(yǔ)言呢？W3C對(duì)這一問(wèn)題的回答如下：對(duì)于大量的應(yīng)用程序而言，從語(yǔ)言敏感的搜索到運(yùn)用語(yǔ)言專用的顯示屬性，指定內(nèi)容的語(yǔ)言都是有用的。在某些情況下，用于語(yǔ)言信息的潛在應(yīng)用程序仍需進(jìn)一步實(shí)現(xiàn)，而在另一些情況下，如發(fā)聲瀏覽器的語(yǔ)言檢測(cè)，指定內(nèi)容的語(yǔ)言目前還是必需的。為HTML文檔指定語(yǔ)言最容易的方式是對(duì)HTML頁(yè)面的根元素添加一個(gè)lang屬性。HTML頁(yè)面的根元素始終是<html>，因此為了指定語(yǔ)言，可以采用如下做法：<htmllang="en">字符編碼在HTML5中，指定頁(yè)面的字符編碼簡(jiǎn)單多了，如下所示：<metacharset="UTF-8"/>實(shí)際上并不需要了解字符編碼的細(xì)節(jié)，它定義了一套可用于文檔的人類語(yǔ)言字符集。使用UTF-8是最安全的，這是一套幾乎含有所有語(yǔ)言全部字符的通用字符集。第46頁(yè)簡(jiǎn)單易記將以上介紹的內(nèi)容綜合在一起，不再需要復(fù)雜的模板，以下代碼對(duì)任何人來(lái)說(shuō)都十分易記：第47頁(yè)第48頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第49頁(yè)2.4從HTML與XHTML到HTML5為了展示出HTML標(biāo)記差異，并且轉(zhuǎn)換成HTML5如何反映以前的做法（進(jìn)化而非革命），下面展示一系列“HelloWorld!”的Web頁(yè)面，以說(shuō)明除其他事項(xiàng)外，HTML5還提供了各種標(biāo)記風(fēng)格選擇。通過(guò)考察感覺(jué)最舒適的標(biāo)記風(fēng)格，得出我們的結(jié)論：應(yīng)當(dāng)采用將XHTML(一種更嚴(yán)格、更易于學(xué)習(xí)的語(yǔ)法)和HTML5(具有前瞻性、更富有語(yǔ)義化色彩)最好的方面結(jié)合在一起的標(biāo)記風(fēng)格。第50頁(yè)XHTML1.0風(fēng)格的“HelloWorld!”第51頁(yè)HTML4風(fēng)格的“HelloWorld!”第52頁(yè)HTML5“松散”風(fēng)格的“HelloWorld!”前面演示的XHTML1和HTML4頁(yè)面沒(méi)什么驚奇之處?，F(xiàn)在讓我們看看最簡(jiǎn)單、最小形式的HTML5頁(yè)面。以下頁(yè)面雖然只有幾行，但卻是100%合法的HTML5的“HelloWorld!”頁(yè)面：HTML5“嚴(yán)格”風(fēng)格的頁(yè)面第53頁(yè)第54頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第55頁(yè)2.5讓HTML5得到跨瀏覽器支持讓我們繼續(xù)考察所能采用的技術(shù)，以使新的HTML5語(yǔ)義化元素能夠在各種瀏覽器(甚至老式的IE6)中生效。然后以上述最后一個(gè)格式良好的HTML5“HelloWorld!”頁(yè)面為基礎(chǔ)，對(duì)它進(jìn)行改編，形成一種可用樣板，以便從此開(kāi)始使用HTML5。第56頁(yè)瀏覽器如何處理未知元素HTML是一種寬松的語(yǔ)言。在很多情況下，大多數(shù)瀏覽器都會(huì)溫和地處理它們不認(rèn)識(shí)的元素和屬性，把這些元素處理成匿名的內(nèi)聯(lián)元素，并允許設(shè)定它們的樣式。每一種瀏覽器都有一個(gè)支持元素的列表。例如，F(xiàn)irefox的列表便存儲(chǔ)在一個(gè)名為nsElementTable.cpp的文件中。該文件的作用是告訴瀏覽器如何處理它所遇到的元素，告知瀏覽器這些元素的樣式如何，以及在DocumentObjectModel(文檔對(duì)象模型，DOM)中應(yīng)該如何對(duì)它們進(jìn)行處理。shivHTML5EnablingScript（或者更通俗地稱之為shiv）是一種解決IE中的未知元素的樣式設(shè)置問(wèn)題的更簡(jiǎn)單的方案。以下便這一方案。第57頁(yè)IE打印保護(hù)器鏈接到GoogleCode上的shiv除了提供最新版shiv外，還提供一種稱為IE打印保護(hù)器的IEPrintProtector，它解決了IE在打印HTML5頁(yè)面時(shí)所具有的一個(gè)問(wèn)題：不會(huì)適當(dāng)呈現(xiàn)打印頁(yè)面上的HTML5元素。IEPrintProtector的工作方式是，在打印時(shí)用所支持的后備元素（如<div>和<span>）臨時(shí)替換HTML5元素，并根據(jù)現(xiàn)有樣式為這些元素創(chuàng)建一個(gè)特殊的樣式表。第58頁(yè)聲明塊級(jí)元素正如前面提到的，在進(jìn)行樣式設(shè)置時(shí)，瀏覽器會(huì)將未知元素處理成匿名的內(nèi)聯(lián)元素。HTML5引入了大量新的塊級(jí)元素：如果這些元素未包含在瀏覽器的已知元素查找表中，那么它們將被視為內(nèi)聯(lián)元素。因此，需要添加一個(gè)CSS規(guī)則，將它們聲明為塊級(jí)元素。第59頁(yè)第60頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第61頁(yè)2.6HTML5樣板頁(yè)面第62頁(yè)不再有type屬性在聲明JavaScript或CSS時(shí)，已不再需要包含type屬性。以前是需要包含type屬性的，如下所示：填充材料與替換對(duì)不支持HTML5和CSS3新特性的那些老式瀏覽器(如IE6～I(xiàn)E8)也要實(shí)現(xiàn)支持。填充材料：這是一些通常內(nèi)置在JavaScript中的程序，可以將一些對(duì)Web技術(shù)的支持添加到尚未支持它的瀏覽器中。CSSPie就是一個(gè)很好的例子，它為老版本的IE添加了對(duì)CSS漸變效果、圓角以及其他一些CSS3特性的支持。第63頁(yè)第64頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第65頁(yè)2.7HTML5頁(yè)面驗(yàn)證為什么要驗(yàn)證呢？對(duì)頁(yè)面進(jìn)行驗(yàn)證通常是找出問(wèn)題的第一階段。使用驗(yàn)證器有助于找出簡(jiǎn)單且易忽視的錯(cuò)誤，并了解標(biāo)記運(yùn)行的更多情況。驗(yàn)證是應(yīng)該形成的一種良好習(xí)慣，尤其是在學(xué)習(xí)階段。帶著這種意識(shí)，讓我們看看HTML5頁(yè)面的驗(yàn)證。第66頁(yè)HTML5驗(yàn)證器W3CMarkupValidator

可以檢查HTML，XHTML，SMIL，MathML等格式的Web文檔標(biāo)記的有效性。這個(gè)驗(yàn)證器是W3C標(biāo)準(zhǔn)驗(yàn)證服務(wù)Unicorn的一部分。另一個(gè)HTML5驗(yàn)證器。Henri的

Validator.nu(X)HTML5Validator（現(xiàn)用的驗(yàn)證器）。第67頁(yè)更新和驗(yàn)證“貝克小姐”頁(yè)面第68頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第69頁(yè)2.8新的結(jié)構(gòu)化元素HTML5有哪些變化呢？是一些用于頁(yè)面片段的新元素，這些元素被稱為結(jié)構(gòu)化元素。這些元素用于表示頁(yè)面部分常用的特定語(yǔ)義，以代替以前用class和id表示的部分，只不過(guò)現(xiàn)在它們具有了標(biāo)準(zhǔn)化的媒體獨(dú)立的語(yǔ)義。這些新的結(jié)構(gòu)化元素是：<section><article><header><footer><hgroup><nav><aside>第70頁(yè)塊級(jí)元素與行內(nèi)元素在<body>內(nèi)存在的每一個(gè)元素都屬于以下兩種類別之一：塊級(jí)(Block-level)元素行內(nèi)(Inline)元素塊級(jí)元素與行內(nèi)元素的顯示效果第71頁(yè)結(jié)構(gòu)化構(gòu)建塊<div>、<section>和<article>

<div>、<section>和<article>的區(qū)別選用哪一個(gè)使用這些元素的基本結(jié)構(gòu)第72頁(yè)標(biāo)題：<header>、<hgroup>、<h1>～<h6>以及<footer><header>：用于分節(jié)元素的內(nèi)容介紹和導(dǎo)航。<footer>：用于表現(xiàn)內(nèi)容的附加信息，如作者、相關(guān)文檔的鏈接、版權(quán)數(shù)據(jù)、返回到頁(yè)首的鏈接等，而且通常出現(xiàn)在內(nèi)容的底部。<hgroup>：這是<header>的一種特殊形式，它只能包含<h1>～<h6>元素，用于對(duì)帶有副標(biāo)題的標(biāo)題進(jìn)行組合。<h1>～<h6>：這些HTML4的標(biāo)題元素已經(jīng)被沿用下來(lái)。第73頁(yè)更多的結(jié)構(gòu)化元素：<nav>、<aside>、<figure>以及<figcaption><nav>：導(dǎo)航鏈接小節(jié)，這些鏈接或是鏈接到其他頁(yè)面，通常的網(wǎng)站導(dǎo)航，或是鏈接到同一頁(yè)面的其他小節(jié)，如用于長(zhǎng)文章的目錄。<aside>：頁(yè)面的一個(gè)小節(jié)，由與周邊內(nèi)容略微相關(guān)但又單獨(dú)分開(kāi)的內(nèi)容所組成。<figure>：用于這樣一種內(nèi)容：對(duì)理解至關(guān)重要，但可以在文檔流中遷移(移到不同的地方)，而不影響文檔的含義。使用可選(而有趣)的子元素<figcaption>可以提供一個(gè)標(biāo)簽。第74頁(yè)新內(nèi)容分節(jié)元素小結(jié)<section>：一種相關(guān)內(nèi)容塊。<article>：一個(gè)獨(dú)立的、自包含的相關(guān)內(nèi)容塊，這種內(nèi)容具有自身含義。<aside>：與周邊內(nèi)容略微相關(guān)但對(duì)內(nèi)容理解并非必需的內(nèi)容塊。<figure：理解周邊內(nèi)容必需但其位置可以移動(dòng)的內(nèi)容塊。<nav>：主導(dǎo)航塊(通常是網(wǎng)站或頁(yè)面導(dǎo)航)將一個(gè)簡(jiǎn)單的頁(yè)面轉(zhuǎn)換成HTML5這是一個(gè)理想化的文章頁(yè)面的范例結(jié)構(gòu)，它采用了標(biāo)準(zhǔn)的布局，包括頁(yè)頭(帶有徽標(biāo)等)、網(wǎng)站導(dǎo)航、主欄、側(cè)欄以及頁(yè)腳。第75頁(yè)文章的頁(yè)面布局第76頁(yè)主要內(nèi)容2.1HTML與XHTML基礎(chǔ)2.2認(rèn)識(shí)HTML52.3關(guān)于<head>2.4從HTML與XHTML到HTML52.5讓HTML5得到跨瀏覽器支持2.6HTML5樣板頁(yè)面2.7HTML5頁(yè)面驗(yàn)證2.8新的結(jié)構(gòu)化元素2.9本章小結(jié)第77頁(yè)1.9本章小結(jié)至此，我們已經(jīng)獲得了HTML5的有關(guān)知識(shí)，并了解了XHTML1、HTML4、“松散的”HTML5風(fēng)格，以及更為嚴(yán)謹(jǐn)?shù)腦HTML語(yǔ)法風(fēng)格的HTML5之間的語(yǔ)法區(qū)別。本章還介紹了HTML5新的結(jié)構(gòu)化元素，包括一些新的、更具語(yǔ)義化的HTML4的<div>的替代元素，如內(nèi)容分節(jié)元素<section>、<article>、<aside>、<nav>等，最后，介紹了一個(gè)HTML或XHTML頁(yè)面轉(zhuǎn)換成HTML5的例子。第3章HTML5文檔創(chuàng)建本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第79頁(yè)本章概述HTML5中的一個(gè)主要變化是：將元素的語(yǔ)義與元素對(duì)其內(nèi)容呈現(xiàn)結(jié)果的影響分開(kāi)。HTML元素負(fù)責(zé)文檔內(nèi)容的結(jié)構(gòu)和含義，內(nèi)容的呈現(xiàn)則由應(yīng)用于元素上的CSS樣式控制。網(wǎng)絡(luò)之所以區(qū)別于其他媒體，是因?yàn)榫W(wǎng)頁(yè)中可以包含鏈接(或者叫超鏈接)。本章主要介紹如何創(chuàng)建HTML5文檔，最基礎(chǔ)的HTML元素：文檔元素和元數(shù)據(jù)元素的應(yīng)用。還介紹導(dǎo)航與鏈接概念與方法。第80頁(yè)本章的學(xué)習(xí)目標(biāo)了解基本的HTML5文檔結(jié)構(gòu)了解使用定義著重與強(qiáng)調(diào)內(nèi)容的標(biāo)記微調(diào)文本了解標(biāo)記描述時(shí)間、縮寫、代碼等的文本掌握基本文本格式化元素的使用方法掌握導(dǎo)航與鏈接概念與方法第81頁(yè)主要內(nèi)容3.1HTML5文檔結(jié)構(gòu)3.2構(gòu)建文檔主體3.3添加描述文本級(jí)語(yǔ)義模塊3.4編輯文本3.5使用字符實(shí)體顯示特殊字符3.6注釋3.7本章小結(jié)第82頁(yè)3.1HTML5文檔結(jié)構(gòu)構(gòu)建基本的文檔結(jié)構(gòu)用元數(shù)據(jù)元素說(shuō)明文檔使用腳本元素第83頁(yè)構(gòu)建基本的文檔結(jié)構(gòu)DOCTYPE元素html元素head元素title元素鏈接與樣式表用元數(shù)據(jù)元素說(shuō)明文檔設(shè)置文檔標(biāo)題設(shè)置相對(duì)URL的解析基準(zhǔn)用元數(shù)據(jù)說(shuō)明文檔定義CSS樣式第84頁(yè)第85頁(yè)使用腳本元素與腳本相關(guān)的有兩個(gè)元素：第一個(gè)是script，定義腳本并控制其執(zhí)行過(guò)程；第二個(gè)是noscript，規(guī)定瀏覽器不支持腳本或禁用腳本情況的處理方法。在引入外部資源時(shí)，如果使用自閉合標(biāo)簽，瀏覽器會(huì)忽略這個(gè)元素，不會(huì)加載引用的文件。其加載資源時(shí)，可以使用async（script元素默認(rèn)行為是在加載和執(zhí)行腳本同時(shí)暫停處理頁(yè)面，該屬性可以讓資源異步加載）和defer（告知瀏覽器等頁(yè)面載入和解析完畢后才能執(zhí)行腳本）控制。第86頁(yè)主要內(nèi)容3.1HTML5文檔結(jié)構(gòu)3.2構(gòu)建文檔主體3.3添加描述文本級(jí)語(yǔ)義模塊3.4編輯文本3.5使用字符實(shí)體顯示特殊字符3.6注釋3.7本章小結(jié)第87頁(yè)3.2構(gòu)建文檔主體基本文本格式化鏈接與導(dǎo)航第88頁(yè)基本文本格式化空格與流使用<hn>元素創(chuàng)建標(biāo)題使用<p>元素創(chuàng)建段落使用<br>元素創(chuàng)建換行使用<pre>元素預(yù)格式化文本基本文本格式化的實(shí)例第89頁(yè)鏈接與導(dǎo)航基本鏈接鏈接實(shí)例目錄與目錄結(jié)構(gòu)理解URL概念絕對(duì)與相對(duì)URL地址使用<a>元素創(chuàng)建頁(yè)內(nèi)鏈接<a>元素的其他特性高級(jí)電子郵件鏈接在頁(yè)面中創(chuàng)建鏈接的實(shí)例第90頁(yè)主要內(nèi)容3.1HTML5文檔結(jié)構(gòu)3.2構(gòu)建文檔主體3.3添加描述文本級(jí)語(yǔ)義模塊3.4編輯文本3.5使用字符實(shí)體顯示特殊字符3.6注釋3.7本章小結(jié)第91頁(yè)3.3添加描述文本級(jí)語(yǔ)義模塊描述文本級(jí)語(yǔ)義的元素使用文本標(biāo)記實(shí)例第92頁(yè)描述文本級(jí)語(yǔ)義的元素<span>元素

<em>元素

<strong>元素<b>元素<i>元素<strong>和<b>以及<em>和<i><figure>及<figcaption>元素<small>元素

<cite>元素<q>元素<dfn>元素<abbr>元素

<time>元素

<code>元素<var>元素<samp>元素<kbd>元素<sup>元素<sub>元素

<mark>元素第93頁(yè)使用文本標(biāo)記實(shí)例下面舉例說(shuō)明用于標(biāo)記文本的各種元素及特性。選擇一套標(biāo)記來(lái)為咖啡館網(wǎng)站創(chuàng)建一個(gè)頁(yè)面，用來(lái)展示世界上最好炒蛋的配方。本例在瀏覽器中顯示的效果第94頁(yè)主要內(nèi)容3.1HTML5文檔結(jié)構(gòu)3.2構(gòu)建文檔主體3.3添加描述文本級(jí)語(yǔ)義模塊3.4編輯文本3.5使用字符實(shí)體顯示特殊字符3.6注釋3.7本章小結(jié)3.4編輯文本以下是兩個(gè)專門用于審閱與修改文本的元素：<ins>元素，用于需要插入文本時(shí)(瀏覽器中通常以下劃線字體顯示)。<del>元素，用于需要?jiǎng)h除文本時(shí)(瀏覽器中通常以橫穿線字體顯示)。第95頁(yè)第96頁(yè)主要內(nèi)容3.1HTML5文檔結(jié)構(gòu)3.2構(gòu)建文檔主體3.3添加描述文本級(jí)語(yǔ)義模塊3.4編輯文本3.5使用字符實(shí)體顯示特殊字符3.6注釋3.7本章小結(jié)第97頁(yè)3.5使用字符實(shí)體顯示特殊字符所有特殊字符都可以使用數(shù)字形式的字符實(shí)體替代，而其中一部分特殊字符還有對(duì)應(yīng)的命名實(shí)體。字

符

數(shù)字實(shí)體命名實(shí)體“""&&&<<<>>>常見(jiàn)字符的數(shù)字和命名實(shí)體第98頁(yè)主要內(nèi)容3.1HTML5文檔結(jié)構(gòu)3.2構(gòu)建文檔主體3.3添加描述文本級(jí)語(yǔ)義模塊3.4編輯文本3.5使用字符實(shí)體顯示特殊字符3.6注釋3.7本章小結(jié)第99頁(yè)3.6注釋可以在HTML文檔的任何標(biāo)簽之間使用注釋，其格式：<!--commentgoeshere-->任何從<!--之后，到-->為止的內(nèi)容都不會(huì)顯示。盡管在源代碼中仍然可見(jiàn)，但不會(huì)顯示在瀏覽器屏幕上。在代碼中添加注釋是一項(xiàng)良好習(xí)慣。特別在復(fù)雜文檔中，使用注釋為文檔添加分區(qū)描述以及其他注釋，有助于他人理解代碼。第100頁(yè)主要內(nèi)容3.1HTML5文檔結(jié)構(gòu)3.2構(gòu)建文檔主體3.3添加描述文本級(jí)語(yǔ)義模塊3.4編輯文本3.5使用字符實(shí)體顯示特殊字符3.6注釋3.7本章小結(jié)第101頁(yè)3.7本章小結(jié)本章在介紹了基本結(jié)構(gòu)化元素后，還介紹了很多用于描述文本結(jié)構(gòu)的新元素及其可以攜帶的特性。本章還介紹了鏈接。鏈接使用戶可以在頁(yè)面之間甚至同一頁(yè)面的不同部分之間進(jìn)行跳轉(zhuǎn)，這樣他們就不需要通過(guò)滾動(dòng)頁(yè)面定位所需要內(nèi)容的位置。本章還介紹了添加描述文本級(jí)語(yǔ)義模塊中的許多元素，以及兩個(gè)專門用于審閱與修改文本的元素：<ins>元素與<del>元素。最后，簡(jiǎn)單介紹了使用字符實(shí)體顯示特殊字符與使用注釋。第4章

表格與列表本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第103頁(yè)本章概述表格以行和列顯示信息，它們被普遍用于顯示所有適合網(wǎng)格結(jié)構(gòu)的數(shù)據(jù)，如列車時(shí)刻表、電視節(jié)目表、財(cái)務(wù)報(bào)告以及體育賽事結(jié)果。列表可以有序地編排一些信息資源，使其結(jié)構(gòu)化和條理化，以方便瀏覽者更加快捷地獲取信息。本章將主要介紹何時(shí)使用表格以及創(chuàng)建它們所需要的標(biāo)記。本章還介紹如何在HTML中創(chuàng)建3種類型的列表。第104頁(yè)本章的學(xué)習(xí)目標(biāo)了解表格的概念及在HTML中使用的方法掌握基本表格元素與特性了解創(chuàng)建易訪問(wèn)表格的方法掌握各種形式列表的實(shí)現(xiàn)第105頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)第106頁(yè)4.1表格介紹想要使用表格，需要以“網(wǎng)格”(grid)模式去思考。表格由行和列所組成第107頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)第108頁(yè)4.2基本表格元素與特性前面已經(jīng)介紹了基本表格是如何工作的，本節(jié)將對(duì)這些元素稍微加以描述，并將介紹它們可包含的特性。其中一些特性可用于創(chuàng)建更加復(fù)雜的表格布局。第109頁(yè)<table>元素創(chuàng)建表格<table>元素是所有表格的包含元素。它可以包含以下特性：所有通用特性面向腳本的基本事件特性dir特性<tr>元素包含表格行<td>與<th>元素表示表格單元colspan特性headers特性rowspan特性scope特性第110頁(yè)創(chuàng)建基本表格我們已經(jīng)了解了表格的基礎(chǔ)元素與特性，現(xiàn)在可以創(chuàng)建一個(gè)顯示關(guān)于ExampleCafé經(jīng)營(yíng)時(shí)間信息的表格。展示營(yíng)業(yè)時(shí)間的表格第111頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)第112頁(yè)4.3為表格添加標(biāo)題無(wú)論表格是用于顯示某特定試驗(yàn)的結(jié)果還是某一特定市場(chǎng)的股票指數(shù)，抑或今晚的電視節(jié)目？每一個(gè)表格都應(yīng)該擁有一個(gè)標(biāo)題，這樣網(wǎng)站訪問(wèn)者才能知道表格的用途。即使周圍的文本描述了表格的內(nèi)容，使用<caption>元素賦予表格一個(gè)正式的標(biāo)題仍然是一項(xiàng)良好的習(xí)慣。默認(rèn)情況下，多數(shù)瀏覽器在表格之上的中央位置顯示該元素的內(nèi)容。第113頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)4.4表格區(qū)域分組使用rowspan及colspan特性使單元跨越多個(gè)行或列。將表格分割為三個(gè)區(qū)域：表頭、表體以及表尾。使用<colgroup>元素對(duì)列分組。使用<col>元素在不相關(guān)列之間共享特性。第114頁(yè)使用colspan特性跨越列對(duì)于<td>及<th>元素，二者都可以包含一個(gè)叫做colspan的特性，該特性使表格單元可以跨越多于一個(gè)列。第115頁(yè)有三個(gè)列的表格使用rowspan特性跨域行rowspan特性的作用于colspan特性很類似，只是它在相反的方向上工作：rowspan使單元可以縱向跨越單元行。第116頁(yè)rowspan特性的效果將表格分解為表頭、表體及表尾某些情況下，可能需要將表體（裝載大部分表格數(shù)據(jù)的地方）與表頭或者甚至表尾區(qū)分出來(lái)。第117頁(yè)本例在FireFox瀏覽器中的效果使用<colgroup>元素進(jìn)行列分組如果兩個(gè)或更多列是相互關(guān)聯(lián)的，則可以使用<colgroup>元素解釋這些列應(yīng)該被歸到同一組中。第118頁(yè)使用<colgroup>元素進(jìn)行列分組使用<col>元素在列間共享樣式<col>元素為<colgroup>中的列指定特性(如列內(nèi)單元的寬度與對(duì)齊方式)。與<colgroup>元素不同，<col>元素不隱含任何解構(gòu)性分組，因此被更多地用于呈現(xiàn)目的。第119頁(yè)使用<col>元素在列間共享樣式第120頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)第121頁(yè)4.5嵌套表格可以在表格單元中包含標(biāo)記，只要該元素全部包含于單元內(nèi)即可。將另一個(gè)表格整體放置于一個(gè)表格單元內(nèi)，從而創(chuàng)建了一個(gè)所謂的“嵌套表格”(nestedtable)。一個(gè)周末活動(dòng)計(jì)劃的表格第122頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)第123頁(yè)4.6易訪問(wèn)表格表格本身可以包含大量數(shù)據(jù)，并能對(duì)這些信息提供一種很有幫助的視覺(jué)呈現(xiàn)形式。在查看一張表格時(shí)，很容易就可以通過(guò)上下左右掃描，在行與列之間找到一個(gè)特定的值，或者比較一定范圍的值。如何線性化表格在一個(gè)屏幕閱讀器被用于閱讀表格時(shí)，它通常會(huì)對(duì)其進(jìn)行線性化，意思是說(shuō)閱讀器會(huì)從第一行起，自左向右朗讀行中的單元，一個(gè)接一個(gè)，直到移動(dòng)到下一行之前，然后繼續(xù)這樣讀，直到閱讀器讀完了表格中的每一行。第124頁(yè)使用id、scope及headers特性在創(chuàng)建單元表頭時(shí)，在<th>元素中添加scope特性有助于指定該表頭應(yīng)用于哪些單元。如果將其賦值為row，就指定了該元素是所在行的表頭；而當(dāng)值為column時(shí)，就表明它是所在列的表頭。headers特性所扮演的角色與scope特性正相反。因?yàn)樗?lt;td>元素中用于指定哪些表頭對(duì)應(yīng)于該單元。該特性的值是一個(gè)由空格分隔的表頭單元id特性值列表。第125頁(yè)創(chuàng)建易訪問(wèn)表格為ExampleCafé網(wǎng)站創(chuàng)建一個(gè)新頁(yè)面，提供一個(gè)周末烹飪課程的時(shí)間表。一共2天上午和下午的課程。第126頁(yè)一個(gè)周末烹飪課程的時(shí)間表第127頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)4.7使用列表無(wú)序列表：比如項(xiàng)目列表有序列表：使用有序數(shù)字或字母而非圓點(diǎn)定義列表：使你可以指定術(shù)語(yǔ)及其定義第128頁(yè)使用<ul>元素創(chuàng)建無(wú)序列表如果想要?jiǎng)?chuàng)建一個(gè)項(xiàng)目列表，應(yīng)該將其寫在<ul>元素中。需要寫下的每一項(xiàng)或每一行都應(yīng)該位于開(kāi)標(biāo)簽<li>和閉標(biāo)簽</li>之間。第129頁(yè)列表的顯示效果有序列表在有序列表中，不是在每項(xiàng)前放置圓點(diǎn)，而是可以使用數(shù)字(1、2、3)、字母(A、B、C)或羅馬數(shù)字(i、ii、iii)來(lái)前置標(biāo)識(shí)它們。有序列表項(xiàng)位于<ol>元素中。之后每一個(gè)列表項(xiàng)都應(yīng)嵌套于<ol>元素內(nèi)，并且包含在<li>開(kāi)標(biāo)簽和</li>閉標(biāo)簽之間。使用start特性修改有序列表的起始數(shù)字使用reversed特性實(shí)現(xiàn)列表順序倒數(shù)使用type特性指定序列標(biāo)記第130頁(yè)定義列表定義列表是一種特殊類型的列表，它的列表項(xiàng)由術(shù)語(yǔ)和隨后的簡(jiǎn)短文字定義或描述組成。定義列表包含在<dl>元素內(nèi)。之后在<dl>元素內(nèi)部包含了交替出現(xiàn)的<dt>和<dd>元素。第131頁(yè)定義列表列表嵌套可以在一個(gè)列表中嵌套另一列表。例如，將一個(gè)帶有獨(dú)立序列的編號(hào)列表放入一個(gè)對(duì)應(yīng)列表項(xiàng)中。除非使用start特性另行指定起始序列號(hào)，每一個(gè)嵌套列表都將獨(dú)立排序。每一個(gè)新列表都置于一個(gè)<li>元素內(nèi)。第132頁(yè)列表嵌套第133頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)4.8表格應(yīng)用實(shí)例在本例的表格上顯示了當(dāng)天的主要市場(chǎng)上蔬菜的市場(chǎng)價(jià)格信息。在設(shè)計(jì)時(shí)，主要用到了分組、表頭以及單元格合并，放入單元格文字和圖片信息等。第134頁(yè)本例在GoogleChrome中瀏覽效果第135頁(yè)主要內(nèi)容4.1表格介紹4.2基本表格元素與特性4.3為表格添加標(biāo)題4.4表格區(qū)域分組4.5嵌套表格4.6易訪問(wèn)表格4.7使用列表4.8表格應(yīng)用實(shí)例4.9本章小結(jié)第136頁(yè)4.9本章小結(jié)在本章中，介紹了表格在創(chuàng)建頁(yè)面時(shí)可以成為怎樣的強(qiáng)大工具，以及所有表格如何基于一種網(wǎng)格模式，并使用4種基本元素：<table>，包含每一個(gè)表格；<tr>，包含表格的行；<td>，包含表格數(shù)據(jù)的一個(gè)單元；以及<th>，表示一個(gè)包含表頭的單元。在進(jìn)行文字排版時(shí)，經(jīng)常需要用到列表效果。在本章中，介紹了如何在HTML中創(chuàng)建如下3種類型的列表：無(wú)序列表：比如項(xiàng)目列表有序列表：使用有序數(shù)字或字母而非圓點(diǎn)定義列表：使你可以指定術(shù)語(yǔ)及其定義第5章

圖片與富媒體本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第138頁(yè)本章概述90年代中期，大多數(shù)網(wǎng)站只是含有文本和圖像的一系列相互鏈接的文檔。HTML5以及OpenWeb（開(kāi)放Web）的興起預(yù)示著專利模式的終結(jié)。本章通過(guò)對(duì)canvas和SVG（ScalableVectorGraphics，可縮放向量圖）的簡(jiǎn)要介紹向大家介紹原生的video和audio。本章將學(xué)習(xí)如何在網(wǎng)站中添加圖片、動(dòng)畫、音頻以及視頻。第139頁(yè)本章的學(xué)習(xí)目標(biāo)如何在網(wǎng)頁(yè)中添加圖片不同類型的圖片格式及其各自適用的情況如何在網(wǎng)頁(yè)中添加音頻及視頻了解所有關(guān)于<video>、<audio>以及<object>元素的內(nèi)容了解Canvas的概念和用法了解SVG與canvas的區(qū)別第140頁(yè)主要內(nèi)容5.1向網(wǎng)頁(yè)添加圖片5.2HTML5的視頻5.3HTML5的音頻5.4Canvas5.5SVG5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例5.7本章小結(jié)第141頁(yè)5.1向網(wǎng)頁(yè)添加圖片使用<img>元素添加圖片使用圖片作為鏈接選擇正確的圖片格式表格由行和列所組成使用<img>元素添加圖片圖片是使用<img>元素添加到網(wǎng)站中的。該元素必須包含兩個(gè)特性：src特性，表明圖片來(lái)源；以及alt特性，提供對(duì)圖片的描述。除可帶有所有通用特性外，<img>元素還可以包含下列特性：height、width、ismap、usemap。向網(wǎng)頁(yè)中添加圖片第142頁(yè)使用圖片作為鏈接第143頁(yè)使用圖片作為鏈接選擇正確的圖片格式選擇正確的圖片格式以及正確保存圖片將確保網(wǎng)站不會(huì)出現(xiàn)不必要的緩慢加載。而且訪問(wèn)者也會(huì)因此更加樂(lè)于訪問(wèn)。GIF：GraphicsInterchangeFormat(圖形交換格式，讀作“gif”或“jif”)。JPEG：JointPhotographicExpertsGroup(聯(lián)合圖像專家組格式，讀作“jay-peg”)。PNG：PortableNetworkGraphics(便攜式網(wǎng)絡(luò)圖像格式，讀作“pee-en-gee”或“ping”)。第144頁(yè)第145頁(yè)主要內(nèi)容5.1向網(wǎng)頁(yè)添加圖片5.2HTML5的視頻5.3HTML5的音頻5.4Canvas5.5SVG5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例5.7本章小結(jié)第146頁(yè)5.2HTML5的視頻有人說(shuō)Web的未來(lái)是視頻。因此。對(duì)于一般用戶而言，肯定需要一種包括視頻內(nèi)容的簡(jiǎn)單可靠的方式，而不必投資昂貴的專利軟件。HTML5恰好滿足所需，只需直接在瀏覽器中采用一行標(biāo)記即可。HTML5不僅能夠更具語(yǔ)義，而且使得向網(wǎng)站添加視頻所需要的簡(jiǎn)單標(biāo)記為：<videosrc="gordoinspace.webm"></video>視頻格式最關(guān)鍵的是視頻格式和編解碼器。HTML5規(guī)范的一個(gè)早期版本指定了Theora編解碼器，但Apple拒絕實(shí)現(xiàn)它。規(guī)范后來(lái)刪除了此Theora編解碼器，因?yàn)闉g覽器供應(yīng)商未能就使用通用編解碼器達(dá)成一致意見(jiàn)。這意味著規(guī)范不再書(shū)面提供首選的編解碼器。視頻容器編解碼器第147頁(yè)瀏覽器支持5個(gè)主瀏覽器全部都支持HTML5的video。第148頁(yè)InternetExplorerMozillaWebKitOperaIE6IE7IE8IE9+FF3.6FF4+SAF4SAF5CHR4CHR5CHR6+O10.5O10.6+H.264(MP4)...

..

..OggTheora(ogg)....

..

VP8(WebM)...

.

....

.

HTML5視頻格式兼容性添加視頻源使用source元素source能夠指定用于媒體元素的多個(gè)可選視頻（使用audio時(shí)則是音頻）。這是一個(gè)不可見(jiàn)元素，意即瀏覽器不會(huì)渲染它的內(nèi)容，以指示它在文檔中的可見(jiàn)性外觀。再談Flash雖然已經(jīng)討論了開(kāi)放標(biāo)準(zhǔn)取代如Flash等專利技術(shù)的好處，但在還需要Flash來(lái)幫助支持舊版的InternetExplorer。第149頁(yè)track元素source并不是可用于原生視頻的唯一元素。還有一個(gè)后來(lái)加入HTML5規(guī)范的元素track以及與它有關(guān)聯(lián)的API，TextTrackAPI，其目的是能夠?yàn)橐曨l或音頻指定一個(gè)外部的同步軌道或數(shù)據(jù)。track只能用作video或audio媒體元素的子元素，其用法如下所示：第150頁(yè)更多的視頻設(shè)置以后需要對(duì)視頻做更多的設(shè)置，例如，是否要在視頻上創(chuàng)建自定義控件，或是添加快進(jìn)和回放按鈕等。這些動(dòng)作的一部分可使用HTML5DOM的媒體元素API來(lái)實(shí)現(xiàn)。首先從對(duì)視頻添加播放和暫停按鈕開(kāi)始。接著，為該視頻賦一個(gè)變量。最后，對(duì)視頻添加播放和暫停兩個(gè)按鈕。然后這些控件可以用CSS設(shè)置樣式，并在視頻上定位。如果需要，也可以將它們的樣式設(shè)置為在懸停、獲得焦點(diǎn)或其他希望的情況下才顯示出來(lái)。第151頁(yè)第152頁(yè)主要內(nèi)容5.1向網(wǎng)頁(yè)添加圖片5.2HTML5的視頻5.3HTML5的音頻5.4Canvas5.5SVG5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例5.7本章小結(jié)5.3HTML5的音頻以下是給頁(yè)面添加audio的標(biāo)記：<audiosrc="gordo_interview.ogg"controls></audio>audio的工作方式與video十分相似，并且共享了一些同樣的特性和API。第153頁(yè)Opera的音頻控件音頻編解碼器與video一樣有趣的是，HTML5規(guī)范并未指定音頻編解碼器，因?yàn)椴煌臑g覽器廠商支持不同的編解碼器。在本質(zhì)上，音頻編解碼器的作用是將音頻流進(jìn)行解碼以形成一種能夠通過(guò)揚(yáng)聲器進(jìn)行回放的格式。目前有很多可用的音頻編解碼器，主要有以下五種：Vorbis、MP3、AAC、WAV、MP4第154頁(yè)有三個(gè)列的表格瀏覽器支持情況各瀏覽器對(duì)編解碼器的支持是分散的，但大多數(shù)瀏覽器(除IE8及以下版以外)支持的編解碼器不止一個(gè)。第155頁(yè)InternetExplorerMozillaWebKitOperaIE6IE7IE8IE9+FF3.6FF4+SAF4SAF5+CHR5+CHR8+O10.5O10.6+AAC......

..MP3...

..

..OggVorbis....

..

WAV....

.

MP4...

..

...HTML5音頻格式兼容性添加音頻源以video中所采用的同樣方式來(lái)使用source元素，我們可以指定多個(gè)音頻文件，并讓瀏覽器播放它所能理解的第一個(gè)文件。為了迎合不支持audio元素的瀏覽器，可以添加一個(gè)下載音頻文件的鏈接。第156頁(yè)使用jPlayer由Happyworm開(kāi)發(fā)的jPlayer是一個(gè)jQuery插件。它為兼容的瀏覽器提供了HTML5音頻和視頻支持，并且為不支持的瀏覽器提供了備用的Flash。jPlayer可以從下載。第157頁(yè)Happyworm開(kāi)發(fā)的jPlayer演示第158頁(yè)主要內(nèi)容5.1向網(wǎng)頁(yè)添加圖片5.2HTML5的視頻5.3HTML5的音頻5.4Canvas5.5SVG5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例5.7本章小結(jié)第159頁(yè)5.4Canvascanvas由Apple公司創(chuàng)建，形成了其Dashboard界面部件集和Safari瀏覽器的組成部分。這項(xiàng)工作在WebKit瀏覽器中得到了延續(xù)，Mozilla和Opera也緊隨其后。Canvas后來(lái)成為WHATWG的HTML5版本的一個(gè)部分。而微軟的InternetExplorer直到IE9才支持canvas。通過(guò)使用ExplorerCanvas庫(kù)，可以讓canvas能夠在IE7及以上版本中運(yùn)行。基于像素的自由簡(jiǎn)單地說(shuō)，canvas（畫布）及其相關(guān)的API能夠通過(guò)編寫腳本來(lái)創(chuàng)建動(dòng)態(tài)圖像和實(shí)時(shí)交互。canvas可以用來(lái)創(chuàng)建游戲、圖表、圖形和交互圖形等，而且在某些情況下可以創(chuàng)建整個(gè)應(yīng)用程序。甚至可以將它與video和audio相結(jié)合以創(chuàng)建一些真正有趣的實(shí)例。第160頁(yè)添加/實(shí)現(xiàn)canvas為了在文檔中實(shí)現(xiàn)canvas并開(kāi)始繪畫，需要做兩件基本的事情。(1)在文檔中添加一個(gè)canvas元素。(2)使用JavaScript獲得上下文。第161頁(yè)添加/實(shí)現(xiàn)canvas2D上下文在能夠進(jìn)行繪畫之前，還需要一個(gè)能夠在上面進(jìn)行繪畫的事物：即上下文（環(huán)境）。可以將它看成是一個(gè)畫板，或者更確切地說(shuō)是一個(gè)畫板形式的頁(yè)面?？梢韵袢缦逻@樣得到這一上下文：第162頁(yè)添加/實(shí)現(xiàn)canvas用canvas可以創(chuàng)建的一些令人驚奇的示例，但是canvas在IE中的情況如何呢？在一開(kāi)始介紹canvas時(shí)曾提到過(guò)，可以通過(guò)使用一個(gè)叫做ExplorerCanvas(excanvas.js)的JavaScript庫(kù)來(lái)實(shí)現(xiàn)IE支持。其工作方式是將腳本轉(zhuǎn)換成微軟的VML專利技術(shù)，這與描述的canvasAPI沒(méi)什么不同。第163頁(yè)canvas的威力與潛力游戲CuttheRopeCanvasRider3DTetris應(yīng)用程序DarkroomSketchpadPicozuEditor結(jié)合使用video、audio與canvas9elements的HTMLcanvas實(shí)驗(yàn)Ambilight視頻摧毀第164頁(yè)第165頁(yè)主要內(nèi)容5.1向網(wǎng)頁(yè)添加圖片5.2HTML5的視頻5.3HTML5的音頻5.4Canvas5.5SVG5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例5.7本章小結(jié)第166頁(yè)5.5SVGScalableVectorGraphics(SVG，可縮放向量圖)是一項(xiàng)在瀏覽器中創(chuàng)建向量圖形的技術(shù)，這種向量圖基于XML文件格式，是W3C從1999年起便積極開(kāi)發(fā)的一個(gè)開(kāi)放標(biāo)準(zhǔn)(/TR/SVG)。請(qǐng)注意，SVG不是HTML5的一部分，但HTML5可以嵌入內(nèi)聯(lián)SVG。SVG與canvas的選擇SVG文件是基于向量的，意即它們能夠被縮放，而不會(huì)損失圖像質(zhì)量。這與canvas形成了鮮明的對(duì)比，那是基于像素(光柵)的，且不能優(yōu)雅地進(jìn)行縮放。它可以實(shí)現(xiàn)canvas的許多效果。一個(gè)主要的區(qū)別是，每一個(gè)SVG元素都會(huì)成為DOM的一部分（canvas總是空的），這讓每個(gè)對(duì)象都能夠被索引，并提供了一個(gè)可訪問(wèn)性更好的解決方案。第167頁(yè)用SVG發(fā)布向量為了產(chǎn)生SVG圖形，可以沿著兩條路線：使用諸如AdobeIllustrator或Inkscape（一個(gè)開(kāi)源的SVG圖形編輯器）之類的圖形包或者自己編寫。實(shí)現(xiàn)基本的SVG創(chuàng)建與canvas同樣的例子第168頁(yè)用SVG創(chuàng)建的帶有漸變的圓第169頁(yè)主要內(nèi)容5.1向網(wǎng)頁(yè)添加圖片5.2HTML5的視頻5.3HTML5的音頻5.4Canvas5.5SVG5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例5.7本章小結(jié)5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例一幅生動(dòng)形象的圖像所包含的信息量可能遠(yuǎn)遠(yuǎn)超過(guò)許多文字的描述，給人的視覺(jué)印象會(huì)比文字強(qiáng)烈很多。動(dòng)畫、視頻是網(wǎng)頁(yè)設(shè)計(jì)元素中最生動(dòng)、活躍的因素，能促進(jìn)人與人之間的溝通與互動(dòng)，使信息內(nèi)容得到極大豐富，帶給受眾視聽(tīng)享受。第170頁(yè)富媒體頁(yè)面瀏覽效果第171頁(yè)主要內(nèi)容5.1向網(wǎng)頁(yè)添加圖片5.2HTML5的視頻5.3HTML5的音頻5.4Canvas5.5SVG5.6富媒體頁(yè)面的設(shè)計(jì)實(shí)例5.7本章小結(jié)第172頁(yè)5.7本章小結(jié)本章所介紹的多種技術(shù)可以創(chuàng)建令人震驚的效果，完全可以媲美Flash或其他專利插件。瀏覽器支持這種原生的多媒體內(nèi)容，意味著已不再需要插件。瀏覽器提供了原生控件，這些控件內(nèi)置了鍵盤可訪問(wèn)性。由于不再需要插件，網(wǎng)站的性能也得以改善。通過(guò)了解如何在HTML5文檔中實(shí)現(xiàn)video、audio、canvas和SVG，用戶應(yīng)開(kāi)闊眼界，把握使用在線富媒體的新一波機(jī)會(huì)，創(chuàng)建真正有吸引力、開(kāi)放且可訪問(wèn)的交互式體驗(yàn)。第6章HTML5表單的應(yīng)用本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第174頁(yè)本章概述幾乎每當(dāng)需要從網(wǎng)站訪問(wèn)者那里收集信息時(shí)，都需要使用“表單”(form)。很多在線表單具有與紙質(zhì)表單很強(qiáng)的相似性。在網(wǎng)上可以創(chuàng)建一個(gè)由“表單控件”(formcontrol)組合而成的表單，包含如“文本框”(textbox)、“復(fù)選框”(checkbox)、“選擇框”(selectbox)以及“單選按鈕”(radiobutton)等組成的表單。本章將介紹如何將這些不同種類的每一個(gè)控件組合入表單中，用于收集來(lái)自網(wǎng)站訪問(wèn)者的所有種類的信息。第175頁(yè)本章的學(xué)習(xí)目標(biāo)如何創(chuàng)建表單如何使用不同類型的表單控件用戶輸入數(shù)據(jù)的處理如何使表單易于訪問(wèn)如何組織表單內(nèi)容的結(jié)構(gòu)第176頁(yè)主要內(nèi)容6.1認(rèn)識(shí)表單6.2使用<form>元素創(chuàng)建表單6.3<form>元素中表單控件6.4創(chuàng)建一個(gè)聯(lián)系方式表單實(shí)例6.5使用<label>元素為控件創(chuàng)建標(biāo)簽6.6使用<fieldset>及<legend>元素組織表單結(jié)構(gòu)6.7焦點(diǎn)6.8disabled與readonly控件6.9向服務(wù)器發(fā)送表單數(shù)據(jù)6.10創(chuàng)建更有用的表單字段6.11本章小結(jié)第177頁(yè)6.1認(rèn)識(shí)表單下圖展示的是百度的首頁(yè)，其中包含了兩類表單控件：文本輸入：其中可以輸入搜索詞。提交按鈕：向服務(wù)器發(fā)送表單。本頁(yè)表單中有一個(gè)提交按鈕：寫著“百度一下”的按鈕。百度首頁(yè)第178頁(yè)主要內(nèi)容6.1認(rèn)識(shí)表單6.2使用<form>元素創(chuàng)建表單6.3<form>元素中表單控件6.4創(chuàng)建一個(gè)聯(lián)系方式表單實(shí)例6.5使用<label>元素為控件創(chuàng)建標(biāo)簽6.6使用<fieldset>及<legend>元素組織表單結(jié)構(gòu)6.7焦點(diǎn)6.8disabled與readonly控件6.9向服務(wù)器發(fā)送表單數(shù)據(jù)6.10創(chuàng)建更有用的表單字段6.11本章小結(jié)第179頁(yè)6.2使用<form>元素創(chuàng)建表單表單位于<form>的元素中。<form>元素還可以包含其他標(biāo)記，例如段落、標(biāo)題等。但是，它不允許包含另外一個(gè)<form>元素。頁(yè)面中可以包含任意數(shù)量的表單，應(yīng)該保持<form>元素間相互分離。例如，可以有一個(gè)登錄表單、一個(gè)搜索表單以及一個(gè)報(bào)紙訂閱表單，這些表單可以全部位于同一頁(yè)面中。如果真的在一個(gè)頁(yè)面中擁有多于一個(gè)表單，那么用戶可以一次只將一個(gè)表單的數(shù)據(jù)發(fā)送給服務(wù)器。第180頁(yè)action特性action特性指明表單提交后對(duì)數(shù)據(jù)的處理。通常，action特性的值是一個(gè)頁(yè)面或程序，位于接收信息的Web服務(wù)器中。例如，一個(gè)包含用戶名和密碼的登錄表單，用戶輸入的詳細(xì)信息被傳送到Web服務(wù)器中一個(gè)以ASP.NET編寫的頁(yè)面，叫做login.aspx。這里action特性則如下所示：<formaction="/membership/login.aspx">第181頁(yè)id特性id特性可以唯一標(biāo)識(shí)頁(yè)面中的<form>元素。賦予<form>元素一個(gè)id特性是一種良好習(xí)慣，因?yàn)楹芏啾韱问褂脴邮奖砗湍_本，就要求使用id特性以識(shí)別表單。id特性的值在文檔中應(yīng)該是唯一的，并且還應(yīng)該遵循id特性的其他取值規(guī)則。有時(shí)以字符frm作為表單的id和name特性值的起始，并使用值的剩余部分描述表單收集數(shù)據(jù)的類型，例如，frmLogin或frmSearch。name特性name特性是id特性的前任，而且如id特性一樣，其取值在文檔內(nèi)應(yīng)該保持唯一?，F(xiàn)在不需要使用這個(gè)特性了。不過(guò)如果使用了，可以賦予與id特性相同的值。第182頁(yè)enctype特性如果使用HTTPpost方法向服務(wù)器發(fā)送數(shù)據(jù)，則可以使用enctype特性指定瀏覽器在將數(shù)據(jù)發(fā)送到服務(wù)器之前如何對(duì)其進(jìn)行編碼。如果沒(méi)有使用此特性，則瀏覽器會(huì)使用第一個(gè)值。因此，只有在表單允許用戶向服務(wù)器上傳文件（如圖片），或用戶將可能使用非ASCII字符時(shí)，才需要使用該特性。第183頁(yè)accept-charset特性不同語(yǔ)言通過(guò)不同的“字符集”(characterset)或字符組書(shū)寫。然而，在創(chuàng)建網(wǎng)站時(shí)，開(kāi)發(fā)人員不會(huì)將網(wǎng)站設(shè)計(jì)成能夠理解所有語(yǔ)言。accept-charset特性背后的思想是，使用該特性可以指定一系列用戶能夠輸入，服務(wù)器可以處理的字符編碼。該特性的值是一個(gè)由空格或逗號(hào)分隔的字符集列表。第184頁(yè)novalidate特性novalidate特性是一個(gè)布爾特性，用以指定表單在提交時(shí)是否應(yīng)該進(jìn)行校驗(yàn)。如果該特性存在，瀏覽器則不應(yīng)該在提交前校驗(yàn)表單。<formaction="/membership/login.aspx”novalidate>第185頁(yè)target特性target特性指定一個(gè)命名窗口或關(guān)鍵字，用于處理表單提交。例如，為在新窗口中處理表單，可以將<form>元素的target特性設(shè)置為"_blank"。<formaction="/membership/login.aspx”