html

@轉自GitHub

前端開發知識點：

HTML&CSS：
對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優先級、HTML5、CSS3、Flexbox
JavaScript：
數據類型、運算、對象、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 6、Nodejs
其他：
移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協作、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力

主要問題：

1、DOM結構 —— 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。

2、DOM操作 —— 如何添加、移除、移動、復制、創建和查找節點等。

3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。

4、XMLHttpRequest —— 這是什么、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

6、盒模型 —— 外邊距、內邊距和邊框之間的關系，及IE8以下版本的瀏覽器中的盒模型

7、塊級元素與行內元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

8、浮動元素 —— 怎么使用它們、它們有什么問題以及怎么解決這些問題。

9、HTML與XHTML —— 二者有什么區別，你覺得應該使用哪一個并說出理由。

10、JSON —— 作用、用途、設計結構。

  • Doctype作用？標準模式與兼容模式各有什么區別?
    （1）<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標簽之前。
    告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以
    兼容模式呈現。
    （2）、標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以
    寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

  • HTML5 為什么只需要寫 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

  • 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？(忽略" ")
    首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display
    值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是
    “行內”元素。
    （1）行內元素有：a b span img input select strong（強調的語氣）
    （2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
    （3）常見的空元素：
    <"br"> <"hr"><"img"><input> <link> <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

  • 頁面導入樣式時，使用link和@import有什么區別？
    （1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；
    而@import是CSS提供的，只能用于加載CSS;
    （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
    （3）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聲明\新增的結構元素\功能元素

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

  • 用正確的標簽做正確的事情。

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

  • HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。
詳細的使用請參考：
HTML5 離線緩存-manifest簡介
有趣的HTML5：離線存儲

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

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

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

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

詳細請參考：有趣的HTML5：離線存儲

  • 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage：存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage：數據在當前瀏覽器窗口關閉后自動刪除。
cookie：設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

  • iframe有那些缺點？
1. iframe會阻塞主頁面的Onload事件；

  2. 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
  3. iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的
     并行加載。

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

  • Label的作用是什么？是怎么用的？

label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

  • HTML5的form如何關閉自動完成功能？

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

  • 如何實現瀏覽器內多個標簽頁之間的通信? (阿里)

WebSocket、SharedWorker；
也可以調用localstorge、cookies等本地存儲方式；
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

  • webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發送 XHR 、
基于長輪詢的 XHR

  • 頁面可見性（Page Visibility API） 可以有哪些用途？

通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放；

  • 如何在頁面上實現一個圓形的可點擊區域？
    1、map+area或者svg
    2、border-radius
    3、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
  • 實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

  • 網頁驗證碼是干嘛的，是為了解決什么安全問題。

區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

  • title與h1的區別、b與strong的區別、i與em的區別？
    title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

    strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<"strong">會重讀，而<B>是展示強調內容。

    i內容展示為斜體，em表示強調的文本；

    Physical Style Elements -- 自然樣式標簽
    b, i, u, s, pre
    Semantic Style Elements -- 語義樣式標簽
    strong, em, ins, del, code
    應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 語義化 HTML標簽的語義化是指：通過使用包含語義的標簽（如h1-h6）恰當地表示文檔結構 css命名的語義化是指...
    紋小艾閱讀 562評論 0贊 1
  • 1. 瀏覽器頁面有哪三層構成，分別是什么，作用是什么? 構成：結構層、表示層、行為層分別是：HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,894評論 1贊 11
  • 問答題1 /72瀏覽器頁面有哪三層構成，分別是什么，作用是什么?參考答案構成：結構層、表示層、行為層分別是：HTM...
    _Yfling閱讀 1,241評論 0贊 23
  • 本文由我收集總結了一些前端面試題，初學者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識...
    王鈺峰閱讀 491評論 0贊 2
  • 當一個人忘記他曾經是多么優秀的時候，那就是他墮落的開始。
    一只蠢洋洋丶閱讀 166評論 0贊 0