教學(xué)課件 HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)

第1頁(yè)第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述隨著互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的人學(xué)會(huì)了上網(wǎng)，通過(guò)網(wǎng)絡(luò)，可以聊天、購(gòu)物、看新聞、查天氣等等。這些功能都是通過(guò)訪問(wèn)不同的網(wǎng)頁(yè)來(lái)完成的，那么網(wǎng)頁(yè)是怎么制作出來(lái)的，我們通過(guò)手機(jī)、電腦上網(wǎng)時(shí)又如何訪問(wèn)不同的網(wǎng)頁(yè)呢？本章將從最基本的概念講起，告訴讀者網(wǎng)頁(yè)與網(wǎng)站的基本原理，如何設(shè)計(jì)和開(kāi)發(fā)網(wǎng)頁(yè)。第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解網(wǎng)頁(yè)和網(wǎng)站的基本概念理解網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的技術(shù)掌握靜態(tài)網(wǎng)頁(yè)的工作原理了解常有的網(wǎng)頁(yè)設(shè)計(jì)工具了解網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)的過(guò)程掌握網(wǎng)頁(yè)制作環(huán)境的搭建第4頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本概念 1.2網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù) 1.3網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā) 1.4編寫(xiě)第一個(gè)HTML頁(yè)面 1.5本章小結(jié) 1.6思考和練習(xí)第5頁(yè)1.1網(wǎng)頁(yè)的基本概念隨著Internet的不斷發(fā)展，網(wǎng)頁(yè)已經(jīng)被越來(lái)越多的人所熟悉。那么什么是網(wǎng)頁(yè)，網(wǎng)頁(yè)有是如何搭建并呈現(xiàn)在用戶面前的呢？Internet，中文正式譯名為因特網(wǎng)，又叫做國(guó)際互聯(lián)網(wǎng)。Internet采用超文本和超媒體的信息組織方式，將信息的鏈接擴(kuò)展到整個(gè)Internet上。第6頁(yè)WebWeb(WorldWideWeb)即全球廣域網(wǎng)，也稱(chēng)萬(wàn)維網(wǎng)，它是一種基于超文本和HTTP的、全球性的、動(dòng)態(tài)交互的、跨平臺(tái)的分布式圖形信息系統(tǒng)。Web的表現(xiàn)形式包括超文本(HyperText)、超媒體(HyperMedia)和超文本傳輸協(xié)議HTTP(HyperTextTransferProtocol)。第7頁(yè)網(wǎng)頁(yè)網(wǎng)頁(yè)是一個(gè)包含HTML標(biāo)簽的純文本文件，它可以存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中，是萬(wàn)維網(wǎng)中的一“頁(yè)”，是超文本標(biāo)記語(yǔ)言格式（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用，文件擴(kuò)展名為.html或.htm）。文字與圖片是構(gòu)成網(wǎng)頁(yè)的兩個(gè)最基本的元素。我們可以簡(jiǎn)單地理解為：文字，就是網(wǎng)頁(yè)的內(nèi)容。圖片，就是網(wǎng)頁(yè)的美觀。除此之外，網(wǎng)頁(yè)的元素還包括動(dòng)畫(huà)、音樂(lè)、程序等。第8頁(yè)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)：靜態(tài)網(wǎng)頁(yè)是標(biāo)準(zhǔn)的HTML文件，它的文件擴(kuò)展名是.htm、.html，可以包含文本、圖像、聲音、FLASH動(dòng)畫(huà)、客戶端腳本和ActiveX控件等。靜態(tài)網(wǎng)頁(yè)的內(nèi)容是預(yù)先確定的，早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁(yè)制作的。動(dòng)態(tài)網(wǎng)頁(yè)：動(dòng)態(tài)網(wǎng)頁(yè)是指跟靜態(tài)網(wǎng)頁(yè)相對(duì)的一種網(wǎng)頁(yè)編程技術(shù)，動(dòng)態(tài)網(wǎng)頁(yè)可以與用戶進(jìn)行交互，一般以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，根據(jù)用戶提交的請(qǐng)求數(shù)據(jù)，動(dòng)態(tài)生成頁(yè)面中的內(nèi)容。采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄等。常用的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)有JSP、ASP/ASP.NET、PHP等。第9頁(yè)網(wǎng)站網(wǎng)站(Website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，網(wǎng)站是一種溝通工具，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊，或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪問(wèn)網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。域名、網(wǎng)站空間與程序是網(wǎng)站的基本組成部分。第10頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本概念

1.2網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù)

1.3網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā) 1.4編寫(xiě)第一個(gè)HTML頁(yè)面 1.5本章小結(jié) 1.6思考和練習(xí)第11頁(yè)1.2網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù)Web標(biāo)準(zhǔn)目前流行的設(shè)計(jì)方式是采用HTML(XHTML)+CSS+JavaScript將網(wǎng)頁(yè)的內(nèi)容、表現(xiàn)和行為分離。HTML、CSS和JavaScript都是跨平臺(tái)與操作系統(tǒng)無(wú)關(guān)的，只依賴(lài)于瀏覽器，目前所有的瀏覽器都支持HTML、CSS和JavaScript。HTML概述HTML的全稱(chēng)是超文本標(biāo)記語(yǔ)言(HyperTextMarkupLanguage)，是Internet上用于編寫(xiě)網(wǎng)頁(yè)的主要語(yǔ)言，它提供了精簡(jiǎn)而有力的文件定義，可以設(shè)計(jì)出多姿多彩的超媒體文件。HTML文件是純文本的文件格式，所謂的超文本，主要是指它的超鏈接功能，通過(guò)超鏈接將圖片、聲音和影視及其他網(wǎng)頁(yè)或其他網(wǎng)站鏈接起來(lái)，構(gòu)成內(nèi)容豐富的Web頁(yè)面。HTML是最早的超文本標(biāo)記語(yǔ)言，它的發(fā)展經(jīng)歷了HTML1.0、2.0、3.2、4.0、4.01和5幾個(gè)版本，在發(fā)展過(guò)程這，尤其是從HTML4.0開(kāi)始淘汰了很多標(biāo)記和屬性，本書(shū)對(duì)這些淘汰的標(biāo)記和屬性不再贅述。第12頁(yè)CSS層疊樣式表層疊樣式表是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。CSS是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式表文件。名稱(chēng)CSS中的“層疊(cascading)”表示樣式單規(guī)則應(yīng)用于HTML文檔元素的方式。第13頁(yè)JavaScript腳本語(yǔ)言JavaScript是一種屬于網(wǎng)絡(luò)的腳本語(yǔ)言，已經(jīng)被廣泛用于Web應(yīng)用開(kāi)發(fā)，常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。在1995年時(shí)，由Netscape公司的BrendanEich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來(lái)像Java，因此取名為JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與Self及Scheme較為接近。

JavaScript是一種直譯式腳本語(yǔ)言，它的解釋器稱(chēng)為JavaScript引擎，是瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。第14頁(yè)第15頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本概念

1.2網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù) 1.3網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)

1.4編寫(xiě)第一個(gè)HTML頁(yè)面 1.5本章小結(jié) 1.6思考和練習(xí)第16頁(yè)1.3網(wǎng)頁(yè)設(shè)計(jì)與制作靜態(tài)網(wǎng)頁(yè)部署在服務(wù)器端，服務(wù)器收到客戶請(qǐng)求后需要將整個(gè)頁(yè)面的內(nèi)容全部下載到客戶機(jī)器上由客戶端瀏覽器解釋執(zhí)行。靜態(tài)網(wǎng)頁(yè)最大的特點(diǎn)是網(wǎng)頁(yè)中顯示的內(nèi)容通常不會(huì)因人、因時(shí)而變，即任何客戶端在任何時(shí)候訪問(wèn)同一個(gè)頁(yè)面，其內(nèi)容都是一樣的。第17頁(yè)靜態(tài)網(wǎng)頁(yè)的工作原理(1)在客戶端瀏覽器地址欄中輸入靜態(tài)網(wǎng)頁(yè)的URL，向服務(wù)器發(fā)出HTTP請(qǐng)求。(2)服務(wù)器處理該HTTP請(qǐng)求，返回HTTP響應(yīng)，將用戶請(qǐng)求頁(yè)面的所有代碼及資源文件都返回給客戶端，瀏覽器解釋執(zhí)行之后，將內(nèi)容呈現(xiàn)給用戶。第18頁(yè)常用的開(kāi)發(fā)工具由于HTML文件是標(biāo)準(zhǔn)的ASCII文本文件，因此，可以使用任意一個(gè)文本編輯器來(lái)打開(kāi)和編輯HTML文件，如Windows自帶的“記事本”程序。除此之外，還有一些專(zhuān)門(mén)用來(lái)設(shè)計(jì)和開(kāi)發(fā)網(wǎng)頁(yè)的軟件，常用的有Dreamweaver和FrontPage，這些專(zhuān)業(yè)軟件具有可視化界面，可以所見(jiàn)即所得的快速設(shè)計(jì)出美觀的網(wǎng)頁(yè)，減少開(kāi)發(fā)人員的工作。第19頁(yè)Web服務(wù)器Web服務(wù)器一般指網(wǎng)站服務(wù)器，是指駐留于因特網(wǎng)上某種類(lèi)型計(jì)算機(jī)的程序，只有將設(shè)計(jì)好的網(wǎng)站放置到該容器中，才能使網(wǎng)絡(luò)中的所有用戶通過(guò)瀏覽器進(jìn)行訪問(wèn)。Web服務(wù)器不僅能夠存儲(chǔ)信息，還能在用戶通過(guò)Web瀏覽器提供的信息的基礎(chǔ)上運(yùn)行腳本和程序。目前主流的Web服務(wù)器有：Apache、IIS和Nginx。第20頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)的過(guò)程1.明確網(wǎng)站定位2.收集信息與素材3.規(guī)劃網(wǎng)站結(jié)構(gòu)4.設(shè)計(jì)網(wǎng)頁(yè)模板5.制作頁(yè)面6.實(shí)現(xiàn)后臺(tái)功能7.網(wǎng)站的測(cè)試與發(fā)布第21頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本概念 1.2網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù) 1.3網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā) 1.4編寫(xiě)第一個(gè)HTML頁(yè)面

