編輯推薦
作為下一代Web標準,HTML5緻力於為互聯網開發者搭建更加便捷、開放的溝通平颱。業界普遍認為,在未來幾年內,HTML5無疑將成為移動互聯網領域的主宰者。本書是係統學習網頁設計和移動設計的參考圖書。它涵蓋創建標準兼容、語義化的新一代HTML5網站的所有基礎知識,並囊括實現HTML5核心語言的HTML5生態係統和相關API。全書精彩呈現500多個實戰代碼示例及主流瀏覽器實現效果圖,貼心匯聚HTML5和CSS3中所有屬性、元素和函數的簡明參考錶。
內容簡介
本書是係統學習網頁設計的參考圖書。分為五部分:首先介紹學習需要的預備知識和HTML、CSS和JavaScript的進展;第二部分討論HTML元素,並詳細說明瞭HTML5中新增和修改的元素;第三部分闡述CSS,涵蓋瞭所有控製內容樣式的CSS選擇器和屬性,並輔以大量代碼示例和圖示;第四部分介紹DOM,剖析如何用JavaScript操縱HTML內容;第五部分講解Ajax、多媒體和canvas元素等HTML5高級特性。本書麵嚮初學者和中等水平Web開發人員,是牢固掌握HTML5、CSS3和JavaScript的必讀之作。
作者簡介
Adam Freeman,曾在多傢名企擔任高級職務,現為暢銷技術圖書作傢,著有多部C#、.NET和Java方麵的大部頭作品。其中《ASP.NET 4高級程序設計(第4版)》、《精通ASP.NET MVC 3框架(第3版)》銷量均在同品種中名列前茅,備受讀者推崇。Freeman專門為網頁開發新手和網頁設計師打造的經典參考書,這本書秉承作者的一貫風格,幽默風趣、簡約凝練、邏輯性強,是廣大Web開發人員的必讀經典。
精彩書評
★在這個瀏覽器時代你不學點兒網頁構建知識還真是有些跟不上時代步伐瞭。這本書全麵覆蓋HTML5、CSS3和JavaScript,囊括瞭構建網頁所需的基本知識以及一些中高級內容,新手選這本書不會錯,中級開發人員將它作為參考書也相當方便!
——XX網站讀者
★這本書對於學習HTML5來說真是不可多得的好書,作者既熟知技術趨勢,又深諳寫作技巧,看看書中那些代碼示例、實現效果圖、簡明參考錶,無一不正中讀者下懷,難怪許多Web開發人員都極力推薦這本書!
——goodreads讀者
目錄
第一部分 開篇
第1章 HTML5背景知識
1.1 HTML的曆史
1.1.1 JavaScript齣場
1.1.2 瀏覽器戰爭的結束
1.1.3 插件稱雄
1.1.4 語義HTML浮齣水麵
1.1.5 發展態勢:HTML標準滯後於其使用
1.2 HTML5簡介
1.2.1 新標準
1.2.2 引入原生多媒體支持
1.2.3 引入可編程內容
1.2.4 引入語義Web
1.3 HTML5現況
1.3.1 瀏覽器對HTML5的支持情況
1.3.2 網站對HTML5的支持情況
1.4 本書結構
1.5 HTML5的更多信息
1.6 小結
第2章 準備工作
2.1 挑選瀏覽器
2.2 挑選HTML編輯器
2.3 挑選Web服務器
2.4 獲取Node.js
2.5 獲取示例代碼
2.6 小結
第3章 初探HTML
3.1 使用元素
3.1.1 瞭解本章用到的元素
3.1.2 使用空元素
3.1.3 使用自閉閤標簽
3.1.4 使用虛元素
3.2 使用元素屬性
3.2.1 一個元素應用多個屬性
3.2.2 使用布爾屬性
3.2.3 使用自定義屬性
3.3 創建HTML文檔
3.3.1 外層結構
3.3.2 元數據
3.3.3 內容
3.3.4 父元素、子元素、後代元素和兄弟元素
3.3.5 瞭解元素類型
3.4 使用HTML實體
3.5 HTML5全局屬性
3.5.1 accesskey屬性
3.5.2 class屬性
3.5.3 contenteditable屬性
3.5.4 contextmenu屬性
3.5.5 dir屬性
3.5.6 draggable屬性
3.5.7 dropzone屬性
3.5.8 hidden屬性
3.5.9 id屬性
3.5.10 lang屬性
3.5.11 spellcheck屬性
3.5.12 style屬性
3.5.13 tabindex屬性
3.5.14 title屬性
3.6 有用的HTML工具
3.7 小結
第4章 初探CSS
4.1 定義和應用樣式
4.1.1 瞭解本章所用的CSS屬性
4.1.2 使用元素內嵌樣式
4.1.3 使用文檔內嵌樣式
4.1.4 使用外部樣式錶
4.2 樣式的層疊和繼承
4.2.1 瀏覽器樣式
4.2.2 用戶樣式
4.2.3 樣式如何層疊
4.2.4 用重要樣式調整層疊次序
4.2.5 根據具體程度和定義次序解決同級樣式衝突
4.2.6 繼承
4.3 CSS中的顔色
4.4 CSS中的長度
4.4.1 絕對長度
4.4.2 相對長度
4.5 其他CSS單位
4.5.1 使用CSS角度
4.5.2 使用CSS時間
4.6 測試CSS特性的支持情況
4.7 有用的CSS工具
4.7.1 瀏覽器樣式報告
4.7.2 用SelectorGadget生成選擇器
4.7.3 用LESS改進CSS
4.7.4 使用CSS框架
4.8 小結
第5章 初探JavaScript
5.1 準備使用JavaScript
5.2 使用語句
5.3 定義和使用函數
5.3.1 定義帶參數的函數
5.3.2 定義會返迴結果的函數
5.4 使用變量和類型
5.4.1 使用基本類型
5.4.2 創建對象
5.4.3 使用對象
5.5 使用JavaScript運算符
5.5.1 相等和等同運算符
5.5.2 顯式類型轉換
5.6 使用數組
5.6.1 使用數組字麵量
5.6.2 讀取和修改數組內容
5.6.3 枚舉數組內容
5.6.4 使用內置的數組方法
5.7 處理錯誤
5.8 比較undefined和null值
5.8.1 檢查變量或屬性是否為undefined或null
5.8.2 區分null和undefined
5.9 常用的JavaScript工具
5.9.1 使用JavaScript調試器
5.9.2 使用JavaScript庫
5.10 小結
第二部分 HTML元素
第6章 HTML5元素背景知識
6.1 語義與呈現分離
6.2 元素選用原則
6.2.1 少亦可為多
6.2.2 彆誤用元素
6.2.3 具體為佳,一以貫之
6.2.4 對用戶不要想當然
6.3 元素說明體例
6.4 元素速覽
6.4.1 文檔和元數據元素
6.4.2 文本元素
6.4.3 對內容分組
6.4.4 劃分內容
6.4.5 製錶
6.4.6 創建錶單
6.4.7 嵌入內容
6.5 未實現的元素
6.6 小結
第7章 創建HTML文檔
7.1 構築基本的文檔結構
7.1.1 DOCTYPE元素
7.1.2 html元素
7.1.3 head元素
7.1.4 body元素
7.2 用元數據元素說明文檔
7.2.1 設置文檔標題
7.2.2 設置相對URL的解析基準
7.2.3 用元數據說明文檔
7.2.4 定義CSS樣式
7.2.5 指定外部資源
7.3 使用腳本元素
7.3.1 script元素
7.3.2 noscript元素
7.4 小結
第8章 標記文字
8.1 生成超鏈接
8.1.1 生成指嚮外部的超鏈接
8.1.2 使用相對URL
8.1.3 生成內部超鏈接
8.1.4 設定瀏覽環境
8.2 用基本的文字元素標記內容
8.2.1 錶示關鍵詞和産品名稱
8.2.2 加以強調
8.2.3 錶示外文詞語或科技術語
8.2.4 錶示不準確或校正
8.2.5 錶示重要的文字
8.2.6 為文字添加下劃綫
8.2.7 添加小號字體內容
8.2.8 添加上標和下標
8.3 換行
8.3.1 強製換行
8.3.2 指明可以安全換行的建議位置
8.4 錶示輸入和輸齣
8.5 使用標題引用、引文、定義和縮寫
8.5.1 錶示縮寫
8.5.2 定義術語
8.5.3 引用來自他處的內容
8.5.4 引用其他作品的標題
8.6 使用語言元素
8.6.1 ruby、rt和rp元素
8.6.2 bdo元素
8.6.3 bdi元素
8.7 其他文本元素
8.7.1 錶示一段一般性的內容
8.7.2 突齣顯示文本
8.7.3 錶示添加和刪除的內容
8.7.4 錶示時間和日期
8.8 小結
第9章 組織內容
9.1 為什麼要對內容分組
9.2 建立段落
9.3 使用div元素
9.4 使用預先編排好格式的內容
9.5 引用他處內容
9.6 添加主題分隔
9.7 將內容組織為列錶
9.7.1 ol元素
9.7.2 ul元素
9.7.3 li元素
9.7.4 生成說明列錶
9.7.5 生成自定義列錶
9.8 使用插圖
9.9 小結
第10章 文檔分節
10.1 添加基本的標題
10.2 隱藏子標題
10.3 生成節
10.4 添加首部和尾部
10.5 添加導航區域
10.6 使用article
10.7 生成附注欄
10.8 提供聯係信息
10.9 生成詳情區域
10.10 小結
第11章 錶格元素
11.1 生成基本的錶格
11.2 添加錶頭單元格
11.3 為錶格添加結構
11.3.1 錶示錶頭和錶格主題
11.3.2 添加錶腳
11.4 製作不規則錶格
11.5 把錶頭與單元格關聯起來
11.6 為錶格添加標題
11.7 處理列
11.8 設置錶格邊框
11.9 小結
第12章 錶單
12.1 製作基本錶單
12.1.1 定義錶單
12.1.2 查看錶單數據
12.2 配置錶單
12.2.1 配置錶單的action屬性
12.2.2 配置HTTP方法屬性
12.2.3 配置數據編碼
12.2.4 控製錶單的自動完成功能
12.2.5 指定錶單反饋信息的目標顯示位置
12.2.6 設置錶單名稱
12.3 在錶單中添加說明標簽
12.4 自動聚焦到某個input元素
12.5 禁用單個input元素
12.6 對錶單元素編組
12.6.1 為fieldset元素添加說明標簽
12.6.2 用fieldset禁用整組input元素
12.7 使用button元素
12.7.1 用button元素提交錶單
12.7.2 用button元素重置錶單
12.7.3 把button作為一般元素使用
12.8 使用錶單外的元素
12.9 小結
第13章 定製input元素
13.1 用input元素輸入文字
13.1.1 設定元素大小
13.1.2 設置初始值和占位式提示
13.1.3 使用數據列錶
13.1.4 生成隻讀或被禁用的文本框
13.1.5 指定文字方嚮數據的名稱
13.2 用input元素輸入密碼
13.3 用input元素生成按鈕
13.4 用input元素為輸入數據把關
13.4.1 用input元素獲取數值
13.4.2 用input元素獲取指定範圍內的數值
13.4.3 用input元素獲取布爾型輸入
13.4.4 用input元素生成一組固定選項
13.4.5 用input元素獲取有規定格式的字符串
13.4.6 用input元素獲取時間和日期
13.4.7 用input元素獲取顔色值
13.5 用input元素獲取搜索用詞
13.6 用input元素生成隱藏的數據項
13.7 用input元素生成圖像按鈕和分區響應圖
13.8 用input元素上傳文件
13.9 小結
第14章 其他錶單元素及輸入驗證
14.1 使用其他錶單元素
14.1.1 生成選項列錶
14.1.2 輸入多行文字
14.1.3 錶示計算結果
14.1.4 生成公開/私有密鑰對
14.2 使用輸入驗證
14.2.1 確保用戶提供瞭一個值
14.2.2 確保輸入值位於某個範圍內
14.2.3 確保輸入值與指定模式匹配
14.2.4 確保輸入值是電子郵箱地址或URL
14.3 禁用輸入驗證
14.4 小結
第15章 嵌入內容
15.1 嵌入圖像
15.1.1 在超鏈接裏嵌入圖像
15.1.2 創建客戶端分區響應圖
15.2 嵌入另一張HTML文檔
15.3 通過插件嵌入內容
15.3.1 使用embed元素
15.3.2 使用object和param元素
15.4 object元素的其他用途
15.4.1 使用object元素嵌入圖像
15.4.2 使用object元素創建分區響應圖
15.4.3 將object元素作為瀏覽上下文環境
15.5 嵌入數字錶現形式
15.5.1 顯示進度
15.5.2 顯示範圍裏的值
15.6 其他嵌入元素
15.6.1 嵌入音頻和視頻
15.6.2 嵌入圖形
15.7 小結
第三部分 CSS
第16章 理解CSS
16.1 CSS標準化
16.2 盒模型
16.3 選擇器簡明參考
16.4 屬性簡明參考
16.4.1 邊框和背景屬性
16.4.2 盒模型屬性
16.4.3 布局屬性
16.4.4 文本屬性
16.4.5 過渡、動畫和變換屬性
16.4.6 其他屬性
16.5 小結
第17章 使用CSS選擇器(第Ⅰ部分)
17.1 使用CSS基本選擇器
17.1.1 選擇所有元素
17.1.2 根據類型選擇元素
17.1.3 根據類選擇元素
17.1.4 根據ID選擇元素
17.1.5 根據屬性選擇元素
17.2 復閤選擇器
17.2.1 並集選擇器
17.2.2 後代選擇器
17.2.3 選擇子元素
17.2.4 選擇兄弟元素
17.3 使用僞元素選擇器
17.3.1 使用::first-line選擇器
17.3.2 使用::first-letter選擇器
17.3.3 使用:before和:after選擇器
17.3.4 使用CSS計數器
17.4 小結
第18章 使用CSS選擇器(第Ⅱ部分)
18.1 使用結構性僞類選擇器
18.1.1 使用根元素選擇器
18.1.2 使用子元素選擇器
18.1.3 使用:nth-child選擇器
18.2 使用UI僞類選擇器
18.2.1 選擇啓用或禁用元素
18.2.2 選擇已勾選的元素
18.2.3 選擇默認元素
18.2.4 選擇有效和無效的input元素
18.2.5 選擇限定範圍的input元素
18.2.6 選擇必需和可選的input元素
18.3 使用動態僞類選擇器
18.3.1 使用:link和:visited選擇器
18.3.2 使用:hover選擇器
18.3.3 使用:active選擇器
18.3.4 使用:focus選擇器
18.4 其他僞類選擇器
18.4.1 使用否定選擇器
18.4.2 使用:empty選擇器
18.4.3 使用:lang選擇器
18.4.4 使用:target選擇器
18.5 小結
第19章 使用邊框和背景
19.1 應用邊框樣式
19.1.1 定義邊框寬度
19.1.2 定義邊框樣式
19.1.3 為一條邊應用邊框樣式
19.1.4 使用border簡寫屬性
19.1.5 創建圓角邊框
19.1.6 將圖像用做邊框
19.2 設置元素的背景
19.2.1 設置背景顔色和圖像
19.2.2 設置背景圖像的尺寸
19.2.3 設置背景圖像位置
19.2.4 設置元素的背景附著方式
19.2.5 設置背景圖像的開始位置和裁剪樣式
19.2.6 使用background簡寫屬性
19.3 創建盒子陰影
19.4 應用輪廓
19.5 小結
第20章 使用盒模型
20.1 為元素應用內邊距
20.2 為元素應用外邊距
20.3 控製元素的尺寸
20.3.1 設置一定尺寸的盒子
20.3.2 設置最小和最大尺寸
20.4 處理溢齣內容
20.5 控製元素的可見性
20.6 設置元素的盒類型
20.6.1 認識塊級元素
20.6.2 認識行內元素
20.6.3 認識行內?塊級元素
20.6.4 認識插入元素
20.6.5 隱藏元素
20.7 創建浮動盒
20.8 小結
第21章 創建布局
21.1 定位內容
21.1.1 設置定位類型
21.1.2 設置元素的層疊順序
21.2 創建多列布局
21.3 創建彈性盒布局
21.3.1 創建簡單的彈性盒
21.3.2 伸縮多個元素
21.3.3 處理垂直空間
21.3.4 處理最大尺寸
21.4 創建錶格布局
21.5 小結
第22章 設置文本樣式
22.1 應用基本文本樣式
22.1.1 對齊文本
22.1.2 處理空白
22.1.3 指定文本方嚮
22.1.4 指定單詞、字母、行之間的間距
22.1.5 控製斷詞
22.1.6 首行縮進
22.2 文本裝飾與大小寫轉換
22.3 創建文本陰影
22.4 使用字體
22.4.1 選擇字體
22.4.2 設置字體大小
22.4.3 設置字體樣式和粗細
22.5 使用Web字體
22.6 小結
第23章 過渡、動畫和變換
23.1 使用過渡
23.1.1 創建反嚮過渡
23.1.2 選擇中間值的計算方式
23.2 使用動畫
23.2.1 使用關鍵幀
23.2.2 設置重復方嚮
23.2.3 理解結束狀態
23.2.4 初始布局時應用動畫
23.2.5 重用關鍵幀
23.2.6 為多個元素應用多個動畫
23.2.7 停止和啓動動畫
23.3 使用變換
23.3.1 應用變換
23.3.2 指定元素變換的起點
23.3.3 將變換作為動畫和過渡處理
23.4 小結
第24章 其他CSS屬性和特性
24.1 設置元素的顔色和透明度
24.1.1 設置前景色
24.1.2 設置元素的透明度
24.2 設置錶格樣式
24.2.1 閤並錶格邊框
24.2.2 配置獨立邊框
24.2.3 處理空單元格
24.2.4 設置標題的位置
24.2.5 指定錶格布局
24.3 設置列錶樣式
24.3.1 設置列錶標記類型
24.3.2 使用圖像作為列錶標記
24.3.3 設置列錶標記的位置
24.4 設置光標樣式
24.5 小結
第四部分 使用DOM
第25章 理解DOM
25.1 理解文檔對象模型
25.2 理解DOM Level和兼容性
25.3 DOM快速查詢
25.3.1 Document的成員
25.3.2 Window的成員
25.3.3 HTMLElement的成員
25.3.4 DOM裏的CSS屬性
25.3.5 DOM中的事件
25.4 小結
第26章 使用Document對象
26.1 使用Document元數據
26.1.1 獲取文檔信息
26.1.2 使用Location對象
26.1.3 讀取和寫入cookie
26.1.4 理解就緒狀態
26.1.5 獲取DOM的實現情況
26.2 獲取HTML元素對象
26.2.1 使用屬性獲取元素對象
26.2.2 使用數組標記獲取已命名元素
26.2.3 搜索元素
26.2.4 閤並進行鏈式搜索
26.3 在DOM樹裏導航
26.4 小結
第27章 使用Window對象
27.1 獲取Window對象
27.2 獲取窗口信息
27.3 與窗口進行交互
27.4 對用戶進行提示
27.5 獲取基本信息
27.6 使用瀏覽器曆史
27.6.1 在瀏覽曆史中導航
27.6.2 在瀏覽曆史裏插入條目
27.6.3 為不同的文檔添加條目
27.6.4 在瀏覽曆史中保存復雜狀態
27.6.5 替換瀏覽曆史中的條目
27.7 使用跨文檔消息傳遞
27.8 使用計時器
27.9 小結
第28章 使用DOM元素
28.1 使用元素對象
28.1.1 使用類
28.1.2 使用元素屬性
28.2 使用Text對象
28.3 修改模型
28.3.1 創建和刪除元素
28.3.2 復製元素
28.3.3 移動元素
28.3.4 比較元素對象
28.3.5 使用HTML片段
28.3.6 嚮文本塊插入元素
28.4 小結
第29章 為DOM元素設置樣式
29.1 使用樣式錶
29.1.1 獲得樣式錶的基本信息
29.1.2 使用媒介限製
29.1.3 禁用樣式錶
29.1.4 CSSRuleList對象的成員
29.2 使用元素樣式
29.3 使用CSSStyleDeclaration對象
29.3.1 使用便捷屬性
29.3.2 使用常規屬性
29.3.3 使用細粒度的CSS DOM對象
29.4 使用計算樣式
29.5 小結
第30章 使用事件
30.1 使用簡單事件處理器
30.1.1 實現簡單的內聯事件處理器
30.1.2 實現一個簡單的事件處理函數
30.2 使用DOM和事件對象
30.2.1 按類型區分事件
30.2.2 理解事件流
30.2.3 使用可撤銷事件
30.3 使用HTML事件
30.3.1 文檔和窗口事件
30.3.2 使用鼠標事件
30.3.3 使用鍵盤焦點事件
30.3.4 使用鍵盤事件
30.3.5 使用錶單事件
30.4 小結
第31章 使用元素專屬對象
31.1 文檔和元數據對象
31.1.1 base元素
31.1.2 body元素
31.1.3 link元素
31.1.4 meta元素
31.1.5 script元素
31.1.6 style元素
31.1.7 title元素
31.1.8 其他文檔和元數據元素
31.2 文本元素
31.2.1 a元素
31.2.2 del和ins元素
31.2.3 q元素
31.2.4 time元素
31.2.5 其他文本元素
31.3 分組元素
31.3.1 blockquote元素
31.3.2 li元素
31.3.3 ol元素
31.3.4 其他分組元素
31.4 區塊元素
31.4.1 details元素
31.4.2 其他區塊元素
31.5 錶格元素
31.5.1 col和colgroup元素
31.5.2 table元素
31.5.3 thead、tbody和tfoot元素
31.5.4 th元素
31.5.5 tr元素
31.5.6 其他錶格元素
31.6 錶單元素
31.6.1 button元素
31.6.2 datalist元素
31.6.3 fieldset元素
31.6.4 form元素
31.6.5 input元素
31.6.6 label元素
31.6.7 legend元素
31.6.8 optgroup元素
31.6.9 option元素
31.6.10 output元素
31.6.11 select元素
31.6.12 textarea元素
31.7 內容元素
31.7.1 area元素
31.7.2 embed元素
31.7.3 iframe元素
31.7.4 img元素
31.7.5 map元素
31.7.6 meter元素
31.7.7 object元素
31.7.8 param元素
31.7.9 progress元素
31.8 小結
第五部分 高級功能
第32章 使用Ajax(第Ⅰ部分)
32.1 Ajax起步
32.1.1 處理響應
32.1.2 主流中的異類:應對Opera
32.2 使用Ajax事件
32.3 處理錯誤
32.3.1 處理設置錯誤
32.3.2 處理請求錯誤
32.3.3 處理應用程序錯誤
32.4 獲取和設置標頭
32.4.1 覆蓋請求的HTTP方法
32.4.2 禁用內容緩存
32.4.3 讀取響應標頭
32.5 生成跨源Ajax請求
32.5.1 使用Origin請求標頭
32.5.2 高級CORS功能
32.6 中止請求
32.7 小結
第33章 使用Ajax(第Ⅱ部分)
33.1 準備嚮服務器發送數據
33.1.1 定義服務器
33.1.2 理解問題所在
33.2 發送錶單數據
33.3 使用FormData對象發送錶單數據
33.3.1 創建FormData對象
33.3.2 修改FormData對象
33.4 發送JSON數據
33.5 發送文件
33.6 追蹤上傳進度
33.7 請求並處理不同內容類型
33.7.1 接收HTML片段
33.7.2 接收XML數據
33.7.3 接收JSON數據
33.8 小結
第34章 使用多媒體
34.1 使用video元素
34.1.1 預先加載視頻
34.1.2 顯示占位圖像
34.1.3 設置視頻尺寸
34.1.4 指定視頻來源(和格式)
34.1.5 track元素
34.2 使用audio元素
34.3 通過DOM操作嵌入式媒體
34.3.1 獲得媒體信息
34.3.2 評估迴放能力
34.3.3 控製媒體迴放
34.4 小結
第35章 使用canvas元素(第Ⅰ部分)
35.1 開始使用canvas元素
35.2 獲取畫布的上下文
35.3 繪製矩形
35.4 設置畫布繪製狀態
35.4.1 設置綫條連接樣式
35.4.2 設置填充和筆觸樣式
35.4.3 使用漸變
35.4.4 使用徑嚮漸變
35.4.5 使用圖案
35.5 保存和恢復繪製狀態
35.6 繪製圖像
35.6.1 使用視頻圖像
35.6.2 使用畫布圖像
35.7 小結
第36章 使用canvas元素(第Ⅱ部分)
36.1 用路徑繪圖
36.1.1 用綫條繪製路徑
36.1.2 繪製矩形
36.2 繪製圓弧
36.2.1 使用arcTo方法
36.2.2 使用arc方法
36.3 繪製貝塞爾麯綫
36.3.1 繪製三次貝塞爾麯綫
36.3.2 繪製二次貝塞爾麯綫
36.4 創建剪輯區域
36.5 繪製文本
36.6 使用特效和變換
36.6.1 使用陰影
36.6.2 使用透明度
36.6.3 使用閤成
36.6.4 使用變換
36.7 小結
第37章 使用拖放
37.1 創建來源項目
37.2 創建釋放區
37.3 使用DataTransfer對象
37.3.1 根據數據過濾被拖動項目
37.3.2 拖放文件
37.4 小結
第38章 使用地理定位
38.1 使用地理定位
38.2 處理地理定位錯誤
38.3 指定地理定位選項
38.4 監控位置
38.5 小結
第39章 使用Web存儲
39.1 使用本地存儲
39.2 使用會話存儲
39.3 小結
第40章 創建離綫Web應用程序
40.1 定義問題
40.2 定義清單
40.3 檢測瀏覽器狀態
40.4 使用離綫緩存
40.4.1 製作更新
40.4.2 獲取更新
40.4.3 應用更新
40.5 小結
精彩書摘
代碼清單4-5文件styles.css a t background-color:grey; color:white } span{ border:thin black solid; padding:10px; ) 樣式錶中用不著style元素,需要什麼樣式,隻消為其設計好選擇器,後麵再跟上一套樣式聲明即可。然後HTML文檔就可以用link元素將這些樣式導入其中(link元素將在第7章詳細介紹)。如代碼清單4-6所示。 代碼清單4.6導人外部樣式錶 <!DOCTYPE HlnL> ExamDle Visit the Apress website I likeaPPlesand oranges. Visit the W3C website v 文檔想要鏈接多少樣式錶都行,為每個樣式錶使用一個link元素即可。如果不同樣式錶中的樣式使用瞭相同的選擇器,那麼這些樣式錶的導入順序很重要,在此情況下得以應用的是後導入的樣式。 1.從其他樣式錶中導入樣式 可以用@import語句將樣式從一個樣式錶導入另一個樣式錶。代碼清單4-7所示的樣式錶combined.css示範瞭這種用法。 代碼清單4-7文件combined.CSS 8import“styles·;css”; span{ border:medium black dashed; padding:lopx; } 一個樣式錶中想要導人多少彆的樣式錶都行,為每個樣式錶使用一條@import語句即可。@import語句必須位於樣式錶頂端,樣式錶自已的樣式定義不能齣現在它之前。在combined.css這個樣式錶中,先導入瞭styles.css,然後再定義瞭一條針對span元素的新樣式。代碼清單4-8顯示瞭HTML文檔鏈接combined.CSS樣式錶的情形。
……
前言/序言
《Web前端開發實戰:從零到精通》 內容簡介: 本書是一本為 aspiring 和 experienced web developers 量身打造的全麵性指南,旨在幫助讀者掌握現代 Web 前端開發的精髓。從基礎的 HTML 和 CSS 布局,到動態交互的 JavaScript 編程,再到強大的前端框架應用,本書將一步步帶領你構建響應式、用戶友好且功能豐富的 Web 應用。我們不僅會深入講解核心技術,更注重實際項目中的應用技巧和最佳實踐,讓你在最短的時間內成為一名閤格且有競爭力的前端工程師。 目標讀者: 初學者: 對 Web 開發充滿興趣,希望從零開始係統學習前端技術棧的學員。 在校學生: 計算機科學、軟件工程等相關專業的學生,希望通過實戰鞏固課堂知識。 轉行者: 希望進入 Web 開發領域,需要一份清晰的學習路徑和實操指導的職場人士。 經驗開發者: 希望鞏固基礎、學習新框架、提升開發效率和代碼質量的前端工程師。 本書特色: 1. 循序漸進,體係化學習: 本書采用由淺入深的教學方式,首先從 Web 的基石——HTML 和 CSS 入手,講解語義化標簽、盒子模型、布局方式等核心概念。然後過渡到 JavaScript,深入剖析其語法、DOM 操作、事件處理、異步編程等關鍵主題。最後,將目光聚焦於當下最流行的前端框架,提供詳細的入門與進階指南。 2. 理論與實踐並重: 每一章都配有大量的代碼示例和精選的練習題,幫助讀者在理解理論知識的同時,能夠動手實踐,將所學知識轉化為實際技能。書中包含多個完整的項目案例,涵蓋瞭從簡單的靜態頁麵到復雜的單頁應用(SPA),讓你在真實的項目環境中學習開發流程和解決實際問題的能力。 3. 覆蓋最新技術棧: 本書緊跟 Web 開發的最新潮流,重點講解瞭現代前端開發必備的工具和技術,包括但不限於: HTML5 和 CSS3 進階: 深入理解語義化 HTML5 標簽的閤理使用,探索 CSS3 的強大新特性,如 Flexbox、Grid 布局、過渡動畫、響應式設計等,打造美觀且適應各種設備的界麵。 JavaScript 核心與 ES6+: 全麵掌握 JavaScript 的核心語法、數據結構、函數式編程思想,以及 ES6 及後續版本引入的箭頭函數、let/const、模塊化、Promise、Async/Await 等現代語法特性,寫齣更簡潔、高效的代碼。 現代前端框架(以 React/Vue 為例): 詳細講解其中一個或兩個主流框架(根據實際內容選擇),包括組件化開發、狀態管理、路由、數據請求等核心概念,幫助讀者快速掌握構建復雜單頁應用的能力。 構建工具與包管理器: 介紹 Webpack、Vite 等主流前端構建工具的使用,以及 npm、yarn 等包管理器的配置與優化,提升開發效率和項目管理能力。 版本控製工具 Git: 講解 Git 的基礎操作和協作流程,養成良好的版本管理習慣,提高團隊開發效率。 4. 注重開發實踐與工程化: 除瞭技術本身,本書還融入瞭大量的開發實踐經驗,例如: 代碼質量與可維護性: 強調編寫清晰、可讀、可維護的代碼的重要性,介紹代碼規範、組件設計原則等。 性能優化: 講解前端性能優化的常見策略,如代碼壓縮、圖片懶加載、瀏覽器緩存、異步加載等,構建更快的 Web 應用。 瀏覽器兼容性: 探討如何處理不同瀏覽器之間的兼容性問題,確保 Web 應用在各個平颱上都能正常運行。 調試技巧: 分享使用開發者工具進行高效調試的技巧,快速定位和解決問題。 5. 實戰項目驅動: 本書精心設計瞭多個實戰項目,從搭建個人博客、電商詳情頁,到實現一個簡單的待辦事項應用、天氣查詢應用,再到使用框架構建一個更復雜的社交媒體 Feed 流或在綫協作工具。這些項目不僅能鞏固所學知識,更能讓讀者體驗從零到一完成一個 Web 應用的全過程。 本書結構: 第一部分:Web 開發基礎 第一章:Web 的基石——HTML 剖析 HTML 的發展曆程與語義化重要性 HTML5 的核心語義化標簽(header, nav, main, article, section, aside, footer 等) 多媒體元素(audio, video)與錶單元素的深度講解 Web Components 簡介 實際案例:構建一個具有良好語義的靜態網頁結構。 第二章:視覺的語言——CSS 精通 CSS 基礎迴顧與選擇器詳解 盒子模型、定位與浮動 CSS3 布局利器:Flexbox 與 Grid 響應式設計:媒體查詢與移動優先 CSS 動畫與過渡效果 CSS 預處理器(Sass/Less)簡介 實際案例:使用 Flexbox/Grid 布局一個復雜的響應式網頁。 第三章:交互的靈魂——JavaScript 入門 JavaScript 基礎語法、數據類型與運算符 控製流與循環 函數與作用域 DOM 操作與事件處理 實際案例:實現一個簡單的圖片輪播或錶單驗證。 第二部分:JavaScript 進階與現代 Web 開發 第四章:JavaScript 核心進階 對象與原型鏈 異步編程:迴調函數、Promise、Async/Await 錯誤處理與調試 事件循環與閉包 ES6+ 新特性深入講解:箭頭函數、解構賦值、模闆字符串、模塊化等 實際案例:構建一個數據請求並展示的異步應用。 第五章:構建工具與版本控製 包管理器:npm 與 yarn 的使用 模塊打包工具:Webpack/Vite 的配置與使用 版本控製:Git 的基礎操作與工作流程 實際案例:配置一個簡單的 Webpack/Vite 項目,並進行 Git 版本管理。 第三部分:現代前端框架實踐(以 React/Vue 為例,請根據實際內容選擇) 第六章:React (或 Vue) 核心概念 組件化開發理念 JSX (或模闆語法) Props 與 State 生命周期方法 (或鈎子函數) 列錶渲染與條件渲染 事件處理與錶單綁定 實際案例:創建一個簡單的計數器或待辦事項列錶組件。 第七章:React (或 Vue) 路由與狀態管理 路由:React Router (或 Vue Router) 的配置與使用 狀態管理:Context API (或 Vuex/Pinia) 的概念與實踐 實際案例:構建一個多頁麵應用,實現頁麵間導航和狀態共享。 第八章:與後端交互與數據請求 Ajax 請求與 Fetch API 處理 API 響應與錯誤 使用 Axios (或內置的 fetch) 進行 HTTP 請求 實際案例:從公開 API 獲取數據並展示在前端界麵。 第四部分:綜閤項目實戰與進階 第九章:完整項目開發:個人博客係統(或電商詳情頁) 項目需求分析與技術選型 從零開始搭建項目結構 實現核心功能模塊 響應式布局與跨瀏覽器兼容性處理 代碼優化與部署準備 第十章:性能優化與最佳實踐 前端性能檢測工具 圖片、字體、代碼的優化策略 代碼分割與懶加載 緩存策略 安全性考慮 第十一章:部署與上綫 靜態網站部署(Netlify, Vercel, GitHub Pages 等) 服務器端渲染 (SSR) 簡介 (可選) 持續集成/持續部署 (CI/CD) 概念 (可選) 總結: 《Web前端開發實戰:從零到精通》將是你通往前端開發世界的最佳嚮導。通過本書,你將不僅僅學會“怎麼做”,更能理解“為什麼這樣做”,從而建立紮實的技術功底,培養解決復雜問題的能力,並最終成為一名自信且富有創造力的 Web 前端開發者。無論你是初學者還是希望進階的開發者,本書都將為你提供一條清晰、實用且高效的學習路徑。