內容提要
《21天學通HTML5+CSS3(第2版)》共分21章。第1~11章介紹HTML語言的語法、網頁結構,網頁中的圖像、連結、表單、音頻、視頻、本地存儲等;第12~18章介紹用來美化頁面的CSS,包括CSS規則、選擇符、盒布局、多列布局、動畫、漸變、跨設備支持等;第19~21章通過3 個案例對網頁設計的完整流程進行了講解,幫助讀者熟悉如何從大局著手搭建網站。
《21天學通HTML5+CSS3(第2版)》在內容上涉及面廣,從基本頁面結構到HTML5和CSS3增強技術實現及綜合案例,涉及目前網頁設計與網站搭建的幾乎所有技術。本書內容淺顯易懂、實例豐富,尤其適合廣大網頁編程愛好者自學,也適合對網頁開發語言感興趣的讀者作為參考書。
目錄
第1章 了解網頁
1.1 什麼是網頁
1.1.1 網頁概述
1.1.2 靜態網頁
1.1.3 動態網頁
1.1.4 動態頁面和靜態頁面的聯繫
1.1.5 網頁瀏覽器的工作原理
1.2 HTML和HTML5
1.2.1 超文本標記語言HTML
1.2.2 可擴展超文本標記語言XHTML
1.2.3 HTML5的設計理念
1.2.4 HTML頁面的開發工具
1.3 實戰:編寫一個簡單的頁面(HTML和HTML5)
1.4 小結
1.5 本章習題
第2章 了解HTML網頁的結構
2.1 用記事本打開一個頁面
2.2 HTML基礎
2.2.1 HTML的基礎語法
2.2.2 HTML文檔的結構
2.3 HTML文檔中的標籤
2.3.1 樣本代碼DOCTYPE
2.3.2 開始標籤<html>
2.3.3 頭標籤和頭標籤的對象
2.3.4 標題標籤<title>
2.3.5 體標籤<body>
2.3.6 美化HTML文檔
2.4 實戰:從無到有地設計一個頁面
2.5 小結
2.6 本章習題
第3章 網頁的文本設計
3.1 新舊方法對比
3.2 文本的排版格式
3.2.1 寫一行換一行
3.2.2 在頁面文本中空格
3.2.3 文本的段落要對齊
3.3 文本的屬性樣式
3.3.1 不一樣的文本字型樣式
3.3.2 奇妙的特殊符號
3.3.3 給文本加標註
3.4 整齊的文本列表
3.4.1 無序列表
3.4.2 有序列表
3.4.3 定義列表
3.4.4 列表嵌套
3.5 實戰:製作一則HTML網頁版的通知
3.6 小結
3.7 本章習題
第4章 網頁中的圖像設計
4.1 圖像的基礎知識
4.1.1 最常用的點陣圖圖像
4.1.2 在頁面中常用的點陣圖格式
4.1.3 矢量圖
4.1.4 圖像的解析度
4.1.5 了解一些網頁中常用的Banner尺寸
4.2 頁面中的圖像
4.2.1 理解圖像路徑
4.2.2 像設定文本對齊一樣在頁面中對齊圖片
4.2.3 圖像與文本的對齊方式
4.2.4 控制圖像與文本的距離
4.3 讓圖像更美觀
4.3.1 使用畫圖工具修改圖像
4.3.2 給圖像添加框線
4.3.3 獨樹一幟的水平線
4.4 改變頁面的背景
4.5 實戰:把照片放到網頁上
4.6 小結
4.7 本章習題
第5章 網頁中的連結
5.1 網頁連結
5.1.1 初識頁面連結
5.1.2 理解連結地址
5.2 連結的種種不同
5.2.1 基本的文本連結
5.2.2 基本的圖像連結
5.2.3 把信箱留給需要聯繫你的人
5.2.4 在同一頁面中快速查找信息
5.3 提高頁面連結的友好度
5.3.1 美化連結的狀態
5.3.2 特殊的連結方式
5.3.3 熱點圖像區域的連結
5.4 在新視窗中顯示連結視窗
5.5 實戰:一個帶連結的電影排行榜頁面
5.6 小結
5.7 本章習題
第6章 網頁中的表單
6.1 表單的工作原理
6.1.1 <script>標記
6.1.2 創建表單
6.1.3 表單域
6.2 通過表單展示不一樣的頁面
6.2.1 input對象下的多種表單的表現形式
6.2.2 text:文本框的樣式表單
6.2.3 password:輸入密碼的樣式表單
6.2.4 checkbox:複選框的樣式表單
6.2.5 radio:單選框的樣式表單
6.2.6 submit:提交數據的樣式表單
6.2.7 hidden:隱藏域的樣式表單
6.2.8 image樣式的表單
6.2.9 file:上傳檔案的樣式表單
6.2.10 textarea對象的表單
6.2.11 select對象的表單
6.2.12 表單域集合
6.3 HTML5表單的進化
6.3.1 早期的表單發展
6.3.2 HTML5表單的出世
6.3.3 當前的支持情況
6.3.4 增加的表單輸入類型
6.4 增加表單的特性及元素
6.4.1 form特性
6.4.2 formaction特性
6.4.3 formmethod、formenctype、formnovalidate、formtarget特性
6.4.4 placeholder特性
6.4.5 autofocus特性
6.4.6 autocomplete特性
6.4.7 list特性和datalist元素
6.4.8 keygen元素
6.4.9 output元素
6.5 表單驗證API
6.5.1 與驗證有關的表單元素特性
6.5.2 表單驗證的屬性
6.5.3 ValidityState對象
6.5.4 表單驗證的方法
6.5.5 表單驗證的事件
6.6 實戰:表單構成的HTML頁面
6.7 實戰:表單構成的用戶註冊頁面(HTML5)
6.7.1 案例簡介
6.7.2 頁面基本元素
6.7.3 實現表單驗證
6.7.4 其他處理函式
6.8 小結
6.9 習題
第7章 音頻和視頻
7.1 audio和video的基礎知識
7.1.1 線上多媒體的發展
7.1.2 多媒體術語
7.1.3 HTML5多媒體檔案格式
7.1.4 功能缺陷及未來趨勢
7.2 使用HTML5的audio和video元素
7.2.1 在頁面中加入音頻和視頻
7.2.2 使用source元素
7.2.3 使用腳本檢測瀏覽器的標籤支持情況
7.2.4 audio和video的特性和屬性
7.2.5 audio和video的接口方法
7.2.6 audio和video的事件
7.3 實戰:自定義播放工具條
7.3.1 案例簡介
7.3.2 網頁基本元素
7.3.3 定義全局的視頻對象
7.3.4 添加播放/暫停、前進/後退功能
7.3.5 添加慢進和快進功能
7.3.6 添加靜音和調節音量的功能
7.3.7 添加進度顯示功能
7.4 小結
7.5 本章習題
第8章 拖放功能
8.1 拖放API
8.1.1 draggable特性
8.1.2 游標拖放事件
8.1.3 DataTransfer對象
8.1.4 實戰:拖放元素的內容
8.2 檔案API
8.2.1 增加的標籤特性
8.2.2 FileList對象與File對象
8.2.3 Blob對象
8.2.4 FileReader接口
8.3 實戰:把圖片拖入瀏覽器
8.3.1 案例簡介
8.3.2 設計網頁基本元素
8.3.3 基本函式的實現
8.3.4 頁面載入處理
8.4 小結
8.5 本章習題
第9章 本地存儲
9.1 本地存儲對象——Web Storage
9.1.1 Web Storage簡介
9.1.2 localStorage和sessionStorage
9.1.3 設定和獲取Storage數據
9.1.4 Storage API的屬性和方法
9.1.5 存儲JSON對象的數據
9.1.6 Storage API的事件
9.1.7 實戰:在兩個視窗中實現通信
9.2 本地資料庫——Web SQL Database
9.2.1 Web SQL Database簡介
9.2.2 操作Web SQL資料庫
9.2.3 實戰:基本的資料庫操作實例
9.3 小結
9.4 本章習題
第10章 利用Canvas繪製圖形
10.1 認識Canvas
10.1.1 Canvas的歷史
10.1.2 Canvas與SVG、VML之間的差異
10.2 Canvas的基本知識
10.2.1 構建Canvas元素
10.2.2 使用JavaScript實現繪圖的流程
10.3 使用Canvas繪圖
10.3.1 繪製矩形
10.3.2 使用路徑
10.3.3 圖形組合
10.3.4 繪製曲線
10.3.5 使用圖像
10.3.6 剪裁區域
10.3.7 繪製漸變
10.3.8 描邊屬性
10.3.9 模式
10.3.10 變換
10.3.11 使用文本
10.3.12 陰影效果
10.3.13 狀態的保存與恢復
10.3.14 操作像素
10.4 實戰:在Canvas中實現動畫
10.5 小結
10.6 本章習題
第11章 創建框架結構的頁面
11.1 創建視窗框架頁面
11.1.1 創建視窗框架的<frameset>和<frame>標籤
11.1.2 橫向分割視窗
11.1.3 縱向分割視窗
11.1.4 框架的嵌套
11.1.5 將頁面放入視窗框架中
11.2 修飾框架的細節
11.2.1 給無法處理框架的瀏覽器注釋說明
11.2.2 固定框架的位置
11.2.3 在框架中設定滾動條
11.3 修改框架框線的樣式
11.3.1 判定框線是否顯示
11.3.2 改變框線的表現效果
11.3.3 框線的邊距
11.4 框架集中頁面之間的連結
11.4.1 在指定的框架中打開連結
11.4.2 框架內的錨點連結
11.5 靈活的<iframe>框架
11.6 實戰:製作自己的連結主頁
11.7 小結
11.8 本章習題
第12章 CSS規則
12.1 如何學習CSS
12.2 CSS基本的規則寫法
12.2.1 基本的樣式表的寫法
12.2.2 使用類和標誌連結樣式表
12.2.3 創建選擇器
12.2.4 套用CSS樣式表
12.3 用CSS修飾頁面文本
12.3.1 修飾頁面文本字型
12.3.2 文本的字號
12.3.3 文本段落的行高
12.3.4 禁止文本自動換行
12.4 給頁面對象添加顏色
12.5 CSS3的發展
12.5.1 模組化的發展
12.5.2 瀏覽器支持情況
12.5.3 CSS3新特性預覽
12.6 CSS3增強的選擇器功能
12.6.1 屬性選擇符
12.6.2 結構偽類選擇符
12.6.3 UI元素狀態偽類選擇符
12.6.4 偽元素選擇符
12.7 實戰:使用CSS製作個人頁面
12.8 小結
12.9 本章習題
第13章 文本、背景、框線不再單調
13.1 文本與字型
13.1.1 多樣化的文本陰影——text-shadow屬性
13.1.2 溢出文本處理——text-overflow屬性
13.1.3 對齊的文字才好看——word-wrap和word-break屬性
13.1.4 使用伺服器端的字型——@font-face規則
13.1.5 實戰:豐富的文字樣式
13.2 色彩模式和不透明度
13.2.1 還在為配色發愁嗎——HSL色彩模式
13.2.2 HSLA色彩模式
13.2.3 RGBA色彩模式
13.2.4 opacity屬性
13.2.5 實戰:半透明的遮蔽層
13.3 背景
13.3.1 在元素中定義多張背景圖片
13.3.2 指定背景的原點位置
13.3.3 指定背景的顯示區域
13.3.4 指定背景圖像的大小
13.3.5 實戰:設計信紙的效果
13.4 框線
13.4.1 設計圓角框線——border-radius屬性
13.4.2 設計圖像框線——border-image屬性
13.4.3 設計多色框線——border-color屬性
13.4.4 實戰:使用新技術設計網頁
13.5 小結
13.6 本章習題
第14章 傳統的DIV+CSS設計
14.1 理解塊級的意義
14.2 頁面中的層
14.2.1 行<span>和層<div>
14.2.2 層的基本定位
14.2.3 層的疊加
14.3 框模型
14.3.1 理解框模型
14.3.2 padding屬性
14.3.3 border的擴展屬性
14.3.4 margin屬性
14.3.5 框模型的溢出
14.4 定製層的display屬性
14.5 CSS Hack
14.6 實戰:簡單的CSS+DIV
14.7 小結
14.8 本章習題
第15章 靈活的盒布局和界面設計
15.1 靈活的盒布局
15.1.1 開啟盒布局
15.1.2 元素的布局方向——box-orient屬性
15.1.3 元素的布局順序——box-direction屬性
15.1.4 調整元素的位置——box-ordinal-group屬性
15.1.5 彈性空間分配——box-flex屬性
15.1.6 元素的對齊方式——box-pack屬性和box-align屬性
15.1.7 實戰:使用新型盒布局設計網頁
15.2 增強的盒模型
15.2.1 盒子陰影——box-shadow屬性
15.2.2 盒子尺寸的計算方法——box-sizing屬性
15.2.3 盒子溢出內容處理——overflow-x和overflow-y屬性
15.2.4 實戰:設計網站服務條款頁面
15.3 增強的用戶界面設計
15.3.1 允許用戶改變尺寸——resize屬性
15.3.2 定義外輪廓線——outline屬性
15.3.3 偽裝的元素——appearance屬性
15.3.4 為元素添加內容——content屬性
15.3.5 實戰:設計一個水果選擇盤
15.4 小結
15.5 本章習題
第16章 多列布局
16.1 多列布局基礎
16.1.1 多列屬性columns
16.1.2 列寬屬性column-width
16.1.3 列數屬性column-count
16.1.4 列間距屬性column-gap
16.1.5 定義列分隔線——column-rule屬性
16.1.6 定義橫跨所有列——column-span屬性
16.2 實戰:模仿雜誌的多列版式
16.3 小結
16.4 本章習題
第17章 動畫和漸變
17.1 CSS3變形基礎
17.1.1 元素的變形——transform屬性
17.1.2 旋轉
17.1.3 縮放和翻轉
17.1.4 移動
17.1.5 傾斜
17.1.6 矩陣變形
17.1.7 同時使用多個變形函式
17.1.8 定義變形原點——transform-origin屬性
17.1.9 實戰:設計圖片畫廊
17.2 CSS3過渡效果
17.2.1 實現過渡效果——transition屬性
17.2.2 指定過渡的屬性——transition-property屬性
17.2.3 指定過渡的時間——transition-duration屬性
17.2.4 指定過渡延遲時間——transition-delay屬性
17.2.5 指定過渡方式——transition-timing-function屬性
17.2.6 實戰:製作滑動的選單
17.3 CSS3動畫設計
17.3.1 關鍵幀動畫——@keyframes規則
17.3.2 動畫的實現——animation屬性
17.3.3 實戰:永不停止的風車
17.4 CSS3漸變設計
17.4.1 CSS線性漸變
17.4.2 CSS徑向漸變
17.4.3 實戰:設計具有漸變效果的按鈕
17.5 小結
17.6 本章習題
第18章 CSS3的跨設備支持
18.1 媒體查詢
18.1.1 @media規則的語法
18.1.2 使用Media Queries連結的外部樣式表檔案
18.2 實戰:自適應螢幕的樣式表方案
18.3 小結
18.4 本章習題
第19章 案例1:製作主流網站界面
19.1 構思基礎的布局
19.2 設計基礎模組的樣式表
19.3 完善網站的子模組
19.3.1 網站的導航欄
19.3.2 頁面的側欄
19.4 最終頁面
19.5 小結
第20章 案例2:設計複雜頁面
20.1 頁面的框架布局
20.1.1 定位頁面的內容
20.1.2 頁面初級布局的代碼
20.2 細化頁面的局部
20.2.1 intro部分
20.2.2 頁面的左側部分
20.2.3 頁面的右側欄主體部分
20.3 小結
第21章 案例3:製作個人網站(HTML5+CSS3)
21.1 網站的整體規劃
21.1.1 網站結構規劃
21.1.2 頁面的功能劃分
21.1.3 頁面的結構布局
21.2 頁面設計效果圖
21.3 站點目錄規劃
21.3.1 規劃各種資源目錄
21.3.2 配置IIS虛擬目錄
21.4 構建HTML結構並用CSS布局
21.5 參照最終的效果圖美化頁面樣式
21.5.1 輸入所有的標題和內容
21.5.2 用CSS設定背景圖片
21.5.3 用CSS設定漸變背景
21.5.4 用CSS設定頁面垂直滾動條樣式
21.6 在首頁中添加動態行為
21.7 製作日誌頁面
21.7.1 設計日誌瀏覽功能的思路分析
21.7.2 日誌頁面的代碼編寫
21.8 製作相冊頁面
21.8.1 設計相冊瀏覽功能的思路分析
21.8.2 相冊頁面的代碼編寫
21.9 註冊域名並發布網站
21.10 小結
作者簡介
《21天學通HTML5+CSS3(第2版)》的作者團隊成員為一線開發工程師、資深編程專家或專業培訓師,在編程開發方面有著豐富的經驗,並已出版過多本相關暢銷書,頗受廣大讀者認可。