1.5本章小結(jié) 1.6思考和練習(xí)第22頁(yè)1.4

編寫(xiě)第一個(gè)HTML頁(yè)面

雖然靜態(tài)網(wǎng)頁(yè)不需要Web服務(wù)器的支持，可以直接通過(guò)瀏覽器預(yù)覽，但是為了規(guī)范，本書(shū)所有頁(yè)面均使用Apache服務(wù)器來(lái)進(jìn)行訪問(wèn)。為此，我們需要先安裝并配置Apache。同時(shí)需要檢查瀏覽器對(duì)HTML5的支持。第23頁(yè)安裝和配置Apache從Apache官方網(wǎng)站/download.cgi可以下載Apache的Windows最新版本Apache2.4的下載，將下載到的壓縮包解壓到需要安裝的目錄，以D盤(pán)為例，解壓后得到一個(gè)名為Apache24的文件夾，在該文件夾下有若干子文件夾，在conf子文件夾中找到配置文件httpd.conf，這是一個(gè)純文本文件，可以用記事本打開(kāi)，在該文件中更改服務(wù)路徑及端口第24頁(yè)第一個(gè)HTML5頁(yè)面<!DOCTYPEhtml><html> <head> <metacharset="GB2312"> <title>第一個(gè)HTML5頁(yè)面</title> </head> <body> <p>從現(xiàn)在開(kāi)始學(xué)習(xí)制作網(wǎng)頁(yè)</p> </body></html>第25頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本概念

1.2網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù) 1.3網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā) 1.4編寫(xiě)第一個(gè)HTML頁(yè)面 1.5本章小結(jié)

1.6思考和練習(xí)第26頁(yè)1.5本章小結(jié)本章全面講述了網(wǎng)頁(yè)設(shè)計(jì)的基本知識(shí)。首先，從網(wǎng)頁(yè)和網(wǎng)站的基本概念談起，介紹了靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的區(qū)別，網(wǎng)站的基本組成等。接下來(lái)，介紹了網(wǎng)友設(shè)計(jì)相關(guān)的技術(shù)，包括HTML、CSS和JavaScript，這也是本書(shū)要學(xué)習(xí)的全部?jī)?nèi)容。之后，講述了網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)的工具和工作流程，包括靜態(tài)網(wǎng)頁(yè)的工作原理，常有的開(kāi)發(fā)工具，以及一般網(wǎng)站的開(kāi)發(fā)過(guò)程。最后，通過(guò)搭建簡(jiǎn)單的環(huán)境，完成一個(gè)簡(jiǎn)單的HTML頁(yè)面的開(kāi)發(fā)。第27頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本概念

1.2網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù) 1.3網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā) 1.4編寫(xiě)第一個(gè)HTML頁(yè)面 1.5本章小結(jié) 1.6思考和練習(xí)第28頁(yè)1.6思考和練習(xí)1.什么是網(wǎng)頁(yè)，網(wǎng)站何網(wǎng)頁(yè)有什么關(guān)系？2.根據(jù)網(wǎng)頁(yè)內(nèi)容是否根據(jù)請(qǐng)求不同而發(fā)生變化，可以將網(wǎng)頁(yè)分為

和

。3.HTML的全稱(chēng)是

，是Internet上用于編寫(xiě)網(wǎng)頁(yè)的主要語(yǔ)言。4.簡(jiǎn)述靜態(tài)網(wǎng)頁(yè)的工作原理。5.由于HTML文件是標(biāo)準(zhǔn)的

文件，因此，可以使用任意一個(gè)文本編輯器來(lái)打開(kāi)和編輯HTML文件，如Windows自帶的

程序。6.搭建上機(jī)練習(xí)環(huán)境，檢測(cè)瀏覽器是否支持HTML5。7.編寫(xiě)一個(gè)簡(jiǎn)單HTML5頁(yè)面。第29頁(yè)第2章HTML基礎(chǔ)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第30頁(yè)本章概述作為一種網(wǎng)頁(yè)制作語(yǔ)言，HTML有自己的語(yǔ)法規(guī)則，本章從HTML的歷史變遷講起，帶領(lǐng)讀者從基本的標(biāo)簽和元素開(kāi)始，慢慢學(xué)習(xí)HTML的基本語(yǔ)法，嘗試制作簡(jiǎn)單的網(wǎng)頁(yè)。第31頁(yè)本章的學(xué)習(xí)目標(biāo)了解HTML的歷史變遷了解HTML與XHTML的關(guān)系掌握HTML中標(biāo)簽和元素的基本概念掌握HTML5的文檔類(lèi)型聲明掌握常用的文本格式化標(biāo)簽掌握HTML中列表的創(chuàng)建與使用掌握鏈接的創(chuàng)建和應(yīng)用掌握表格的創(chuàng)建與使用第32頁(yè)主要內(nèi)容2.1HTML簡(jiǎn)介2.2HTML基本語(yǔ)法 2.3使用表格 2.4本章小結(jié) 2.5思考和練習(xí)第33頁(yè)2.1HTML簡(jiǎn)介HTML是目前互聯(lián)網(wǎng)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。HTML文檔是由HTML標(biāo)簽組成的描述性文本，HTML標(biāo)簽可以標(biāo)識(shí)文字、圖形、動(dòng)畫(huà)、聲音、視頻、表格、鏈接等。第34頁(yè)HTML的歷史變遷1982年，美國(guó)人蒂姆?伯納斯?李為了方便世界各地的物理學(xué)家能夠進(jìn)行合作研究以及信息共享，創(chuàng)造了HTML語(yǔ)言1993年互聯(lián)網(wǎng)工程工作小組(InternetEngineeringTastForce，IETF)工作草案發(fā)布，可以算作HTML的第一個(gè)版本，但它卻不是一個(gè)正式的版本。第一個(gè)正式版本HTML2.0也不是出自W3C之手，而是由IETF制定的，從第三個(gè)版本開(kāi)始，W3C開(kāi)始接手并負(fù)責(zé)后續(xù)版本的制定工作。第35頁(yè)HTML的歷史變遷HTML3.0規(guī)范是由W3C于1995年3月提出，提供了很多新的特性，例如表格、文字繞排和復(fù)雜數(shù)學(xué)元素的顯示。從1997年到1999年，HTML的版本從3.2到4.0，再到4.01，經(jīng)歷了非?？斓陌l(fā)展。在HTML4.01之后，W3C提出了XHTML1.0的概念。雖然聽(tīng)起來(lái)完全不同，但XHTML1.0和HTML4.01其實(shí)是一樣的。唯一不同的是XHTML1.0要求使用XML語(yǔ)法。第36頁(yè)HTML的歷史變遷到了2000年，Web標(biāo)準(zhǔn)項(xiàng)目的活動(dòng)開(kāi)展得如火如荼，開(kāi)發(fā)人員對(duì)瀏覽器里包含的那些亂七八糟的專(zhuān)有特性已經(jīng)忍無(wú)可忍了。當(dāng)時(shí)CSS有了長(zhǎng)足的發(fā)展，而且與XHTML1.0的結(jié)合也很緊密，CSS+XHTML1.0可以算是最佳實(shí)踐了。雖然HTML4.01與XHTML1.0沒(méi)有本質(zhì)上的區(qū)別，但是大部分開(kāi)發(fā)人員接受了這種組合。第37頁(yè)HTML的歷史變遷XHTML1.0之后是XHTML1.1，規(guī)范本身沒(méi)有什么新內(nèi)容，元素、屬性也都相同，唯一的變化就是把文檔標(biāo)記為XML文檔。接下來(lái)，新的版本是XHTML2，但是這個(gè)版本并沒(méi)有完成。在2004年，W3C成員內(nèi)部的一次研討會(huì)上，Opera公司的代表伊恩??？松?IanHickson)提出了一個(gè)擴(kuò)展和改進(jìn)HTML的建議。他建議新的任務(wù)組可以跟XHTML2并行第38頁(yè)HTML的歷史變遷W3C于2007年組建了HTML5工作組，在WHATWG工作成果的基礎(chǔ)上繼續(xù)開(kāi)展工作，由伊恩??？松瓝?dān)任W3CHTML5規(guī)范的編輯，同時(shí)兼任WHATWG的編輯，以方便新工作組開(kāi)展工作。在XHTML2.0失敗之時(shí)，HTML5已經(jīng)取得了成功，因?yàn)樗陂_(kāi)發(fā)時(shí)考慮到了當(dāng)前和未來(lái)的瀏覽器開(kāi)發(fā)，以及過(guò)去、現(xiàn)在和將來(lái)的Web開(kāi)發(fā)任務(wù)。第39頁(yè)HTML的歷史變遷HTML5的發(fā)展核心就在于支持所有現(xiàn)有內(nèi)容的重要性。HTML5是向后兼容的。它包含了HTML4規(guī)范的全部特性，并包括了少量修改和完善?；谶@一思想，W3C指出：應(yīng)當(dāng)盡可能將現(xiàn)有HTML文檔處理成HTML5，并根據(jù)現(xiàn)有瀏覽器的行為，得到與用戶和作者的當(dāng)前期望相兼容的結(jié)果。第40頁(yè)XHTML基礎(chǔ)XHTML是在HTML語(yǔ)言基礎(chǔ)上發(fā)展而來(lái)的，但是為了兼容數(shù)以萬(wàn)計(jì)的現(xiàn)存網(wǎng)頁(yè)和不同瀏覽器，XHTML文檔與HTML文檔沒(méi)有太大區(qū)別，只是添加了XML語(yǔ)言的基本規(guī)范和要求。XHTML是根據(jù)XML語(yǔ)法簡(jiǎn)化而來(lái)的，因此它遵循XML文檔規(guī)范。同時(shí)XHTML又大量繼承HTML語(yǔ)言的語(yǔ)法規(guī)范，因此與HTML語(yǔ)言非常相似，不過(guò)它對(duì)代碼的要求更加嚴(yán)謹(jǐn)。第41頁(yè)HTML5

