前端面試寶典之HTML篇
HTML
語義化
-
HTML標籤的語義化是指：通過使用包含語義的標籤（如h1-h6）恰當地表示文件結構
-
css命名的語義化是指：為html標籤新增有意義的class
-
為什麼需要語義化：
-
-
去掉樣式後頁面呈現清晰的結構
-
盲人使用讀屏器更好地閱讀
-
搜尋引擎更好地理解頁面，有利於收錄
-
便團隊專案的可持續運作及維護
-
簡述一下你對HTML語義化的理解？
-
用正確的標籤做正確的事情。
-
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
-
即使在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的;
-
搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
-
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解
Doctype作用？標準模式與相容模式各有什麼區別?
-
<!DOCTYPE>宣告位於位於HTML文件中的第一行，處於<html>標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現 -
標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作
HTML5 為什麼只需要寫<!DOCTYPE HTML>？
-
HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）
-
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
-
行內元素有：
a b span img input select strong（強調的語氣） -
塊級元素有：
div ul ol li dl dt dd h1 h2 h3 h4…p -
常見的空元素:
<br> <hr> <img> <input> <link> <meta>
頁面匯入樣式時，使用link和@import有什麼區別？
-
link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS,定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS -
頁面被載入的時，
link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入 -
import是CSS2.1提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題
介紹一下你對瀏覽器核心的理解？
-
主要分成兩部分：渲染引擎(
layout engineer或Rendering Engine)和JS引擎 -
渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心
-
JS引擎則：解析和執行javascript來實現網頁的動態效果
-
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎
常見的瀏覽器核心有哪些？
-
Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML] -
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 -
Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;] -
Webkit核心：Safari,Chrome等。 [Chrome的Blink（WebKit的分支）]
html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
-
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加
-
-
繪畫 canvas
-
用於媒介回放的 video 和 audio 元素
-
本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失
-
sessionStorage 的資料在瀏覽器關閉後自動刪除
-
語意化更好的內容元素，比如 article、footer、header、nav、section
-
表單控制元件，calendar、date、time、email、url、search
-
新的技術webworker, websocket, Geolocation
-
-
移除的元素：
-
純表現的元素：basefont，big，center，font, s，strike，tt，u
-
對可用性產生負面影響的元素：frame，frameset，noframes
-
支援HTML5新標籤：
-
-
IE8/IE7/IE6支援通過document.createElement方法產生的標籤
-
可以利用這一特性讓這些瀏覽器支援HTML5新標籤
-
瀏覽器支援新標籤後，還需要新增標籤預設的樣式
-
-
當然也可以直接使用成熟的框架、比如html5shim
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->
-
如何區分HTML5： DOCTYPE宣告\新增的結構元素\功能元素
HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
-
在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案
-
原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示
-
如何使用：
-
-
頁面頭部像下面一樣加入一個manifest的屬性；
-
在cache.manifest檔案的編寫離線儲存的資源
-
在離線狀態時，操作window.applicationCache進行需求實現
-
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
-
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
-
離線的情況下，瀏覽器就直接使用離線儲存的資源。
請描述一下 cookies，sessionStorage 和 localStorage 的區別？
-
cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）
-
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞
-
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存
-
儲存大小：
-
cookie資料大小不能超過4k -
sessionStorage和localStorage雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大
-
-
有期時間：
-
localStorage儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料 -
sessionStorage資料在當前瀏覽器視窗關閉後自動刪除 -
cookie設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉
-
iframe有那些缺點？
-
iframe會阻塞主頁面的Onload事件
-
搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO
-
iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入
-
使用
iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe新增src屬性值，這樣可以繞開以上兩個問題
Label的作用是什麼？是怎麼用的？
-
label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件
HTML5的form如何關閉自動完成功能？
-
給不想要提示的 form 或某個 input 設定為 autocomplete=off。
如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
-
WebSocket、SharedWorker
-
也可以呼叫localstorge、cookies等本地儲存方式
webSocket如何相容低瀏覽器？(阿里)
-
Adobe Flash Socket 、
-
ActiveX HTMLFile (IE) 、
-
基於 multipart 編碼傳送 XHR 、
-
基於長輪詢的 XHR
頁面可見性（Page Visibility API） 可以有哪些用途？
-
通過 visibilityState 的值檢測頁面當前是否可見，以及開啟網頁的時間等;
-
在頁面被切換到其他後臺程序的時候，自動暫停音樂或視訊的播放
如何在頁面上實現一個圓形的可點選區域？
-
map+area或者svg
-
border-radius
-
純js實現 需要求一個點在不在圓上簡單演算法、獲取滑鼠座標等等
實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果
<div style="height:1px;overflow:hidden;background:red"></div>
網頁驗證碼是幹嘛的，是為了解決什麼安全問題
-
區分使用者是計算機還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水
-
有效防止黑客對某一個特定註冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試
title與h1的區別、b與strong的區別、i與em的區別？
-
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面資訊的抓取也有很大的影響 -
strong是標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時：會重讀，而是展示強調內容 -
i內容展示為斜體，em表示強調的文字
頁面匯入樣式時，使用 link 和 @import 有什麼區別？
-
link 屬於HTML標籤，除了載入CSS外，還能用於定 RSS等；@import 只能用於載入CSS
-
頁面載入的時，link 會同時被載入，而 @import 引用的 CSS 會等到頁面被載入完再載入
-
@import 只在 IE5 以上才能被識別，而 link 是HTML標籤，無相容問題
介紹一下你對瀏覽器核心的理解？
-
瀏覽器核心主要分為兩部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
-
渲染引擎負責取得網頁的內容進行佈局計和樣式渲染，然後會輸出至顯示器或印表機
-
JS引擎則負責解析和執行JS指令碼來實現網頁的動態效果和使用者互動
-
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎
常見的瀏覽器核心有哪些？
-
Blink核心：新版 Chrome、新版 Opera
-
Webkit核心：Safari、原Chrome
-
Gecko核心：FireFox、Netscape6及以上版本
-
Trident核心（又稱MSHTML核心）：IE、國產瀏覽器
-
Presto核心：原Opera7及以上
HTML5有哪些新特性？
-
新增選擇器 document.querySelector、document.querySelectorAll
-
拖拽釋放(Drag and drop) API
-
媒體播放的 video 和 audio
-
本地儲存 localStorage 和 sessionStorage
-
離線應用 manifest
-
桌面通知 Notifications
-
語意化標籤 article、footer、header、nav、section
-
增強表單控制元件 calendar、date、time、email、url、search
-
地理位置 Geolocation
-
多工 webworker
-
全雙工通訊協議 websocket
-
歷史管理 history
-
跨域資源共享(CORS) Access-Control-Allow-Origin
-
頁面可見性改變事件 visibilitychange
-
跨視窗通訊 PostMessage
-
Form Data 物件
-
繪畫 canvas
HTML5移除了那些元素？
-
純表現的元素：basefont、big、center、font、s、strike、tt、u
-
對可用性產生負面影響的元素：frame、frameset、noframes
如何處理HTML5新標籤的瀏覽器相容問題？
-
通過 document.createElement 建立新標籤
-
使用墊片 html5shiv.js
如何區分 HTML 和 HTML5？
-
DOCTYPE宣告、新增的結構元素、功能元素
HTML5的離線儲存工作原理能不能解釋一下，怎麼使用？
-
HTML5的離線儲存原理：
-
使用者線上時，儲存更新使用者機器上的快取檔案；當用戶離線時，可以正常訪離線儲存問站點或應用內容
-
-
HTML5的離線儲存使用：
-
在文件的 html 標籤設定 manifest 屬性，如 manifest="/offline.appcache"
-
在專案中新建 manifest 檔案，manifest 檔案的命名建議：xxx.appcache
-
在 web 伺服器配置正確的 MIME-type，即 text/cache-manifest
-
瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的？
-
線上的情況下，瀏覽器發現 html 標籤有 manifest 屬性，它會請求 manifest 檔案
-
如果是第一次訪問app，那麼瀏覽器就會根據 manifest 檔案的內容下載相應的資源並且進行離線儲存
-
如果已經訪問過app且資源已經離線儲存了，瀏覽器會對比新的 manifest 檔案與舊的 manifest 檔案，如果檔案沒有發生改變，就不做任何操作。如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存
-
離線的情況下，瀏覽器就直接使用離線儲存的資源。
iframe 有那些優點和缺點？
-
優點：
-
用來載入速度較慢的內容（如廣告）
-
可以使指令碼可以並行下載
-
可以實現跨子域通訊
-
-
缺點：
-
iframe 會阻塞主頁面的 onload 事件
-
無法被一些搜尋引擎索識別
-
會產生很多頁面，不容易管理
-
label 的作用是什麼？怎麼使用的？
-
label標籤來定義表單控制元件的關係：
-
當用戶選擇label標籤時，瀏覽器會自動將焦點轉到和label標籤相關的表單控制元件上
-
-
使用方法1：
-
<label for="mobile">Number:</label> -
<input type="text" id="mobile"/>
-
-
使用方法2：
-
<label>Date:<input type="text"/></label>
-
如何實現瀏覽器內多個標籤頁之間的通訊？
-
iframe + contentWindow
-
postMessage
-
SharedWorker(Web Worker API)
-
storage 事件(localStorge API)
-
WebSocket
webSocket 如何相容低瀏覽器？
-
Adobe Flash Socket
-
ActiveX HTMLFile (IE)
-
基於 multipart 編碼傳送 XHR
-
基於長輪詢的 XHR
頁面可見性（Page Visibility API） 可以有哪些用途？
-
在頁面被切換到其他後臺程序的時候，自動暫停音樂或視訊的播放
-
當用戶瀏覽其他頁面，暫停網站首頁幻燈自動播放
-
完成登陸後，無重新整理自動同步其他頁面的登入狀態
title 與 h1 的區別、b 與 strong 的區別、i 與 em 的區別？
-
title 表示是整個頁面標題，h1 則表示層次明確的標題，對頁面資訊的抓取有很大的影響
-
strong 標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時，strong 會重讀，而 b
是展示強調內容
-
i 內容展示為斜體，em 表示強調的文字
-
自然樣式標籤：b, i, u, s, pre
-
語義樣式標籤：strong, em, ins, del, code
-
應該準確使用語義樣式標籤, 但不能濫用。如果不能確定時，首選使用自然樣式標籤