HTML5發(fā)展史
HTML5草案的前身名為 Web Applications 1.0涕侈，于2004年被WHATWG提出沪停，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。
? HTML 5 的第一份正式草案已于2008年1月22日公布木张。HTML5 仍處于完善之中众辨。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持舷礼。
? 2012年12月17日鹃彻，萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石妻献≈胫辏”
? 2013年5月6日， HTML 5.1正式草案公布育拨。該規(guī)范定義了第五次重大版本谨履，第一次要修訂萬(wàn)維網(wǎng)的核心語(yǔ)言：超文本標(biāo)記語(yǔ)言（HTML）。在這個(gè)版本中熬丧，新功能不斷推出笋粟，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性析蝴。
? 本次草案的發(fā)布害捕，從2012年12月27日至今，進(jìn)行了多達(dá)近百項(xiàng)的修改闷畸，包括HTML和XHTML的標(biāo)簽尝盼，相關(guān)的API、Canvas等佑菩，同時(shí)HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)东涡，性能得到進(jìn)一步提升
兼容
支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本倘待，Chrome（谷歌瀏覽器），Safari组贺，Opera等凸舵；國(guó)內(nèi)的 遨游瀏覽器（Maxthon）弄企，以及基于IE或Chromium（Chrome的工程版或稱實(shí)驗(yàn)版）所推出的360瀏覽器台丛、搜狗瀏覽器、QQ瀏覽器收叶、獵豹 瀏覽器等國(guó)產(chǎn)瀏覽器同樣具備支持HTML5的能力掀潮。
語(yǔ)法
-
內(nèi)容類型（ContentType）
- HTML5的文件擴(kuò)展符與內(nèi)容類型保持不變菇夸，仍然為".html"或".htm"
-
DOCTYPE聲明
- <!DOCTYPE html>不區(qū)分大小寫
指定字符集編碼
<meta charset="UTF-8">
-
可省略標(biāo)記的元素
- 不允許寫結(jié)束標(biāo)記的元素：br、col仪吧、embed庄新、hr、img、input择诈、械蹋、link、meta
-
可以省略結(jié)束標(biāo)記的元素：
- li羞芍、dt哗戈、dd、p荷科、option唯咬、colgroup、thead畏浆、tbody胆胰、tfoot、tr全度、td煮剧、th
可以省略全部標(biāo)記的元素：html、head将鸵、body勉盅、colgroup、tbody
屬性值可以使用雙引號(hào)顶掉，也可以使用單引號(hào)草娜。
語(yǔ)義化標(biāo)簽
在HTML 5出來之前，我們用div來表示頁(yè)面章節(jié)痒筒，但是這些div都沒有實(shí)際意義宰闰。（即使我們用css樣式的id和class形容這塊內(nèi)容的意義）。這些標(biāo)簽只是我們提供給瀏覽器的指令簿透，只是定義一個(gè)網(wǎng)頁(yè)的某些部分移袍。但現(xiàn)在，那些之前沒“意義”的標(biāo)簽因?yàn)橐驗(yàn)閔tml5的出現(xiàn)消失了老充，這就是我們平時(shí)說的“語(yǔ)義”葡盗。
- section元素 表示頁(yè)面中的一個(gè)區(qū)塊
- article元素 表示一塊與上下文無關(guān)的獨(dú)立的內(nèi)容
- aside元素 在article之外的，與article內(nèi)容相關(guān)的輔助信息
- header元素 表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的標(biāo)題
- footer元素 表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的腳注
- nav元素 表示頁(yè)面中導(dǎo)航鏈接部分
- figure元素 表示一段獨(dú)立的內(nèi)容啡浊，使用figcaption元素為其添加標(biāo)題(第一個(gè)或最后一個(gè)子元素的位置)
- main元素 表示頁(yè)面中的主要的內(nèi)容(ie不兼容)
- hgroup標(biāo)題的一個(gè)分組
- mark定義高亮顯示的文本(span)ccs
- time時(shí)間
- dialog標(biāo)記定義一個(gè)對(duì)話框(會(huì)話框)類似微信
多媒體標(biāo)簽
<video src=""></video>
<audio src=""></audio>
-
屬性
- controls屬性：如果出現(xiàn)該屬性觅够，則向用戶顯示控件，比如播放按鈕巷嚣。
- autoplay屬性：如果出現(xiàn)該屬性喘先，則視頻在就緒后馬上播放。
- loop屬性：重復(fù)播放屬性廷粒。
- muted屬性：靜音屬性窘拯。
- poster屬性：規(guī)定視頻正在下載時(shí)顯示的圖像红且，直到用戶點(diǎn)擊播放按鈕。
source
<source> 標(biāo)簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源树枫。
<source> 標(biāo)簽允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇直焙。
Type屬性值：
用于視頻：video/ogg video/mp4 video/webm
用于音頻：audio/ogg audio/mpeg
HTML5表單
- 新增type類型
Type=“email” 限制用戶必須輸入email類型
Type=“url” 限制用戶必須輸入url類型
Type=“range” 產(chǎn)生一個(gè)滑動(dòng)條表單
Type=“number” 限制用戶必須輸入數(shù)字
Type=“search” 產(chǎn)生一個(gè)搜索意義的表單
Type=“color” 生成一個(gè)顏色選擇的表單
Type=“time” 限制用戶必須輸入時(shí)間類型
Type=“month” 限制用戶必須輸入月類型
Type=“week” 限制用戶必須輸入周類型
Type=“datetime-local” 選取本地時(shí)間
type=”date” - 新增表單屬性
required 監(jiān)測(cè)是否為空。
min 最小
max 最大
step 步幅 確定一個(gè)法定值砂轻。 -3 0 3 6 9
list 必須結(jié)合datalist標(biāo)簽奔誓，綁定datalist id名稱。
autocomplete 是否自動(dòng)提示信息 屬性值 on off
placeholder 文本框的提示信息
autofocus 自動(dòng)聚焦搔涝。一個(gè)頁(yè)面只能由一個(gè)厨喂。
pattern 后面的屬性值是一個(gè)正則表達(dá)式。
novalidate 取消驗(yàn)證
multiple 選擇（上傳）多個(gè) - 新增表單標(biāo)簽
output
<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input id="a" type="range" min="0" max="100">100+
<input id="b" type="text" value="50">=
<output name="x" for="a b"></output>
</form>
datalist 必須和list屬性結(jié)合使用庄呈。做提示信息蜕煌。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
CSS3
CSS3是css技術(shù)的升級(jí)版本，CSS3語(yǔ)言開發(fā)是朝著模塊化發(fā)展的诬留。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜斜纪，所以，把它分解為一些小的模塊文兑，更多新的模塊也被加入進(jìn)來盒刚。這些模塊包括： 盒子模型、列表模塊绿贞、超鏈接方式 因块、語(yǔ)言模塊 、背景和邊框 籍铁、文字特效 涡上、多欄布局等。
css3的優(yōu)點(diǎn)：CSS3將完全向后兼容拒名，所以沒有必要修改現(xiàn)在的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作吩愧。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。對(duì)我們來說增显，CSS3主要的影響是將可以使用新的可用的選擇器和屬性雁佳，這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡(jiǎn)單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說使用分欄）
漸進(jìn)增強(qiáng)
漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面甸怕，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果腮恩、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
從小到大
優(yōu)雅降級(jí)
優(yōu)雅降級(jí) Graceful Degradation：一開始就構(gòu)建站點(diǎn)的完整功能梢杭，然后針對(duì)瀏覽器測(cè)試和修復(fù)。比如一開始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用秸滴，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽武契。
從大到小
漸進(jìn)增強(qiáng) & 優(yōu)雅降級(jí)
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非持渌簦基礎(chǔ)的届垫，能夠起作用的版本開始，并不斷擴(kuò)充全释，以適應(yīng)未來環(huán)境的需要装处。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看浸船，同時(shí)保證其根基處于安全地帶妄迁。
CSS3選擇符
- 屬性選擇器
1、E[attr]：只使用屬性名李命，但沒有確定任何屬性值
2登淘、E[attr=“value”]：指定屬性名，并指定了該屬性的屬性值
3封字、E[attr~=“value”]：指定屬性名黔州，并且具有屬性值，此屬性值是一個(gè)詞列表阔籽，并且以空格隔開流妻，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“?”必須的
4仿耽、E[attr^=“value”]：指定了屬性名合冀，并且有屬性值，屬性值是以value開頭的
5项贺、E[attr$=“value”]：指定了屬性名君躺，并且有屬性值，而且屬性值是以value結(jié)束的
6开缎、E[attr*=“value”]：指定了屬性名棕叫，并且有屬性值，而且屬值中包含了value - 7奕删、E[attr|=“value”]：指定了屬性名俺泣，并且屬性值僅是value或者以“value-”開頭的值（比如說left-con）
偽類選擇器
- 結(jié)構(gòu)性偽類選擇器
X:first-child 匹配子集的第一個(gè)元素。IE7就可以支持
X:last-child匹配父元素中最后一個(gè)X元素
X:nth-child(n)用于匹配索引值為n的子元素完残。索引值從0開始
X:only-child這個(gè)偽類一般用的比較少伏钠，比如上述代碼匹配的是div下的有且僅有一個(gè)的p，也就是說谨设，如果div內(nèi)有多個(gè)p熟掂，將不匹配。
X:nth-last-child(n)從最后一個(gè)開始算索引扎拣。
**X:first-of-type**匹配同級(jí)兄弟元素中的第一個(gè)X元素
**X:last-of-type**匹配同級(jí)兄弟元素中的最后一個(gè)X元素
**X:nth-of-type(n)**匹配同類型中的第n個(gè)同級(jí)兄弟元素X
**X:only-of-type**匹配屬于同類型中唯一兄弟元素的X
**X:nth-last-of-type(n)** 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素X
**:root**匹配文檔的根元素赴肚。在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）中素跺，根元素永遠(yuǎn)是HTML
**X:empty**匹配沒有任何子元素（包括包含文本）的元素X
目標(biāo)偽類
目標(biāo)偽類選擇器
E:target 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向
UI 元素狀態(tài)偽類選擇器
E:enabled
匹配所有用戶界面（form表單）中處于可用狀態(tài)的E元素
E:disabled
匹配所有用戶界面（form表單）中處于不可用狀態(tài)的E元素
E:checked
匹配所有用戶界面（form表單）中處于選中狀態(tài)的元素E
E::selection
匹配E元素中被用戶選中或處于高亮狀態(tài)的部分-
動(dòng)態(tài)偽類選擇器
E:link
鏈接偽類選擇器
選擇匹配的E元素誉券，而且匹配元素被定義了超鏈接并未被訪問過指厌。常用于鏈接描點(diǎn)上
E:visited
鏈接偽類選擇器
選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過踊跟。常用于鏈接描點(diǎn)上E:hover
用戶行為選擇器
選擇匹配的E元素踩验，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hoverE:active
用戶行為選擇器
選擇匹配的E元素琴锭，且匹配元素被激活晰甚。常用于鏈接描點(diǎn)和按鈕上E:focus
用戶行為選擇器
選擇匹配的E元素，而且匹配元素獲取焦點(diǎn)
- 層級(jí)選擇器
E>F
子選擇器
選擇匹配的F元素决帖，且匹配的F元素所匹配的E元素的子元素
E+F
相鄰兄弟選擇器
選擇匹配的F元素厕九，且匹配的F元素緊位于匹配的E元素的后面
E~F
通用選擇器
選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
CSS3屬性
文本陰影屬性
- text-shadow
- 說明：水平地回、垂直陰影的位置允許負(fù)值
可進(jìn)行多陰影設(shè)置(逗號(hào)分隔的方式)
文本換行
Word-wrap
屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句扁远，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。
屬性值：
normal
說明：只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）
break-word
說明：屬性允許長(zhǎng)單詞或 URL 地址換行到下一行
Word-break
屬性值：
break-all
說明：它斷句的方式非常粗暴刻像，它不會(huì)嘗試把長(zhǎng)單詞挪到下一行畅买，而是直接進(jìn)行單詞內(nèi)的斷句
Keep-all
說明：文本不會(huì)換行，只能在半角空格或連字符處換行
@font-face
@font-face是CSS3中的一個(gè)模塊细睡，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁(yè)中谷羞，隨著@font-face模塊的出現(xiàn)，我們?cè)赪eb的開發(fā)中使用字體不怕只能使用Web安全字體（@font-face這個(gè)功能早在IE4就支持）
@font-face的語(yǔ)法規(guī)則:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][, []]*;
[font-weight: <weight>];
[font-style: <style>];
}
iconfont字體圖標(biāo)庫(kù)的使用
背景屬性
Background-origin 背景原點(diǎn)
說明：指定background-origin屬性應(yīng)該是相對(duì)位置
屬性值
padding-box 背景圖像填充框的相對(duì)位置 默認(rèn)值
border-box 背景圖像邊界框的相對(duì)位置
content-box 背景圖像的相對(duì)位置的內(nèi)容框
Background-clip 背景裁切
說明：background-clip 屬性規(guī)定背景的繪制區(qū)域溜徙。
屬性值
border-box 背景被裁剪到邊框盒湃缎。
padding-box 背景被裁剪到內(nèi)邊距框。
content-box 背景被裁剪到內(nèi)容框蠢壹。 默認(rèn)值
Background-size 背景尺寸
說明：background-size 規(guī)定背景圖像的尺寸
屬性值
length (10px)
規(guī)定背景圖的大小嗓违。第一個(gè)值寬度，第二個(gè)值高度图贸。
Percentage(%)
以百分比為值設(shè)置背景圖大小
cover
把背景圖像擴(kuò)展至足夠大蹂季，以使背景圖像完全覆蓋背景區(qū)域
contain
把圖像圖像擴(kuò)展至最大尺寸，以使其寬度或高度完全適應(yīng)內(nèi)容區(qū)域疏日。
css3多背景圖的設(shè)置
eg：background:url(),url()
顏色模式
1偿洁、rgba 顏色模式
2、 Hsl 顏色模式（了解）
3沟优、 Hsla 顏色模式（了解）
就是色調(diào)(Hue)涕滋、飽和度(Saturation)、亮度(Lightness)三個(gè)顏色通道的改變以及它們相互之間的疊加來獲得各種顏色净神，色調(diào)(Hue)色調(diào)最大值360何吝，飽和度和亮度有百分比表示0-100%之間。
圖片邊框
圖片邊框
border-image 屬性是一個(gè)簡(jiǎn)寫屬性鹃唯，用于設(shè)置以下屬性:
border-image-source 用在邊框的圖片的路徑爱榕。
border-image-slice 圖片邊框向內(nèi)偏移(不加單位)。
border-image-repeat 圖像邊框是否應(yīng)平鋪(repeat)坡慌、鋪滿(round)或拉伸(stretch)
border-image-outset 邊框圖像區(qū)域超出邊框的量(值是一個(gè)倍數(shù))
CSS圓角
Border-radius
-
border-radius: 5px 10px 20px 50px
image.png -
border-radius: 2em/1em
image.png -
border-radius:10px 20px 30px 40px/40px 30px 20px 10px
image.png
盒子陰影
box-shadow 盒子陰影
h-shadow 必需的黔酥。水平陰影的位置。允許負(fù)值
v-shadow 必需的洪橘。垂直陰影的位置跪者。允許負(fù)值
blur 可選。模糊距離
spread 可選熄求。陰影的大小
color 可選渣玲。陰影的顏色。
inset 可選弟晚。從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影
box-shadow: 10px 10px 5px 10px #888888 inset;
- box-shadow: 10px 10px 5px 10px #888888 inset;
css3 calc()方法詳解
什么是calc()?
學(xué)習(xí)calc()之前忘衍，我們有必要先知道calc()是什么？只有知道了他是個(gè)什么東東卿城？在實(shí)際運(yùn)用中更好的使用他枚钓。
calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫瑟押，是css3的一個(gè)新增的功能搀捷，用來指定元素的長(zhǎng)度。比如說多望，你可以使用calc()給元素的border嫩舟、margin、pading便斥、font-size和width等屬性設(shè)置動(dòng)態(tài)值至壤。為何說是動(dòng)態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上枢纠，可以通過calc()計(jì)算得到元素的寬度像街。
calc()能做什么？
calc()能讓你給元素的做計(jì)算晋渺，你可以給一個(gè)div元素镰绎，使用百分比、em木西、px和rem單位值計(jì)算出其寬度或者高度畴栖，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少八千，而把這個(gè)煩人的任務(wù)交由瀏覽器去計(jì)算吗讶。
calc()語(yǔ)法
calc()語(yǔ)法非常簡(jiǎn)單燎猛，就像我們小時(shí)候?qū)W加 （+）、減（-）照皆、乘（*）重绷、除（/）一樣，使用數(shù)學(xué)表達(dá)式來表示：
.elm {
width: calc(expression);
}
其中"expression"是一個(gè)表達(dá)式膜毁，用來計(jì)算長(zhǎng)度的表達(dá)式昭卓。
calc()的運(yùn)算規(guī)則
calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：
使用“+”瘟滨、“-”候醒、“*” 和 “/”四則運(yùn)算；
可以使用百分比杂瘸、px倒淫、em、rem等單位败玉；
可以混合使用各種單位進(jìn)行計(jì)算昌简；
表達(dá)式中有“+”和“-”時(shí)，其前后必須要有空格绒怨，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯(cuò)誤的纯赎；
表達(dá)式中有“*”和“/”時(shí)，其前后可以沒有空格南蹂，但建議留有空格犬金。
瀏覽器的兼容性
瀏覽器對(duì)calc()的兼容性還算不錯(cuò)，在IE9+六剥、FF4.0+晚顷、Chrome19+、Safari6+都得到較好支持疗疟，同樣需要在其前面加上各瀏覽器廠商的識(shí)別符该默，不過可惜的是，移動(dòng)端的瀏覽器還沒僅有“firefox for android 14.0”支持策彤，其他的全軍覆沒栓袖。
大家在實(shí)際使用時(shí)，同樣需要添加瀏覽器的前綴
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
pointer-events：none;
阻止用戶的點(diǎn)擊動(dòng)作產(chǎn)生任何效果
阻止缺省鼠標(biāo)指針的顯示
阻止CSS里的 hover 和 active 狀態(tài)的變化觸發(fā)事件
阻止JavaScript點(diǎn)擊動(dòng)作觸發(fā)的事件
提交頁(yè)面店诗，提交按鈕點(diǎn)擊后裹刮，添加這個(gè)樣式屬性（style="pointer-events"），來防止重復(fù)提交庞瘸。
一些層的絕對(duì)定位捧弃，覆蓋按鈕，穿透可以點(diǎn)擊它。