2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于最終制定完成并公開(kāi)發(fā)布。HTML5的目標(biāo)是創(chuàng)建更簡(jiǎn)單的Web程序，書(shū)寫(xiě)出更簡(jiǎn)潔的HTML代碼。例如，為了使Web應(yīng)用程序的開(kāi)發(fā)變得更容易，提供了很多API；為了使HTML變得更簡(jiǎn)潔，開(kāi)發(fā)出了新的屬性、新的元素，等等。總體來(lái)說(shuō)，HTML5為下一代Web平臺(tái)提供了許許多多新的功能。第42頁(yè)HTML5特點(diǎn)雖然HTML5宣稱(chēng)的立場(chǎng)是“非革命性的發(fā)展”，但是它所帶來(lái)的功能是讓人渴望的，使用它進(jìn)行設(shè)計(jì)也是簡(jiǎn)單的，因此深受Web設(shè)計(jì)者和Web開(kāi)發(fā)者的歡迎。(1)兼容性

(2)合理性(3)效率(4)安全性(5)分離(6)簡(jiǎn)單(7)通用(8)無(wú)插件第43頁(yè)主要內(nèi)容2.1HTML簡(jiǎn)介2.2HTML基本語(yǔ)法 2.3使用表格 2.4本章小結(jié) 2.5思考和練習(xí)第44頁(yè)2.2HTML基本語(yǔ)法HTML是超文本標(biāo)記語(yǔ)言，作為一種網(wǎng)頁(yè)制作語(yǔ)言，它有自己的語(yǔ)法規(guī)則通常，一個(gè)HTML文檔中有很多標(biāo)簽，且標(biāo)簽大都是成對(duì)出現(xiàn)。它們中有“開(kāi)標(biāo)簽”和“閉標(biāo)簽”。尖括號(hào)中沒(méi)有斜線(/)的標(biāo)簽是開(kāi)標(biāo)簽，而尖括號(hào)中第一個(gè)字符位斜線(/)的標(biāo)簽為閉標(biāo)簽，如</html>。一對(duì)標(biāo)簽及二者之間包含的內(nèi)容稱(chēng)作一個(gè)“元素”(element)。標(biāo)簽和元素標(biāo)簽通常包含左尖括號(hào)、右尖括號(hào)以及二者間的字母和數(shù)字，如<title>，而元素則是指開(kāi)標(biāo)簽、閉標(biāo)簽以及二者之間的任何內(nèi)容。第45頁(yè)核心元素<html>、<head>以及<body>元素構(gòu)成了一個(gè)HTML文檔的框架——它們是所有網(wǎng)頁(yè)構(gòu)建的基礎(chǔ)。<!doctypehtml>看上去非常簡(jiǎn)單，而且很好記。這一文檔類(lèi)型聲明也是所有HTML5頁(yè)面的第一行代碼。第46頁(yè)核心元素<html>元素是整個(gè)HTML文檔的包含元素，出現(xiàn)在DOCTYPE聲明之后。<html>元素可以包含以下幾個(gè)屬性：id、dir、lang。<head>元素僅僅是所有其他頭部元素的容器。它是開(kāi)標(biāo)簽<html>后出現(xiàn)的第一個(gè)標(biāo)簽。通常一個(gè)<head>元素內(nèi)都包含一個(gè)<title>元素，用以指定文檔的標(biāo)題。不過(guò)，它還可以包含以下元素的任意一種按任意順序出現(xiàn)的組合：第47頁(yè)核心元素<title>元素用來(lái)為網(wǎng)頁(yè)指定一個(gè)標(biāo)題，它是<head>元素的一個(gè)子元素。<link>元素用來(lái)添加樣式表。該元素可以使用href屬性指向Web上的某個(gè)資源。<linkrel="stylesheet"href="css/main.css">向頁(yè)面添加腳本使用<script>元素，然后添加src屬性，指向需要使用的JavaScript文件的位置。<scriptsrc="js/main.js"></script>第48頁(yè)核心元素<body>元素出現(xiàn)在<head>元素之后。它包含了實(shí)際想在瀏覽器主窗口中顯示的部分，有時(shí)也被稱(chēng)為“主體內(nèi)容”。標(biāo)題的6個(gè)級(jí)別：<h1>、<h2>、<h3>、<h4>、<h5>及<h6>。段落<p>、預(yù)格式化小節(jié)<pre>、斷行<br/>、塊引用<blockquote>以及地址<address>。分組元素：<div>、<header>、<hgroup>、<nav>、<section>、<article>、<footer>、<aside>以及<hr>。呈現(xiàn)性元素：<b>、<i>、<sup>以及<sub>。短語(yǔ)元素：<em>、<strong>、<abbr>、<dfn>、<blockquote>、<q>、<cite>、<code>、kbd>、<var>以及<samp>。列表：如使用<ul>、<li>的無(wú)序列表；使用<ol>、<li>的有序列表；以及使用<dl>、<dt>及<dd>的定義列表。編輯元素：<ins>和<del>。第49頁(yè)HTML屬性屬性為HTML元素提供了更多的附加信息。HTML屬性通常是以名稱(chēng)/值對(duì)的形式出現(xiàn)在開(kāi)始標(biāo)簽中，例如，下面的<style>標(biāo)簽中的type屬性，值為text/css：<styletype="text/css">有些屬性則只含有一個(gè)名稱(chēng)，如required或者checked。這些屬性稱(chēng)作“布爾屬性”。在一個(gè)標(biāo)簽中出現(xiàn)一個(gè)布爾屬性，則代表該屬性值為真。第50頁(yè)核心屬性可以在多數(shù)HTML元素中(盡管不是全部)使用的4個(gè)核心屬性是：id、title、class和style。id屬性用來(lái)唯一標(biāo)識(shí)頁(yè)面中的一個(gè)元素，或者用來(lái)指定一個(gè)CSS樣式或一段JavaScript應(yīng)該只被應(yīng)用于文檔中的該元素。class屬性指定某元素屬于某一特定“類(lèi)型”(class)。這種用法在CSS中運(yùn)用非常普遍。title屬性為元素提供一個(gè)參考的標(biāo)題style屬性用來(lái)在元素內(nèi)部指定CSS規(guī)則第51頁(yè)文本格式化幾乎所有的頁(yè)面都包含某種形式的文本，本節(jié)將學(xué)習(xí)文本格式化相關(guān)的HTML元素。主要包括如下幾個(gè)標(biāo)簽：<h1>、<h2>、<h3>、<h4>、<h5>以及<h6><p>、<br>以及<pre>第52頁(yè)文本格式化當(dāng)一段文本中的兩個(gè)字之間加入多個(gè)連續(xù)的空格，默認(rèn)情況下，屏幕上只有一個(gè)空格會(huì)被顯示。這種處理方式被稱(chēng)為“空格壓縮”。類(lèi)似地，在HTML文檔中另起一個(gè)新行，或者有多個(gè)連續(xù)的空行，這些都會(huì)被忽略，并會(huì)作為一個(gè)空格處理。如果頁(yè)面中確實(shí)需要多個(gè)連續(xù)的空格時(shí)該怎么辦呢？這時(shí)有兩種方法：使用<pre>標(biāo)簽(本節(jié)后面會(huì)介紹)或使用空格符號(hào)

，

代表一個(gè)空格，需要多少個(gè)空格就添加多少個(gè)

