HTML面試題

時間 2019-11-07

標籤 html 面試欄目 HTML 简体版

原文原文鏈接

HTML與瀏覽器

Doctype 做用？標準模式與兼容模式各有什麼區別？

DOCTYPE是用來聲明文檔類型和DTD規範的。<!DOCTYPE html>聲明位於HTML文檔中的第一行，不是一個 html 標籤，處於 html 標籤以前。告訴瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現css

標準模式的排版和 JS 運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。html

在HTML4.01中<!doctype>聲明指向一個DTD，因爲HTML4.01基於SGML，因此DTD指定了標記規則以保證瀏覽器正確渲染內容 HTML5 不基於SGML，因此不用指定DTDhtml5

HTML 全局屬性

全局屬性是全部HTML元素共有的屬性；它們能夠用於全部元素，即便屬性可能對某些元素不起做用。web

全局屬性|MDN算法

canvas和svg的區別

canvas是html5提供的新元素，而svg存在的歷史要比canvas久遠，已經有十幾年了。svg並非html5專有的標籤，最初svg是xml技術(超文本擴展語言，能夠自定義標籤或屬性)描述二維圖形的語言。在H5中看似canvas和svg很像，可是，它們有巨大的差異。chrome

首先，從它們的功能上講，canvas能夠看作是一個畫布。其繪製出來的圖形爲標量圖，所以，能夠在canvas中引入.jpg或.png這類格式的圖片，在實際開發中，大型的網絡遊戲都是用canvas畫布作出來的，而且canvas的技術如今已經至關嫺熟。另外，咱們喜歡用canvas來作一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪製的圖形爲矢量圖，因此其用法上受到了限制。由於只能繪製矢量圖，因此svg中不能引入普通的圖片，由於矢量圖的不會失真效果，在項目中咱們會用來作小圖標。可是因爲其本質爲矢量圖，能夠被無限放大而不會失真，這很適合被用來作地圖，而百度地圖就是用svg技術作出來的。canvas

另外從技術方面來說canvas裏面繪製的圖形不能被引擎抓取，如咱們要讓canvas裏面的一個圖片跟隨鼠標事件：canvas.onmouseover = function(){}。而svg裏面的圖形能夠被引擎抓取，支持事件的綁定。另外canvas中咱們繪製圖形一般是經過JavaScript來實現，而svg更多的是經過標籤來實現，如在svg中繪製正矩形，這裏咱們不能用屬性style="width:xxx;height:xxx"來定義。瀏覽器

行內元素有哪些？塊級元素有哪些？空元素有哪些？

定義：CSS規範規定，每一個元素都有 display 屬性，肯定該元素的類型，每一個元素都有默認的 display 值，如 div 的 display 默認值爲「block」，則爲「塊級」元素；span 默認 display 屬性值爲「inline」，是「行內」元素。緩存

行內元素有：a b span img input select strong
塊級元素有：div ul ol li dl dt dd h1 h2 h3 ....p
空元素：
- 常見：br hr img link input meta
- 不常見：area base col command embed keygen param source track wbr

不一樣瀏覽器（版本）、HTML4（5）、CSS2等實際略有差異參考http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements服務器

介紹一下你對瀏覽器內核的理解？

