瘋狂HTML 5/CSS 3/JavaScript講義

前言

　　HTML 5時代即將到來，F(xiàn)irefox、Opera、Chrome等瀏覽器早已很好地支持各種HTML 5規(guī)范，微軟從IE 9開始也能支持HTML 5、CSS 3和SVG等新規(guī)范。W3C已經(jīng)把發(fā)布HTML 5規(guī)范納入了議事日程。這些事實表明：HTML 5正在向大家招手?！　」P者一直在自己的電腦上安裝著5個瀏覽器：Internet Explorer、Firefox、Opera、Chrome和Safari，每當(dāng)這些瀏覽器有新版本面世時，筆者總會在第一時間去下載并使用它們，總希望了解到這些瀏覽器對HTML 5的支持程度?，F(xiàn)在很欣喜地看到，絕大部分瀏覽器都已對HTML 5提供了很好的支持?！　τ谒械那岸碎_發(fā)者來說，HTML 5與CSS 3是一個長久的“期待”，因為以前的前端開發(fā)太痛苦了——①HTML控件的功能過于單一，比如一個簡單的日歷選擇框，前端開發(fā)者必須書寫大量的JavaScript代碼才能完成（或者直接用第三方提供的日歷組件）；②各瀏覽器廠商對HTML、JavaScript、CSS的支持有差異，開發(fā)人員需要花費大量時間來解決前端開發(fā)所遇到的跨瀏覽器問題……對于所有從事企業(yè)級應(yīng)用開發(fā)的程序員來說，前端開發(fā)又是無法回避的，有時候前端UI開發(fā)的時間占到整個項目開發(fā)時間的40％（甚至更高），HTML 5的到來可以讓前端開發(fā)者更加輕松?！　”緯攸c　　本書是一本介紹HTML 5、CSS 3和JavaScript開發(fā)的實用圖書。全書可分為4個部分?！　〉谝徊糠郑喝娴亟榻B了HTML 5的全部標(biāo)簽，并且詳細(xì)地介紹了各標(biāo)簽所支持的屬性，并為各HTML標(biāo)簽、屬性都提供了配套的示例頁面，這些內(nèi)容不僅可以作為學(xué)習(xí)HTML 5的教程，也可以作為日常開發(fā)的參考手冊?！　〉诙糠郑涸敿?xì)地介紹了CSS 3的絕大部分常用選擇器、屬性，并為這些選擇器、屬性提供了示例，方便廣大讀者參考本書全面、系統(tǒng)地掌握CSS 3的功能和用法。這部分內(nèi)容也可以作為前端開發(fā)者的參考手冊?！　〉谌糠郑褐攸c介紹了JavaScript編程的相關(guān)內(nèi)容，包括JavaScript基礎(chǔ)語法、JavaScript函數(shù)、JavaScript對象、DOM編程、事件處理、本地存儲、離線應(yīng)用、多線程、跨文檔消息通信、WebSocket編程等知識，這些內(nèi)容既覆蓋了初學(xué)者的編程基礎(chǔ)，也覆蓋了HTML 5所支持的新功能，非常適合作為前端開發(fā)者的學(xué)習(xí)教程?！　〉谒牟糠郑壕C合運用了HTML 5的繪圖支持、客戶端存儲、CSS樣式、JavaScript編程等內(nèi)容，開發(fā)了一個網(wǎng)頁版的“瘋狂俄羅斯方塊”。這個小游戲既可讓讀者鞏固前面所掌握的各種知識，也可讓讀者將所學(xué)理論運用到實際開發(fā)中?！　⌒枰f明的是，本書只是一本介紹HTML 5、CSS 3、JavaScript實際開發(fā)的圖書，而不是一本關(guān)于所謂“設(shè)計思想”的書，不要指望學(xué)習(xí)本書能提高你所謂的“設(shè)計思想”，所以奉勸那些希望提高思想的讀者不要閱讀本書?！　”緯榻B的知識都很“淺顯”，只要讀者愿意坐下來、靜心閱讀本書，并把書中所有示例循序漸進(jìn)地練習(xí)一遍，本書帶給你的只是9個字：“看得懂、學(xué)得會、做得出”。本書并沒有堆砌一堆“深奧”的新名詞、一堆“高深”的思想，本書依然保持了“瘋狂Java體系”的一貫風(fēng)格：思路清晰，語言平實，操作步驟詳細(xì)?！　≈灰x者在閱讀本書時遇到知識上的問題，都可以登錄瘋狂Java聯(lián)盟與廣大Java學(xué)習(xí)者交流，筆者也會通過該平臺與大家一起交流、學(xué)習(xí)。　　本書具有如下幾個特點?！　?．知識全面，覆蓋面廣　　本書全面介紹了HTML 5、CSS 3、JavaScript的各種相關(guān)知識，包括HTML 5增強(qiáng)的表單標(biāo)簽、繪圖支持、多媒體支持、CSS選擇器、CSS盒模型屬性、CSS變形和動畫相關(guān)屬性、離線應(yīng)用、客戶端存儲、JavaScript多線程、跨文檔消息傳遞、WebSocket等內(nèi)容。本書全面覆蓋了W3C官網(wǎng)上已發(fā)布的HTML 5新規(guī)范，也覆蓋了部分即將發(fā)布的新規(guī)范。　　2．內(nèi)容實際，實用性強(qiáng)　　本書并不局限于枯燥的理論介紹，而是采用了“項目驅(qū)動”的方式來講授知識點。無論是講解HTML 5標(biāo)簽還是CSS 3選擇器、屬性的功能，幾乎每個知識點都可找到對應(yīng)的參考示例。本書最后還提供了“瘋狂俄羅斯方塊”案例，實用性很強(qiáng)。　　3．講解詳細(xì)，上手容易　　本書保持了“瘋狂Java體系”的一貫風(fēng)格：思路清晰，語言平實，操作步驟詳細(xì)。只要認(rèn)真閱讀本書，把書中所有示例循序漸進(jìn)地練習(xí)一遍，并把本書最后一個案例獨立完成，讀者就可達(dá)到企業(yè)前端開發(fā)的要求?！　?chuàng)作感言　　又一本新書將面世，我已經(jīng)退去了看到新書面世的欣喜感，反倒油然而生一種惶恐：也許因為已出版了不少圖書，不再產(chǎn)生新鮮的驚喜；也許因為大量讀者的殷切期望，深恐自己的新書不能滿足所有讀者的期望。只能把自己十二分的熱忱、十二分的努力交出來，希望眾多殷殷期望的讀者不會失望。　　回想這幾年，每年過年都在創(chuàng)作圖書，也許這才是一種屬于我的狀態(tài)，一種我喜歡的狀態(tài)，一種很單純的狀態(tài)，一種與浮囂世界保持距離的狀態(tài)。當(dāng)家鄉(xiāng)的炮竹聲在除夕夜此起彼伏時，當(dāng)廣州的人群在街市上川流不息時，我寧愿、寧愿守著自己寧靜的家，聽著家人溫馨的聲音，看著屏幕上的字一個一個地出現(xiàn)，這就是我的生活方式?！　「淌澜?，熙熙攘攘，世界是熱鬧的，以一己之身，行走于此滾滾塵世，往往很難心靜如水。必得心無旁騖，方生冥冥之志。佛經(jīng)亦云：凡所有相，皆是虛妄，若見諸相非相，則見如來，也許人生亦該如此?！　”緯鴮懡o誰看　　本書是一本“從零學(xué)習(xí)”的HTML 5、CSS 3、JavaScript專業(yè)圖書，閱讀本書并不需要額外的基礎(chǔ)。對于剛剛從事前端開發(fā)的新人，本書具有很好的學(xué)習(xí)價值；對于有一定工作經(jīng)驗的前端工程師，本書具有很高的參考價值。本書也可作為高校、培訓(xùn)機(jī)構(gòu)的培訓(xùn)教材。由于本書是一本專業(yè)級的前端開發(fā)技術(shù)圖書，對于那些只想簡單了解HTML、CSS的業(yè)余人士，不推薦選擇本書?！　?012-3-10

