前端面試 —— HTML
阿新 • • 發佈：2019-02-19
DOCTYPE有什麼作用？標準模式與混雜模式如何區分？它們有何意義?
告訴瀏覽器使用哪個版本的HTML規範來渲染文件。DOCTYPE不存在或形式不正確會導致HTML文件以混雜模式呈現。
標準模式（Standards mode）以瀏覽器支援的最高標準執行；混雜模式（Quirks mode）中頁面是一種比較寬鬆的向後相容的方式顯示。
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a span img input select 塊級元素：div ul ol li dl dt dd h1 p 空元素：<br> <hr> <link> <meta> 塊級元素和行內元素的區別: 1 . 塊級元素獨佔一行，塊級元素內可巢狀部分塊級元素, 而行內元素不能巢狀塊級元素 2 . 塊級可設定 margin 、padding 元素，但是行內元素只有 margin-left、margin-right 和 padding-left、padding-right 有效 3 . 塊級 display: block，行內 display: inline
頁面匯入樣式時，使用link和@import有什麼區別？
相同的地方，都是外部引用CSS方式，區別：
1 . link 是html方式，@import 是css方式
2 . link引用CSS時候，頁面載入時同時載入；@import需要在頁面完全載入以後載入，而且@import被引用的CSS會等到引用它的CSS檔案被載入完才載入
3 . link是xhtml標籤，無相容問題；@import是在css2.1提出來的，低版本的瀏覽器不支援
4 . link支援使用javascript控制去改變樣式，而@import不支援
5 . link方式的樣式的權重高於@import的權重
元素的alt和title有什麼異同？
在alt和title同時設定的時候，alt作為圖片的替代文字出現，title是圖片的解釋文字。
如何實現瀏覽器內多個標籤頁之間的通訊?
- WebSocket SharedWorker
- 也可以呼叫 localstorge、cookies 等本地儲存方式。 localstorge 在另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面資訊通訊。
注意：Safari 在無痕模式下設定 localstorge 值時會丟擲QuotaExceededError 的異常
簡述一下你對HTML語義化的理解？
- 去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構。
- 有利於SEO和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的資訊，爬蟲依賴於標籤來確定上下文和各個關鍵字的權重。
- 方便其它裝置解析。
- 便於團隊開發和維護，語義化更具有可讀性。
HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分HTML和HTML5
新增元素：
- canvas
- 用於媒介回放的video和audio元素
- 本地離線儲存。
- 語意化更好的內容元素，比如 article footer header nav section
- 位置API：Geolocation
- 表單控制元件，calendar date time email url search
- 新的技術：web worker(web worker是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行) web socket
- 拖放API：drag、drop
移除的元素：
- 純表現的元素：basefont big center font s strike tt u
- 效能較差元素：frame frameset noframes
相容性問題：
- 實現標籤被識別
通過document.createElement（tagName）方法即可讓瀏覽器識別新標籤，瀏覽器支援新標籤後，還可以為新標籤新增CSS樣式。 - JavaScript解決方案
//在<head>中呼叫以下程式碼：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
區分：
- DOCTYPE宣告的方式是區分重要因素
- 根據新增加的結構、功能來區分
cookies，sessionStorage和localStorage的區別？
共同點：都是儲存在瀏覽器端，且是同源的。
區別：
- cookies是為了標識使用者身份而儲存在使用者本地終端上的資料，始終在同源http請求中攜帶，即cookies在瀏覽器和伺服器間來回傳遞，而sessionstorage和localstorage不會自動把資料發給伺服器，僅在本地儲存。
- 儲存大小的限制不同。cookie儲存的資料很小，不能超過4k，而sessionstorage和localstorage儲存的資料大，可達到5M。
資料的有效期不同。cookie在設定的cookie過期時間之前一直有效，即使視窗或者瀏覽器關閉。sessionstorage僅在瀏覽器視窗關閉之前有效。localstorage始終有效，視窗和瀏覽器關閉也一直儲存，用作長久資料儲存。 - 作用域不同。cookie在所有的同源視窗都是共享；sessionstorage不在不同的瀏覽器共享，即使同一頁面；localstorage在所有同源視窗都是共享
HTTP 狀態碼
1xx 狀態碼
- 100 Continue 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊
2xx 狀態碼
- 200 表示成功，並返回資訊
- 201 請求成功並且伺服器建立了新的資源
- 202 伺服器接受請求，但尚未處理
3xx 狀態碼
- 301 永久性重定向
- 302 臨時性重定向
- 303 臨時性重定向，並總是使用GET請求新的URL
- 304 自從上次請求後，請求的網頁未修改過
4xx 狀態碼
- 400 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求
- 401 請求未授權
- 403 禁止訪問
- 404 未找到相匹配的資源
5xx 狀態碼
- 500 最常見的伺服器端錯誤。
- 502 閘道器錯誤
- 503 伺服器端暫時無法處理請求（可能是過載或維護）
持續更新中。。。