HTML5 與 CSS3 jQuery部分知識總結【轉】

時間 2019-11-08

標籤 html5 html css3 css jquery 部分知識總結欄目 HTML5 简体版

原文原文鏈接

1、 HTML5css

爲何須要HTML5
什麼是HTML5
HTML5現狀及瀏覽器支持
HTML5優勢與缺點
HTML5語法規則與文檔聲明
HTML5新增表達標籤
HTML5多媒體組件
HTML5之canvas

2、 CSS3html

CSS3簡介
CSS3有什麼（邊框、圓角、背景、漸變、文本效果、字體、2D轉換、3D轉換、過渡、動畫、多列、用戶界面、圖片、按鈕、分頁、框大小、彈性盒子、多媒體查詢）

3、 jQuery與CSS3選擇器（詳見PDF文檔）html5

注：部分實例見分享會文件demo.htmlweb

1. 爲何須要HTML5？canvas

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現狀及瀏覽器支持。socket

大部分主流瀏覽器已經支持HTML5，可是各個瀏覽器支持的方式以及語法有所差別性。支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari（蘋果公司研發的網絡瀏覽器），Opera等現代瀏覽器。

支持得分：

4. HTML5優勢與缺點。

4.一、優勢

一、網絡標準統1、HTML5自己是由W3C推薦出來的；
二、多設備、跨平臺；
三、即時更新；
四、提升可用性和改進用戶的友好體驗；
五、HTML5新增標籤，這將有助於開發人員定義重要的內容；
六、能夠給站點帶來更多的多媒體元素(視頻和音頻)，能夠很好的替代Flash和Silverlight；
七、涉及到網站的抓取和索引的時候，對於SEO很友好；
八、被大量應用於移動應用程序和遊戲。

4.二、缺點

a)、安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料；
b)、完善性：許多特性各瀏覽器的支持程度也不同；
c)、性能：某些平臺上的引擎問題致使HTML5性能低下；
d、瀏覽器兼容性：最大缺點，IE9如下瀏覽器幾乎全軍覆沒。

五、HTML5語法規則與文檔聲明

1、標籤要小寫
2、能夠省略某些標籤
       如：HTML body head tbody
3、能夠省略某些結束標籤
       如：tr td li
4、單標籤不用加結束標籤
       如：img input
5、廢除的標籤，看第二點
        如：font center big

六、文檔聲明

<!DOCTYPE> 聲明必須位於 HTML5 文檔中的第一行，也就是位於 <HTML> 標籤以前。該標籤告知瀏覽器文檔所使用的 HTML 規範。
doctype 聲明不屬於 HTML 標籤，它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。
在全部 HTML 文檔中規定 doctype 是很是重要的，這樣瀏覽器就能瞭解預期的文檔類型。
HTML 4.01 中的 doctype 須要對 DTD 進行引用，由於 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，所以不須要對 DTD 進行引用。

例：

六、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>

例：分享會文：HTML5新增表單標籤.html

七、HTML5多媒體組件

html5多媒體組件指的是video(視頻)組件和audio(音頻)組件。HTML5多媒體組件能夠在不借助諸如Flash Player等第三方插件的狀況下，直接在你的網頁上嵌入多媒體組件。瀏覽器提供原生支持視頻的新能力使得網頁開發人員更易於在不依賴於外置插件有效性的狀況下，在他們的網站上添加視頻組件。因爲蘋果公司現階段在iPhone和iPad上使用的Flash技術的侷限性，HTML5多媒體組件的能力就顯得尤其重要了。

例：分享會文件CSS3:視頻、音頻.html

八、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」); 在不可見性過濾選擇器中講解

轉載自：http://www.cnblogs.com/zhangyingqin/p/6150397.html

相關標籤/搜索

知識總結

jquery+html5+css3+canvas

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。