《泰牛程序員 韓順平 PHP 大牛班 HTML5 CSS3 完整筆記》由會員分享，可在線閱讀，更多相關(guān)《泰牛程序員 韓順平 PHP 大牛班 HTML5 CSS3 完整筆記（45頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、泰牛程序員 PHP 學(xué)院 htpp:/ 第 I 頁 HTML5 + CSS3第第 1 章章HTML5 介紹介紹.11.1基本介紹11.2H5 的學(xué)習(xí)網(wǎng)站11.3HTML5 的體驗案例-畫布11.4使用H5 開發(fā)一個播放器31.5HTML5 的特點41.6如果使用H5 來編寫網(wǎng)，那么DIV+CSS 的布局在標(biāo)簽顯示上，要修改51.7關(guān)于標(biāo)簽的說法71.8畫布的坐標(biāo)系和像素的概念說明81.9使用CANVAS來繪圖81.10一個綜合案例-鍵盤控制小球的移動111.11小球撞墻小游戲131.12學(xué)習(xí)HTML5 新增的屬性和INPUT 元素的屬性16泰牛程序員 PHP 學(xué)院 htpp:/ 第 1 頁 第

2、 1 章HTML5 介紹1.1基本介紹html5 成為互聯(lián)網(wǎng)的新的標(biāo)準(zhǔn)，取代 html4,xhtml，主要在原來的基礎(chǔ)增加了很多新的標(biāo)簽，廢除了一些不好的標(biāo)簽，增加了很多新的屬性，尤其是 input 元素增加了很多好的屬性 比如 type=email type=color type=date type=week type=month 等等.還有增加了一個強大的畫布 canvas1.2h5 的學(xué)習(xí)網(wǎng)站1.3html5 的體驗案例-畫布泰牛程序員 PHP 學(xué)院 htpp:/ 第 2 頁 畫布的坐標(biāo)系:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 3 頁 1.4使用 h5 開發(fā)一個播放器泰牛程序

3、員 PHP 學(xué)院 htpp:/ 第 4 頁 代碼:1.5html5 的特點1. 簡單2. 標(biāo)簽語義化, 比如 在 div+css =seo3 . 語法更加松散增加了強大的畫布標(biāo)簽泰牛程序員 PHP 學(xué)院 htpp:/ 第 5 頁 一些標(biāo)簽不再建議使用(比如: applet、font、basefont、center、dirs、strike、u 等)多設(shè)備跨平臺自適應(yīng)網(wǎng)頁設(shè)計,兼容性好1.6如果使用 h5 來編寫網(wǎng)，那么 div+css 的布局在標(biāo)簽顯示上，要修改div+csshtml5 的塊標(biāo)簽使用后泰牛程序員 PHP 學(xué)院 htpp:/ 第 6 頁 使用 h5 完成一個網(wǎng)頁的布局代碼:泰牛程序

4、員 PHP 學(xué)院 htpp:/ 第 7 頁 1.7關(guān)于標(biāo)簽的說法泰牛程序員 PHP 學(xué)院 htpp:/ 第 8 頁 說明:html5 的語法確實很松散.1.8畫布的坐標(biāo)系和像素的概念說明像素是一個密度單位。1.9使用 canvas 來繪圖泰牛程序員 PHP 學(xué)院 htpp:/ 第 9 頁 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 10 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 11 頁 課堂練習(xí):1.10 一個綜合案例-鍵盤控制小球的移動泰牛程序員 PHP 學(xué)院 htpp:/ 第 12 頁 思路1. 先得到這個畫布，然后畫出紅色的小球2. 編寫一個函數(shù)，可以處理按鍵的事件asdw

5、3. 可以移動這個小球泰牛程序員 PHP 學(xué)院 htpp:/ 第 13 頁 1.11 小球撞墻小游戲泰牛程序員 PHP 學(xué)院 htpp:/ 第 14 頁 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 15 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 16 頁 1.12 學(xué)習(xí) html5 新增的屬性和 input 元素的屬性代碼 ： input 元素新的屬性 ：泰牛程序員 PHP 學(xué)院 htpp:/ 第 17 頁 input 元素新增的屬性 inputline-height:28px;width:200px;margin-top: 3px;泰牛程序員 PHP 學(xué)院 htpp:/ 第 18

6、 頁 提交相關(guān)信息 電子郵件：輸入網(wǎng)址：出生日期：具體時間：出生月份：選擇星期：電話號碼：調(diào)節(jié)亮度：選擇顏色：請選地區(qū)：西城區(qū)東城區(qū)青羊區(qū)金牛區(qū)泰牛程序員 PHP 學(xué)院 htpp:/ 第 19 頁 選擇車型： 寶馬泰牛大眾 1.13 details,summary,mark 標(biāo)簽代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 20 頁 1.14 通用屬性 contenteditable, 和 hidden1.15 多媒體的標(biāo)簽 video 和 audio泰牛程序員 PHP 學(xué)院 htpp:/ 第 21 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 22 頁 第 2 章css32.1css3

7、 新增的選擇器2.2css3 新增的偽類選擇器泰牛程序員 PHP 學(xué)院 htpp:/ 第 23 頁 css2 我們學(xué)習(xí)的偽類 :link :hover :visited :active css3 的偽類選擇器案例代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 24 頁 新增的可以選擇 html 元素狀態(tài)的選擇器disable 元素被禁用 enable元素可以輸入 checked復(fù)選框某個被選中泰牛程序員 PHP 學(xué)院 htpp:/ 第 25 頁 css3 的新增偽類選擇器:before :after案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 26 頁 使用:after 和:bef

8、ore 完成一個實際應(yīng)用思路:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 27 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 28 頁 2.3表格顯示形式案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 29 頁 2.4border-radius使用這個屬性，可以對 html 元素實現(xiàn)圓角的效果，非常好.代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 30 頁 2.5box-shadow 屬性代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 31 頁 使用 css3 來繪制了一個手機泰牛程序員 PHP 學(xué)院 htpp:/ 第 32 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第

9、 33 頁 2.6使用 css3 的 transform 的屬性來實現(xiàn) div 在屏幕居中左右上下居中泰牛程序員 PHP 學(xué)院 htpp:/ 第 34 頁 思路:1. 先使用 div 的絕對定位,把 div 放到網(wǎng)頁2. 使用 css3 的 transform 來進(jìn)行 2d 的轉(zhuǎn)換代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 35 頁 2.72d 旋轉(zhuǎn)的效果 transform transform-origin把一個 div 以它的左上角為原點，進(jìn)行順時針旋轉(zhuǎn).代碼：泰牛程序員 PHP 學(xué)院 htpp:/ 第 36 頁 過渡效果 transition 和轉(zhuǎn)換效果(transform)混合使用泰牛程序員 PHP 學(xué)院 htpp:/ 第 37 頁 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 38 頁 2.8css3 的斜切效果代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 39 頁 做了一個小練習(xí):代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 40 頁 2.9圖片旋轉(zhuǎn)的效果泰牛程序員 PHP 學(xué)院 htpp:/ 第 41 頁 代碼:2.10 3d 的沿著 x 軸底部旋轉(zhuǎn)泰牛程序員 PHP 學(xué)院 htpp:/ 第 42 頁 代碼:2.11 盒子打開的效果泰牛程序員 PHP 學(xué)院 htpp:/ 第 43 頁 代碼：泰牛程序員 PHP 學(xué)院 htpp:/ 第 44 頁