- 對W3C標(biāo)準(zhǔn)，對表現(xiàn)與數(shù)據(jù)分離、Web語義化等有深刻理解
W3C是指萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）
W3C的標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。
因為網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。
所以W3C對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。
--
結(jié)構(gòu)標(biāo)準(zhǔn)語言
1.標(biāo)簽小寫，標(biāo)簽閉合。
2.元素嵌套標(biāo)準(zhǔn)，內(nèi)嵌元素不要嵌套塊元素，如：span嵌套div標(biāo)簽等；特殊的塊狀元素li內(nèi) p和 h1—h6里面不要放塊元素
3.結(jié)構(gòu)與表現(xiàn)分離；HTML與CSS避免內(nèi)嵌混合。
4.命名一定要規(guī)范；
--
表現(xiàn)標(biāo)準(zhǔn)語言
1.css的書寫，首先要盡可能使用外部引入的方式，達(dá)到分離的目的。
2.css的選擇器，屬性的繼承，優(yōu)先級等優(yōu)化簡潔代碼。
CSS都有哪些選擇器？
派生選擇器（用HTML標(biāo)簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴(kuò)展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優(yōu)先級是怎么樣定義的？
基本原則：
一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級就越高。
復(fù)雜的計算方法：
用1表示派生選擇器的優(yōu)先級
用10表示類選擇器的優(yōu)先級
用100標(biāo)示ID選擇器的優(yōu)先級
div.test1 .span var 優(yōu)先級 1+10 +10 +1
span#xxx .songs li 優(yōu)先級1+100 + 10 + 1
--
語義化
1.為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看；
2.用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用； 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
3.方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
4.便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。
常見的語義化標(biāo)簽：
<title>：頁面主體內(nèi)容。
<hn>：h1~h6，分級標(biāo)題，<h1> 與 <title> 協(xié)調(diào)有利于搜索引擎優(yōu)化。
<header>：頁眉通常包括網(wǎng)站標(biāo)志、主導(dǎo)航、全站鏈接以及搜索框。
<nav>：標(biāo)記導(dǎo)航，僅對文檔中重要的鏈接群使用。
<main>：頁面主要內(nèi)容，一個頁面只能使用一次。如果是web應(yīng)用，則包圍其主要功能。
<article>：定義外部的內(nèi)容，其中的內(nèi)容獨(dú)立于文檔的其余部分。
<section>：定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
<aside>：定義其所處內(nèi)容之外的內(nèi)容。如側(cè)欄、文章的一組鏈接、廣告、友情鏈接、相關(guān)產(chǎn)品列表等。
<footer>：頁腳，只有當(dāng)父級是body時，才是整個頁面的頁腳。
<address>：作者、相關(guān)人士或組織的聯(lián)系信息（電子郵件地址、指向聯(lián)系信息頁的鏈接）。
- html5新特性、css3屬性
html5新特性
1.新增的語義/結(jié)構(gòu)化標(biāo)簽
2.視頻video和音頻audio
3.Canvas繪圖，SVG繪圖
4.Web Storage
localStorage - 沒有時間限制的數(shù)據(jù)存儲
sessionStorage - 針對一個 session 的數(shù)據(jù)存儲, 當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。
5.WebSocket，WebSocket是HTML5開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
6.拖放API，拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
--
css3屬性
1.animation動畫效果，animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation: 名稱 完成耗時 過渡效果 延遲啟動 播放次數(shù) 輪流反向播放 fill-mode 指定動畫是否正在運(yùn)行或已暫停;
在animation后面加上infinite就可以無限循環(huán)
2.transform變換效果：
css3提供了元素變形效果，也叫做變換。它可以將元素實(shí)現(xiàn)旋轉(zhuǎn)、縮放和平移的功能。
3.transition過渡效果
過渡效果一般是通過一些簡單的 CSS 動作觸發(fā)平滑過渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 屬性來實(shí)現(xiàn)這個過渡功能。
4.css3新增屬性之text-shadow：文本陰影
5.css3新增屬性之border-image：圖片邊框
6.CSS3 盒子模型（flex）是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?br> 7.CSS3 漸變（Gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡
3.使用前端樣式預(yù)處理器如LESS、SASS、Stylus
樣式預(yù)處理器，簡單地來概括就是技術(shù)大牛通過一門新的語言，讓css的編寫具備各種變量和屬性，你按照它的語法寫好后，就能編譯，生成相應(yīng)的css文件。當(dāng)然這些處理器可以讓你的css更簡潔，易懂，具備更強(qiáng)的可移植性和維護(hù)性。
定義變量；我們可以把重復(fù)使用或經(jīng)常修改的值定義為變量，在需要使用的地方引用這個變量即可。這樣可以避免很多重復(fù)的工作量
2.使用嵌套；代碼嵌套了很多層，用 less 的嵌套語法來寫比較簡潔。
3.Mixin 的作用是把重復(fù)的代碼放到一個類當(dāng)中，每次只要引用類名，就可以引用到里面的代碼了，非常方便。
4.繼承
5.函數(shù)
