HTML基礎 · 前端進階指南與面試(持續更新)

點擊關注本[公眾號](http://www.hmoore.net/book/dsh225/javascript_vue_css/edit#_118)獲取文檔最新更新,并可以領取配套于本指南的《**前端面試手冊**》以及**最標準的簡歷模板**. [TOC] 本章是HTML考點的非重難點，因此我們采用簡略回答的方式進行撰寫，所以不會有太多詳細的解釋。 > 我們約定，每個問題后我們標記『?』的為高頻面試題 ## doctype的作用是什么？? DOCTYPE是html5標準網頁聲明，且必須聲明在HTML文檔的第一行。來告知瀏覽器的解析器用什么文檔標準解析這個文檔，不同的渲染模式會影響到瀏覽器對于 CSS 代碼甚至 JavaScript 腳本的解析文檔解析類型有： * BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。（如果沒有聲明DOCTYPE，默認就是這個模式） * CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。 > IE8還有一種介乎于上述兩者之間的近乎標準的模式，但是基本淘汰了。 ## 這三種模式的區別是什么 * 標準模式(standards mode)：頁面按照 HTML 與 CSS 的定義渲染 * 怪異模式(quirks mode)模式：會模擬更舊的瀏覽器的行為 * 近乎標準(almost standards)模式：會實施了一種表單元格尺寸的怪異行為（與IE7之前的單元格布局方式一致），除此之外符合標準定義 ## HTML、XHTML、XML有什么區別 * HTML(超文本標記語言): 在html4.0之前HTML先有實現再有標準，導致HTML非常混亂和松散 * XML(可擴展標記語言): 主要用于存儲數據和結構，可擴展，大家熟悉的JSON也是相似的作用，但是更加輕量高效，所以XML現在市場越來越小了 * XHTML(可擴展超文本標記語言): 基于上面兩者而來，W3C為了解決HTML混亂問題而生，并基于此誕生了HTML5，開頭加入`<!DOCTYPE html>`的做法因此而來，如果不加就是兼容混亂的HTML，加了就是標準模式。 > XHTML中的DTD是類似于`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`的形式,有嚴格版、過渡版、框架版等幾個版本. ## 什么是data-屬性？ HTML的數據屬性，用于將數據儲存于標準的HTML元素中作為額外信息,我們可以通過js訪問并操作它，來達到操作數據的目的。 ~~~ <article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> ~~~ > 前端框架出現之后，這種方法已經不流行了 ## 你對HTML語義化的理解？? 語義化是指使用恰當語義的html標簽，讓頁面具有良好的結構與含義，比如`<p>`標簽就代表段落，`<article>`代表正文內容等等。語義化的好處主要有兩點： * 開發者友好：使用語義類標簽增強了可讀性，開發者也能夠清晰地看出網頁的結構，也更為便于團隊的開發和維護 * 機器友好：帶有語義的文字表現力豐富，更適合搜索引擎的爬蟲爬取有效信息，語義類還可以支持讀屏軟件，根據文章可以自動生成目錄這對于簡書、知乎這種富文本類的應用很重要，語義化對于其網站的內容傳播有很大的幫助，但是對于功能性的web軟件重要性大打折扣，比如一個按鈕、Skeleton這種組件根本沒有對應的語義，也不需要什么SEO。 ## HTML5與HTML4的不同之處 * 文件類型聲明（）僅有一型：。 * 新的解析順序：不再基于SGML。 * 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。 * input元素的新類型：date, email, url等等。 * 新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。 * 全域屬性：id, tabindex, repeat。 * 新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。 * 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt ## 有哪些常用的meta標簽？ meta標簽由name和content兩個屬性來定義，來描述一個HTML網頁文檔的`元信息`，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等，除了一些http標準規定了一些name作為大家使用的共識，開發者也可以自定義name。 * charset，用于描述HTML文檔的編碼形式 ~~~ <meta charset="UTF-8" > ~~~ * http-equiv，顧名思義，相當于http的文件頭作用,比如下面的代碼就可以設置http的緩存過期日期 ~~~ ＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞ ~~~ * viewport，移動前端最熟悉不過，Web開發人員可以控制視口的大小和比例 ~~~ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ~~~ * apple-mobile-web-app-status-bar-style,開發過PWA應用的開發者應該很熟悉，為了自定義蘋果工具欄的顏色。 ~~~ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> ~~~ ## src和href的區別？ * src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載并應用到文檔內，如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源加載、編譯、執行完畢，所以一般js腳本會放在底部而不是頭部。 * href是指向網絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理。 ## 知道img的srcset的作用是什么？（追問）可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源。 srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小。 sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇。所以，有了這些屬性，瀏覽器會： * 查看設備寬度 * 檢查 sizes 列表中哪個媒體條件是第一個為真 * 查看給予該媒體查詢的槽大小 * 加載 srcset 列表中引用的最接近所選的槽大小的圖像 > srcset提供了根據屏幕條件選取圖片的能力 ~~~ <img src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" sizes="(min-width: 600px) 200px, 50vw"> ~~~ ## 還有哪一個標簽能起到跟srcset相似作用？（追問） `<picture>`元素通過包含零或多個`<source>`元素和一個`<img>`元素來為不同的顯示/設備場景提供圖像版本。瀏覽器會選擇最匹配的子`<source>`元素，如果沒有匹配的，就選擇`<img>`元素的 src 屬性中的URL。然后，所選圖像呈現在`<img>`元素占據的空間中 > picture同樣可以通過不同設備來匹配不同的圖像資源 ~~~ <picture> <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/media/examples/painted-hand-298-332.jpg" /> </picture> ~~~ ## script標簽中defer和async的區別？? * defer：瀏覽器指示腳本在文檔被解析后執行，script被異步加載后并不會立刻執行，而是等待文檔被解析完畢后執行。 * async：同樣是異步加載腳本，區別是腳本加載完畢后立即執行，這導致async屬性下的腳本是亂序的，對于script有先后依賴關系的情況，并不適用。![2019-06-13-07-13-42](https://xiaomuzhu-image.oss-cn-beijing.aliyuncs.com/c84fdc0e47268832fa8914ab4d125002.png) > 藍色線代表網絡讀取，紅色線代表執行時間，這倆都是針對腳本的；綠色線代表 HTML 解析 ## 有幾種前端儲存的方式？? cookies、localstorage、sessionstorage、Web SQL、IndexedDB ## 這些方式的區別是什么？（追問）? * cookies：在HTML5標準前本地儲存的主要方式，優點是兼容性好，請求頭自帶cookie方便，缺點是大小只有4k，自動請求頭加入cookie浪費流量，每個domain限制20個cookie，使用起來麻煩需要自行封裝 * localStorage：HTML5加入的以鍵值對(Key-Value)為標準的方式，優點是操作方便，永久性儲存（除非手動刪除），大小為5M，兼容IE8+ * sessionStorage：與localStorage基本類似，區別是sessionStorage當頁面關閉后會被清理，而且與cookie、localStorage不同，他不能在所有同源窗口中共享，是會話級別的儲存方式 * Web SQL：2010年被W3C廢棄的本地數據庫數據存儲方案，但是主流瀏覽器（火狐除外）都已經有了相關的實現，web sql類似于SQLite，是真正意義上的關系型數據庫，用sql進行操作，當我們用JavaScript時要進行轉換，較為繁瑣。 * IndexedDB：是被正式納入HTML5標準的數據庫儲存方案，它是NoSQL數據庫，用鍵值對進行儲存，可以進行快速讀取操作，非常適合web場景，同時用JavaScript進行操作會非常方便。 ***** 參考鏈接： 1. [src與href](https://blog.csdn.net/Panda_m/article/details/78456358) 2. [語義化](https://www.zhihu.com/question/20455165) 3. [defer和async的區別](https://segmentfault.com/q/1010000000640869) 4. [響應式圖片MDN](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 5. [張鑫旭-srcset釋義](https://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/) 6. [picture元素-MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture) * * * ## 公眾號想要實時關注筆者最新的文章和最新的文檔更新請關注公眾號**程序員面試官**,后續的文章會優先在公眾號更新. **簡歷模板**:關注公眾號回復「模板」獲取《**前端面試手冊**》:配套于本指南的突擊手冊,關注公眾號回復「fed」獲取 ![](https://img.kancloud.cn/d8/46/d846f65d5025c4b6c4619662a0669503_655x348.png)