行內元素有：a b span img input select strong（強調的語氣）
區塊級元素有：div ul ol li dl dt dd h1-h6 p
常見區塊元素(block element) address - 地址 blockquote - 區塊引用 center - 居中對齊區塊 dir - 目錄清單 div - 常用區塊級容器，也是css layout. - 互動表單 h1 - 大標題 h2 - 副標題 h3 - 3級標題 h4 - 4級標題 h5 - 5級標題 h6 - 6等級的水平分隔線選單- rames可選內容， （適用於不支援frame的瀏覽器顯示此區塊內容） noscript - 可選腳本內容（適用於不支援script的瀏覽器顯示此內容） ol - 排序表單 p - 段落 pre - 格式化文字排序清單（無序列表）
常見行內元素(inline element) a - 錨點 abbr - 縮寫 acronym - 首字 b - - 大字體 br - 換行 cite - 引用 code - 電腦程式碼(在引用原始碼的時候需要) dfn - 定義欄位 em - 強調 font - 鍵盤文字 label - 表格標籤 q - 短引用 s - 中劃線(不推薦) samp - 定義範例電腦程式碼 select - 項目選擇 線 strong - 粗體強調 sub - 下標 sup - 上標 textarea - 多行文字輸入框 tt - 電傳文字 u - 下劃線 var -「定義變數」# 電傳文字元素由上下文語境決定是塊元素還是內聯元素[1] 。 applet - java applet button - 按鈕 del - 刪除文字 iframe - inline frame ins - 插入的文字 map - 圖片區塊（map） object#- object#5
空白元素 由於HTML元素的內容是開始標籤與結束標籤之間的內容。而某些 HTML 元素具有空內容。 （empty content），那些含有空內容的HTML元素，就是空元素。空元素[2] 是在開始標籤中關閉的。 範例
就是沒有關閉標籤的空元素。
* 頁面匯入樣式時，使用link和@import有什麼不同？
（1）link屬於XHTML標籤，除了載入CSS外，還能用來定義RSS, 定義rel連結屬性等作用；而@import是CSS提供的，只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import所引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只有在IE5以上才能被識別，而link是XHTML標籤，無相容問題;
（4 ）：使用dom控制樣式時的差別。使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的。
（5）：@import可以在css中再次引入其他樣式表，例如可以建立一個主樣式表，在主樣式表中再引入其他的樣式表.
* 介紹一下你對瀏覽器核心的理解？
主要分成兩個部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容(HTML、XML、圖片等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，然後會輸出至顯示器或列印 機。瀏覽器的核心的差異對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件用戶端以及其它需要編輯、顯示網頁內容的應用程式都需要內核。
JS引擎則：解析並執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。
* 常見的瀏覽器核心有哪些？
常見的有四個核心:
Trident： IE瀏覽器所使用的內核，該核心程式在1997年的IE4中首次被採用，是微軟在Mosaic程式碼的基礎之上修改而來的，並沿用到目前的IE9。 Trident實際上是一款開放的內核，其介面內核設計的相當成熟，因此才有許多採用IE內核而非IE的瀏覽器湧現（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。
Gecko： Netscape6開始採用的內核，後來的Mozilla FireFox (火狐瀏覽器) 也採用了該內核，Gecko的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。 Gecko引擎的由來跟IE不無關係，前面說過IE沒有使用W3C的標準，這導致了微軟內部一些開發人員的不滿；他們與當時已經停止更新了的Netscape的一些員工一起創辦了Mozilla，以當時的Mosaic內核為基礎重新編寫內核，於是開發出了Geckos。不過事實上，Gecko 核心的瀏覽器還是Firefox (火狐) 用戶最多，所以有時也會被稱為Firefox核心。另外Gecko也是一個跨平台內核，可以在Windows、 BSD、Linux和Mac OS X中使用。
Presto： 目前Opera採用的內核，該內核在2003年的Opera7中首次被使用，該引擎的特點就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上，Presto有著天生的優勢，頁面的全部或部分都能夠在回應腳本事件時等情況下被重新解析。另外該核心在執行Javascrīpt的時候有著最快的速度，根據在同等條件下的測試，Presto核心執行同等Javascrīpt所需的時間僅有Trident和Gecko核心的約1/3（Trident核心最慢，不過兩者相差沒有太大）。只可惜Presto是商業引擎，這很大程度限制了Presto的發展。
Webkit：蘋果公司自己的內核，也是蘋果的Safari瀏覽器所使用的核心。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，皆是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟體，在GPL條約下授權，同時支援BSD系統的開發。所以Webkit也是自由軟體，同時開放原始碼。在安全性方面不受IE、Firefox的限制，所以Safari瀏覽器在國內還是很安全的。 google的chrome也使用webkit作為核心。 WebKit 核心在手機上的應用也十分廣泛，例如 Google 的手機 Gphone、 Apple 的 iPhone， 等所使用的 Browser 核心引擎，都是基於 WebKit。 win 10 的IE edge也是.......
* html5有哪些新功能、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
繪畫canvas;
用於媒介回放的video 和audio 元素;
本地離線儲存localStorage 長期儲存數據，瀏覽器後資料不遺失;
sessionStorage 的資料在瀏覽器關閉後自動刪除;
語化較好的內容元素，例如article、footer、header、nav、section;## date、time、email、url、search;
新的技術 webworker,websocket, Geolocation;
移除的元素：
#o #
移除的元素：
的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes;
# --相容:1 .IE8/IE7/IE6支援透過document.createElement方法產生的標籤，利用此特性讓這些瀏覽器支援HTML5新標籤。 2.使用是html5shim框架
--區分:DOCTYPE宣告的方式是區分HTML和HTML5標誌的一個重要因素，此外，也可以根據新增的結構、功能元素來區分。
* 簡述一下你對HTML語意化的理解？
語意化的HTML就是寫出的HTML程式碼，符合內容的結構化（內容語意化），選擇適當的標籤（程式碼語意化），能夠方便開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。
1.語義化有利於SEO，有利於搜尋引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。
2.在沒有CSS的時候能夠清楚的看出網頁的結構，增強可讀性。
3.方便團隊開發與維護，語意化的HTML可以讓開發者更容易的看明白，進而提升團隊的效率與協調能力。
4.支援多終端設備的瀏覽器渲染。
* HTML5的離線儲存怎麼能使用，運作原理能不能解釋一下？
HTML5的一個重要特性就是離線存儲，所謂的離線存儲就是將一些資源文件保存在本地，這樣後續的頁面重新加載將使用本地資源文件，在離線情況下可以繼續存取web應用，同時透過一定的手法(更新相關文件或使用相關API)，可以更新、刪除離線儲存等操作;
如何使用
：上面提到的HTML5的離線儲存是基於一個新建的.appcache檔案的，透過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在離線狀態下時，瀏覽器會透過離線儲存的資料進行頁面展示。
（1）頁面頭部像下面一樣加入一個manifest的屬性；
（2）在cache.manifest檔案的編寫離線儲存的資源；
CACHEMANIFEST
#v0.11
# CACHE:
js/app.js
css/style.css
"
resourse/logo.png
FALLBACK:
//offline.html
（3）離線狀態時，操作window.applicationCache進行需求實現。
* 瀏覽器是怎麼對HTML5的離線儲存資源進行管理與載入的呢？
在線的情況下，瀏覽器發現html頭部有manifest屬性，它會要求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載對應的資源並且進行離線儲存。如果已經造訪過app且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest文件，如果檔案沒有改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。
* 請描述 cookies，sessionStorage 和 localStorage 的差異？
共通點：都是保存在瀏覽器端，且同源的。
區別：cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地保存。 Cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。儲存大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。 sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。資料有效期限不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直保存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。 Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。 Web Storage 的 api 介面使用更方便。
* iframe有那些優點和缺點？
iframe的優點：
1.iframe能夠原封不動的把嵌入的網頁展現出來。
2.如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
3.網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加程式碼的可重複使用。
4.如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。
iframe的缺點：
1.會產生很多頁面，不容易管理。
2.iframe框架結構有時會讓人感到迷惑，如果框架個數多的話，可能會出現上下、左右滾動條，會分散訪客的注意力，使用者體驗度差。
3.程式碼複雜，無法被一些搜尋引擎索引到，這一點很關鍵，現在的搜尋引擎爬蟲還不能很好的處理iframe中的內容，所以使用iframe會不利於搜尋引擎優化。
4.很多的行動裝置（PDA 手機）無法完全顯示框架，裝置相容性差。
5.iframe框架頁面會增加伺服器的http請求，對於大型網站是不可取的。
分析了這麼多，現在基本上都是用Ajax來取代iframe，所以iframe已經漸漸的退出了前端開發。
* Label的功能是什麼？是怎麼用的？ （加 for 或 包裹）
label 標籤為 input 元素定義標註（標記）。
label 元素不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控制項。是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項。
Label 中有兩個屬性是非常有用的,一個是FOR、另外一個就是ACCESSKEY了。
FOR屬性 :
功能：表示Label標籤要綁定的HTML元素，你點選這個標籤的時候，所綁定的元素將會取得焦點。
ACCESSKEY屬性：
功能：表示存取Label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將會取得焦點。
* HTML5的form如何關閉自動完成功能？
autocomplete 屬性規定表單是否應該啟用自動完成功能。
自動完成允許瀏覽器預測對欄位的輸入。當使用者在欄位開始鍵入時，瀏覽器是基於先前鍵入的值，應該顯示出在欄位中填寫的選項。 <form autocomplete="on/off">
on 預設。規定啟用自動完成功能。
off 規定停用自動完成功能。
* 如何實作瀏覽器內多個標籤頁之間的通訊? (阿里)
即將到來的 SharedWorker API 能夠在iframe甚至瀏覽器標籤或視窗中傳輸資料。它在幾年前就已在 Chrome 中得以實現，不久前也在 Firefox 上實現了，不過它在 IE 和 Safari 中仍然難以覓食。
(需要對以下應用情境找到一個優雅的解決方案：假設有個人訪問了你的網站。他依次登錄，打開第二個標籤頁並在那個標籤頁裡選擇了註銷。這時，他打開的第一個標籤頁看起來仍然保留著「已登入」的狀態，但這時他的所有操作要麼會重定向到登入頁面，要麼會直接讓他抓狂。使用者是否已登出，並對頁面做相應的改變。小題大作了。畢竟殺雞焉用牛刀，於是我開始尋找一些其它的跨標籤頁通信方式。我首先想到的就是使用 cookies ，來週期性地透過 setInterval 檢查使用者是否登入。對這個方案我並不滿意，因為這樣會把許多 CPU 週期耗費在檢查一個可能自始至終都不會滿足的條件上。這時候我就覺得還不如就直接用 「comet」（又稱輪詢）、伺服器端事件或 WebSockets 算了呢。
當我發現自己是在騎驢子找驢子的時候還是很吃驚，因為答案就是一直以來的 localStorage！
你知道 localStorage 會觸發一個事件嗎？具體地說，不論其中的哪一項在另一個瀏覽上下文中被添加、修改或刪除時，它都會觸發一個事件。實際上，這就意味著不論在哪個瀏覽器的標籤頁裡訪問了 localStorage，所有其它的標籤頁都能透過 window 對象監聽到這個事件.不論某個標籤頁在何時修改了 localStorage，都會對其餘的所有標籤觸發事件。這就代表我們只要為 localStorage 賦值，就能夠跨瀏覽器標籤通訊了。
* webSocket如何相容於低瀏覽器？ (阿里)
(WebSocket protocol 是HTML5一種新的協定。它實作了瀏覽器與伺服器全雙工通訊(full-duplex)。在瀏覽器中透過http僅能實現單向的通訊,comet可以一定程度上模擬雙向通訊,但效率較低,並需要伺服器有較好的支援; flash中的socket和xmlsocket可以實現真正的雙向通訊,透過flex ajax bridge,可以在javascript中使用這兩個功能. 可以預見,如果websocket一旦在瀏覽器中得到實現,將會替代上面兩項技術,得到廣泛的使用.)
WebSocket是目前"唯一"的一個瀏覽器下的Socket的標準, 它是透過瀏覽器內部提供的API來實現訪問的. 低版本的瀏覽器沒有WebSocket這個標準, 就意味這些瀏覽器不允許用戶通過它們來實現Socket通訊. 解決兼容性的辦法就是準備一套Ajax + Server-side Script的後備方案. PHP Socket.
其他方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基於multipart 編碼
發送XHR 、基於長輪詢的XHR.
* 頁面可見性（Page Visibility）API 可以有哪些用途？
透過visibilityState 的值偵測頁面目前是否可見，以及開啟網頁的時間等;
在頁面被切換到其他後台進程的時候，自動暫停音樂或影片的播放；
* 如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或svg
（2）border-radius
（3）純js實作需要求一個點在不在圓上簡單演算法、取得滑鼠座標等等
* 實作不使用border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能維持相同效果。
