一、HTML部分
1、瀏覽器頁面有哪三層構成，分別是什么，作用是什么?
構成：結構層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：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：
（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標簽之前。告知瀏覽器的解析器，用什么文檔類型 規范來解析這個文檔。
（2）、嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標准運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
回答2：
doctype聲明指出閱讀程序應該用什么規則集來解釋文檔中的標記。在Web文檔的情況下，“閱讀程序”通常是瀏覽器或者校驗器這樣的一個程序，“規則”則是W3C所發布的一個文檔類型定義（DTD）中包含的規則。
(1)<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的HTML 文檔。
(2)所謂的標准模式是指，瀏覽器按 W3C 標准解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。
嚴格模式是瀏覽器根據web標准去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如<br/>。嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標准運行混雜模式則是一種向后兼容的解析方法，說的透明點就是可以實現IE5.5以下版本瀏覽器的渲染模式。
(3)瀏覽器解析時到底使用標准模式還是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標准文檔的類型（標准模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明 ,將使網頁進入怪異模式。
4、HTML5有哪些新特性、移除了哪些元素？
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：用來處理命令按鈕。
5、你做的網頁在哪些流覽器測試過,這些瀏覽器的內核分別是什么?
a、IE: trident內核
b、Firefox：gecko內核
c、Safari:webkit內核
d、Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
e、Chrome:Blink(基於webkit，Google與Opera Software共同開發)
6、每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。（重點：告訴瀏覽器按照何種規范解析頁面）
7、說說你對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的變化很小，這並不符合一個好產品的演進規則。
8、對WEB標准以及W3C的理解與認識?
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、
文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，
容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性。
9、HTML5行內元素有哪些,塊級元素有哪些, 空元素有哪些?
(1)行內元素
a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* 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)塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
* noscript - ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本
(3)空元素(在HTML[1] 元素中，沒有內容的 HTML 元素被稱為空元素)
<br/> //換行
<hr> //分隔線
<input> //文本框等
<img> //圖片
<link> <meta>
10、什么是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游戲開發。
11、請你描述一下 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 內有效
+ 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
12、說說你對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一起使用
13、link和@import的區別?
XML/HTML代碼
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代碼
<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不支持。
14、說說你對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瀏覽器，這是免費提供的。
15、HTML全局屬性(global attribute)有哪些?
參考資料：MDN: html global attribute或者W3C HTML global-attributes
accesskey:設置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可激活元素class:為元素設置類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素contenteditable: 指定元素內容是否可編輯contextmenu: 自定義鼠標右鍵彈出菜單內容data-*: 為元素增加自定義屬性dir: 設置元素文本方向draggable: 設置元素是否可拖拽dropzone: 設置元素拖放類型： copy, move, linkhidden: 表示一個元素是否與文檔。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果id: 元素id，文檔內唯一lang: 元素內容的的語言spellcheck: 是否啟動拼寫和語法檢查style: 行內css樣式tabindex: 設置元素可以獲得焦點，通過tab可以導航title: 元素相關的建議信息translate: 元素和子孫節點內容是否需要本地化
16、說說超鏈接target屬性的取值和作用？
target這個屬性指定所鏈接的頁面在瀏覽器窗口中的打開方式。
它的參數值主要有：
a、_blank：在新瀏覽器窗口中打開鏈接文件
b、_parent：將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件，就象_self參數一。
c、_self：在同一框架或窗口中打開所鏈接的文檔。此參數為默認值，通常不用指定。但是我不太理解。
d、_top：在當前的整個瀏覽器窗口中打開所鏈接的文檔，因而會刪除所有框架。
17、`data-`屬性的作用是什么？
`data-`為前端開發者提供自定義的屬性，這些屬性集可以通過對象的`dataset`屬性獲取，不支持該屬性的瀏覽器可以通過`getAttribute`方法獲取:
`<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>`
`div.dataset.commentNum; // 10`
需要注意的是：`data-`之后的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峰風格。並不是所有的瀏覽器都支持.`dataset`屬性，測試的瀏覽器中只有Chrome 和Opera 支持。
即：當沒有合適的屬性和元素時，自定義的 data 屬性是能夠存儲頁面或 App 的私有的自定義數據。
18、介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
19、常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]20、iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
21、Label的作用是什么，是怎么用的？
label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
22、如何實現瀏覽器內多個標簽頁之間的通信?
WebSocket、SharedWorker；
也可以調用localstorge、cookies等本地存儲方式；
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；
23、如何在頁面上實現一個圓形的可點擊區域？
a、map+area或者svg
b、border-radius
c、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
24、title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展示強調內容。
i內容展示為斜體，em表示強調的文本；
Physical Style Elements -- 自然樣式標簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標簽
strong, em, ins, del, code
應該准確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。
25、實現不使用 border 畫出1px高的線，在不同瀏覽器的標准模式與怪異模式下都能保持一致的效果？
<div style="height:1px;overflow:hidden;background:red"></div>
26、HTML5標簽的作用?(用途)
a、使Web頁面的內容更加有序和規范
b、使搜索引擎更加容易按照HTML5規則識別出有效的內容
c、使Web頁面更接近於一種數據字段和表
27、簡述一下src與href的區別？
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
<script src ="js.js"></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href="common.css" rel="stylesheet"/>
那么瀏覽器會識別該文檔為css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
28、談談你對canvas的理解？
canvas是HTML5中新增一個HTML5標簽與操作canvas的javascript API，它可以實現在網頁中完成動態的2D與3D圖像技術。<canvas> 標記和 SVG以及 VML 之間的一個重要的不同是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。
canvas可以完成動畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。
29、WebSocket與消息推送？
B/S架構的系統多使用HTTP協議，HTTP協議的特點：
1 無狀態協議
2 用於通過 Internet 發送請求消息和響應消息
3 使用端口接收和發送消息，默認為80端口
底層通信還是使用Socket完成。
HTTP協議決定了服務器與客戶端之間的連接方式，無法直接實現消息推送（F5已壞）,一些變相的解決辦法：
雙向通信與消息推送
輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求后馬上返回響應信息並關閉連接。 優點：后端程序編寫比較容易。 缺點：請求中有大半是無用，浪費帶寬和服務器資源。 實例：適於小型應用。
長輪詢：客戶端向服務器發送Ajax請求，服務器接到請求后hold住連接，直到有新消息才返回響應信息並關閉連接，客戶端處理完響應信息后再向服務器發送新的請求。 優點：在無消息的情況下不會頻繁的請求，耗費資小。 缺點：服務器hold連接會消耗資源，返回數據順序無保證，難於管理維護。 Comet異步的ashx， 實例：WebQQ、Hi網頁版、Facebook IM。
長連接：在頁面里嵌入一個隱蔵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、能夠實現真正意義上的推送功能
缺點：少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。
30、img的title和alt有什么區別？
Alt 用於圖片無法加載時顯示
Title 為該屬性提供信息，通常當鼠標滑動到元素上的時候顯示
31、表單的基本組成部分有哪些，表單的主要用途是什么？
組成：表單標簽、表單域、表單按鈕
a、表單標簽：這里面包含了處理表單數據所用CGI程序的URL,以及數據提交到服務器的方法。
b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等。
c、表單按鈕：包括提交按鈕，復位按鈕和一般按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
主要用途：表單在網頁中主要負責數據采集的功能，和向服務器傳送數據。
32、表單提交中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安全性較高。
33、請你談談Cookie的弊端?
cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但還是有很多局限性的。
(1)、每個特定的域名下最多生成20個cookie
a、IE6或更低版本最多20個cookie
b、IE7和之后的版本最后可以有50個cookie。
c、Firefox最多50個cookie
d、chrome和Safari沒有做硬性限制
(2)、IE和Opera會清理近期最少使用的cookie，Firefox會隨機清理cookie。
(3)、cookie的最大大約為4096字節，為了兼容性，一般不能超過4095字節。
(4)、IE提供了一種存儲可以持久化用戶數據，叫做`userdata`，從`IE5.0`就開始支持。每個數據最多128K，每個域名下最多1M。這個持久化數據放在緩存中，如果緩存沒有清理，那么會一直存在。
優點：極高的擴展性和可用性
a、通過良好的編程，控制保存在cookie中的session對象的大小。
b、通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。
c、只在cookie中存放不敏感數據，即使被盜也不會有重大損失。
d、控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。
缺點：
a、Cookie數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
b、安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
c、有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。
34、請你說說cookie 和session 的區別?
(1)、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
(2)、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
(3)、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。
(4)、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
所以個人建議：
將登陸信息等重要信息存放為session中。
其他信息如果需要保留，可以放在Cookie中。
35、說說瀏覽器內核及差異？
瀏覽器最核心的部分是“Rendering Engine”，即“渲染引擎”，我們一般叫做瀏覽器內核。它主要的功能是解釋網頁中的語法並渲染網頁。所以渲染引擎決定了瀏覽器如何顯示網頁內容以及頁面的格式信息。不同的瀏覽器內核對網頁語法的解釋不盡相同，這就導致了不同瀏覽器渲染出的網頁可能有一些差異。
比較出名的瀏覽器內核有以下幾種：KHTML、Trident、Gecko、Presto、Webkit、Blink。
(1)、Trident內核就是我們所熟知的IE瀏覽器的內核，該內核在IE4中首次采用，沿用到IE11，俗稱“IE內核”。一直到Windows XP時期，由於Windows的市場占有率非常高導致IE多年一家獨大，微軟長時間沒有更新Trident內核產生了不好的后果：一是Trident內核幾乎與W3C的標准脫節；二是Trident大量的Bug沒有得到及時解決帶來的安全問題等。很多用戶開始轉投其他瀏覽器，Firefox和Opera就是在這個時候興起的。
另外，很多國產瀏覽器都是“雙核瀏覽器”，其中一個核心是Trident，另一個常見的是Webkit。比如遨游瀏覽器、360安全瀏覽器等。
(2)、Gecko內核是Firefox采用的內核，開始於Netscape6。Gecko的特點是代碼完全公開，可開發程度很高。Gecko的出現和IE也不無關系，當年IE與W3C標准嚴重脫節導致內部一些開發人員不滿，他們與當時已經停止更新的Netscape的一些員工創辦了Mozilla，以當時的Mosaic內核為基礎重新編寫了內核，於是就有了Gecko。
Gecko內核的瀏覽器仍然是Firefox的用戶最多，多以有時候也會被稱為Firefox內核，Gecko內核也是一個跨平台的內核。
(3)、Presto內核是Opera之前使用過的內核，Opera12.17以及更早的版本曾經采用過的內核，現在已經停止開發並廢棄。該內核在2003年的Opera7中首次使用，Presto的特點是渲染速度的優化達到了極致，但代價是犧牲了網頁的兼容性。
Presto是一個動態內核，在腳本處理上Presto有着天生的優勢，頁面的全部或者部分都能夠在回應腳本事件時等情況下被重新解析。此外該內核在執行javascript的時候有着最快的速度，根據在同等條件下的測試，Presto內核執行同等Javascript所需的時間僅有Trident和Gecko內核的三分之一（也有人測試說Presto渲染部分快部分慢，總體和其他內核差不多）。可惜Presto是商業引擎，很大程度上限制了內核的發展。現在Opera改用Google Chrome相同的Blink內核。
(4)、Webkit內核是蘋果公司自己的內核，也是蘋果Safari瀏覽器使用的內核。Webkit引擎包含WebCore排版引擎和JavascriptCore解析引擎，均從KDE的KHTML引擎衍生而來，基於GPL開源。Google Chrome使用了Webkit內核，在腳本解析上Chrome使用了自家研發的V8引擎。
現在許多手機瀏覽器使用的都是Webkit內核，蘋果自帶Safari，Android的默認瀏覽器等。
(5)、Blink是由Google和Opera Software開發的瀏覽器排版引擎，於2013年4月公布了這一消息。該渲染引擎是開源引擎Webkit中Webcore組件的一個分支，並且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。
而在Google作出此舉之際，Mozilla與Samsung也達成合作開發協議開發下一代瀏覽器渲染引擎Servo。
(6)、KHTML是網頁排版引擎之一，由KDE開發。KHTML擁有速度快捷的優點，但對錯誤語法的容忍度則比Mozilla產品所使用的Gecko引擎小。蘋果電腦於2002年采納了KHTML，作為開發Safari瀏覽器之用，並發布所修改的最新及過去版本源代碼。后來發表了開放源代碼的WebCore及WebKit引擎，它們均是KHTML的衍生產品，在開發網站列出引擎改變內容，並會傳回至KDE計划。
36、內容還會不斷補充。。。
博客數據來源聲明：
本博客大部分數據來源於各大網站的收集整理改編，主要有GitHub(https://github.com)、題來了(http://www.tilaile.com)、牛客網(https://www.nowcoder.com)、一些英文網站，還有一些論壇、博客、IT招聘等網站。還有少部分數據時來源於本人自己整理添加，添加的內容主要是本人認為比較重要知識點，面試時可能會問到的題目，自己整理題目以及參考答案，答案僅供參考，答案可能存有錯誤或不足，歡迎大家批評指正或補充更好的答案。好讓我及時更正，以免誤導其他人。本博客僅提供參考作用。