。第53頁(yè)文本格式化HTML提供了6個(gè)級(jí)別的標(biāo)題，使用元素<h1>、<h2>、<h3>、<h4>、<h5>以及<h6>。瀏覽器以6個(gè)元素中的最大字體顯示<h1>，而<h6>則最小。<h1>標(biāo)簽通常表示一段文字的標(biāo)題或主題，所以不宜多用，一個(gè)就足夠了；<h2>~<h6>標(biāo)簽使用數(shù)目不限，以體現(xiàn)多層次的內(nèi)容結(jié)構(gòu)。在較長(zhǎng)的文本片段中，標(biāo)題可以幫助組織文檔結(jié)構(gòu)。如果查看一下本書(shū)的目錄，就能看到不同級(jí)別的標(biāo)題是如何組織的。第54頁(yè)文本格式化使用段落標(biāo)簽<p>可以分段顯示網(wǎng)頁(yè)這的文本，讓文章具有段落之分。合理使用<p>元素，不僅可以減輕閱讀者的視覺(jué)疲勞，而且可以讓文章更有條理，也利于搜索引擎優(yōu)化。在開(kāi)標(biāo)簽<p>與閉標(biāo)簽</p>之間的所有文本都在一個(gè)段落內(nèi)，如果要分成多個(gè)段落，則需要使用多個(gè)<p>標(biāo)簽。第55頁(yè)文本格式化使用<br>元素，可以將段落文本換行顯示。<br>元素是一個(gè)“空元素”的例子，不需要開(kāi)閉標(biāo)簽對(duì)，因?yàn)槎咧g不會(huì)有任何內(nèi)容，通常直接在開(kāi)標(biāo)簽的后面加一個(gè)斜線，寫(xiě)作<br/>。一個(gè)<br/>代表一個(gè)換行，多個(gè)<br/>元素可以實(shí)現(xiàn)多次換行。與<br/>類(lèi)似的還有一個(gè)標(biāo)簽，也是沒(méi)有不需要開(kāi)閉標(biāo)簽對(duì)的，這就是水平線標(biāo)簽<hr/>，使用該標(biāo)簽，將在網(wǎng)頁(yè)中添加一條水平直線。第56頁(yè)文本格式化有時(shí)候，我們希望文本與它寫(xiě)在HTML文檔中的格式完全保持一致，不希望文本行到達(dá)瀏覽器邊框時(shí)自動(dòng)換行。也希望瀏覽器忽略多個(gè)空格，并且希望文本行能夠按照編寫(xiě)時(shí)的格式換行。這就需要使用<pre>標(biāo)簽了。任何位于<pre>開(kāi)標(biāo)簽和</pre>閉標(biāo)簽之間的文本都會(huì)保持其在源文件中的格式。第57頁(yè)字體樣式標(biāo)簽<b>：該標(biāo)簽將以粗體顯示文本。<em>：該標(biāo)簽把文本定義為強(qiáng)調(diào)的內(nèi)容，通常將文字顯示為斜體。<strong>：該標(biāo)簽把文本定義為語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容。<i>：該標(biāo)簽顯示斜體文本效果，和<em>標(biāo)簽類(lèi)似。它告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示。<sup>：該標(biāo)簽實(shí)現(xiàn)上標(biāo)文字效果。<sub>：該標(biāo)簽實(shí)現(xiàn)下標(biāo)文字效果。<u>：該標(biāo)簽內(nèi)的文本將被添加下劃線。第58頁(yè)列表HTML支持如下3種類(lèi)型的列表： 無(wú)序列表：無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。 有序列表：有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 定義列表：自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。第59頁(yè)無(wú)序列表在HTML中，創(chuàng)建無(wú)序列表的標(biāo)簽是<ul>(ul是unorderedlist無(wú)序列表的縮寫(xiě))，在<ul>元素中需要寫(xiě)下的每一項(xiàng)或每一行都應(yīng)該位于開(kāi)標(biāo)簽<li>和閉標(biāo)簽</li>之間(li是listitem列表項(xiàng)的縮寫(xiě))。<ul>和<li>元素可以包含所有通用屬性以及UI事件屬性。第60頁(yè)有序列表有序列表使用的是<ol>標(biāo)簽。在有序列表中，不是在每個(gè)項(xiàng)目前放置圓點(diǎn)，而是可以使用數(shù)字(1、2、3)、字母(A、B、C)或羅馬數(shù)字(i、ii、iii)來(lái)前置標(biāo)識(shí)它們。有序列表默認(rèn)使用從1開(kāi)始的數(shù)字標(biāo)識(shí)每個(gè)項(xiàng)目，如前面的無(wú)序列表如果改為有序列表。如果要使用其他序列來(lái)標(biāo)識(shí)項(xiàng)目，可以使用type屬性第61頁(yè)定義列表定義列表是一種特殊類(lèi)型的列表，它的列表項(xiàng)由術(shù)語(yǔ)和隨后的簡(jiǎn)短文字定義或描述組成。定義列表包含在<dl>元素內(nèi)，之后在<dl>元素內(nèi)部包含了交替出現(xiàn)的<dt>和<dd>元素：<dt>元素的內(nèi)容是所要定義的術(shù)語(yǔ)；<dd>元素中則包含了之前<dt>中術(shù)語(yǔ)的定義。第62頁(yè)嵌套列表可以在一個(gè)列表中嵌套另一列表。對(duì)于有序列表，除非使用start特性另行指定起始序列號(hào)，否則，每一個(gè)嵌套列表都將獨(dú)立排序。第63頁(yè)鏈接鏈接是網(wǎng)頁(yè)中極為重要的部分，單擊文檔中的鏈接，即可跳轉(zhuǎn)至相應(yīng)的位置。正是因?yàn)橛辛随溄?，用戶才可以在不同的網(wǎng)頁(yè)中來(lái)回跳轉(zhuǎn)，從而方便地查閱各種各樣的知識(shí)，享受網(wǎng)絡(luò)帶來(lái)的無(wú)窮樂(lè)趣。創(chuàng)建超鏈接需要使用<a>元素。超鏈接包含兩部分內(nèi)容：一是鏈接地址，即鏈接的目標(biāo)，可以是某個(gè)網(wǎng)址或文件的路徑，對(duì)應(yīng)為<a>標(biāo)簽的href屬性；二是鏈接文本或圖像，單擊該文本或圖像，將跳轉(zhuǎn)到href屬性指定的鏈接地址第64頁(yè)鏈接根據(jù)鏈接地址是指向站外文件還是站內(nèi)文件，鏈接地址可分為絕對(duì)地址和相對(duì)地址絕對(duì)地址：指向目標(biāo)路徑的完整描述，一般指向本站點(diǎn)外的文件或URL。如【例2-12】中<a>標(biāo)簽的href屬性使用的就是絕對(duì)地址。相當(dāng)?shù)刂罚合鄬?duì)于當(dāng)前頁(yè)面的路徑，一般指向本站點(diǎn)內(nèi)的文件，所以一般不需要完整的URL地址。如【例2-12】中加載圖片的<img>標(biāo)簽，通過(guò)src屬性指向一個(gè)圖片文件，用的就是相對(duì)地址。第65頁(yè)鏈接當(dāng)瀏覽器遇到相對(duì)URL地址時(shí)，會(huì)將相對(duì)URL轉(zhuǎn)換為完整的絕對(duì)URL地址。而<base>標(biāo)簽可以為頁(yè)面指定一個(gè)基礎(chǔ)URL地址，該標(biāo)簽沒(méi)有關(guān)閉標(biāo)簽。通過(guò)這種設(shè)置，瀏覽器會(huì)以在相對(duì)地址前加上這個(gè)基礎(chǔ)地址的方式得到完整的絕對(duì)地址。第66頁(yè)鏈接到電子郵件地址鏈接到電子郵件地址的鏈接是一種特殊的超鏈接。單擊該鏈接，會(huì)啟動(dòng)電子郵件程序并打開(kāi)一個(gè)新郵件，并在“收件人”欄中預(yù)先填入該電子郵件地址。創(chuàng)建電子郵件地址鏈接的方法是在<a>元素中按如下形式設(shè)置href屬性：<ahref="mailto:zhaoyanduo@">聯(lián)系我們</a>.此href屬性的值由關(guān)鍵字mailto起始，隨后是冒號(hào)，然后是希望發(fā)送到的電子郵件地址。第67頁(yè)錨點(diǎn)鏈接錨點(diǎn)鏈接(也叫書(shū)簽鏈接)常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁(yè)，通過(guò)單擊命名錨點(diǎn)，可以跳轉(zhuǎn)到頁(yè)面中的特定段落。錨點(diǎn)鏈接的創(chuàng)建過(guò)程分為兩步：創(chuàng)建命名錨點(diǎn)和鏈接到命名錨點(diǎn)。第68頁(yè)第69頁(yè)主要內(nèi)容2.1HTML簡(jiǎn)介2.2HTML基本語(yǔ)法 2.3使用表格