內(nèi)容概要

　　HTML 5規(guī)范呼之欲出，各瀏覽器廠商更早已摩拳擦掌，紛紛推出支持HTML
5規(guī)范的瀏覽器：Firefox、Opera、Chrome等瀏覽器早已很好地支持各種HTML 5規(guī)范，微軟也宣布IE
9將會更好地支持CSS 3、SVG和HTML 5等新規(guī)范，這些跡象表明：HTML 5時代到來了。
　　《瘋狂HTML 5/CSS3/JavaScript講義》是一本全面介紹HTML 5、CSS
3和JavaScript前端開發(fā)技術(shù)的圖書，系統(tǒng)地介紹了HTML 5常用的元素和屬性、HTML 5的表單元素和屬性、HTML
5的繪圖支持、HTML 5的多媒體支持、CSS
3的功能和用法、最前沿的變形與動畫功能等。除此之外，本書還系統(tǒng)地介紹了JavaScript編程知識，包括JavaScript基本語法、DOM編程，以及HTML
5新增的本地存儲、離線應(yīng)用、JavaScript多線程、客戶端通信支持、WebSocket編程等。
　　《瘋狂HTML
5/CSS3/JavaScript講義》的定位是一本前端開發(fā)的“實戰(zhàn)性”圖書，因此在介紹各知識點時并不是簡單地停留在知識點層面闡述，而是結(jié)合了大量實例來讓讀者對照練習(xí)、學(xué)以致用。本書最后還提供了一個基于HTML
5技術(shù)的小游戲：瘋狂俄羅斯方塊。該游戲綜合運用了HTML
5的繪圖支持、客戶端存儲等技術(shù)，具有較高的參考價值。本書提供了配套的答疑網(wǎng)站，如果讀者在閱讀本書時遇到了技術(shù)問題，可以登錄瘋狂Java聯(lián)盟發(fā)帖，筆者將會及時予以解答。

