1.瀏覽器頁面有哪三層構成，分別是什麼，作用是什麼?
構成：結構層、表示層、行爲層
分別是：HTML、CSS、JavaScript
2.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以下瀏覽器幾乎全軍覆沒。
3.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、 聲明位於文檔中的最前面，處於標籤之前。告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。
（2）、嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
4.你做的網頁在哪些流覽器測試過,這些瀏覽器的內核分別是什麼?
a、 IE: trident 內核
b、 Firefox: gecko 內核
c、 Safari: webkit 內核
d、 Opera: 以前是 presto 內核， Opera 現已改用 Google Chrome 的 Blink 內核
e、 Chrome: Blink( 基於webkit ， Google 與 Opera Software 共同開發 )
5.說說你對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 的變化很小，這並不符合一個好產品的演進規則。
6.對WEB標準以及W3C的理解與認識?
標籤閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索機率、使用外 鏈css和 js 腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要複製內容、提高網站易用性。
7.什麼是WebGL,它有什麼優點?
WebGL（全寫 Web Graphics 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 遊戲開發。
8.請你描述一下 cookies，sessionStorage 和 localStorage 的區別?
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 請求之間保存數據。有了本地數據，就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。
sessionStorage、 localStorage 、 cookie 都是在瀏覽器端存儲的數據，其中 sessionStorage 的概念很特別，引入了一個“瀏覽器窗口”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口後， sessionStorage 即被銷燬。同時“獨立”打開的不同窗口，即使是同一頁面， sessionStorage 對象也是不同的。cookies會發送到服務器端。其餘兩個不會。
Microsoft 指出 Internet Explorer 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 內有效
+ 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
9.說說你對HTML語義化的理解?
什麼是HTML語義化？
HTML標籤可以分爲有語義的標籤，和無語義的標籤。比如table表示表格，form表示表單，a標籤表示超鏈接，strong標籤表強調。無語義標籤典型的有<div>,<span>等。HTML語義化我的理解就是在頁面中儘量多的結合場景多使用含有語義的標籤，少使用div,span等無語義的標籤。
why?爲什麼要進行語義化？
1，便於團隊開發和維護，語義化更具可讀性。現在的開發基本上都是一個團隊合作進行開發。這種情況下，我們寫的代碼不僅要讓我們自己能看懂，而且也應該讓別人也容易理解和閱讀，要保證代碼的可維護性，這一點很重要。但是在實際開發中，由於HTML的靈活性，以及CSS的強大，以至於實現同一種界面樣式，不同的人寫出來的代碼可能實現方式都不太一樣。實現糟糕的，可能全是div套div，這樣的代碼到時候維護的話可能就是一場災難。這一點，個人覺得是最主要的因素。
2，有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息
3，考慮到代碼的可複用性，可移植性，方便其他設備的解析執行。移動設備、盲人閱讀器等。
10.link和@import的區別?
link的使用
<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />@import的使用
<style type='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 不支持。
11.說說你對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 瀏覽器，這是免費提供的。
12.說說超鏈接target屬性的取值和作用？
target這個屬性指定所鏈接的頁面在瀏覽器窗口中的打開方式。
它的參數值主要有：
a、 _blank ：在新瀏覽器窗口中打開鏈接文件
b、 _parent ：將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件，就象 _self 參數一。
c、 _self ：在同一框架或窗口中打開所鏈接的文檔。此參數爲默認值，通常不用指定。但是我不太理解。
d、 _top ：在當前的整個瀏覽器窗口中打開所鏈接的文檔，因而會刪除所有框架。
13.介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：負責取得網頁的內容（HTML、 XML 、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行 javascript 來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，內核就傾向於只指渲染引擎。
14.iframe有那些缺點？
*iframe會阻塞主頁面的 Onload 事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利於 SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用 iframe ，最好是通過 javascript
動態給iframe添加 src 屬性值，這樣可以繞開以上兩個問題。
15.Label的作用是什麼，是怎麼用的？
label標籤來定義表單控制間的關係 , 當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>
<label>Date:<input type='text' name='B'/></label>16.如何實現瀏覽器內多個標籤頁之間的通信?
WebSocket、 SharedWorker ；
也可以調用localstorge、 cookies 等本地存儲方式；
localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信；
17.如何在頁面上實現一個圓形的可點擊區域？
a、 map+area 或者 svg
b、 border-radius
c、純 js 實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
18.在HTML中URL、src、href分別代表什麼？如何使用？
src 是指向物件的來源
href 是指向需要連結的地方
url 是通用的 “連結” 的專業代名詞，在 HTML 語法裏幾乎不會使用src 通常用作 “拿取” 而 href 用作 “連結前往”
例如
<img src="image.jpg" />
就是 src 拿取 image.jpg 作爲這個 img 的源檔案… 就是<img>顯示 image.jpg 的意思
例如<a href="image.jpg" />
就是 href 跳轉到 image.jpg… 就是網址會跳轉到 image.jpg 的意思
19.談談你對canvas的理解？
canvas是HTML5中新增一個HTML5標籤與操作canvas的javascript API，它可以實現在網頁中完成動態的2D與3D圖像技術。標記和 SVG以及 VML 之間的一個重要的不同是，有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。 canvas可以完成動畫、遊戲、圖表、圖像處理等原來需要Flash完成的一些功能。
20.表單提交中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 安全性較高。
21.HTML5 存儲類型有什麼區別？
HTML5 能夠本地存儲數據，在之前都是使用 cookies 使用的。 HTML5 提供了下面兩種本地存儲方案：
· localStorage 用於持久化的本地存儲，數據永遠不會過期，關閉瀏覽器也不會丟失。
· sessionStorage 同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲
22.解釋一下CSS的盒子模型？
盒子模型也有人稱爲框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子。
23.請列舉幾種清除浮動的方法(至少兩種)?
(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時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。