2.4本章小結(jié) 2.5思考和練習(xí)第70頁(yè)2.3使用表格表格以行和列的形式顯示信息，常用于顯示網(wǎng)格結(jié)構(gòu)的數(shù)據(jù)，如列車(chē)時(shí)刻表、電視節(jié)目表、財(cái)務(wù)報(bào)告以及體育賽事等。表格由行、列和單元格3部分組成。使用表格可以排列頁(yè)面中的文本、圖像等各類(lèi)數(shù)據(jù)。表格的行貫穿表格的左右，從上到下為列，行和列交匯的部分為單元格。第71頁(yè)創(chuàng)建表格HTML的表格通過(guò)4個(gè)標(biāo)簽來(lái)創(chuàng)建，表格標(biāo)簽<table>、行標(biāo)簽<tr>、表頭標(biāo)簽<th>和表格數(shù)據(jù)標(biāo)簽<td>。整個(gè)的表格是一個(gè)<table>元素。在<table>元素內(nèi)，表格是以行挨著行的形式書(shū)寫(xiě)的。每一行包含在一個(gè)<tr>元素內(nèi)，“tr”代表“表格行”(tablerow)。第一行的單元格是表頭，每個(gè)單元使用<th>元素寫(xiě)在行元素內(nèi)，“th”代表“表格頭”(tableheader)；第二行開(kāi)始的每個(gè)單元格是表格數(shù)據(jù)，每個(gè)單元使用<td>元素寫(xiě)在行元素內(nèi)，“td”代表“表格數(shù)據(jù)”(tabledata)。第72頁(yè)表格的邊框?yàn)榱烁逦總€(gè)單元格中的數(shù)據(jù)，可以使用border屬性，設(shè)置表格的邊框?qū)挾?，默認(rèn)情況下，不指定該屬性，表格邊框?yàn)?，則瀏覽器不顯示邊框，如圖2-20所示。border屬性的值是邊框線的寬度，單位為像素，該屬性的設(shè)置只能影響表格四周的邊框?qū)挾龋挥绊憜卧裰g的邊框尺寸。第73頁(yè)為表格添加標(biāo)題表格常用來(lái)顯示數(shù)據(jù)，為了更好的描述表格中數(shù)據(jù)的來(lái)源或用途，通常每個(gè)表格都應(yīng)該擁有一個(gè)標(biāo)題。這時(shí)可以使用<caption>元素，<caption>元素直接出現(xiàn)在開(kāi)標(biāo)簽<table>之后，并應(yīng)該位于第一行之前。默認(rèn)情況下，多數(shù)瀏覽器會(huì)在表格上方的中央位置顯示該元素的內(nèi)容。第74頁(yè)跨行與跨列跨列是指將同一行的多個(gè)單元格合并為一個(gè)，這就用到了<td>或<th>標(biāo)簽的colspan屬性，col是column(列)的縮寫(xiě)，span是寬度，該屬性的值為當(dāng)前單元格跨越的列數(shù)。rowspan屬性的作用與colspan很類(lèi)似，只是它在相反的方向上工作：rowspan使單元格可以縱向跨越行。第75頁(yè)表格的結(jié)構(gòu)標(biāo)簽為了在源代碼中清楚地區(qū)分表格結(jié)構(gòu)，HTML提供了<thead>、<tbody>和<tfoot>3個(gè)標(biāo)簽，分別對(duì)應(yīng)表格的表頭、表體和表尾。如果表格太長(zhǎng)在一個(gè)屏幕中顯示不全，那么表頭與表尾可以始終保持可見(jiàn)，而表體則會(huì)被給予一個(gè)滾動(dòng)條。另外，還可以使用CSS為<thead>、<tbody>以及<tfoot>中的內(nèi)容添加不同的樣式風(fēng)格。這3個(gè)標(biāo)簽的用法都比較簡(jiǎn)單，只需將相應(yīng)的<tr>元素放在相應(yīng)的開(kāi)閉標(biāo)簽對(duì)之間即可，第76頁(yè)對(duì)表格的列分組如果兩個(gè)或更多列是相互關(guān)聯(lián)的，則可以使用<colgroup>元素解釋這些列應(yīng)該被歸到同一組中。以便通過(guò)CSS為不同組中的列應(yīng)用不同的樣式。使用<colgroup>元素時(shí)，它應(yīng)該直接出現(xiàn)在<table>開(kāi)標(biāo)簽之后，并包含一個(gè)span屬性，用來(lái)指定該組中包含多少列。第77頁(yè)嵌套表格在表格的單元中也可以包含其他HTML元素，只要該元素全部包含于單元內(nèi)即可。當(dāng)表格的單元格內(nèi)是另一個(gè)表格時(shí)，就創(chuàng)建了一個(gè)“嵌套表格”。第78頁(yè)使用表格的建議使用<caption>元素為表格添加標(biāo)題。標(biāo)題能概括表格所描繪的內(nèi)容，有了一個(gè)醒目的標(biāo)題，理解表格信息就會(huì)容易得多。盡量使用<th>元素指明表頭，多數(shù)瀏覽器會(huì)默認(rèn)以粗體渲染<th>元素，讓讀者一目了然各列數(shù)據(jù)的含義。始終將表頭放在第一行與第一列。避免使用嵌套表格。少用rowspan與colspan屬性。第79頁(yè)主要內(nèi)容2.1HTML簡(jiǎn)介2.2HTML基本語(yǔ)法 2.3使用表格 2.4本章小結(jié)

2.5思考和練習(xí)第80頁(yè)2.4本章小結(jié)本章講述了HTML的基本語(yǔ)法。首先，介紹了HTML的歷史變遷、XHTML與HTML的關(guān)系以及HTML5時(shí)代的到來(lái)。接下來(lái)，對(duì)HTML中的常用標(biāo)簽進(jìn)行了詳細(xì)介紹，包括標(biāo)簽和元素的基本概念、HTML的屬性、文本格式化標(biāo)簽、HTML列表、鏈接的創(chuàng)建與使用等。最后，學(xué)習(xí)了HTML的表格，HTML提供了強(qiáng)大的表格功能，合理的利用表格，對(duì)于展示頁(yè)面內(nèi)容有很大幫助，本章內(nèi)容是HTML中最基礎(chǔ)的，也是最簡(jiǎn)單的，這是網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)始，后面會(huì)有更多高級(jí)的技巧等著我們?nèi)L試和挑戰(zhàn)。第81頁(yè)主要內(nèi)容2.1HTML簡(jiǎn)介2.2HTML基本語(yǔ)法 2.3使用表格 2.4本章小結(jié) 2.5思考和練習(xí)第82頁(yè)2.5思考和練習(xí)1.在HTML4.01之后，W3C提出了

的概念。2.在HTML的歷史變遷中，

是想作為HTML的替代者出現(xiàn)的，但是發(fā)展到

的時(shí)候失敗了，而HTML5取得了成功。3.在XHTML文檔的第一行新增了

元素，該元素用來(lái)定義文檔類(lèi)型。4.DTD是一套關(guān)于標(biāo)簽的

。DTD文件是一個(gè)

文件，后綴名為

。5.簡(jiǎn)述HTML5的構(gòu)成。6.什么是HTML的標(biāo)簽，什么是HTML的元素？7.在<html>元素內(nèi)部，存在頁(yè)面的兩個(gè)主要部分

和

？8.所有HTML5頁(yè)面的第一行代碼都是一樣的，這行代碼是什么？第83頁(yè)第3章HTML5快速入門(mén)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第84頁(yè)本章概述為了增強(qiáng)Web的實(shí)用性，HTML5引入了許多新技術(shù)，對(duì)傳統(tǒng)HTML文檔進(jìn)行了大幅修改，使得文檔結(jié)構(gòu)更加清晰明了、易讀，降低了學(xué)習(xí)難度，這樣既方便瀏覽者訪問(wèn)，也提高了Web開(kāi)發(fā)的速度。本章將從認(rèn)識(shí)HTML5文檔結(jié)構(gòu)開(kāi)始，詳細(xì)介紹HTML5中新增和廢除的元素，新增和廢除的屬性，以及新增的事件等。重點(diǎn)講述了新增結(jié)構(gòu)元素的用法。第85頁(yè)本章的學(xué)習(xí)目標(biāo)了解HTML5文檔結(jié)構(gòu)掌握HTML5新增的結(jié)構(gòu)元素的用法掌握HTML5新增的塊級(jí)元素的用法掌握HTML5新增的行內(nèi)語(yǔ)義元素的用法了解HTML5中廢除的元素了解HTML5中新增和廢除的屬性了解HTML5中新增的事件第86頁(yè)主要內(nèi)容3.1認(rèn)識(shí)HTML5文檔結(jié)構(gòu)

3.2HTML5元素 3.3新增和廢除的屬性 3.4新增的事件3.5本章小結(jié) 3.6思考和練習(xí)第87頁(yè)3.1認(rèn)識(shí)HTML

5文檔結(jié)構(gòu)HTML5文檔以<!DOCTYPE>開(kāi)頭，這是文檔類(lèi)型聲明，并且必須位于HTML5文檔的第一行，用來(lái)告訴瀏覽器或任何其他分析程序它們所查看的文檔類(lèi)型。<html>標(biāo)簽是HTML5文檔的根標(biāo)簽，緊跟在<!DOCTYPEhtml>之后。html標(biāo)簽支持HTML5全局屬性和manifest屬性，manifest屬性主要在創(chuàng)建HTML5離線應(yīng)用的時(shí)候用到。<head>標(biāo)簽是所有頭部元素的容器。位于<head>內(nèi)部的元素可以包含腳本、樣式表、元信息等。<head>標(biāo)簽支持HTML5全局屬性。第88頁(yè)HTML

5文檔結(jié)構(gòu)<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。meta標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱(chēng)/值對(duì)。該標(biāo)簽提供頁(yè)面的元信息，如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。上述代碼中<metacharset="UTF-8">定義了文檔的字符編碼是utf-8。這里，charset是meta標(biāo)簽的屬性，而utf-8是該屬性的值。<title>標(biāo)簽位于<head>標(biāo)簽內(nèi)，定義了文檔的標(biāo)題。該標(biāo)簽定義瀏覽器工具欄中的標(biāo)題、提供頁(yè)面被添加到收藏夾時(shí)的標(biāo)題以及顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題。<title>標(biāo)簽支持HTML5全局屬性。<body>標(biāo)簽定義文檔的主題和所有內(nèi)容，如文本、超鏈接、圖像、表格和列表等都包含在該標(biāo)簽中。第89頁(yè)主要內(nèi)容3.1認(rèn)識(shí)HTML5文檔結(jié)構(gòu) 3.2HTML5元素 3.3新增和廢除的屬性 3.4新增的事件3.5本章小結(jié) 3.6思考和練習(xí)第90頁(yè)3.2

HTML5元素HTML5在HTML4的基礎(chǔ)上進(jìn)行了大量修改，引入了很多新的元素，同時(shí)也廢除了很多元素，改由其他屬性或CSS樣式來(lái)替代。在HTML5對(duì)分組元素進(jìn)行擴(kuò)展之前，最常用的HTML元素的組容器就是<div>元素。它代表一個(gè)通用的內(nèi)容塊，用來(lái)結(jié)合class與id對(duì)文檔賦予結(jié)構(gòu)。第91頁(yè)HTML5元素HTML5通過(guò)引入一些新元素改變了這種情況。這些元素可以對(duì)內(nèi)容進(jìn)行更精確的分組。新增的結(jié)構(gòu)元素解決了這種div漫天飛舞的情況，增強(qiáng)了網(wǎng)頁(yè)內(nèi)容的語(yǔ)義性，這對(duì)搜索引擎而言，能夠更好地識(shí)別和組織索引內(nèi)容。合理地使用這些結(jié)構(gòu)元素，將極大地提高搜索結(jié)果的準(zhǔn)確度。第92頁(yè)新增結(jié)構(gòu)元素元

素描