書籍目錄

第一部分
第1章 HTML 5簡介
　1.1 HTML歷史與HTML 5
　　1.1.1 HTML發(fā)展歷史
　　1.1.2 HTML 4.01和XHTML
　　1.1.3 HTML和XHTML的文檔類型定義（DTD）
　　1.1.4 從XHTML到HTML 5
　1.2 HTML 5的優(yōu)勢
　　1.2.1 解決跨瀏覽器問題
　　1.2.2 部分代替了原來的JavaScript
　　1.2.3 更明確的語義支持
　　1.2.4 增強(qiáng)了Web應(yīng)用程序的功能
　1.3 HTML 5的基本結(jié)構(gòu)和語法變化
　　1.3.1 HTML 5基本結(jié)構(gòu)
　　1.3.2 HTML 5的語法變化
　1.4 本章小結(jié)
第2章　HTML 5的常用元素與屬性
　2.1 HTML 5保留的常用元素
　　2.1.1 基本元素
　　2.1.2 文本格式化元素
　　2.1.3 語義相關(guān)元素
　　2.1.4 超鏈接和錨點
　　2.1.5 列表相關(guān)元素
　　2.1.6 圖像相關(guān)元素
　　2.1.7 表格相關(guān)元素
　　2.1.8 框架相關(guān)元素
　2.2 HTML 5新增的通用屬性
　　2.2.1 contentEditable屬性
　　2.2.2 designMode屬性
　　2.2.3 hidden屬性
　　2.2.4 spellcheck屬性
　2.3 HTML 5新增的常用元素
　　2.3.1 文檔結(jié)構(gòu)元素
　　2.3.2 語義相關(guān)元素
　　2.3.3 兩個特殊功能的元素
　2.4 HTML 5頭部和元信息
　2.5 HTML 5新增的拖放API
　　2.5.1 啟動拖動
　　2.5.2 接受“放”
　　2.5.3 DataTransfer對象
　　2.5.4 拖放行為
　　2.5.5 改變拖放圖標(biāo)
　2.6 本章小結(jié)
第章　HTML 5表單相關(guān)元素和屬性
　　3.1 HTML原有的表單及表單控件
　　3.1.1 表單元素
　　3.1.2 使用input元素
　　3.1.3 使用label定義標(biāo)簽
　　3.1.4 使用button定義按鈕
　　3.1.5 列表框和下拉菜單
　　3.1.6 使用textarea定義文本域
　3.2 HTML 5新增的屬性與元素
　　3.2.1 HTML 5為表單控件新增的屬性
　　3.2.2 功能豐富的input元素
　　3.2.3 HTML 5新增的表單控件
　3.3 HTML 5增強(qiáng)的文件上傳域
　　3.3.1 FileList對象與File對象
　　3.3.2 使用FileReader讀取文件內(nèi)容
　3.4 HTML 5新增的客戶端校驗
　　3.4.1 使用校驗屬性執(zhí)行校驗
　　3.4.2 調(diào)用checkValidity方法進(jìn)行校驗
　　3.4.3 自定義錯誤提示
　　3.4.4 關(guān)閉校驗
　3.5 本章小結(jié)
第4章　HTML 5的繪圖支持
　4.1 使用canvas元素
　4.2 繪圖
　　4.2.1 canvas繪圖基礎(chǔ)：CanvasRenderingContext2D
　　4.2.2 繪制幾何圖形
　　4.2.3 繪制字符串
　　4.2.4 設(shè)置陰影
　　4.2.5 使用路徑
　　4.2.6 繪制曲線
　　4.2.7 繪制位圖
　4.3 圖形特效處理
　　4.3.1 使用坐標(biāo)變換
　　4.3.2 坐標(biāo)變換與路徑結(jié)合使用
　　4.3.3 使用矩陣變換
　4.4 控制疊加風(fēng)格
　4.5 控制填充風(fēng)格
　　4.5.1 線性漸變
　　4.5.2 圓形漸變
　　4.5.3 位圖填充
　4.6 位圖處理
　　4.6.1 位圖裁剪
　　4.6.2 像素處理
　4.7 輸出位圖
　4.8 本章小結(jié)
第5章　HTML 5的多媒體支持
　5.1 使用audio和video元素
　5.2 使用JavaScript腳本控制媒體播放
　　5.2.1 HTMLAudioElement與HTMLVideoElement支持的方法
　　5.2.2 HTMLAudioElement與HTMLVideoElement的屬性
　5.3 事件監(jiān)聽
　　5.3.1 事件
　　5.3.2 監(jiān)聽器
　5.4 本章小結(jié)
第二部分
第6章　級聯(lián)樣式單與CSS選擇器
　6.1 樣式單概述
　　6.1.1 CSS概述
　　6.1.2 CSS的發(fā)展歷史
　6.2 CSS樣式單的基本使用
　　6.2.1 引入外部樣式文件
　　6.2.2 導(dǎo)入外部樣式單
　　6.2.3 使用內(nèi)部CSS樣式
　　6.2.4 使用內(nèi)聯(lián)樣式
　6.3 CSS選擇器
　　6.3.1 元素選擇器
　　6.3.2 屬性選擇器
　　6.3.3 ID選擇器
　　6.3.4 class選擇器
　　6.3.5 包含選擇器
　　6.3.6 子選擇器
　　6.3.7 CSS 3新增的兄弟選擇器
　　6.3.8 選擇器組合
　6.4 偽元素選擇器
　　6.4.1 內(nèi)容相關(guān)的屬性
　　6.4.2 插入圖像
　　6.4.3 只插入部分元素
　　6.4.4 配合quotes屬性執(zhí)行插入
　　6.4.5 配合counter-increment屬性添加編號
　　6.4.6 使用自定義編號
　　6.4.7 添加多級編號
　6.5 CSS 3.0新增的偽類選擇器
　　6.5.1 結(jié)構(gòu)性偽類選擇器
　　6.5.2 UI元素狀態(tài)偽類選擇器
　　6.5.3 瀏覽器專屬的屬性
　　6.5.4 ：not和：target
　6.6 在腳本中修改顯示樣式
　　6.6.1 隨機(jī)改變頁面的背景色
　　6.6.2 動態(tài)增加立體效果
　6.7 本章小結(jié)
第7章　字體與文本相關(guān)屬性
　7.1 字體相關(guān)屬性
　　7.1.1 添加陰影
　　7.1.2 添加多個陰影
　　7.1.3 使用font-size-adjust屬性微調(diào)字體大小
　7.2 CSS 3支持的顏色表示方法
　7.3 文本相關(guān)屬性
　　7.3.1 文本自動換行：word-break
　　7.3.2 長單詞和URL地址換行
　7.4 CSS 3新增的服務(wù)器字體
　　7.4.1 使用服務(wù)器字體
　　7.4.2 定義粗體、斜體字
　　7.4.3 優(yōu)先使用客戶端字體
　7.5 本章小結(jié)
第8章　背景、邊框和補(bǔ)丁相關(guān)屬性
　8.1 背景相關(guān)屬性
　　8.1.1 背景圖片固定
　　8.1.2 CSS 3新增的背景相關(guān)屬性
　　8.1.3 CSS 3新增的多背景圖片
　8.2 邊框相關(guān)屬性
　　8.2.1 CSS 3提供的漸變邊框
　　8.2.2 CSS 3提供的圓角邊框
　　8.2.3 CSS 3提供的圖片邊框
　8.3 補(bǔ)丁相關(guān)屬性
　　8.3.1 內(nèi)補(bǔ)丁相關(guān)屬性
　　8.3.2 外補(bǔ)丁相關(guān)屬性
　8.4 本章小結(jié)
第9章　大小、定位、輪廓相關(guān)屬性
　9.1 大小相關(guān)屬性
　　9.1.1 CSS 3新增的box-sizing屬性
　　9.1.2 CSS 3新增的resize屬性
　9.2 定位相關(guān)屬性
　9.3 輪廓相關(guān)屬性
　9.4 本章小結(jié)
第10章　盒模型與布局相關(guān)屬性
　10.1 布局相關(guān)屬性
　　10.1.1 通過float屬性實現(xiàn)多欄布局
　　10.1.2 使用clear屬性實現(xiàn)換行
　　10.1.3 使用clip屬性控制裁剪
　　10.1.4 控制組件的滾動條
　10.2 盒模型和display屬性
　　10.2.1 兩種最基本的盒模型
　　10.2.2 none值
　　10.2.3 inline-block盒模型
　　10.2.4 inline-table盒模型
　　10.2.5 表格相關(guān)的盒模型
　　10.2.6 list-item盒模型
　　10.2.7 run-in盒模型
　10.3 對盒添加陰影
　　10.3.1 使用box-shadow屬性
　　10.3.2 對表格及單元格添加陰影
　10.4 CSS 3的多欄布局
　　10.4.1 CSS 3新增的分欄功能
　　10.4.2 使用盒模型實現(xiàn)多欄布局
　10.5 本章小結(jié)
第11章　表格、列表相關(guān)屬性及media query
　11.1 表格相關(guān)屬性
　11.2 列表相關(guān)屬性
　11.3 控制光標(biāo)的屬性
　11.4 media query功能
　　11.4.1 media query語法
　　11.4.2 針對瀏覽器寬度調(diào)整布局
　11.5 本章小結(jié)
第12章　變形與動畫相關(guān)屬性
　12.1 CSS 3提供的變形支持
　　12.1.1 4種基本變形
　　12.1.2 同時應(yīng)用多種變形
……

