《泰牛程序員 韓順平 PHP 大牛班 HTML5 CSS3 完整筆記》由會(huì)員分享，可在線閱讀，更多相關(guān)《泰牛程序員 韓順平 PHP 大牛班 HTML5 CSS3 完整筆記（45頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、泰牛程序員 PHP 學(xué)院 htpp:/ 第 I 頁(yè) HTML5 + CSS3第第 1 章章HTML5 介紹介紹.11.1基本介紹11.2H5 的學(xué)習(xí)網(wǎng)站11.3HTML5 的體驗(yàn)案例-畫(huà)布11.4使用H5 開(kāi)發(fā)一個(gè)播放器31.5HTML5 的特點(diǎn)41.6如果使用H5 來(lái)編寫(xiě)網(wǎng)，那么DIV+CSS 的布局在標(biāo)簽顯示上，要修改51.7關(guān)于標(biāo)簽的說(shuō)法71.8畫(huà)布的坐標(biāo)系和像素的概念說(shuō)明81.9使用CANVAS來(lái)繪圖81.10一個(gè)綜合案例-鍵盤控制小球的移動(dòng)111.11小球撞墻小游戲131.12學(xué)習(xí)HTML5 新增的屬性和INPUT 元素的屬性16泰牛程序員 PHP 學(xué)院 htpp:/ 第 1 頁(yè) 第
2、 1 章HTML5 介紹1.1基本介紹html5 成為互聯(lián)網(wǎng)的新的標(biāo)準(zhǔn)，取代 html4,xhtml，主要在原來(lái)的基礎(chǔ)增加了很多新的標(biāo)簽，廢除了一些不好的標(biāo)簽，增加了很多新的屬性，尤其是 input 元素增加了很多好的屬性 比如 type=email type=color type=date type=week type=month 等等.還有增加了一個(gè)強(qiáng)大的畫(huà)布 canvas1.2h5 的學(xué)習(xí)網(wǎng)站1.3html5 的體驗(yàn)案例-畫(huà)布泰牛程序員 PHP 學(xué)院 htpp:/ 第 2 頁(yè) 畫(huà)布的坐標(biāo)系:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 3 頁(yè) 1.4使用 h5 開(kāi)發(fā)一個(gè)播放器泰牛程序
3、員 PHP 學(xué)院 htpp:/ 第 4 頁(yè) 代碼:1.5html5 的特點(diǎn)1. 簡(jiǎn)單2. 標(biāo)簽語(yǔ)義化, 比如 在 div+css =seo3 . 語(yǔ)法更加松散增加了強(qiáng)大的畫(huà)布標(biāo)簽泰牛程序員 PHP 學(xué)院 htpp:/ 第 5 頁(yè) 一些標(biāo)簽不再建議使用(比如: applet、font、basefont、center、dirs、strike、u 等)多設(shè)備跨平臺(tái)自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì),兼容性好1.6如果使用 h5 來(lái)編寫(xiě)網(wǎng)，那么 div+css 的布局在標(biāo)簽顯示上，要修改div+csshtml5 的塊標(biāo)簽使用后泰牛程序員 PHP 學(xué)院 htpp:/ 第 6 頁(yè) 使用 h5 完成一個(gè)網(wǎng)頁(yè)的布局代碼:泰牛程序
4、員 PHP 學(xué)院 htpp:/ 第 7 頁(yè) 1.7關(guān)于標(biāo)簽的說(shuō)法泰牛程序員 PHP 學(xué)院 htpp:/ 第 8 頁(yè) 說(shuō)明:html5 的語(yǔ)法確實(shí)很松散.1.8畫(huà)布的坐標(biāo)系和像素的概念說(shuō)明像素是一個(gè)密度單位。1.9使用 canvas 來(lái)繪圖泰牛程序員 PHP 學(xué)院 htpp:/ 第 9 頁(yè) 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 10 頁(yè) 泰牛程序員 PHP 學(xué)院 htpp:/ 第 11 頁(yè) 課堂練習(xí):1.10 一個(gè)綜合案例-鍵盤控制小球的移動(dòng)泰牛程序員 PHP 學(xué)院 htpp:/ 第 12 頁(yè) 思路1. 先得到這個(gè)畫(huà)布，然后畫(huà)出紅色的小球2. 編寫(xiě)一個(gè)函數(shù)，可以處理按鍵的事件asdw
5、3. 可以移動(dòng)這個(gè)小球泰牛程序員 PHP 學(xué)院 htpp:/ 第 13 頁(yè) 1.11 小球撞墻小游戲泰牛程序員 PHP 學(xué)院 htpp:/ 第 14 頁(yè) 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 15 頁(yè) 泰牛程序員 PHP 學(xué)院 htpp:/ 第 16 頁(yè) 1.12 學(xué)習(xí) html5 新增的屬性和 input 元素的屬性代碼 ： input 元素新的屬性 ：泰牛程序員 PHP 學(xué)院 htpp:/ 第 17 頁(yè) input 元素新增的屬性 inputline-height:28px;width:200px;margin-top: 3px;泰牛程序員 PHP 學(xué)院 htpp:/ 第 18
6、 頁(yè) 提交相關(guān)信息 電子郵件：輸入網(wǎng)址：出生日期：具體時(shí)間：出生月份：選擇星期：電話號(hào)碼：調(diào)節(jié)亮度：選擇顏色：請(qǐng)選地區(qū)：西城區(qū)東城區(qū)青羊區(qū)金牛區(qū)泰牛程序員 PHP 學(xué)院 htpp:/ 第 19 頁(yè) 選擇車型： 寶馬泰牛大眾 1.13 details,summary,mark 標(biāo)簽代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 20 頁(yè) 1.14 通用屬性 contenteditable, 和 hidden1.15 多媒體的標(biāo)簽 video 和 audio泰牛程序員 PHP 學(xué)院 htpp:/ 第 21 頁(yè) 泰牛程序員 PHP 學(xué)院 htpp:/ 第 22 頁(yè) 第 2 章css32.1css3
7、 新增的選擇器2.2css3 新增的偽類選擇器泰牛程序員 PHP 學(xué)院 htpp:/ 第 23 頁(yè) css2 我們學(xué)習(xí)的偽類 :link :hover :visited :active css3 的偽類選擇器案例代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 24 頁(yè) 新增的可以選擇 html 元素狀態(tài)的選擇器disable 元素被禁用 enable元素可以輸入 checked復(fù)選框某個(gè)被選中泰牛程序員 PHP 學(xué)院 htpp:/ 第 25 頁(yè) css3 的新增偽類選擇器:before :after案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 26 頁(yè) 使用:after 和:bef
8、ore 完成一個(gè)實(shí)際應(yīng)用思路:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 27 頁(yè) 泰牛程序員 PHP 學(xué)院 htpp:/ 第 28 頁(yè) 2.3表格顯示形式案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 29 頁(yè) 2.4border-radius使用這個(gè)屬性，可以對(duì) html 元素實(shí)現(xiàn)圓角的效果，非常好.代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 30 頁(yè) 2.5box-shadow 屬性代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 31 頁(yè) 使用 css3 來(lái)繪制了一個(gè)手機(jī)泰牛程序員 PHP 學(xué)院 htpp:/ 第 32 頁(yè) 泰牛程序員 PHP 學(xué)院 htpp:/ 第
9、 33 頁(yè) 2.6使用 css3 的 transform 的屬性來(lái)實(shí)現(xiàn) div 在屏幕居中左右上下居中泰牛程序員 PHP 學(xué)院 htpp:/ 第 34 頁(yè) 思路:1. 先使用 div 的絕對(duì)定位,把 div 放到網(wǎng)頁(yè)2. 使用 css3 的 transform 來(lái)進(jìn)行 2d 的轉(zhuǎn)換代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 35 頁(yè) 2.72d 旋轉(zhuǎn)的效果 transform transform-origin把一個(gè) div 以它的左上角為原點(diǎn)，進(jìn)行順時(shí)針旋轉(zhuǎn).代碼：泰牛程序員 PHP 學(xué)院 htpp:/ 第 36 頁(yè) 過(guò)渡效果 transition 和轉(zhuǎn)換效果(transform)混合使用泰牛程序員 PHP 學(xué)院 htpp:/ 第 37 頁(yè) 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 38 頁(yè) 2.8css3 的斜切效果代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 39 頁(yè) 做了一個(gè)小練習(xí):代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 40 頁(yè) 2.9圖片旋轉(zhuǎn)的效果泰牛程序員 PHP 學(xué)院 htpp:/ 第 41 頁(yè) 代碼:2.10 3d 的沿著 x 軸底部旋轉(zhuǎn)泰牛程序員 PHP 學(xué)院 htpp:/ 第 42 頁(yè) 代碼:2.11 盒子打開(kāi)的效果泰牛程序員 PHP 學(xué)院 htpp:/ 第 43 頁(yè) 代碼：泰牛程序員 PHP 學(xué)院 htpp:/ 第 44 頁(yè)
泰牛程序員 韓順平 PHP 大牛班 HTML5 CSS3 完整筆記
