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

1.2網(wǎng)頁設計相關技術

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

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

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

1.2網(wǎng)頁設計相關技術 1.3網(wǎng)頁設計與開發(fā)

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

1.5本章小結 1.6思考和練習第22頁1.4

編寫第一個HTML頁面

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

1.2網(wǎng)頁設計相關技術 1.3網(wǎng)頁設計與開發(fā) 1.4編寫第一個HTML頁面 1.5本章小結

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

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

和

。3.HTML的全稱是

，是Internet上用于編寫網(wǎng)頁的主要語言。4.簡述靜態(tài)網(wǎng)頁的工作原理。5.由于HTML文件是標準的

文件，因此，可以使用任意一個文本編輯器來打開和編輯HTML文件，如Windows自帶的

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

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

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

，

代表一個空格，需要多少個空格就添加多少個

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

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

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

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

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

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

元素，該元素用來定義文檔類型。4.DTD是一套關于標簽的

。DTD文件是一個

文件，后綴名為

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

和

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

3.2HTML5元素 3.3新增和廢除的屬性 3.4新增的事件3.5本章小結 3.6思考和練習第87頁3.1認識HTML

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

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

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

素描

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

素描

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

素描

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

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

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

述media規(guī)定目標URL是為哪種類型的媒介和設備進行優(yōu)化的，只能在href屬性存在時使用hreflang和

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

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

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

個nav。4.

元素用于定義一個對話框、確認框或窗口，它的

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

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

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