述section在Web頁(yè)面應(yīng)用中，section元素也可以用于區(qū)域的章節(jié)表述header頁(yè)面主體的頭部，注意與head元素相區(qū)別。head元素不可見(jiàn)，而header往往包含在body中footer頁(yè)面的底部，即頁(yè)腳。通常用于標(biāo)出網(wǎng)站的一些相關(guān)信息，例如“關(guān)于我們”、法律聲明、郵件信息和版權(quán)所有等nav專(zhuān)門(mén)用于菜單導(dǎo)航、鏈接導(dǎo)航的元素，是navigator的縮寫(xiě)article用于表示一篇文章的主題內(nèi)容，一般為文字集中顯示的區(qū)域第93頁(yè)Section元素section元素主要用來(lái)對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊。section元素表示文檔或應(yīng)用的一個(gè)部分。所謂“部分”，這里是指按照主題分組的內(nèi)容區(qū)域。section元素通常由標(biāo)題和內(nèi)容組成。但section元素并不是容器元素，所以不能用CSS來(lái)渲染。當(dāng)一個(gè)容器需要直接定義樣式或通過(guò)腳本控制行為時(shí)，則應(yīng)使用div元素。第94頁(yè)header元素header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的內(nèi)容區(qū)塊的標(biāo)題，也可以包含其他內(nèi)容，如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片。因此，整個(gè)頁(yè)面的標(biāo)題都應(yīng)該放在頁(yè)面的開(kāi)頭。header元素定義文檔或者文檔的一部分區(qū)域的頁(yè)眉。在一個(gè)文檔中，可以定義多個(gè)header元素。需要注意head與header的不同，head元素是HTML文檔的所有頭部元素的容器，而header元素是body元素中的一個(gè)結(jié)構(gòu)元素，也可以在article元素內(nèi)使用header元素，但是不能在footer、address或者另一個(gè)header元素內(nèi)使用header元素。第95頁(yè)footer元素footer元素可以作為內(nèi)容塊的腳注，比如在父級(jí)內(nèi)容塊中添加注釋?zhuān)蛘咴诰W(wǎng)頁(yè)中添加版權(quán)信息等。腳注信息的形式有作者、相關(guān)閱讀鏈接及版權(quán)信息等。footer元素與header元素的用法基本相同，二者一個(gè)位于區(qū)塊的頭部，一個(gè)位于區(qū)塊的尾部。與header元素一樣，一個(gè)網(wǎng)頁(yè)中也可以重復(fù)使用footer元素，還可以為article元素和section元素添加footer元素。第96頁(yè)nav元素nav元素是一個(gè)可以用來(lái)作為頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。一般情況下，只需要將主要的、基本的鏈接組放進(jìn)nav元素即可。例如，在頁(yè)腳中通常會(huì)有一組鏈接，其中放著服務(wù)條款、首頁(yè)和版權(quán)聲明等，這時(shí)使用nav元素來(lái)組織并不適合，使用footer元素最為恰當(dāng)。一個(gè)頁(yè)面可以擁有多個(gè)nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。一般來(lái)說(shuō)，nav元素適用于以下場(chǎng)景：傳統(tǒng)導(dǎo)航條、側(cè)邊欄導(dǎo)航條、頁(yè)內(nèi)導(dǎo)航、翻頁(yè)操作。nav元素在以前版本HTML的布局中作為導(dǎo)航條相關(guān)常用命名來(lái)使用。第97頁(yè)article元素article元素代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。它可以是論壇帖子、報(bào)紙文章、博客條目、用戶評(píng)論或獨(dú)立的插件，或是其他任何獨(dú)立的內(nèi)容。除了內(nèi)容部分，article元素通常有自己的標(biāo)題(一般為header元素)，有時(shí)還有腳注(footer元素)。另外，article元素也可以嵌套使用。在嵌套使用時(shí)，內(nèi)層的內(nèi)容原則上需要與外層的內(nèi)容有關(guān)系，即聯(lián)系比較緊密，嵌套的內(nèi)外層描述的又都是獨(dú)立的事物。塊級(jí)元素第98頁(yè)元

素描

述aside用來(lái)表示注記、貼士、側(cè)欄、摘要、插入的引用等，作為補(bǔ)充主體的內(nèi)容。從簡(jiǎn)單頁(yè)面的顯示上看，就是側(cè)邊欄，可以在左邊，也可以在右邊f(xié)igure定義媒介內(nèi)容的分組，是對(duì)多個(gè)元素進(jìn)行組合并展示的元素，通常和figcaption元素配合使用hgroup用來(lái)對(duì)標(biāo)題元素進(jìn)行分組dialog用來(lái)表示人與人之間的對(duì)話。dialog元素還包括dt和dd這兩個(gè)組合元素，它們常常同時(shí)使用。dt用來(lái)表示說(shuō)話者，dd表示說(shuō)話內(nèi)容第99頁(yè)Aside元素aside元素表示跟這個(gè)頁(yè)面的其他內(nèi)容關(guān)聯(lián)性不強(qiáng)或者沒(méi)有關(guān)聯(lián)的內(nèi)容，一般是一些附屬信息。aside元素通常用來(lái)在側(cè)邊欄顯示一些定義，比如目錄、索引、術(shù)語(yǔ)表等；也可以用來(lái)顯示相關(guān)的廣告宣傳、作者介紹、Web應(yīng)用、相關(guān)鏈接、當(dāng)前頁(yè)內(nèi)容簡(jiǎn)介等。但不要使用aside元素標(biāo)記括號(hào)中的文字，因?yàn)檫@種類(lèi)型的文本被認(rèn)為是主內(nèi)容的一部分。第100頁(yè)figure元素figure元素表示一段獨(dú)立的流內(nèi)容，一般表示文檔主題流內(nèi)容中的一個(gè)獨(dú)立單元，可以使用figcaption元素為figure元素組添加標(biāo)題。figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。第101頁(yè)hgroup元素hgroup元素是將標(biāo)題及其子標(biāo)題進(jìn)行分組的元素。當(dāng)標(biāo)題有多個(gè)層級(jí)(副標(biāo)題)時(shí)，hgroup元素被用來(lái)對(duì)一系列<h1>-<h6>元素進(jìn)行分組，一個(gè)內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題算一組。通常，如果文章只有一個(gè)標(biāo)題，是不需要使用hgroup元素的。第102頁(yè)dialog元素dialog元素用于定義一個(gè)對(duì)話框、確認(rèn)框或窗口，它的open屬性用來(lái)規(guī)定dialog元素是有效的，用戶可以與它進(jìn)行交互。通常會(huì)在JavaScript腳本中處理對(duì)話框的交互。新增的行內(nèi)語(yǔ)義元素第103頁(yè)元

素描

述mark定義有記號(hào)的文本meter表示特定范圍內(nèi)的數(shù)值，可用于工資、數(shù)量、百分比等time表示時(shí)間值progress用來(lái)表示進(jìn)度條，可通過(guò)對(duì)其max、min、step等屬性進(jìn)行控制，完成對(duì)進(jìn)度的表示和監(jiān)視第104頁(yè)mark元素mark元素用來(lái)標(biāo)簽一些不是特別需要強(qiáng)調(diào)的文本。如果是需要突出顯示文本，則使用上一章學(xué)習(xí)的<em>或<strong>標(biāo)簽。可以為了標(biāo)記特定上下文中的文本而使用這個(gè)標(biāo)簽，例如，用來(lái)顯示搜索引擎搜索后的關(guān)鍵詞。第105頁(yè)mark元素meter元素用來(lái)定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測(cè)量，也被稱(chēng)為尺度。支持的屬性如下min：值域的最小邊界值。默認(rèn)為0，如果設(shè)置了具體值，它必須比最大值要小。max：值域的上限邊界值。默認(rèn)為1。value：當(dāng)前值。low：定義了低值區(qū)間的上限值(如果value介于min和low之間，該元素就會(huì)表現(xiàn)出低值的視覺(jué)效果，value落在[min,low]、[high,max]等不同的區(qū)間會(huì)使瀏覽器渲染該元素時(shí)出不同的視覺(jué)效果)。high：定義了高值區(qū)間的下限值。optimum：這個(gè)屬性用來(lái)指示最優(yōu)/最佳取值。第106頁(yè)time元素time元素用于定義時(shí)間或日期，該元素代表24小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期，表示時(shí)刻時(shí)允許帶時(shí)差。該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼，這樣，用戶就能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結(jié)果。第107頁(yè)progress元素progress元素用來(lái)顯示一項(xiàng)任務(wù)的完成進(jìn)度，為了使progress元素能夠動(dòng)態(tài)展示下載進(jìn)度，通常需要JavaScript代碼編寫(xiě)一個(gè)處理程序，根據(jù)實(shí)際任務(wù)進(jìn)度，動(dòng)態(tài)更新progress的value屬性值。除了全局屬性，該元素還有如下兩個(gè)屬性：max：該屬性描述了這個(gè)progress元素所表示的任務(wù)一共需要完成多少工作。value：該屬性用來(lái)指定該進(jìn)度條已完成的工作量。如果沒(méi)有設(shè)置value屬性，則該進(jìn)度條的進(jìn)度為“不確定”，瀏覽器中會(huì)看到一個(gè)來(lái)回滾動(dòng)的進(jìn)度條。新增的其他功能元素除了前面介紹的一些元素，HTML5還新增了一些功能元素和input元素的類(lèi)型。新增的input元素的類(lèi)型將在下一章學(xué)習(xí)表單時(shí)詳細(xì)介紹，這里簡(jiǎn)單介紹一下新增的功能元素。所謂功能元素，是指可以用在頁(yè)面中以完成某種頁(yè)面顯示行為的元素。第108頁(yè)新增的其他功能元素output 表示不同類(lèi)型的輸出source 為媒介元素(如video、audio等)定義資源menu 菜單列表，使用li元素列舉每一個(gè)菜單項(xiàng)ruby

