本書基于豐富的實例, 著重介紹網頁設計技巧、HTML5、CSS3、DIV布局、Javascript、JQuery等WEB技術的基本原理和開發方法, 深入解析典型綜合案例的分析與構建過程, 使讀者由淺入深、循序漸進地掌握開發基于WEB應用程序的方法和技術, 具有很強的實用性。
1、內容全面，由淺入深。由網頁基本概念開始，逐步介紹網頁配色技巧、HTML（及HTML5）、CSS（及CSS3）、布局技術、JavaScript、JQuery等網頁設計技術。
2、結合標準，易于提高。本著一切的標準出發，緊密結合W3C的WEB標準來控制界面實現，既可幫助讀者牢固掌握基礎知識，又具有一定的理論高度，有助于讀者進一步提高。
3、技術先進，符合潮流。對目前市場主流的網頁設計組合DIV+CSS以及響應式布局技術進行詳細講解，能夠幫助讀者設計出具有一定水準的網頁。基于微軟Visual Studio工具進行設計和開發，更好地貼近技術發展的時代脈搏。
4、教學靈活，強化理解。各章節通過實例詳細演示制作過程，并提供大量設計技巧、注意事項和常見問題解答。
5、綜合應用，實戰演練。提供完整、翔實的綜合案例，詳細解析各類網站的頁面設計技術，予以全程設計跟蹤指導，將作者的經驗融匯于知識中，有益于初學者更快地上手和掌握。
本書重視實踐，以一個完整、翔實的實例為主線，在各章中對HTML5、CSS3、布局技術、JavaScript、jQuery等知識點進行詳解，并在*后對該實例進一步匯總，完整再現網頁設計從初步規劃，到HTML文檔創建，再到表現形式設計的過程，適合教師教學和學生自學。本書內容全面，深入淺出，實例豐富，緊跟技術發展潮流，對目前流行的HTML、CSS3和jQuery等內容通過實例進行了詳細的介紹，有助于提高學生的實際動手能力，在實踐方面具有突出的優勢。
主要內容
全書分為三個部分，共10章，建議學時為48，主要內容如下：
第1部分為基礎篇，包括第1~第6章。第1章重點介紹網站的基礎知識、基本架構，以及網頁和標記語言的相關概念； 第2章重點介紹網頁前端設計的基礎知識，包括網頁配色、布局及各元素設計等，掌握一些簡單實用的設計技巧和工具軟件； 第3章重點介紹HTML與XHTML文檔結構、標簽的使用及它們的區別； 第4章重點介紹層疊樣式表（CSS）的基本概念與用途、層疊樣式表的規則和常用的編寫方法，以及美觀的頁面效果； 第5章通過對具體實例的詳細剖析來講解DIV+CSS的網頁布局技術及優勢，然后介紹針對不同類型終端而采用的響應式布局方法和VS中的母版； 第6章重點介紹JavaScript語言的基本用法和JavaScript的對象概念。
第2部分為進階篇，包括第7~第9章。第7章重點介紹HTML5的相關知識以及它的新特征，并熟悉HTML5的基本開發環境和基本語法等； 第8章重點介紹CSS3的新增用途，以及CSS3新增選擇器的規則和常用編寫方法，并通過實例分析其各種使用技巧； 第9章重點介紹jQuery庫及引入jQuery的方法和基本語法，以及常用的jQuery選擇器及操作DOM對象的方法，理解并應用jQuery中的重要事件。
第3部分為案例篇，即第10章。該章包括兩個完整的案例，一個涉及網站的開發，以“等級考試網上報名系統”為例，介紹各頁面設計與實現的完整過程； 另一個涉及網站首頁UI的設計，以設計一個茶樓營銷及形象網站為例，詳述網站前端UI設計的整個流程與具體工作，為讀者進行網頁UI設計案例練習提供參考。
本書特色
（1） 內容全面，由淺入深。由網頁基本概念開始，逐步介紹網頁配色技巧、HTML（及HTML5）、CSS（及CSS3）、布局技術、JavaScript、jQuery等網頁設計技術。
（2） 結合標準，易于提高。本著一切的標準出發，緊密結合W3C的Web標準來控制界面實現，既可幫助讀者牢固掌握基礎知識，又具有一定的理論高度，有助于讀者進一步提高。
（3） 技術先進，符合潮流。對目前市場主流的網頁設計組合DIV+CSS以及響應式布局技術進行詳細講解，幫助讀者設計具有一定水準的網頁。基于微軟公司的Visual Studio工具進行設計和開發，更好地貼近技術發展的時代脈搏。
（4） 教學靈活，強化理解。各章節通過實例詳細演示制作過程，并提供大量設計技巧、注意事項和常見問題解答。
（5） 綜合應用，實戰演練。提供完整、翔實的綜合案例，詳細解析各類網站的頁面設計技術，予以全程設計跟蹤指導，將作者的經驗融匯于知識中，有益于初學者更快地上手和掌握。
本書作者均為重慶理工大學計算機學院*線的骨干教師，教學實踐經驗豐富。本書由王柯柯任主編，第1、第3、第5和第10章案例1由王柯柯編寫，第2和第10章案例2由周宏編寫，第6和第9章由劉亞輝編寫，第4和第8章由倪偉編寫，第7章和習題部分由黃麗豐編寫。
由于筆者水平有限，書中難免存在不足和疏漏之處，請廣大讀者批評指正。同時，為便于教學，本書中引用了一些網站的界面圖和一些書籍的封面，在此對其制作者一并表示感謝。
編者
2017年1月
作者：王柯柯、周宏、劉亞輝、倪偉、黃麗豐
第3章HTML&XHTML 【學習目標】 通過本章的學習，了解并掌握HTML與XHTML文檔的結構、標簽的使用及它們的區別，能閱讀HTML、XHTML文檔，并獨立編寫一些簡單而實用的HTML文檔。 【本章要點】 HTML文檔結構； HTML常用標簽； XHTML文檔結構。
3.1HTML標記語言 標記語言不同于一般的程序語言，主要用來定義文檔規則和描述文檔結構。例如，它可以指示一段文本為段落，一段文本為置頂的標題，而另一段文本為底部的備注信息等，通過在文檔中放置代碼和指定的標記即可指示這些內容。標準通用標記語言(Standard Generalized Markup Language，SGML)是*基礎的標記語言，其他標記語言(如HTML、XML、XHTML)都是在SGML的基礎上發展起來的，但是它們又各自根據不同的使用領域對SGML有著不同的擴展，從而形成了更具針對性的標記語言。 超文本標記語言(Hyper Text Markup Language，HTML)是專門用于編寫Web應用文檔的語言，通過相關代碼和各種HTML標簽的使用，可以將數據以網頁的模式，在各種瀏覽器中顯示出來。 HTML中的“超文本”是指頁面內可以包含圖片、鏈接、音頻及程序等非文字的元素； “標記”說明它不是程序語言，只是由文字及標記組合而成的語言。 首先以一個經典的“Hello World！”實例來初步認識HTML標記語言，具體代碼如下： 示例31
Hello World Hello World! 這是*個HTML文件，該頁的名字叫作 "hello World" 一個HTML文檔主要包括兩部分： 文檔定義(DTD)和文檔結構。 其中DTD指定了該HTML文檔必須遵循DTD中制定的文件結構。文檔結構就是為*終頁面中呈現的內容所建立的HTML代碼設計…… DTD(Document Type Definition)文檔類型是由W3C組織所制定的，其概念源于SGML，每一份SGML文件均有相對應的DTD。 上述代碼描述了*基本的Web文檔結構，對于其中各段代碼的具體含義目前暫且不討論，來看該段代碼在IE瀏覽器中運行之后的效果，如圖31所示。 圖31“Hello World！”運行界面 從圖31中可以看到，示例31定義了一個名稱為“Hello World！”的標題，并設置了兩段文字，分析其代碼可以得到以下三點：
（1） 網頁中呈現的是HTML文檔中標簽和標簽之間的內容。
（2） 標簽和標簽定義了一個內容為“Hello World！”的標題。默認情況下，標題的文字比其他的文本字體要大，而且設置了加粗樣式。
（3） 標簽 和標簽 用來定義一個段落，置于該標簽中的內容同屬于一個段落。 以上三點就是根據網頁中實際顯示的效果所做的初步分析，可見，HTML標記語言就是通過一系列的HTML標簽規范各種信息數據的顯示結構，從而保證能*終被客戶端的瀏覽器解析并正確執行。 事實上，一個網頁無論它的表現形式如何的五花八門、生動活潑，無論它所承載的數據信息如何的龐大和復雜，*終都是通過HTML標記語言定義和生成的。之后，瀏覽器將這些HTML語言“翻譯”過來，并按照其定義的格式顯示。 與普通的數據文件(如文本文件、音頻文件等)相同，網頁文件同樣具有擴展名。簡單的網頁文件的擴展名有html(或htm)，根據網頁程序開發環境的不同，網頁的擴展名還有asp、php、jsp、aspx等。無論開發人員采用的是什么技術，*終生成的網頁文件都具有標準的HTML文檔結構和代碼，因此HTML是*基本的網頁代碼語言。
3.1.1HTML文件基本結構 一個內容豐富的網頁并非像以上的代碼那么簡單，往往承載了大量的信息，如文字、圖片、音頻、動畫等，因此，其文檔結構也會根據內容的多少和表現形式的不同變得更加復雜。例如，在新浪網(http://www.sina.com.cn)首頁的空白處右擊，選擇“查看源文件”命令，就可以看到形成該頁的HTML文檔竟然有幾千行之多，但萬變不離其宗，所有的網頁都有著固有的文檔結構。這里以Visual Studio軟件為例(其文件擴展名為aspx)，其頁面文件主要包含如圖32所示的三部分。 第3章HTML&XHTML 【學習目標】 通過本章的學習，了解并掌握HTML與XHTML文檔的結構、標簽的使用及它們的區別，能閱讀HTML、XHTML文檔，并獨立編寫一些簡單而實用的HTML文檔。 【本章要點】 HTML文檔結構； HTML常用標簽； XHTML文檔結構。
3.1HTML標記語言 標記語言不同于一般的程序語言，主要用來定義文檔規則和描述文檔結構。例如，它可以指示一段文本為段落，一段文本為置頂的標題，而另一段文本為底部的備注信息等，通過在文檔中放置代碼和指定的標記即可指示這些內容。標準通用標記語言(Standard Generalized Markup Language，SGML)是*基礎的標記語言，其他標記語言(如HTML、XML、XHTML)都是在SGML的基礎上發展起來的，但是它們又各自根據不同的使用領域對SGML有著不同的擴展，從而形成了更具針對性的標記語言。 超文本標記語言(Hyper Text Markup Language，HTML)是專門用于編寫Web應用文檔的語言，通過相關代碼和各種HTML標簽的使用，可以將數據以網頁的模式，在各種瀏覽器中顯示出來。 HTML中的“超文本”是指頁面內可以包含圖片、鏈接、音頻及程序等非文字的元素； “標記”說明它不是程序語言，只是由文字及標記組合而成的語言。 首先以一個經典的“Hello World！”實例來初步認識HTML標記語言，具體代碼如下： 示例31 Hello World Hello World! 這是*個HTML文件，該頁的名字叫作 "hello World" 一個HTML文檔主要包括兩部分： 文檔定義(DTD)和文檔結構。 其中DTD指定了該HTML文檔必須遵循DTD中制定的文件結構。文檔結構就是為*終頁面中呈現的內容所建立的HTML代碼設計…… DTD(Document Type Definition)文檔類型是由W3C組織所制定的，其概念源于SGML，每一份SGML文件均有相對應的DTD。 上述代碼描述了*基本的Web文檔結構，對于其中各段代碼的具體含義目前暫且不討論，來看該段代碼在IE瀏覽器中運行之后的效果，如圖31所示。 圖31“Hello World！”運行界面 從圖31中可以看到，示例31定義了一個名稱為“Hello World！”的標題，并設置了兩段文字，分析其代碼可以得到以下三點：
（1） 網頁中呈現的是HTML文檔中標簽和標簽之間的內容。
（2） 標簽和標簽定義了一個內容為“Hello World！”的標題。默認情況下，標題的文字比其他的文本字體要大，而且設置了加粗樣式。
（3） 標簽 和標簽 用來定義一個段落，置于該標簽中的內容同屬于一個段落。 以上三點就是根據網頁中實際顯示的效果所做的初步分析，可見，HTML標記語言就是通過一系列的HTML標簽規范各種信息數據的顯示結構，從而保證能*終被客戶端的瀏覽器解析并正確執行。 事實上，一個網頁無論它的表現形式如何的五花八門、生動活潑，無論它所承載的數據信息如何的龐大和復雜，*終都是通過HTML標記語言定義和生成的。之后，瀏覽器將這些HTML語言“翻譯”過來，并按照其定義的格式顯示。 與普通的數據文件(如文本文件、音頻文件等)相同，網頁文件同樣具有擴展名。簡單的網頁文件的擴展名有html(或htm)，根據網頁程序開發環境的不同，網頁的擴展名還有asp、php、jsp、aspx等。無論開發人員采用的是什么技術，*終生成的網頁文件都具有標準的HTML文檔結構和代碼，因此HTML是*基本的網頁代碼語言。
3.1.1HTML文件基本結構 一個內容豐富的網頁并非像以上的代碼那么簡單，往往承載了大量的信息，如文字、圖片、音頻、動畫等，因此，其文檔結構也會根據內容的多少和表現形式的不同變得更加復雜。例如，在新浪網(http://www.sina.com.cn)首頁的空白處右擊，選擇“查看源文件”命令，就可以看到形成該頁的HTML文檔竟然有幾千行之多，但萬變不離其宗，所有的網頁都有著固有的文檔結構。這里以Visual Studio軟件為例(其文件擴展名為aspx)，其頁面文件主要包含如圖32所示的三部分。
新書資訊