標籤：back 不同 標記 table nbsp name 瀏覽器 時鐘 3d立體
公司 |
部門 |
姓名 |
職位 |
分享內容 |
痛客夢工廠科技有限公司 |
技術部 |
張應欽 |
Web前端開發工程師 |
HTML5與CSS3 |
註：此文章詳見本人部落格檔案HTML5與CSS3.docx檔案
一、 HTML5
二、 CSS3
三、 jQuery與CSS3選取器（詳見PDF文檔）
註：部分執行個體見分享會檔案demo.html
1. 為什麼需要HTML5？
HTML4的陳舊不能滿足日益發展的互連網需要，特別是移動互連網。為了增強瀏覽器功能Flash被廣泛使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。HTML5增強了瀏覽器的原生功能，符合HTML5規範的瀏覽器功能將更加強大，減少了Web應用對外掛程式的依賴，讓使用者體驗更好，讓開發更加方便。
基礎知識：HTML+CSS+JavaScript與任何一種Web伺服器後台技（Java,dotNET,PHP)
2.什麼是HTML5？
HTML5指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要外掛程式的豐富性網路應用服務（Plug-in-Based Rich Internet Application，RIA）。HTML5是HTML最新版本，2014年10月29日，全球資訊網聯盟宣布，經過接近8年的艱苦努力，該標準規範終於制定完成。
3. HTML5現狀及瀏覽器支援。
大部分主流瀏覽器已經支援HTML5，但是各個瀏覽器支援的方式以及文法有所差異性。支援Html5的瀏覽器包括Firefox（Firefox瀏覽器），IE9及其更高版本，Chrome（Google瀏覽器），Safari（蘋果公司研發的網路瀏覽器），Opera等現代瀏覽器。
支援得分：
4. HTML5優點與缺點。
4.1、優點1、網路標準統一、HTML5本身是由W3C推薦出來的；
2、多裝置、跨平台；
3、即時更新；
4、提高可用性和改進使用者的友好體驗；
5、HTML5新增標籤，這將有助於開發人員定義重要的內容；
6、可以給網站帶來更多的多媒體元素(視頻和音頻)，可以很好的替代Flash和Silverlight；
7、涉及到網站的抓取和索引的時候，對於SEO很友好；
8、被大量應用於行動裝置 App程式和遊戲。
4.2、缺點
a)、安全：像之前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被駭客利用，來盜取使用者的資訊和資料；
b)、完善性：許多特性各瀏覽器的支援程度也不一樣；
c)、效能：某些平台上的引擎問題導致HTML5效能低下；
d、瀏覽器安全色性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。
5、HTML5文法規則與文檔聲明 1 、標籤要小寫
6、文檔聲明
<!DOCTYPE>聲明必須位於 HTML5 文檔中的第一行，也就是位於 <HTML> 標籤之前。該標籤告知瀏覽器文檔所使用的 HTML 規範。
doctype 聲明不屬於HTML 標籤，它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。
在所有 HTML 文檔中規定doctype 是非常重要的，這樣瀏覽器就能瞭解預期的文件類型。
HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，因此不需要對 DTD 進行引用。
例：
6、HTML5新增表單標籤
姓名：<input type="tel" name="text"></br></br>
郵箱：<input type="email"name="email"></br></br>
日期：<input type="date"name="date"></br></br>
時間：<input type="time"name="time"></br></br>
滑塊：<input type="range"name="range"></br></br>
個人首頁：<input type="url" name="url"></br></br>
<input type="submit" value="tijaio"name="btn">
例：分享會文：HTML5新增表單標籤.html
7、HTML5多媒體組件
html5多媒體組件指的是video(視頻)組件和audio(音頻)組件。HTML5多媒體組件可以在不藉助諸如Flash Player等第三方外掛程式的情況下，直接在你的網頁上嵌入多媒體組件。瀏覽器提供原生可使用視訊的新能力使得網頁開發人員更易於在不依賴於外置外掛程式有效性的情況下，在他們的網站上添加視頻組件。由於蘋果公司現階段在iPhone和iPad上使用的Flash技術的局限性，HTML5多媒體組件的能力就顯得尤為重要了。
例：分享會檔案CSS3:視頻、音頻.html
8、HTML5之canvas
1.HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製映像。
2.畫布是一個矩形地區，您可以控制其每一像素。
3.canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法。
例：分享會檔案CSS3:canvas萬花筒轉換.html 及時鐘.html
1.CSS3是什嗎？
CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製作時採用層疊樣式表技術，可以有效地對頁面的布局、字型、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝著模組化發展的。
2.CSS3transform---旋轉 animation ----動畫
旋轉：transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。
例：分享會檔案CSS3數字3D立體旋轉.html及3Dbanner輪播圖.html。
動畫：
1.動畫是使元素從一種樣式逐漸層化為另一種樣式的效果。
2.您可以改變任意多的樣式任意多的次數。
3.用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
4.0% 是動畫的開始，100% 是動畫的完成。
5.為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選取器。
例：分享會檔案CSS3動畫.html
3.CSS3字型：
例：分享會檔案CSS3字型表徵圖.html
4.CSS3表徵圖：
例：分享會檔案CSS3字型表徵圖.html
5.CSS圓角邊框：
通過 CSS3，能夠建立圓角邊框，向矩形添加陰影，使用圖片來繪製邊，不再需使用設計軟體，比如PhotoShop，來做這些效果，能夠很輕鬆的在頁 面當中做出圓角，陰影等效果
例：分享會檔案CSS3圓角.html（CSS3與Javascript圓角比較）。
6.CSS3綜合動畫：
7.附加：jQuery與CSS3選取器
jQuery選取器
基本選取器：
$(“#one”).css(“background“,”#bfa”); 改變id為one的元素背景色
$(“.one”).css(“background“,”#bfa”); 改變class為one的所有元素的背景色
$(“div”).css(“background“,”#bfa”);改變元素名是<div>的所有元素的背景色
$(“*”).css(“background“,”#bfa”);改變所有元素的背景色
$(“span,#two”).css(“background“,”#bfa); 改變所有span和two元素的背景色
層次選取器：
$(“div span”) 選取<div>裡所有的<span>元素
$(“div > span”); 選取<div>元素下元素名是<span>的子項目
$(“.one + div”);選取class為one的下一個<div>元素
$(“#two~div”);選取id 為two的元素後面的所有<div>元素
基本過濾選取器：
$(“div:first”).css(“background“,”#bfa”); 改變第一個<div>元素的背景
$(“div:last”).css(“background“,”#bfa”);改變最後一個<div>元素的背景
$(“div:not(.one)”).css(“background“,”#bfa”);改變.不為one的<div>元素的背景色
$(“div:even”).css(“background“,”#bfa”);改變索引值為偶數的<div>元素的背景
$(“div:odd”).css(“background“,”#bfa”);改變索引值為奇數的<div>元素的背景
$(“div:eq(3)”).css(“background“,”#bfa”);改變索引值為3的<div>元素的背景色
$(“div:gt(3)”).css(“background“,”#bfa”);改變索引值大於3的<div>元素背景色
$(“div:lt(3)”).css(“background“,”#bfa”);改變索引值小於3的<div>元素的背景色
$(“div:header”).css(“background“,”#bfa”);改變所有標題元素的背景色
$(“div:animated”).css(“background“,”#bfa”);改變當前正在執行動畫元素背景
內容過濾選取器：
$(“div:contains(di)”).css(“background”,”red”);改變含有文本”di”的div元素背景
$(“div:empty”).css(“background”,”red”);改變不包含子項目的<div>元素的背景
$(“div:has(mini)”).css(“background”,”red”);改變含有.為mini元素<div>元素背
$(“div:parent”).css(“background”,”red”);改變含有子項目<div>元素的背景色
可見度過濾選取器：
$(“div:visible”).css(“background”,”red”);改變所有可見的<div>元素的背景色
$(“div:hidden”).css(“background”,”red”);顯示隱藏的<div>元素
屬性過濾選取器：
$(“div[title]”).css(“background”,”red”);改變含有屬性title的<div>元素的背景色
$(“div[title=test]”).css(“background”,”red”);改變屬性x=x的<div>元素的背景色
$(“div:[title=test]”).css(“background”,”red”);改變屬性x!=x的<div>元素背景色
$(“div[title^=te]”).css(“background”,”red”);改變title以te開始<div>元素背景色
$(“div[title$=est]}”).css(“background”,”red”);改變title以est結束<div>元素背景
$(“div:[title*=es]”).css(“background”,”red”);改變title含有es的<div>元素背景
$(“div:[id][title*=es]”).css(“background”,”red”);改變含有屬性id，並且屬性title值含有es的<div>元素的背景色
子項目過濾選取器：
$(“div.one:nth-child(2)”).css(“background”,”red”);
//改變每個class為one的<div>父元素下的第二個子項目的背景色
$(“div.one:first-child”).css(“background”,”red”);
//改變每個class為one的<div>父元素下的第一個子項目的背景色
$(“div.one:last-child”).css(“background”,”red”);
//改變每個class為one的<div>父元素下的最後一個子項目都背景色
$(“div.one:only-child”).css(“background”,”red”);
//如果class為one的<div>父元素下只有一個子項目，那麼則改變這個子項目都背景色
表單選取器：
$(“:input”); 擷取所有<input><textarea><select>和<button>元素
$(“:text”); 擷取所有的單行文字框
$(“:password”);選取所有的密碼框
$(“radio”);選取所有的單選框
$(“checkbox”); 選取所有的複選框
$(“:submit”); 選取所有的提交按鈕
$(“image”); 選取所有的映像按鈕
$(“:reset”); 選取所有的重設按鈕
$(“button”); 選取所有的按鈕
$(“file”); 選取所有的上傳域
$(“hidden”); 在不可見度過濾選取器中講解
HTML5 與 CSS3 jQuery部分知識總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