章節(jié)摘錄

版權(quán)頁：   插圖：    在上面這些表單控件中，單行文本框、密碼輸入框都用于接收用戶輸入，而隱藏域不能接收用戶輸入，也不能生成可視化部分，它用于提交額外的請求參數(shù)，請求參數(shù)的值就是該隱藏域的value屬性值，因此定義隱藏域的同時應(yīng)指定value屬性值。 單選框、復(fù)選框不能接收用戶輸入，因此定義它們時同時也會指定value屬性值，用于設(shè)置它們所對應(yīng)的請求參數(shù)值。對于單選框、復(fù)選框而言，當(dāng)它們被勾選后，它們才會生成對應(yīng)的請求參數(shù)。 文件上傳域會生成一個單行文本框和一個“瀏覽”按鈕，該文件上傳域允許用戶瀏覽本地磁盤文件，并將該文件上傳到服務(wù)器。 圖像域和提交按鈕的作用基本一樣，單擊它們都會導(dǎo)致表單被提交，區(qū)別是圖像域是一個圖像按鈕。 重設(shè)按鈕的作用是清空表單內(nèi)用戶的輸入，將表單內(nèi)所有表單控件的值恢復(fù)到初始狀態(tài)。 無動作按鈕，看它的名稱就知道，它只是一個按鈕，在默認(rèn)情況下，單擊該按鈕對表單不會有任何作用。通常我們可以為該鈕編寫JavaScript腳本來響應(yīng)它的單擊、雙擊等事件。

編輯推薦

《瘋狂軟件教育標(biāo)準(zhǔn)教材:瘋狂HTML 5/CSS 3/JavaScript講義》對HTML 5、CSS 3、JavaScript的介紹是“從零開始”的，因此閱讀《瘋狂軟件教育標(biāo)準(zhǔn)教材:瘋狂HTML 5/CSS 3/JavaScript講義》并不需要額外的基礎(chǔ)。對于剛剛從事前端開發(fā)的新人，《瘋狂軟件教育標(biāo)準(zhǔn)教材:瘋狂HTML 5/CSS 3/JavaScript講義》具有很好的學(xué)習(xí)價值；對于有一定工作經(jīng)驗的前端工程師，《瘋狂軟件教育標(biāo)準(zhǔn)教材:瘋狂HTML 5/CSS 3/JavaScript講義》具有很高的參考價值?！动偪褴浖逃龢?biāo)準(zhǔn)教材:瘋狂HTML 5/CSS 3/JavaScript講義》也可作為高校、培訓(xùn)機(jī)構(gòu)的培訓(xùn)教材。

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

    瘋狂HTML 5/CSS 3/JavaScript講義 PDF格式下載

---