主要分兩部分：渲染引擎(layout engineer 或 Rendering Engine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後渲染到用戶的屏幕上。

JS引擎：解析和執行 JavaScript 來實現邏輯和控制 DOM 進行交互。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於渲染引擎。

HTML和DOM的關係

HTML只是一個字符串
DOM由HTML解析而來
JS能夠維護DOM

主流瀏覽器及其內核

瀏覽器	內核	備註
IE	trident	IE、獵豹、360、百度
firefox	gecko
Safari	webkit	從 Safari 推出之時，它的渲染引擎就是webkit，一提到webkit，首先想到的即是chrome，webkit的鼻祖實際上是Safari
chrome	Chromium/Blink	在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 實際上是 WebKit 的分支。大部分國產瀏覽器最新版都採用 Blink 內核。二次開發
Opera	blink	Opera內核原爲：Presto，如今跟隨chrome用blink內核

簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器，搜索引擎解析
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的
搜索引擎的爬蟲也依賴於 html 標記來肯定上下文和各個關鍵字的權重，利於SEO
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

描述一下 cookies、sessionStorage 和 localStorage的區別

cookie 是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）
cookie 數據始終在同源的http請求中攜帶（即便不須要），即會在瀏覽器和服務器間來回傳遞。
sessionStorage 和 localStorage 不會自動把數據發給服務器，僅會在本地保存。
存儲大小：
- cookie 數據大小不能超過 4k
- sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，能夠達到 5M 或更大
有效期（生命週期）
- localStorage：存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
- sessionStorage：數據在當前瀏覽器關閉後自動刪除
- cookie：設置的 cookie 過時時間以前一直有效，即便窗口或瀏覽器關閉
共享
- sessionStorage不能共享，localStorage在同源文檔之間共享，cookie在同源且符合path規則的文檔之間共享

爲何咱們要棄用table標籤

table的缺點在於服務器把代碼加載到本地服務器的過程當中，原本是加載一行執行一行，可是table標籤是裏面的東西全都下載完以後纔會顯示出來，那麼若是圖片不少的話就會致使網頁一直加載不出來，除非全部的圖片和內容都加載完。若是要等到全部的圖片所有加載完以後才顯示出來會影響網頁的性能，因此table標籤如今咱們基本放棄使用了。

移動端項目須要注意的4個問題

meta中設置viewport

阻止用戶手滑放大或縮小頁面，須要在 index.html 中添加meta元素，設置viewport。

CSS樣式統一問題

咱們須要重置頁面樣式，由於在不一樣的手機瀏覽器上，默認的css樣式不是統一的。解決方法：使用reset.css重置全部元素的默認樣式

一像素邊框問題

有的手機分辨率比較高，是2倍屏或3倍屏，手機上的瀏覽器就會把CSS中的1像素值展現爲2個或3個物理寬度。解決方法：添加一個border.css庫，將利用scroll縮放的原理將邊框重置。當咱們須要使用一像素邊框時只須要在標籤上添加類名，如設置底部一像素邊框就在標籤上加入「border-bottom」的class名

300毫秒點擊延遲問題

在移動端開發中，某些機型上使用click事件會延遲300ms才執行，這樣影響了用戶體驗。解決方法：引入fastclick.js

HTML5 的 form 如何關閉自動補全功能？

給不想要提示的 form 或某個 input 設置爲 autocomplete = off

如何實現瀏覽器多個標籤之間的通訊？

WebSocket、ShareWorker
也能夠調用 localStorage、cookies 等本地存儲方式

localStorage 另外一個瀏覽器上下文裏被添加、修改、或刪除時，它都會觸發一個storage事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊；

webSocket 如何兼容低瀏覽器？

Adobe Flash Socket
ActiveXHTMLFile(IE)
基於 multipart 編碼發送 XHR
基於長輪詢的 XHR

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、u
- 對可用性產生負面影響的元素：frame、frameset、noframes
支持 HTML5 新標籤：
- IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤
- 能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤
- 瀏覽器支持新標籤後，還須要添加標籤默認的樣式
如何區分 HTML5：DOCTYPE 聲明\新增的結構元素\功能元素

HTML5 的離線儲存怎麼使用，解釋工做原理

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。

原理：HTML5 的離線緩存是基於一個新建的 .appcache 文件的緩存機制（不是存儲技術），經過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 同樣被存儲下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

如何使用：

頁面頭部像下面同樣加入一個 manifest 的屬性；
在 cache.manifest 文件的編寫離線存儲的資源

CACHE MANIFEST
#v1.0

CACHE:
js/app.js
css/style.css

NETWORK:
assets/logo.png

FALLBACK:
/html5/ /404.html

瀏覽器是怎麼對 HTML5 的離線存儲資源進行管理和加載的

在線的狀況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，若是是第一次訪問 app，那麼瀏覽器就會根據 manifest 文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過 app 而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源

在離線狀態時，操做 window.applicationCache 進行需求實現