HTML
1.標籤語義化的理解
去掉或丟失樣式的時候讓頁面顯示清晰的結構
有利於SEO，有利於爬蟲讀取有效信息，爬蟲依賴於標籤來確定上下文和各個關鍵字的權重
方便其它設備（屏幕閱讀器，盲人閱讀器，移動設備）解析渲染網頁
更便於開發和維護
2.Doctype作用? Doctype文檔類型？ 嚴格模式與混雜模式如何區分？它們有何意義?
DOCTYPE聲明在文檔最前面，告知瀏覽器以何種方式來渲染文檔
標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
嚴格模式的排版和js運作模式是以瀏覽器支持的最高標準運行
混雜模式，頁面向後兼容，模擬老式瀏覽器的行爲防止站點無法工作
DOCTYPE不存在或格式不正確會導致文檔已混雜模式顯示
3.HTML和XHTML的區別
XHTML必須正確的嵌套，元素必須被關閉，標籤名必須小寫，文檔必須有根元素
4.HTML5新特性
- HTML5不再是SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增加
- 添加語義化標籤，header,nav,footer,aside,article,section
添加視頻音頻API(audio,video) 畫布(Canvas) 地理(Geolocation) 拖拽釋放(Drag and drop) - 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失，- sessionStorage 的數據在 頁面會話結束時會被清除
- 添加了一些表單控件，calendar、date、time、email、url、search
添加新的技術webworker, websocket等
5.Iframe的優缺點
優點：能夠原封不動的把頁面顯示出來；可重用性高；方便修改；如果有加載緩慢的第三方內容，如 圖標廣告等適合用iframe
缺點：會產生很多頁面，不容易管理；兼容性差；會增加服務器的http請求，對於大型網站不可取
6.常用瀏覽器內核
- Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器
- Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
- Presto：Opera7及以上(Opera內核原爲：Presto，現爲：Blink)
- Webkit：Safari Chrome
7.cookies，sessionStorage和localStorage
共同點：都是保存在瀏覽器端，且是同源的
- Cookies主要用來標識用戶身份，由http攜帶在瀏覽器與服務器之間來回傳遞，其他兩個不會主動把數據發給服務器，只在本地保存
- cookie保存的數據不能超過4k，而sessionstorage和localstorage 可達到5M
- 數據的有效期不同。cookie可設置過期時間，過期之前一直有效，- sessionstorage瀏覽器關閉之前有效，localstorage一直有效，用來長久保存數據
- 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不同瀏覽器不共享；localstorage在所有同源窗口都是共享
8.get方式和post方式提交數據的區別
- 大小不同，get方式傳輸的數據量較小，而post可以傳輸大量的數據。
- post比get更安全
- post方式速度較慢，而get方式速度較快
- 在服務器上的作用不同，get是從服務器上獲取數據，而post是向服務器上傳送數據
9.HTML5的文件離線儲存怎麼使用，工作原理是什麼？
在線情況下，瀏覽器發現HTML頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問，那麼瀏覽器就會根據manifest文件的內容下載相應的資源，並進行離線存儲。如果已經訪問過並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面。然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不會做任何操作，如果文件改變了，那麼就會重新下載文件中的資源，並且進行離線存儲。
10.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麼
輸入url，瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，如果緩存裏有，直接顯示頁面內容；DNS解析，獲取相應的ip地址，瀏覽器向服務器發起tcp連接，進行三次握手；握手成功後，瀏覽器向服務器發送http請求，服務器處理請求，返回數據給瀏覽器；瀏覽器收到響應，讀取頁面內容，瀏覽器渲染，解析html源碼，生成dom樹，解析css樣式，js交互
CSS
1.標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin
2.box-sizing屬性
用來控制元素的盒子模型的解析模式，默認爲content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的 高/寬
3.清除浮動的方法
- 父級div定義僞類：after和zoom
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1} - 在結尾處添加空div標籤clear:both
- 父級div設定height
- 父級div定義overflow:hidden/auto
4.CSS選擇器
- 元素選擇器：* 、E、 E#id、 E.class
- 關係選擇器：E、F、E>F、E+F、E~F
- 屬性選擇器：E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]
- 僞類選擇器：E:link、E:visited、E:hover、E:active、E:focus、E:not(s)、E:root、E:first-child等
- 僞對象選擇器：E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
5.CSS僞類與CSS僞對象的區別
根本區別在於是否創造了新的元素
僞類一開始用來表示一些元素的動態狀態，隨後CSS2標準擴展了其概念範圍，使其成爲了所有邏輯 上存在但在文檔樹中卻無須標識的“幽靈”分類
僞對象表示某個元素的子元素，邏輯上存在但實際上不存在在dom樹中
6.CSS的權重規則
一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/僞類選擇器+10，一個元素名/僞對象選 擇器+1。關係選擇器將拆分爲兩個選擇器再計算.
7.CSS中 link 和@import 的區別
- Link屬於HTML標籤，@import是css提供的，只能用來加載css
- 頁面加載時link會同時加載，@import引用的css會在頁面加載完加載
- Link沒有兼容問題
- Link的權重高於@import
- 當使用js控制 DOM 去改變樣式的時候，只能使用 link 方式
8.px、em、rem的區別
- px是固定單位，不會跟着頁面大小改變，em和rem是相對長度單位，適用於響應式佈局
- em是相對於父元素來設置字體大小的，一般是以body的font-size爲基準
- rem是相對於根元素html，只需要在根元素確定一個參考值
9. CSS3有哪些新特性
CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient）， 變形（transform）增加了更多的CSS選擇器 多背景 rgba，在CSS3中唯一引入的僞元素是::selection， 媒體查詢，多欄佈局
10.CSS sprites原理，優缺點
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的 “background-image”，“background- repeat”，“background-position”的組合進行背景定位，
background-position可以用數字精確的定位出背景圖片的位置。
優點：減少網頁的http請求，減少圖片的字節，方便更換風格
缺點：在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；要確 定精確位置，不易修改
11.瀏覽器兼容性有哪些？如何解決？
- 瀏覽器默認的margin和padding不同
- IE6雙邊距bug
- 在ie6，ie7中元素高度超出自己設置高度，原因是IE8以前的瀏覽器中會給元素設置默認的行高的高度導致的
- min-height在IE6下不起作用
- input邊框問題
- 圖片默認有間距（解決使用float屬性爲img佈局）
12.css屬性content有什麼作用？有什麼應用？
css的content屬性專門應用在 before/after 僞元素上，用於來插入生成內容。
可以配合自定義字體顯示特殊符號。
13. rgba()和opacity的透明效果有什麼不同？
opacity作用於元素，以及元素內的所有內容的透明度，rgba()只作用於元素的顏色或其背景色。
設置rgba透明的元素的子元素不會繼承透明效果！
14.Flex佈局
- flex-direction: row | row-reverse | column | column-reverse;(排列方向，是否倒序)
- flex-wrap: nowrap | wrap | wrap-reverse;（是否換行）
- flex-flow: flex-direction || flex-wrap;
- justify-content: flex-start | flex-end | center | space-between | space-around;（水平對齊方式）
- align-items: flex-start | flex-end | center | baseline | stretch;（豎直對齊方式）
15.聖盃佈局 雙飛翼佈局
用flex 實現聖盃佈局display:flex; Flex:1;
16.Less
Less （Leaner Style Sheets 的縮寫） 是一門向後兼容的 CSS 擴展語言。
Less主要語法：
- 變量 @width：10px
- 嵌套
- 混合（Mixins）
- 運算 特例calc()
- 轉義
- 函數 less內置了多種函數用於轉換顏色、處理字符串、算術運算等。
- 作用域
- 導入
- 映射
17.Sass Scss
Sass 是一款強化 CSS 的輔助工具，SCSS 是 Sass 3 引入新的語法
區別：Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。SCSS 對空白符號不敏感
Sass 主要語法：
- 變量 $color：#ccc
- 嵌套 嵌套僞類:通過"&"實現 在父級嵌套中，使用“&”引用父級
- 混合 @mixin定義 @include 使用
- 函數 自帶內部函數和自定義函數 @function
- 繼承擴展 @extend
- 導入 @import
- 運算
18.Less和sass的異同
相同：二者在語法上有共性
- 變量
- 混合(Mixins)
- 嵌套
- 運算
- 顏色功能
- 作用域
不同：
- Less是基於JavaScript，是在客戶端處理的。Sass是基於Ruby的，是在服務器端處理的。
- Less用@聲明變量，Sass用$聲明變量。
- Sass支持條件語句，可以使用if{}else{},for{}循環等等，而Less不支持。
- Sass功能相比於less更加強大