ruby注釋rt 表示字符的解釋或發(fā)音rp 在ruby注釋中使用，定義不支持ruby的瀏覽器所顯示的內(nèi)容wbr 軟換行。在瀏覽器窗口或父級(jí)元素的寬度足夠時(shí)不換行，而寬度不夠時(shí)主動(dòng)換行command 命令按鈕，如單選按鈕、復(fù)選框或按鈕details 表示細(xì)節(jié)信息，可以和summary元素配合使用datalist 表示可選數(shù)據(jù)列表，和input元素配合使用datagrid 表示可選數(shù)據(jù)列表，以樹(shù)型列表的形式顯示keygen 表示生成密鑰第109頁(yè)廢除的元素除了新增元素以外，HTML5還廢除了一些HTML4中的元素，主要包括：能用CSS替代的元素、不再使用frame框架、只有部分瀏覽器支持的元素。HTML4中的一些表現(xiàn)文本效果的元素，如basefont、big、center、font、s、strike、tt和u這些元素，HTML5將它們放在了CSS樣式表中，因此將這些元素廢除了。其中，font元素允許由“所見(jiàn)即所得”的編輯器插入，s、strike元素可以由del元素替代，tt元素可以由CSS的font-family屬性替代。第110頁(yè)廢除的元素由于frame框架對(duì)網(wǎng)頁(yè)可用性存在負(fù)面影響，因此HTML5不再支持frame，只支持iframe。與frame框架相關(guān)的frameset、frame、noframes元素被廢除。對(duì)于只有部分瀏覽器支持的元素，如applet、bgsound、blink和marquee等元素，由于只被少數(shù)瀏覽器支持，因此HTML5將它們廢除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee元素可以由JavaScript編程方式替代。第111頁(yè)廢除的元素使用ruby元素替代rb元素。使用abbr元素替代acronym元素。使用ul元素替代dir元素。使用form元素與input元素相結(jié)合的方式替代isindex元素。使用pre元素替代listing元素。使用code元素替代xmp元素。使用GUIDS替代nextid元素。使用text/plain的MIME類(lèi)型替代plaintext元素。第112頁(yè)第113頁(yè)主要內(nèi)容3.1認(rèn)識(shí)HTML5文檔結(jié)構(gòu) 3.2HTML5元素 3.3新增和廢除的屬性 3.4新增的事件3.5本章小結(jié) 3.6思考和練習(xí)第114頁(yè)3.3新增和廢除的屬性HTML5除了新增和廢除一些元素標(biāo)記外，還新增和廢除了HTML4中的一些屬性。HTML5新增的屬性主要體現(xiàn)為表單屬性、鏈接屬性以及其他屬性。新增的表單屬性第115頁(yè)屬性名稱(chēng)描

述autofocusinput、select、textarea和button元素?fù)碛?，以指定屬性的方式讓元素在?huà)面打開(kāi)時(shí)自動(dòng)獲得焦點(diǎn)placeholderinput(type=text)、textarea元素?fù)碛?，提示用戶可以輸入的?nèi)容forminput、output、select、textarea、button與fieldset元素?fù)碛?，聲明這些控件屬于哪個(gè)表單，然后放置在頁(yè)面上的任何位置而不是表單之內(nèi)required指示輸入字段的值是必需的autocomplete、min、max、multiple、pattern、step為input元素新增的屬性。datalist元素和autocomplete屬性配合使用。multiple允許在上傳文件時(shí)一次上傳多個(gè)文件formactionformenctypeformmethodformnovalidateformtargetinput和button元素?fù)碛?，重載form元素的action、enctype、method、novalidate、target屬性novalidate取消提交時(shí)進(jìn)行的有關(guān)檢查，表單可以被無(wú)條件提交新增的鏈接屬性第116頁(yè)屬性名稱(chēng)描

述media規(guī)定目標(biāo)URL是為哪種類(lèi)型的媒介和設(shè)備進(jìn)行優(yōu)化的，只能在href屬性存在時(shí)使用hreflang和

rel為area元素增加的屬性，以保持和a、link元素保持一致sizes為link元素增加的屬性，可以和icon元素結(jié)合使用，指定關(guān)聯(lián)圖標(biāo)的大小target為base元素增加的屬性，目的是和a元素保持一致新增的其他屬性第117頁(yè)屬性名稱(chēng)描

述reversed為ol元素增加的屬性，用于指定列表倒序顯示charset為meta元素增加的屬性type和label為menu元素增加的屬性，label屬性為菜單定義可見(jiàn)的標(biāo)注，type屬性讓菜單能以上下文菜單、工具條和列表菜單的形式出現(xiàn)scoped為style元素增加的屬性，規(guī)定樣式的作用范圍async為script元素增加的屬性，定義腳本是否異步執(zhí)行manifest為html元素增加的屬性，開(kāi)發(fā)離線Web應(yīng)用程序時(shí)，與API結(jié)合使用，定義一個(gè)URL，在這個(gè)URL上描述文檔的緩存信息sandboxseamlesssrcdoc為iframe元素增加的屬性，用來(lái)提高頁(yè)面安全性，防止不信任的Web頁(yè)面執(zhí)行某些操作廢除的屬性前面廢除的元素中就有一些用CSS樣式替代的，同樣，對(duì)于一些表現(xiàn)頁(yè)面效果的屬性，如align、bgcolor、background、border、cellpadding、cellspacing、frame、rules、width、alink、link、text、vlink、char、charoff、height、nowrap、vaign、hspace、vspace、nowrap、compact、type、frameborder、scrolling、marginheight、marginwidth等屬性，都被廢除了，改由CSS樣式實(shí)現(xiàn)。第118頁(yè)其它廢除的屬性第119頁(yè)HTML4屬性適應(yīng)元素HTML5替代方案revlink、arelcharsetlink、a在被鏈接的資源中使用HTTPcontent-type頭元素shape、coordsa使用area元素代替a元素longdescimg、iframe使用a元素鏈接到較長(zhǎng)描述targetlink多余屬性，被省略nohrefarea多余屬性，被省略profilehead多余屬性，被省略versionhtml多余屬性，被省略nameimgidschememeta只為某個(gè)表單域使用schemearchive、classid、codebase、codetype、declare、standbyobject使用data與type屬性類(lèi)調(diào)用插件。需要使用這些屬性來(lái)設(shè)置參數(shù)時(shí)，使用param屬性valuetype、typeparam使用name和value屬性，不聲明值的MIME類(lèi)型axis、abbrtd、th使用以明確、簡(jiǎn)潔的文字開(kāi)頭，后跟詳述文字的形式?？梢詫?duì)更詳細(xì)的內(nèi)容使用title屬性，以使單元格的內(nèi)容變得簡(jiǎn)短scopetd在被鏈接的資源中使用HTTPcontent-type頭元素第120頁(yè)主要內(nèi)容3.1認(rèn)識(shí)HTML5文檔結(jié)構(gòu) 3.2HTML5元素 3.3新增和廢除的屬性 3.4新增的事件3.5本章小結(jié) 3.6思考和練習(xí)3.4新增的事件HTML5中對(duì)頁(yè)面、表單、鍵盤(pán)元素新增了許多事件第121頁(yè)新增的事件第122頁(yè)元素對(duì)象事件觸發(fā)時(shí)機(jī)window對(duì)象body對(duì)象beforeprint即將開(kāi)始打印之前觸發(fā)afterprint打印結(jié)束后觸發(fā)resize瀏覽器窗口大小發(fā)生改變時(shí)觸發(fā)error 頁(yè)面加載出錯(cuò)時(shí)觸發(fā)offline頁(yè)面變?yōu)殡x線狀態(tài)時(shí)觸發(fā)online頁(yè)面變?yōu)樵诰€狀態(tài)時(shí)觸發(fā)pageshow頁(yè)面加載時(shí)觸發(fā)，類(lèi)似于load事件，區(qū)別在于load事件在頁(yè)面第一次加載時(shí)觸發(fā)，而pageshow事件在每一次加載時(shí)觸發(fā)，即從網(wǎng)頁(yè)緩存中讀取頁(yè)面時(shí)只觸發(fā)pageshow事件，不觸發(fā)load事件beforeunload當(dāng)前頁(yè)面被關(guān)閉時(shí)觸發(fā)，該事件通知瀏覽器顯示一個(gè)用于詢(xún)問(wèn)用戶是否確實(shí)離開(kāi)本頁(yè)面的確認(rèn)窗口，可以設(shè)置確認(rèn)窗口中的提示文字hashchange頁(yè)面URL地址字符串中的哈希部分發(fā)生改變時(shí)觸發(fā)任何元素mousewheel當(dāng)鼠標(biāo)指針懸停在元素上并滾動(dòng)鼠標(biāo)滾輪時(shí)觸發(fā)任何容器元素scroll當(dāng)元素滾動(dòng)條被滾動(dòng)時(shí)觸發(fā)input元素textarea元素input當(dāng)用戶修改文本框中的內(nèi)容時(shí)觸發(fā)，該事件與change事件的區(qū)別：input事件在元素尚未失去焦點(diǎn)時(shí)已觸發(fā)，change事件只在元素失去焦點(diǎn)時(shí)觸發(fā)表單元素reset 當(dāng)用戶按下表單元素中type類(lèi)型為reset的input元素，或者在JavaScript腳本代碼中執(zhí)行表單對(duì)象的reset方法時(shí)觸發(fā)第123頁(yè)主要內(nèi)容3.1認(rèn)識(shí)HTML5文檔結(jié)構(gòu) 3.2HTML5元素 3.3新增和廢除的屬性 3.4新增的事件3.5本章小結(jié)

