2017前端校招
百度前端招聘基本要求：
首先肯定是前端基礎知識紮實（html、css、js），這個你從網上搜一些前端面試題，問的基本都是差不多的。
css：
選擇器、屬性都瞭解，常用佈局能夠實現就可以了。
js：
比較複雜，可能會問js本身相關的，比如閉包、變數提升之類，也可能會問瀏覽器相關，包括但不限於事件冒泡、捕獲、事件委託、監聽者模式、正則表示式、ajax、跨域問題、模組化等等。
第二就是演算法方面，瞭解基本的資料結構樹圖堆疊啥的、常用演算法。
第三就是計算機的基礎知識，資料庫、作業系統、網路協議，問這些就是保證你在本科時學的課程你學懂了，證明你的學習能力是沒問題的。
第四是server端的語言，java、php或node，可以不用精通，瞭解就好。
第五是目前流行的js框架、css預處理語言、ui框架、持續整合腳手架等，如果有了解的話會比較好，包括但不限於(jQuery、react，vue，Angular、less、sass、bootstrap、webpack、gulp、grunt、fis、等)。
一般面試差不多就是這些方面。你寒假要是學習的話，可以先找些面試題看一看，哪方面不足看哪方面，另外可以自己搭建個網站，最好能部署到線上，或者git上有開源專案，寫在簡歷上，人家收到你簡歷時就可以看到，看起來會比較好。
面試常考知識點：
瀏覽器頁面有哪三層構成，分別是什麼，作用是什麼?
構成：結構層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。
CSS Sprites原理：
CSSSprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出
HTML5的優點與缺點？
優點： a、網路標準統一、HTML5本身是由W3C推薦出來的。
b、多裝置、跨平臺
c、即時更新。
d、提高可用性和改進使用者的友好體驗；
e、有幾個新的標籤，這將有助於開發人員定義重要的內容；
f、可以給站點帶來更多的多媒體元素(視訊和音訊)；
g、可以很好的替代Flash和Silverlight；
h、涉及到網站的抓取和索引的時候，對於SEO很友好；
i、被大量應用於移動應用程式和遊戲。
缺點： a、安全：像之前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取使用者的資訊和資料。
b、完善性：許多特性各瀏覽器的支援程度也不一樣。
c、技術門檻：HTML5簡化開發者工作的同時代表了有許多新的屬性和API需要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
d、效能：某些平臺上的引擎問題導致HTML5效能低下。
e、瀏覽器相容性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。
Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
回答1： （1）、 宣告位於文件中的最前面，處於標籤之前。告知瀏覽器的解析器，用什麼文件型別 規範來解析這個文件。
（2）、嚴格模式的排版和JS 運作模式是以該瀏覽器支援的最高標準執行。
（3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 （4）、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
回答2： doctype宣告指出閱讀程式應該用什麼規則集來解釋文件中的標記。在Web文件的情況下，“閱讀程式”通常是瀏覽器或者校驗器這樣的一個程式，“規則”則是W3C所釋出的一個文件型別定義（DTD）中包含的規則。
(1) 宣告位於文件中的最前面的位置，處於標籤之前。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的HTML 文件。
(2)所謂的標準模式是指，瀏覽器按 W3C 標準解析執行程式碼；怪異模式則是使用瀏覽器自己的方式解析執行程式碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。嚴格模式是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如
。嚴格模式的排版和JS 運作模式是以該瀏覽器支援的最高標準執行混雜模式則是一種向後相容的解析方法，說的透明點就是可以實現IE5.5以下版本瀏覽器的渲染模式。
(3)瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的 DTD 宣告直接相關， DTD 宣告定義了標準文件的型別（標準模式解析）文件型別，會使瀏覽器使用相應的方式載入網頁並顯示，忽略 DTD 宣告 ,將使網頁進入怪異模式。
HTML5有哪些新特性、移除了哪些元素？
Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規範，把 HTML5 的元素按優先順序定義為結構性屬性、級塊性元素、行內語義性元素和互動性元素 4 大類。
結構性元素主要負責web上下文結構的定義
section：在 web 頁面應用中，該元素也可以用於區域的章節描述。
header：頁面主體上的頭部，header 元素往往在一對 body 元素中。
footer：頁面的底部（頁尾），通常會標出網站的相關資訊。
nav：專門用於選單導航、連結導航的元素，是 navigator 的縮寫。
article：用於表現一篇文章的主體內容，一般為文字集中顯示的區域。
級塊性元素主要完成web頁面區域的劃分，確保內容的有效分割。
aside：用於表達註記、貼士、側欄、摘要、插入的引用等作為補充主體的內容。
figure：是對多個元素進行組合並展示的元素，通常與 ficaption 聯合使用。
code：表示一段程式碼塊。
dialog：用於表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素， dt 用於表示說話者，而 dd 用來表示說話內容。
行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展示的基礎。
meter：表示特定範圍內的數值，可用於工資、數量、百分比等。
time：表示時間值。
progress：用來表示進度條，可通過對其 max 、 min 、 step 等屬性進行控制，完成對進度的表示和監事。
video：視訊元素，用於支援和實現視訊檔案的直接播放，支援緩衝預載和多種視訊媒體格式。
audio：音訊元素，用於支援和實現音訊檔案的直接播放，支援緩衝預載和多種音訊媒體格式。
互動性元素主要用於功能性的內容表達，會有一定的內容和資料的關聯，是各種事件的基礎。
details：用來表示一段具體的內容，但是內容預設可能不顯示，通過某種手段（如單擊）與 legend 互動才會顯示出來。
datagrid：用來控制客戶端資料與顯示，可以由動態指令碼及時更新。
menu：主要用於互動選單（曾被廢棄又被重新啟用的元素）。
command：用來處理命令按鈕。
你做的網頁在哪些流覽器測試過,這些瀏覽器的核心分別是什麼?
a、 IE: trident核心
b、 Firefox ： gecko 核心
c、Safari:webkit 核心
d、 Opera: 以前是 presto 核心， Opera 現已改用 GoogleChrome 的 Blink 核心
e、 Chrome:Blink(基於 webkit ， Google 與 Opera Software 共同開發 )
每個HTML檔案裡開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
宣告位於文件中的最前面的位置，處於標籤之前。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
說說你對HTML5認識?（是什麼,為什麼）
是什麼：
HTML5指的是包括 HTML 、 CSS 和 JavaScript 在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要外掛的豐富性網路應用服務（ Plug-in-Based Rich Internet Application ， RIA ），例如：AdobeFlash 、 Microsoft Silverlight 與 Oracle JavaFX 的需求，並且提供更多能有效加強網路應用的標準集。 HTML5 是 HTML 最新版本， 2014 年 10 月由全球資訊網聯盟（ W3C ）完成標準制定。目標是替換 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標準，以期能在網際網路應用迅速發展的時候，使網路標準達到匹配當代的網路需求。
為什麼：
HTML4陳舊不能滿足日益發展的網際網路需要，特別是移動網際網路。為了增強瀏覽器功能 Flash 被廣泛使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸控、不開放）。
HTML5增強了瀏覽器的原生功能，符合 HTML5 規範的瀏覽器功能將更加強大，減少了 Web 應用對外掛的依賴，讓使用者體驗更好，讓開發更加方便，另外 W3C 從推出 HTML4.0 到 5.0 之間共經歷了 17 年， HTML 的變化很小，這並不符合一個好產品的演進規則。
對WEB標準以及W3C的理解與認識?
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和 js 指令碼、結構行為表現的分離、
檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，
容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性。
HTML5行內元素有哪些,塊級元素有哪些, 空元素有哪些?
(1)行內元素
a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體 ( 不推薦 )
* bdo - bidioverride
* big - 大字型
* br - 換行
* cite - 引用
* code - 計算機程式碼 ( 在引用原始碼的時候需要 )
* dfn - 定義欄位
* em - 強調
* font - 字型設定 ( 不推薦 )
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文字
* label - 表格標籤
* q - 短引用
* s - 中劃線 ( 不推薦 )
* samp - 定義範例計算機程式碼
* select - 專案選擇
* small - 小字型文字
* span - 常用內聯容器，定義文字內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文字輸入框
* tt - 電傳文字
* u - 下劃線
* var - 定義變數
(2)塊元素 (blockelement)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是 csslayout 的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 互動表單
* h3 - 大標題
* h4 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - inputprompt
* menu - 選單列表
* noframes -frames可選內容，（對於不支援 frame 的瀏覽器顯示此區塊內容
* noscript - ）可選指令碼內容（對於不支援script 的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文字
* table - 表格
* ul - 非排序列表
可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
* applet - javaapplet
* button - 按鈕
* del - 刪除文字
* iframe - inlineframe
* ins - 插入的文字
* map - 圖片區塊 (map)
* object - object物件
* script - 客戶端指令碼
(3)空元素 ( 在 HTML[1] 元素中，沒有內容的HTML 元素被稱為空元素 )
<br/> //換行
<hr> //分隔線
<input> //文字框等
<img> //圖片
<link><meta>
什麼是WebGL,它有什麼優點?
WebGL（全寫 WebGraphics Library ）是一種 3D 繪圖標準，這種繪圖技術標準允許把 JavaScript 和 OpenGL ES 2.0 結合在一起，通過增加 OpenGL ES 2.0 的一個 JavaScript 繫結， WebGL 可以為 HTML5 Canvas 提供硬體 3D 加速渲染，這樣 Web 開發人員就可以藉助系統顯示卡來在瀏覽器裡更流暢地展示 3D 場景和模型了，還能建立複雜的導航和資料視覺化。顯然， WebGL 技術標準免去了開發網頁專用渲染外掛的麻煩，可被用於建立具有複雜 3D 結構的網站頁面，甚至可以用來設計 3D 網頁遊戲等等。
WebGL完美地解決了現有的 Web互動式三維動畫的兩個問題：
第一，它通過HTML指令碼本身實現 Web 互動式三維動畫的製作，無需任何瀏覽器外掛支援 ;
第二，它利用底層的圖形硬體加速功能進行的圖形渲染，是通過統一的、標準的、跨平臺的OpenGL介面實現的。
通俗說WebGL中 canvas 繪圖中的 3D 版本。因為原生的WebGL 很複雜，我們經常會使用一些三方的庫，如 three.js 等，這些庫多數用於 HTML5 遊戲開發。
請你描述一下 cookies，sessionStorage和 localStorage 的區別?
sessionStorage 和 localStorage是 HTML5 Web Storage API 提供的，可以方便的在 web 請求之間儲存資料。有了本地資料，就可以避免資料在瀏覽器和伺服器間不必要地來回傳遞。
sessionStorage、localStorage 、 cookie 都是在瀏覽器端儲存的資料，其中 sessionStorage 的概念很特別，引入了一個“瀏覽器視窗”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始終存在的資料。也就是說只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後， sessionStorage 即被銷燬。同時“獨立”開啟的不同視窗，即使是同一頁面， sessionStorage 物件也是不同的
cookies會發送到伺服器端。其餘兩個不會。
Microsoft 指出 InternetExplorer 8 增加 cookie 限制為每個域名 50 個，但 IE7 似乎也允許每個域名 50 個 cookie 。 Firefox 每個域名 cookie 限制為 50 個。 Opera 每個域名 cookie 限制為 30 個。 Firefox 和 Safari 允許 cookie 多達 4097 個位元組，包括名（ name ）、值（ value ）和等號。 Opera 許 cookie 多達 4096 個位元組，包括：名（ name ）、值（ value ）和等號。 Internet Explorer 允許 cookie 多達 4095 個位元組，包括：名（ name ）、值（ value ）和等號。
區別：
- Cookie
+ 每個域名儲存量比較小（各瀏覽器不同，大致 4K ）
+ 所有域名的儲存量有限制（各瀏覽器不同，大致 4K ）
+ 有個數限制（各瀏覽器不同）
+ 會隨請求傳送到伺服器
- LocalStorage
+ 永久儲存
+ 單個域名儲存量比較大（推薦5MB ，各瀏覽器不同）
+ 總體數量無限制
- SessionStorage
+ 只在 Session 內有效
+ 儲存量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
說說你對HTML語義化的理解?
(1)什麼是 HTML 語義化？
<基本上都是圍繞著幾個主要的標籤，像標題（ H1~H6 ）、列表（ li ）、強調（ strong em ）等等 >
根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。
(2)為什麼要語義化？
為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構 : 為了裸奔時好看；
使用者體驗：例如title、 alt 用於解釋名詞或解釋圖片資訊、 label 標籤的活用；
有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
(3) 語義化標籤
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article>SM:用來在頁面中表示一套結構完整且獨立的內容部分
<aslde></aside>SM:主題的附屬資訊 ( 用途很廣，主要就是一個附屬內容 ) ，如果 article 裡面為一篇文章的話，那麼文章的作者以及資訊內容就是這篇文章的附屬內容了
<figure></figure>SM:媒體元素，比如一些視訊，圖片啊等等
<datalist></datalist>
SM:選項列表，與 input 元素配合使用，來定義input 可能的值
<details></details>
SM:用於描述文件或者文件某個部分的細節 ~ 預設屬性為 open~
ps:配合 summary 一起使用
link和@import的區別?
XML/HTML程式碼
<link rel='stylesheet'rev='stylesheet' href='CSS檔案 ' type='text/css' media='all' />
XML/HTML程式碼
<styletype='text/css' media='screen'>
@import url('CSS檔案 ');
</style>
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1： link 是 XHTML 標籤，除了載入 CSS 外，還可以定義 RSS 等其他事務；@import 屬於 CSS 範疇，只能載入 CSS 。
區別2： link 引用 CSS 時，在頁面載入時同時載入；@import 需要頁面網頁完全載入以後載入。
區別3： link 是 XHTML 標籤，無相容問題；@import 是在 CSS2.1 提出的，低版本的瀏覽器不支援。
區別4： ink 支援使用Javascript 控制 DOM 去改變樣式；而 @import 不支援。
說說你對SVG理解?
SVG可縮放向量圖形（Scalable Vector Graphics ）是基於可擴充套件標記語言（ XML ），用於描述二維向量圖形的一種圖形格式。 SVG 是 W3C('World Wide Web ConSortium' 即 ' 國際網際網路標準組織 ') 在 2000 年 8 月制定的一種新的二維向量圖形格式，也是規範中的網路向量圖形標準。 SVG 嚴格遵從 XML 語法，並用文字格式的描述性語言來描述影象內容，因此是一種和影象解析度無關的向量圖形格式。 SVG 於 2003 年 1 月 14 日成為 W3C 推薦標準。
特點：
(1)任意放縮
使用者可以任意縮放影象顯示，而不會破壞影象的清晰度、細節等。
(2)文字獨立
SVG影象中的文字獨立於影象，文字保留可編輯和可搜尋的狀態。也不會再有字型的限制，使用者系統即使沒有安裝某一字型，也會看到和他們製作時完全相同的畫面。
(3)較小檔案
總體來講，SVG檔案比那些 GIF 和 JPEG 格式的檔案要小很多，因而下載也很快。
(4)超強顯示效果
SVG影象在螢幕上總是邊緣清晰，它的清晰度適合任何螢幕解析度和列印解析度。
(5)超級顏色控制
SVG影象提供一個 1600 萬種顏色的調色盤，支援ICC 顏色描述檔案標準、 RGB 、線 X 填充、漸變和蒙版。
(6)互動 X 和智慧化。 SVG 面臨的主要問題一個是如何和已經佔有重要市場份額的向量圖形格式 Flash 競爭的問題，另一個問題就是 SVG 的本地執行環境下的廠家支援程度。
瀏覽器支援：
Internet Explorer9，火狐，谷歌 Chrome， Opera 和 Safari 都支援 SVG 。
IE8和早期版本都需要一個外掛- 如 Adobe SVG 瀏覽器，這是免費提供的。
HTML全域性屬性(globalattribute)有哪些?
參考資料：MDN: html globalattribute或者W3C HTML global-attributes accesskey:設定快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift+ a可啟用元素 class:為元素設定類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素 contenteditable: 指定元素內容是否可編輯 contextmenu: 自定義滑鼠右鍵彈出選單內容 data-*: 為元素增加自定義屬性 dir: 設定元素文字方向 draggable: 設定元素是否可拖拽 dropzone: 設定元素拖放型別： copy, move, link hidden: 表示一個元素是否與文件。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果 id: 元素id，文件內唯一 lang: 元素內容的的語言 spellcheck: 是否啟動拼寫和語法檢查 style: 行內css樣式 tabindex: 設定元素可以獲得焦點，通過tab可以導航 title: 元素相關的建議資訊 translate: 元素和子孫節點內容是否需要本地化
說說超連結target屬性的取值和作用？
target這個屬性指定所連結的頁面在瀏覽器視窗中的開啟方式。
它的引數值主要有：
a、 _blank ：在新瀏覽器視窗中開啟連結檔案
b、 _parent ：將連結的檔案載入含有該連結框架的父框架集或父視窗中。如果含有該連結的框架不是巢狀的，則在瀏覽器全屏視窗中載入連結的檔案，就象 _self 引數一。
c、 _self ：在同一框架或視窗中開啟所連結的文件。此引數為預設值，通常不用指定。但是我不太理解。
d、 _top ：在當前的整個瀏覽器視窗中開啟所連結的文件，因而會刪除所有框架。
`data-`屬性的作用是什麼？
`data-`為前端開發者提供自定義的屬性，這些屬性集可以通過物件的 `dataset` 屬性獲取，不支援該屬性的瀏覽器可以通過 `getAttribute` 方法獲取 :
需要注意的是：`data-`之後的以連字元分割的多個單片語成的屬性，獲取的時候使用駝峰風格。並不是所有的瀏覽器都支援 .`dataset` 屬性，測試的瀏覽器中只有 Chrome 和 Opera 支援。
即：當沒有合適的屬性和元素時，自定義的data 屬性是能夠儲存頁面或 App 的私有的自定義資料。
介紹一下你對瀏覽器核心的理解？
主要分成兩部分：渲染引擎(layoutengineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：負責取得網頁的內容（HTML、 XML 、影象等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript 來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。
常見的瀏覽器核心有哪些？
1.
Trident核心：IE,MaxThon,TT,The World,360, 搜狗瀏覽器等。 [ 又稱 MSHTML]
2.
Gecko核心： Netscape6及以上版本， FF,MozillaSuite/SeaMonkey 等
3.
Presto核心： Opera7 及以上。 [Opera 核心原為： Presto ，現為： Blink;]
4.
Webkit核心：Safari,Chrome 等。 [ Chrome 的： Blink （ WebKit 的分支） ]
iframe有那些缺點？
*iframe會阻塞主頁面的Onload 事件；
*搜尋引擎的檢索程式無法解讀這種頁面，不利於 SEO;
*iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用 iframe ，最好是通過 javascript
動態給iframe新增 src 屬性值，這樣可以繞開以上兩個問題。
Label的作用是什麼，是怎麼用的？
label標籤來定義表單控制間的關係, 當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。
<labelfor='Name'>Number:</label>
<input type=“text “ name='Name' id='Name'/>
<label>Date:<inputtype='text' name='B'/></label>
如何實現瀏覽器內多個標籤頁之間的通訊?
WebSocket、SharedWorker ；
也可以呼叫localstorge、 cookies 等本地儲存方式；
localstorge另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面資訊通訊；
注意quirks： Safari 在無痕模式下設定localstorge 值時會丟擲 QuotaExceededError 的異常；
如何在頁面上實現一個圓形的可點選區域？
a、 map+area 或者 svg
b、border-radius
c、純 js 實現 需要求一個點在不在圓上簡單演算法、獲取滑鼠座標等等
title與h3的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題， H1 則表示層次明確的標題，對頁面資訊的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時： <strong> 會重讀，而 <B> 是展示強調內容。
i內容展示為斜體， em 表示強調的文字；
Physical StyleElements -- 自然樣式標籤
b, i, u, s, pre
Semantic StyleElements -- 語義樣式標籤
strong, em, ins,del, code
應該準確使用語義樣式標籤, 但不能濫用 , 如果不能確定時首選使用自然樣式標籤。
實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果？
view sourceprint?
<divstyle='height:1px;overflow:hidden;background:red'></div>
HTML5標籤的作用?(用途)
a、使Web頁面的內容更加有序和規範
b、使搜尋引擎更加容易按照HTML5規則識別出有效的內容
c、使Web頁面更接近於一種資料欄位和表
簡述一下src與href的區別？
src用於替換當前元素，href 用於在當前文件和引用資源之間確立聯絡。
src是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求 src 資源時會將其指向的資源下載並應用到文件內，例如 js 指令碼， img 圖片和 frame 等元素。
<script src='js.js'></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
href是 HypertextReference 的縮寫，指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，如果我們在文件中新增
<linkhref='common.css' rel='stylesheet'/>
那麼瀏覽器會識別該文件為css檔案，就會並行下載資源並且不會停止對當前文件的處理。這也是為什麼建議使用 link 方式來載入 css ，而不是使用 @import 方式。
談談你對canvas的理解？
canvas是HTML5中新增一個HTML5標籤與操作canvas的javascriptAPI，它可以實現在網頁中完成動態的2D與3D影象技術。標記和 SVG以及 VML 之間的一個重要的不同是，有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文件來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。 canvas可以完成動畫、遊戲、圖表、影象處理等原來需要Flash完成的一些功能。
WebSocket與訊息推送？
B/S架構的系統多使用HTTP協議，
HTTP協議的特點： 1 無狀態協議 2 用於通過 Internet傳送請求訊息和響應訊息 3 使用埠接收和傳送訊息，預設為80埠底層通訊還是使用Socket完成。
HTTP協議決定了伺服器與客戶端之間的連線方式，無法直接實現訊息推送（ F5 已壞） , 一些變相的解決辦法：
雙向通訊與訊息推送
輪詢：客戶端定時向伺服器傳送Ajax請求，伺服器接到請求後馬上返回響應資訊並關閉連線。
優點：後端程式編寫比較容易。
缺點：請求中有大半是無用，浪費頻寬和伺服器資源。
例項：適於小型應用。
長輪詢：客戶端向伺服器傳送Ajax請求，伺服器接到請求後hold 住連線，直到有新訊息才返回響應資訊並關閉連線，客戶端處理完響應資訊後再向伺服器傳送新的請求。
優點：在無訊息的情況下不會頻繁的請求，耗費資小。
缺點：伺服器hold連線會消耗資源，返回資料順序無保證，難於管理維護。 Comet 非同步的 ashx ，
例項：WebQQ、 Hi 網頁版、 FacebookIM 。
長連線：在頁面裡嵌入一個隱蔵iframe，將這個隱蔵 iframe的 src 屬性設為對一個長連線的請求或是採用 xhr 請求，伺服器端就能源源不斷地往客戶端輸入資料。
優點：訊息即時到達，不發無用請求；管理起來也相對便。
缺點：伺服器維護一個長連線會增加開銷。
例項：Gmail聊天
Flash Socket：在頁面中內嵌入一個使用了Socket 類的 Flash 程式 JavaScript 通過呼叫此 Flash 程式提供的 Socket 介面與伺服器端的 Socket 介面進行通訊， JavaScript 在收到伺服器端傳送的資訊後控制頁面的顯示。
優點：實現真正的即時通訊，而不是偽即時。
缺點：客戶端必須安裝Flash外掛；非 HTTP 協議，無法自動穿越防火牆。
例項：網路互動遊戲。
Websocket:
WebSocket是 HTML5 開始提供的一種瀏覽器與伺服器間進行全雙工通訊的網路技術。依靠這種技術可以實現客戶端和伺服器端的長連線，雙向實時通訊。
特點:
a、事件驅動
b、非同步
c、使用 ws 或者 wss 協議的客戶端 socket
d、能夠實現真正意義上的推送功能
缺點：少部分瀏覽器不支援，瀏覽器支援的程度與方式有區別。
img的title和alt有什麼區別？
·Alt 用於圖片無法載入時顯示Title 為該屬性提供資訊，通常當滑鼠滑動到元素上的時候顯示
表單的基本組成部分有哪些，表單的主要用途是什麼？
組成：表單標籤、表單域、表單按鈕
a、表單標籤：這裡麵包含了處理表單資料所用 CGI 程式的 URL, 以及資料提交到伺服器的方法。
b、表單域：包含了文字框、密碼框、隱藏域、多行文字框、複選框、單選框、下拉選擇框、和檔案上傳框等。
c、表單按鈕：包括提交按鈕，復位按鈕和一般按鈕；用於將資料傳送到伺服器上的 CGI 指令碼或者取消輸入，還可以用表單按鈕來控制其他定義了處理指令碼的處理工作。
主要用途：表單在網頁中主要負責資料採集的功能，和向伺服器傳送資料。
表單提交中Get和Post方式的區別？
(1)、 get 是從伺服器上獲取資料，post 是向伺服器傳送資料。
(2)、 get 是把引數資料佇列加到提交表單的 ACTION 屬性所指的 URL 中，值和表單內各個欄位一一對應，在 URL 中可以看到。 post 是通過 HTTP post 機制，將表單內各個欄位與其內容放置在 HTML HEADER 內一起傳送到 ACTION 屬性所指的 URL 地址 , 使用者看不到這個過程。
(3)、對於 get 方式，伺服器端用Request.QueryString 獲取變數的值，對於 post 方式，伺服器端用 Request.Form 獲取提交的資料。
(4)、 get 傳送的資料量較小，不能大於2KB 。 post 傳送的資料量較大，一般被預設為不受限制。但理論上， IIS4 中最大量為 80KB ， IIS5 中為 100KB 。
(5)、 get 安全性非常低， post 安全性較高。
HTML5 有哪些新增的表單元素？（之前是HTML4.01）
· datalist
· datetime
· output
· keygen
· date
· month
· week
· time
· color
· number
· range
· Url
HTML5 廢棄了哪些 HTML4 標籤？
· frame
· frameset
· noframe
· applet
· big
· center
· basefront
HTML5 標準提供了哪些新的 API？
· Media API
· Text Track API
· Application CacheAPI
· User Interaction
· Data Transfer API
· Command API
· ConstraintValidation API
· History API
HTML5 儲存型別有什麼區別？
HTML5 能夠本地儲存資料，在之前都是使用 cookies 使用的。 HTML5 提供了下面兩種本地儲存方案：
· localStorage 用於持久化的本地儲存，資料永遠不會過期，關閉瀏覽器也不會丟失。
· sessionStorage 同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存
HTML5 應用程式快取和瀏覽器快取有什麼區別？
應用程式快取是 HTML5 的重要特性之一，提供了離線使用的功能，讓應用程式可以獲取本地的網站內容，例如 HTML 、 CSS 、圖片以及 JavaScript 。這個特性可以提高網站效能，它的實現藉助於 manifest 檔案，如下：
<!doctypehtml>
<htmlmanifest=”example.appcache”>
…..
</html>
與傳統瀏覽器快取相比，它不強制使用者訪問的網站內容被快取。
HTML5 Canvas 元素有什麼用？
Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於可以直接在 HTML 上進行圖形操作，
<canvas id=” canvas1 ″ width= ” 300 ″ height= ” 100 ″ >
</canvas>
除了 audio 和 video，HTML5 還有哪些媒體標籤？
<embed> 標籤定義嵌入的內容，比如外掛。
<embed type=”video/quicktime ” src= ” Fishing.mov ” >
<source> 對於定義多個數據源很有用。
<video width=” 450 ″ height= ” 340 ″controls>
<source src=” jamshed.mp4″ type= ” video/mp4 ″ >
<source src=” jamshed.ogg ” type= ”video/ogg ” >
</video>
<track> 標籤為諸如 video 元素之類的媒介規定外部文字軌道。 用於規定字幕檔案或其他包含文字的檔案，當媒介播放時，這些檔案是可見的。
<video width=” 450 ″ height= ” 340 ″controls>
<source src=” jamshed.mp4″ type= ” video/mp4 ″ >
<source src=” jamshed.ogg ” type= ”video/ogg ” >
<track kind=” subtitles ” label= ”English ” src= ” jamshed_en.vtt ” srclang= ” en ” default></track>
<track kind=” subtitles ” label= ”Arabic ” src= ” jamshed_ar.vtt ” srclang= ” ar ” ></track>
</video>
據源很有用。標籤為諸如 video 元素之類的媒介規定外部文字軌道。 用於規定字幕檔案或其他包含文字的檔案，當媒介播放時，這些檔案是可見的。
HTML5 中如何嵌入視訊？
和音訊類似，HTML5 支援 MP4 、 WebM 和 Ogg 格式的視訊，下面是簡單示例：
<video width=” 450 ″ height= ” 340 ″controls>
<source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
Your browser does’ nt support videoembedding feature.
</video>
HTML5 中如何嵌入音訊？
HTML5 支援 MP3 、 Wav 和 Ogg 格式的音訊，下面是在網頁中嵌入音訊的簡單示例：
<audiocontrols>
<source src=” jamshed.mp3″ type= ” audio/mpeg ” >
Your browser does’ nt support audioembedding feature.
</audio>
新的 HTML5 文件型別和字符集是？
HTML5 文件型別很簡單：
<!doctypehtml>
HTML5 使用 UTF-8 編碼示例：
<meta charset=” UTF-8 ″ >
解釋一下CSS的盒子模型？
回答一：
a、標準的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊具的寬度
b、網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
c、這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
回答二：
盒子模型也有人稱為框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype宣告，讓所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子。
請你說說CSS選擇器的型別有哪些，並舉幾個例子說明其用法？
請你說說CSS有什麼特殊性?（優先順序、計算特殊值）
優先順序
(1)、同類型，同級別的樣式後者先於前者
(2))、ID > 類樣式 > 標籤 > *
(3)、內聯>ID選擇器>偽類>屬性選擇器>類選擇器>標籤選擇器>通用選擇器(*)>繼承的樣式
(4)、具體 > 泛化的，特殊性即css優先順序
(5)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<spanstyle="color:red">span</span>
內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css檔案中，通過link引入或import匯入的樣式
(6)、!important 權重最高，比 inlinestyle 還要高
計算特殊性值
important > 內嵌 > ID> 類 > 標籤 | 偽類 | 屬性選擇 > 偽物件 > 繼承 > 萬用字元
權重、特殊性計演算法：
CSS樣式選擇器分為4個等級，a、b、c、d
(1)、如果樣式是行內樣式（通過Style=“”定義），那麼a=1，1,0,0,0
(2)、b為ID選擇器的總數0,1,0,0
(3)、c為屬性選擇器，偽類選擇器和class類選擇器的數量。0,0,1,0
(4)、d為標籤、偽元素選擇器的數量0,0,0,1
(5)、!important 權重最高，比 inlinestyle 還要高
比如結果為：1093比1100，按位比較，從左到右，只要一位高於則立即勝出，否則繼續比較。
要動態改變層中內容可以使用的方法？
innerHTML，innerText
常見瀏覽器相容性問題與解決方案？
(1)瀏覽器相容問題一：不同瀏覽器的標籤預設的外補丁和內補丁不同
問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS裡*{margin:0;padding:0;}
備註：這個是最常見的也是最易解決的一個瀏覽器相容性問題，幾乎所有的CSS檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。
(2)瀏覽器相容問題二：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大
問題症狀:常見症狀是IE6中後面的一塊被頂到下一行
碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最常見的瀏覽器相容問題）
解決方案：在float的標籤樣式控制中加入display:inline;將其轉化為行內屬性
備註：我們最常用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候我們通常都是用div float實現的，橫向的間距設定如果用margin實現，這就是一個必然會碰到的相容性問題。
(3)瀏覽器相容問題三：設定較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設定高度
問題症狀：IE6、7和遨遊裡這個標籤的高度不受控制，超出自己設定的高度
碰到頻率：60%
解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height小於你設定的高度。
備註：這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。
(4)瀏覽器相容問題四：行內屬性標籤，設定display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug
問題症狀：IE6裡的間距比超過設定的間距
碰到機率：20%
解決方案 ： 在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，為了設定寬高，我們需要設定display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
(5) 瀏覽器相容問題五：圖片預設有間距
問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。
碰到機率：20%
解決方案：使用float屬性為img佈局
備註 ： 因為img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裡，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器相容問題的用法，所以我禁止他們使用）
(6) 瀏覽器相容問題六：標籤最低高度設定min-height不相容
問題症狀：因為min-height本身就是一個不相容的CSS屬性，所以設定min-height時不能很好的被各個瀏覽器相容
碰到機率：5%
解決方案：如果我們要設定一個標籤的最小高度200px，需要進行的設定為：{min-height:200px;height:auto !important; height:200px; overflow:visible;}
備註：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。
(7)瀏覽器相容問題七：透明度的相容CSS設定
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設定div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對於相容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現相容
列出display的值並說明他們的作用？
display： none |inline | block | list-item | inline-block | table | inline-table |table-caption | table-cell | table-row | table-row-group | table-column |table-column-group | table-footer-group | table-header-group | run-in | box |inline-box | flexbox | inline-flexbox | flex | inline-flex
預設值：inline
none： 隱藏物件。與visibility屬性的hidden值不同，其不為被隱藏的物件保留其物理空間
inline： 指定物件為內聯元素。
block： 指定物件為塊元素。
list-item： 指定物件為列表專案。
inline-block： 指定物件為內聯塊元素。（CSS2）
table： 指定物件作為塊元素級的表格。類同於html標籤<table>（CSS2）
inline-table： 指定物件作為內聯元素級的表格。類同於html標籤<table>（CSS2）
table-caption： 指定物件作為表格標題。類同於html標籤<caption>（CSS2）
table-cell： 指定物件作為表格單元格。類同於html標籤<td>（CSS2）
table-row： 指定物件作為表格行。類同於html標籤<tr>（CSS2）
table-row-group： 指定物件作為表格行組。類同於html標籤<tbody>（CSS2）
table-column： 指定物件作為表格列。類同於html標籤<col>（CSS2）
table-column-group： 指定物件作為表格列組顯示。類同於html標籤<colgroup>（CSS2）
table-header-group： 指定物件作為表格標題組。類同於html標籤<thead>（CSS2）
table-footer-group： 指定物件作為表格腳註組。類同於html標籤<tfoot>（CSS2）
run-in： 根據上下文決定物件是內聯物件還是塊級物件。（CSS3）
box： 將物件作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box： 將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox： 將物件作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox： 將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex： 將物件作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex： 將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
如何居中div, 如何居中一個浮動元素?
(1)、非浮動元素居中：可以設定margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中:
方法一:設定當前div的寬度，然後設定margin-left:50%;position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時左浮動，然後父元素相對左移動50%，再然後子元素相對左移動-50%。
方法三:position定位等等。
CSS中 link 和@import 的區別是？
(1)、link屬於HTML標籤，而@import是CSS提供的;
(2)、頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
(3)、import只在IE5以上才能識別，而link是HTML標籤，無相容問題;
(4)、link方式的樣式的權重 高於@import的權重.
請列舉幾種清除浮動的方法(至少兩種)?
(1)、父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、程式碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
(2)、結尾處加空div標籤 clear:both
原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
(3)、父級div定義 偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多、不少初學者不理解原理，要兩句程式碼結合使用才能讓主流瀏覽器都支援。
建議：推薦使用，建議定義公共類，以減少CSS程式碼。
(4)、父級div定義overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、程式碼少、瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
(5)、父級div定義overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、程式碼少、瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的程式碼不會出現滾動條就使用吧。
block，inline和inlinke-block細節對比？
• display:block
a、block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
b、block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。
c、block元素可以設定margin和padding屬性。
• display:inline
a、inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
b、inline元素設定width,height屬性無效。
c、inline元素的margin和padding屬性，水平方向的padding-left,padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top,padding-bottom, margin-top, margin-bottom不會產生邊距效果。
•display:inline-block
a、簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補充說明
a、一般我們會用display:block，display:inline或者display:inline-block來調整元素的佈局級別，其實display的引數遠遠不止這三種，僅僅是比較常用而已。
b、IE（低版本IE）本來是不支援inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。
什麼叫優雅降級和漸進增強？
優雅降級： Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強： 從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。
說說浮動元素會引起的問題和你的解決辦法
問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對於問題(1)，新增如下樣式，給父元素新增clearfix樣式：
.clearfix:after{content:".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display:inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)、額外標籤法，<divstyle="clear:both;"></div>（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）
(2)、使用after偽類
#parent:after{
content:"";
height:0;
visibility:hidden;
display:block;
clear:both;
}
(3)、浮動外部元素
(4)、設定`overflow`為`hidden`或者auto
你有哪些效能優化的方法？
回答一：
（1）、減少http請求次數：CSSSprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取，圖片伺服器。
（2）、前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
（3）、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。
（4）、當需要設定的樣式很多時設定className而不是直接操作style。
（5）、少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。
（6）、避免使用CSSExpression（css表示式)又稱Dynamic properties(動態屬性)。
（7）、圖片預載入，將樣式表放在頂部，將指令碼放在底部 加上時間戳。
回答二：
(1)、減少HTTP請求次數
(2)、使用CDN
(3)、避免空的src和href
(4)、為檔案頭指定Expires
(5)、使用gzip壓縮內容
(6)、把CSS放到頂部
(7)、把JS放到底部
(8)、避 免使用CSS表示式
(9)、將CSS和JS放到外部檔案中
(10)、避免跳轉
(11)、可快取的AJAX
(12)、使用GET來完成AJAX請求
為什麼要初始化CSS樣式？
因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
*最簡單的初始化方法就是：* {padding: 0; margin: 0;} （不建議）
解釋下浮動和它的工作原理？清除浮動的技巧？
浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
(1)、使用空標籤清除浮動。
這種方法是在所有浮動標籤後面新增一個空標籤 定義cssclear:both. 弊端就是增加了無意義標籤。
(2)、使用overflow。
給包含浮動元素的父標籤新增css屬性overflow:auto; zoom:1; zoom:1用於相容IE6。
(3)、使用after偽物件清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定 height:0，否則該元素會比實際高出若干畫素；
談談你對CSS中刻度的認識？
在CSS中刻度是用於設定元素尺寸的單位。
a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負長度值，或者有一定的範圍限制。如果不支援負長度值，那應該變換到能夠被支援的最近的一個長度值。
c、長度單位包括：相對單位和絕對單位。
相對長度單位有： em, ex, ch,rem, vw, vh, vmax, vmin
絕對長度單位有： cm, mm, q,in, pt, pc, px
絕對長度單位：1in = 2.54cm =25.4 mm = 72pt = 6pc = 96px
文字相對長度單位：em
相對長度單位是相對於當前物件內文字的字型尺寸，如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。(相對父元素的字型大小倍數)
body { font-size:14px; }
h1 { font-size:16px; }
.size1 p {font-size: 1em; }
.size2 p {font-size: 2em; }
.size3 p {font-size: 3em; }
文字相對長度單位：rem
rem是CSS3新增的一個相對單位（rootem，根em），相對於根元素(即html元素)font-size計算值的倍數
只相對於根元素的大小
瀏覽器的預設字型大小為16畫素，瀏覽器預設樣式也稱為useragent stylesheet，就是所有瀏覽器內建的預設樣式，多數是可以被修改的，但chrome不能直接修改，可以被使用者樣式覆蓋。
請你說說em與rem的區別？
rem
rem是CSS3新增的一個相對單位（rootem，根em），相對於根元素(即html元素)font-size計算值的倍數
只相對於根元素的大小
rem（font size ofthe root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。
作用：利用rem可以實現簡單的響應式佈局，可以利用html元素中字型的大小與螢幕間的比值設定font-size的值實現當螢幕解析度變化時讓元素也變化，以前的天貓tmall就使用這種辦法
em
文字相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸(預設16px)。(相對父元素的字