3.6思考和練習(xí)第124頁(yè)3.5本章小結(jié)HTML5引入了許多新技術(shù)，對(duì)傳統(tǒng)HTML元素進(jìn)行了分類(lèi)，并根據(jù)開(kāi)發(fā)人員的習(xí)慣和實(shí)踐中常用的功能，以及Web應(yīng)用跨平臺(tái)的發(fā)展需求，增加了大量新元素、新功能。本章詳細(xì)介紹了HTML5中新增的元素、屬性和事件。首先介紹了HTML5的文檔結(jié)構(gòu)；接著重點(diǎn)學(xué)習(xí)了HTML5中新增和廢除的元素，把這些新增的元素分為幾類(lèi)分別舉例說(shuō)明了其用法；然后闡述了HTML5中新增和廢除的屬性，這些屬性會(huì)在以后學(xué)習(xí)中詳細(xì)介紹，非常的屬性也會(huì)在學(xué)習(xí)CSS時(shí)講解如何使用CSS替代廢除的屬性；最后簡(jiǎn)要介紹了HTML5中新增的事件。第125頁(yè)主要內(nèi)容3.1認(rèn)識(shí)HTML5文檔結(jié)構(gòu) 3.2HTML5元素 3.3新增和廢除的屬性 3.4新增的事件3.5本章小結(jié) 3.6思考和練習(xí)第126頁(yè)3.6思考和練習(xí)1.簡(jiǎn)單描述HTML5文檔的結(jié)構(gòu)，并指出每個(gè)部分的含義。2.HTML5新增了哪些結(jié)構(gòu)元素？簡(jiǎn)單描述這些元素的使用場(chǎng)景。3.nav元素在HTML5中用于包裹一個(gè)導(dǎo)航鏈接組，用于顯示地說(shuō)明這是一個(gè)導(dǎo)航組，在同一個(gè)頁(yè)面這可以同時(shí)存在

個(gè)nav。4.

元素用于定義一個(gè)對(duì)話框、確認(rèn)框或窗口，它的

屬性用來(lái)規(guī)定該元素是有效的，用戶可以與它進(jìn)行交互5.HTML5新增了哪些語(yǔ)義元素？簡(jiǎn)單描述這些元素的使用場(chǎng)景。6.使用本章介紹的HTML文檔結(jié)構(gòu)知識(shí)及新增元素構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。第127頁(yè)第4章HTML表單本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第128頁(yè)本章概述表單是實(shí)現(xiàn)用戶與網(wǎng)頁(yè)之間數(shù)據(jù)交互的必要標(biāo)簽，通過(guò)在網(wǎng)頁(yè)中添加表單可以實(shí)現(xiàn)諸如會(huì)員注冊(cè)、用戶登錄、提交資料等交互功能。本章將主要講解如何在網(wǎng)頁(yè)中制作表單，并使用表單元素創(chuàng)建表單。第129頁(yè)本章的學(xué)習(xí)目標(biāo)了解表單的基本組成部分掌握<form>元素的常用屬性及其用法掌握HTML中的常用表單輸入類(lèi)型了解<input>元素的常用屬性及其用法掌握下列列表的創(chuàng)建與使用掌握多行文本控件的用法了解<button>元素的基本用法掌握<fieldset>和<legend>元素的用法第130頁(yè)主要內(nèi)容4.1表單概述

4.2創(chuàng)建表單 4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第131頁(yè)4.1表單概述表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端的HTML標(biāo)簽元素，服務(wù)器端程序可以處理表單傳過(guò)來(lái)的數(shù)據(jù)，從而完成與用戶的各種交互動(dòng)作網(wǎng)頁(yè)上具有可輸入表項(xiàng)及項(xiàng)目選擇等控件所組成的欄目稱(chēng)為表單，其中包括各種對(duì)象，如文字輸入框、單選按鈕、復(fù)選框和提交按鈕等。通俗地講，表單就是一個(gè)將用戶信息組織起來(lái)的容器。將需要用戶填寫(xiě)的內(nèi)容放置在表單容器中，當(dāng)用戶單擊“提交”按鈕時(shí)，表單會(huì)將數(shù)據(jù)統(tǒng)一發(fā)送給服務(wù)器第132頁(yè)表單概述幾乎每當(dāng)需要從網(wǎng)站訪問(wèn)者那里收集信息時(shí)，都需要使用“表單”。典型的表單應(yīng)用場(chǎng)景有：登錄、注冊(cè)：登錄時(shí)輸入用戶名和密碼，單擊“登錄”按鈕；注冊(cè)時(shí)填寫(xiě)個(gè)人信息，提交到服務(wù)器。網(wǎng)上訂單：在網(wǎng)上購(gòu)買(mǎi)商品時(shí)，提交訂單，輸入個(gè)人信息和付款方式等。調(diào)查問(wèn)卷：通常是一些選擇題形式的問(wèn)卷，回答這些問(wèn)題，以便形成統(tǒng)計(jì)數(shù)據(jù)，進(jìn)一步分析。網(wǎng)上搜索：輸入關(guān)鍵字，搜索想要的信息或資源。第133頁(yè)表單概述將表單數(shù)據(jù)發(fā)送給服務(wù)器時(shí)，會(huì)將其轉(zhuǎn)換成“名稱(chēng)/值”對(duì)的形式。名稱(chēng)對(duì)應(yīng)于表單控件的名稱(chēng)，而值則是用戶輸入的內(nèi)容或一個(gè)被選定選項(xiàng)的值。服務(wù)器接收到數(shù)據(jù)后，會(huì)處理數(shù)據(jù)并返回相應(yīng)的結(jié)果。第134頁(yè)主要內(nèi)容4.1表單概述 4.2創(chuàng)建表單

4.3組織表單結(jié)構(gòu)4.4disabled與readonly控件4.5本章小結(jié) 4.6思考和練習(xí)第135頁(yè)4.2創(chuàng)建表單HTML中用于創(chuàng)建表單的標(biāo)簽是<form>，然后在<form>元素中，可以放置各種類(lèi)型的表單控件。在網(wǎng)頁(yè)中，<form>和</form>這對(duì)標(biāo)簽用來(lái)創(chuàng)建一個(gè)表單，在標(biāo)簽對(duì)之間的一切都屬于表單的內(nèi)容。<form>元素通常是一些用來(lái)采集用戶輸入信息的表單控件，也還可以包含其他標(biāo)記，如段落、標(biāo)題等。但是，它不能包含另外一個(gè)<form>元素，即<form>不能嵌套。第136頁(yè)<form>在<form>標(biāo)記中，可以設(shè)置表單的基本屬性，一般情況下，一個(gè)<form>標(biāo)簽應(yīng)該至少帶有action和method兩個(gè)屬性。除此之外，還可以包含所有通用通性及以下屬性：enctype、novalidate、target、autocomplete和accept-charset。第137頁(yè)action屬性action屬性指明表單提交后對(duì)數(shù)據(jù)的處理。通常，action屬性的值是一個(gè)地址，也就是表單收集到的信息將要傳遞到這個(gè)地址，這個(gè)地址可以是絕對(duì)地址，也可以是相對(duì)地址，還可以是其它形式的處理程序。例如，一個(gè)登錄表單，用戶輸入的登錄名和密碼信息可能被傳送到Web服務(wù)器中一個(gè)以ASP.NET編寫(xiě)的頁(yè)面，叫做login.aspx，如果該頁(yè)面與當(dāng)前頁(yè)面在同一目錄，則可以使用相當(dāng)?shù)刂罚?lt;formaction="login.aspx">第138頁(yè)method屬性瀏覽器向服務(wù)器發(fā)送表單數(shù)據(jù)能夠使用的有兩種方法：HTTPget和HTTPpost。使用<form>標(biāo)簽的method屬性指定應(yīng)該使用哪一種方法。該屬性有兩個(gè)取值，分別對(duì)應(yīng)兩種方法： get：使用HTTPget方法向服務(wù)器發(fā)送表單數(shù)據(jù)，表單數(shù)據(jù)被附加在<form>元素中由action屬性指定的URL尾部。表單數(shù)據(jù)與URL之間使用問(wèn)號(hào)分隔。在問(wèn)號(hào)之后是各表單控件的“名稱(chēng)/值”對(duì)。每個(gè)“名稱(chēng)/值”對(duì)之間使用與符號(hào)&分隔。 post：使用HTTPpost方法向服務(wù)器發(fā)送來(lái)自表單的數(shù)據(jù)，表單數(shù)據(jù)將在HTTP頭部中透明地傳送。第139頁(yè)Id和name屬性id屬性可以唯一標(biāo)識(shí)頁(yè)面中的<form>元素。就如同可以使用它唯一標(biāo)識(shí)頁(yè)面中的任何其它HTML元素一樣。id屬性的值在文檔中應(yīng)該是唯一的。name屬性是id屬性的前任，而且如id屬性一樣，其取值在文檔內(nèi)應(yīng)該保持唯一。一種好的命名習(xí)慣是以字符frm作為表單的id和name屬性值的起始，并使用值的剩余部分描述表單收集數(shù)據(jù)的類(lèi)型——例如，frmLogin或frmSearch。第140頁(yè)enctype屬性如果使用HTTPpost方法向服務(wù)器發(fā)送數(shù)據(jù)，則可以使用enctype屬性指定瀏覽器在將數(shù)據(jù)發(fā)送到服務(wù)器之前對(duì)其進(jìn)行編碼。瀏覽器通常支持如下3種類(lèi)型的編碼方式： application/x-www-form-urlencoded：這是大多數(shù)表單使用的標(biāo)準(zhǔn)方法。瀏覽器使用該方法是因?yàn)橐恍┳址?，如空格、加?hào)以及一些非字母數(shù)字字符，不能直接發(fā)送到Web服務(wù)器。所以這些字符會(huì)被其他用以替換它們的字符所替代。 multipart/form-data：允許數(shù)據(jù)分成部分傳送，每一個(gè)連續(xù)部分以其在表單中出現(xiàn)的順序?qū)?yīng)于一個(gè)表單控件。通常被用于訪問(wèn)