## HTML5 元素的分類
HTML4中，元素被分成兩大類: `inline`（內聯元素）與 `block`（塊級元素）。
但在實際的開發過程中，因為頁面表現的需要，前端工程師經常把 `inline` 元素的 `display` 值設定為 `block` （比如 `a` 標簽），也經常把 `block` 元素的 `display` 值設定為 `inline` 之后更是出現了 `inline-block` 這一對外呈現 `inline` 對內呈現 `block` 的屬性。因此，簡單地把 HTML 元素劃分為 `inline` 與 `block` 已經不再符合實際需求。
HTML5中，元素主要分為7類：`Metadata` `Flow` `Sectioning` `Heading` `Phrasing` `Embedded` `Interactive`
- 介紹
- HTML
- 1. DOCTYPE 的作用是什么？
- 2. 標準模式與兼容模式各有什么區別？
- 3. HTML5 為什么只需要寫 <!DOCTYPE HTML>，而不需要引入 DTD？
- 4. SGML 、 HTML 、XML 和 XHTML 的區別？
- 5. DTD 介紹
- 6. 行內元素定義
- 7. 塊級元素定義
- 8. 行內元素與塊級元素的區別？
- 9. HTML5 元素的分類
- 10. 空元素定義
- 11. link 標簽定義
- 12. 頁面導入樣式時，使用 link 和 @import 有什么區別？
- 13. 你對瀏覽器的理解？
- 14. 介紹一下你對瀏覽器內核的理解？
- 15. 常見的瀏覽器內核比較
- 16. 常見瀏覽器所用內核
- 17. 瀏覽器的渲染原理？
- 18. 渲染過程中遇到 JS 文件怎么處理？（瀏覽器解析過程）
- 19. async 和 defer 的作用是什么？有什么區別？（瀏覽器解析過程）
- 20. 什么是文檔的預解析？（瀏覽器解析過程）
- 21. CSS 如何阻塞文檔解析？（瀏覽器解析過程）
- 22. 渲染頁面時常見哪些不良現象？（瀏覽器渲染過程）
- 23. 如何優化關鍵渲染路徑？（瀏覽器渲染過程）
- 24. 什么是重繪和回流？（瀏覽器繪制過程）
- 25. 如何減少回流？（瀏覽器繪制過程）
- 26. 為什么操作 DOM 慢？（瀏覽器繪制過程）
- 27. DOMContentLoaded 事件和 Load 事件的區別？
- 28. HTML5 有哪些新特性、移除了那些元素？
- 29. 如何處理 HTML5 新標簽的瀏覽器兼容問題？
- 30. 簡述一下你對 HTML 語義化的理解？
- 31. b 與 strong 的區別和 i 與 em 的區別？
- 32. 前端需要注意哪些 SEO ？
- 33. HTML5 的離線儲存怎么使用，工作原理能不能解釋一下？
- 34. 瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加載的呢？
- 35. 常見的瀏覽器端的存儲技術有哪些？
- 36. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
- 37. iframe 有那些缺點？
- 38. Label 的作用是什么？是怎么用的？
- 39. HTML5 的 form 的自動完成功能是什么？
- 40. 如何實現瀏覽器內多個標簽頁之間的通信?
- 41. webSocket 如何兼容低版本瀏覽器？
- 42. 頁面可見性（Page Visibility API） 可以有哪些用途？
- 43. 如何在頁面上實現一個圓形的可點擊區域？
- 44. 實現不使用 border 畫出 1 px 高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
- 45. title 與 h1 的區別？
- 46. <img> 的 title 和 alt 有什么區別？
- 47. Canvas 和 SVG 有什么區別？
- 48. 網頁驗證碼是干嘛的，是為了解決什么安全問題？
- 49. 漸進增強和優雅降級的定義
- 50. attribute 和 property 的區別是什么？
- 51. 對 web 標準、可用性、可訪問性的理解
- 52. IE 各版本和 Chrome 可以并行下載多少個資源？
- 53. Flash、Ajax 各自的優缺點，在使用中如何取舍？
- 54. 怎么重構頁面？
- 55. 瀏覽器架構
- 56. 常用的 meta 標簽
- 57. css reset 和 normalize.css 有什么區別？
- 58. 用于預格式化文本的標簽是？
- 59. DHTML 是什么？
- 60. head 標簽中必不少的是？
- 61. HTML5 新增的表單元素有？
- 62. 在 HTML5 中，哪個方法用于獲得用戶的當前位置？
- 63. 文檔的不同注釋方式？
- 64. disabled 和 readonly 的區別？
- 65. 主流瀏覽器內核私有屬性 css 前綴？
- 66. 前端性能優化？
- 67. Chrome 中的 Waterfall ？
- 68. 掃描二維碼登錄網頁是什么原理，前后兩個事件是如何聯系的？
- 69. Html 規范中為什么要求引用資源不加協議頭http或者https？
- CSS
- 1. 介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
- 2. CSS 選擇符有哪些？
- 3. ::before 和:after 中雙冒號和單冒號有什么區別？解釋一下這 2 個偽元素的作用。
- 4. 偽類與偽元素的區別
- 5. CSS 中哪些屬性可以繼承？
- 6. CSS 優先級算法如何計算？
- 7. 關于偽類 LVHA 的解釋?
- 8. CSS3 新增偽類有那些？
- 9. 如何居中 div？
- 10. display 有哪些值？說明他們的作用。
- 11. position 的值 relative 和 absolute 定位原點是？
- 12. CSS3 有哪些新特性？（根據項目回答）
- 13. 請解釋一下 CSS3 的 Flex box（彈性盒布局模型），以及適用場景？
- 14. 用純 CSS 創建一個三角形的原理是什么？
- 15. 一個滿屏品字布局如何設計?
- 16. CSS 多列等高如何實現？
- 17. 經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用 hack 的技巧？
- 18. li 與 li 之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
- 19. 為什么要初始化 CSS 樣式？
- 20. 什么是包含塊，對于包含塊的理解?
- 21. CSS 里的 visibility 屬性有個 collapse 屬性值是干嘛用的？在不同瀏覽器下以后什么區別？
- 22. width:auto 和 width:100\x 的區別
- 23. 絕對定位元素與非絕對定位元素的百分比計算的區別
- 24. 簡單介紹使用圖片 base64 編碼的優點和缺點。
- 25. 'display'、'position'和'float'的相互關系？
- 26. margin 重疊問題的理解。
- 27. 對 BFC 規范（塊級格式化上下文：block formatting context）的理解？
- 28. IFC 是什么？
- 29. 請解釋一下為什么需要清除浮動？清除浮動的方式
- 30. 使用 clear 屬性清除浮動的原理？
- 31. zoom:1 的清除浮動原理?
- 32. 移動端的布局用過媒體查詢嗎？
- 33. 使用 CSS 預處理器嗎？喜歡哪個？
- 34. CSS 優化、提高性能的方法有哪些？
- 35. 瀏覽器是怎樣解析 CSS 選擇器的？
- 36. 在網頁中應該使用奇數還是偶數的字體？為什么呢？
- 37. margin 和 padding 分別適合什么場景使用？
- 38. 抽離樣式模塊怎么寫，說出思路，有無實踐經驗？
- 39. 簡單說一下 css3 的 all 屬性。
- 40. 為什么不建議使用統配符初始化 css 樣式。
- 41. absolute 的 containingblock（包含塊）計算方式跟正常流有什么不同？
- 42. 對于 hasLayout 的理解？
- 43. 元素豎向的百分比設定是相對于容器的高度嗎？
- 44. 全屏滾動的原理是什么？用到了 CSS 的哪些屬性？（待深入實踐）
- 45. 什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的 IE？（待深入了解）
- 46. 視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）
- 47. 如何修改 chrome 記住密碼后自動填充表單的黃色背景？
- 48. 怎么讓 Chrome 支持小于 12px 的文字？
- 49. 讓頁面里的字體變清晰，變細用 CSS 怎么做？
- 50. font-style 屬性中 italic 和 oblique 的區別？
- 51. 設備像素、css 像素、設備獨立像素、dpr、ppi 之間的區別？
- 52. layout viewport、visual viewport 和 ideal viewport 的區別？
- 53. position:fixed;在 android 下無效怎么處理？
- 54. 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）
- 55. 如何讓去除 inline-block 元素間間距？
- 56. overflow:scroll 時不能平滑滾動的問題怎么處理？
- 57. 有一個高度自適應的 div，里面有兩個 div，一個高度 100px，希望另一個填滿剩下的高度。
- 58. png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過 webp？
- 59. 瀏覽器如何判斷是否支持 webp 格式圖片
- 60. 什么是 Cookie 隔離？（或者說：請求資源的時候不要讓它帶 cookie 怎么做）
- 61. style 標簽寫在 body 后與 body 前有什么區別？
- 62. 什么是 CSS 預處理器/后處理器？
- 63. 闡述一下 CSSSprites
- 64. 使用 rem 布局的優缺點？
- 65. 幾種常見的 CSS 布局
- 66. 畫一條 0.5px 的線
- 67. transition 和 animation 的區別
- 68. 什么是首選最小寬度？
- 69. 為什么 height:100\x 會無效？
- 70. min-width/max-width 和 min-height/max-height 屬性間的覆蓋規則？
- 71. 內聯盒模型基本概念
- 72. 什么是幽靈空白節點？
- 73. 什么是替換元素？
- 74. 替換元素的計算規則？
- 75. content 與替換元素的關系？
- 76. margin:auto 的填充規則？
- 77. margin 無效的情形
- 78. border 的特殊性？
- 79. 什么是基線和 x-height？
- 80. line-height 的特殊性？
- 81. vertical-align 的特殊性？
- 82. overflow 的特殊性？
- 83. 無依賴絕對定位是什么？
- 84. absolute 與 overflow 的關系？
- 85. clip 裁剪是什么？
- 86. relative 的特殊性？
- 87. 什么是層疊上下文？
- 88. 什么是層疊水平？
- 89. 元素的層疊順序？
- 90. 層疊準則？
- 91. font-weight 的特殊性？
- 92. text-indent 的特殊性？
- 93. letter-spacing 與字符間距？
- 94. word-spacing 與單詞間距？
- 95. white-space 與換行和空格的控制？
- 96. 隱藏元素的 background-image 到底加不加載？
- 97. 如何實現單行／多行文本溢出的省略（...）？
- 98. 常見的元素隱藏方式？
- 99. css 實現上下固定中間自適應布局？
- 100. css 兩欄布局的實現？
- 101. css 三欄布局的實現？
- 102. 實現一個寬高自適應的正方形
- 103. 實現一個三角形
- 104. 一個自適應矩形，水平垂直居中，且寬高比為 2:1
- 105. 你知道 CSS 中不同屬性設置為百分比\x 時對應的計算基準？
- JavaScript基礎
- 1. 介紹 js 的基本數據類型
- 2. JavaScript 有幾種類型的值？你能畫一下他們的內存圖嗎？
- 3. 什么是堆？什么是棧？它們之間有什么區別和聯系？
- 4. 內部屬性 [[Class]] 是什么？
- 5. 介紹 js 有哪些內置對象？
- 6. undefined 與 undeclared 的區別？
- 7. null 和 undefined 的區別？
- 8. 如何獲取安全的 undefined 值？
- 9. 說幾條寫 JavaScript 的基本規范？
- 10. JavaScript 原型，原型鏈？ 有什么特點？
- 11. js 獲取原型的方法？
- 12. 在 js 中不同進制數字的表示方式
- 13. js 中整數的安全范圍是多少？
- 14. typeof NaN 的結果是什么？
- 15. isNaN 和 Number.isNaN 函數的區別？
- 16. Array 構造函數只有一個參數值時的表現？
- 17. 其他值到字符串的轉換規則？
- 18. 其他值到數字值的轉換規則？
- 19. 其他值到布爾類型的值的轉換規則？
- 20. {} 和 [] 的 valueOf 和 toString 的結果是什么？
- 21. 什么是假值對象？
- 22. ~ 操作符的作用？
- 23. 解析字符串中的數字和將字符串強制類型轉換為數字的返回結果都是數字，它們之間的區別是什么？
- 24. 操作符什么時候用于字符串的拼接？
- 25. 什么情況下會發生布爾值的隱式強制類型轉換？
- 26. || 和 && 操作符的返回值？
- 27. Symbol 值的強制類型轉換？
- 28. == 操作符的強制類型轉換規則？
- 29. 如何將字符串轉化為數字，例如 '12.3b'?
- 30. 如何將浮點數點左邊的數每三位添加一個逗號，如 12000000.11 轉化為『12,000,000.11』?
- 31. 常用正則表達式
- 32. 生成隨機數的各種方法？
- 33. 如何實現數組的隨機排序？
- 34. javascript 創建對象的幾種方式？
- 35. JavaScript 繼承的幾種實現方式？
- 36. 寄生式組合繼承的實現？
- 37. Javascript 的作用域鏈？
- 38. 談談 This 對象的理解。
- 39. eval 是做什么的？
- 40. 什么是 DOM 和 BOM？
- 41. 寫一個通用的事件偵聽器函數。
- 42. 事件是什么？IE 與火狐的事件機制有什么區別？ 如何阻止冒泡？
- 43. 三種事件模型是什么？
- 44. 事件委托是什么？
- 45. ["1", "2", "3"].map(parseInt) 答案是多少？
- 46. 什么是閉包，為什么要用它？
- 47. javascript 代碼中的 "use strict"; 是什么意思 ? 使用它區別是什么？
- 48. 如何判斷一個對象是否屬于某個類？
- 49. instanceof 的作用？
- 50. new 操作符具體干了什么呢？如何實現？
- 51. Javascript 中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
- 52. 對于 JSON 的了解？
- 53. [].forEach.call($$("<em>"),function(a){a.style.outline="1px solid #" (~~(Math.random()</em>(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？
- 54. js 延遲加載的方式有哪些？
- 55. Ajax 是什么? 如何創建一個 Ajax？
- 56. 談一談瀏覽器的緩存機制？
- 57. Ajax 解決瀏覽器緩存問題？
- 58. 同步和異步的區別？
- 59. 什么是瀏覽器的同源政策？
- 60. 如何解決跨域問題？
- 61. 服務器代理轉發時，該如何處理 cookie？
- 62. 簡單談一下 cookie ？
- 63. 模塊化開發怎么做？
- 64. js 的幾種模塊規范？
- 65. AMD 和 CMD 規范的區別？
- 66. ES6 模塊與 CommonJS 模塊、AMD、CMD 的差異。
- 67. requireJS 的核心原理是什么？（如何動態加載的？如何避免多次加載的？如何 緩存的？）
- 68. JS 模塊加載器的輪子怎么造，也就是如何實現一個模塊加載器？
- 69. ECMAScript6 怎么寫 class，為什么會出現 class 這種東西?
- 70. documen.write 和 innerHTML 的區別？
- 71. DOM 操作——怎樣添加、移除、移動、復制、創建和查找節點？
- 72. innerHTML 與 outerHTML 的區別？
- 73. .call() 和 .apply() 的區別？
- 74. JavaScript 類數組對象的定義？
- 75. 數組和對象有哪些原生方法，列舉一下？
- 76. 數組的 fill 方法？
- 77. [,,,] 的長度？
- 78. JavaScript 中的作用域與變量聲明提升？
- 79. 如何編寫高性能的 Javascript ？
- 80. 簡單介紹一下 V8 引擎的垃圾回收機制
- 81. 哪些操作會造成內存泄漏？
- 82. 需求：實現一個頁面操作不會整頁刷新的網站，并且能在瀏覽器前進、后退時正確響應。給出你的技術實現方案？
- 83. 如何判斷當前腳本運行在瀏覽器還是 node 環境中？（阿里）
- 84. 把 script 標簽放在頁面的最底部的 body 封閉之前和封閉之后有什么區別？瀏覽器會如何解析它們？
- 85. 移動端的點擊事件的有延遲，時間是多久，為什么會有？ 怎么解決這個延時？
- 86. 什么是“前端路由”？什么時候適合使用“前端路由”？“前端路由”有哪些優點和缺點？
- 87. 如何測試前端代碼么？ 知道 BDD, TDD, Unit Test 么？ 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)？
- 88. 檢測瀏覽器版本版本有哪些方式？
- 89. 什么是 Polyfill ？
- 90. 使用 JS 實現獲取文件擴展名？
- 91. 介紹一下 js 的節流與防抖？
- 92. Object.is() 與原來的比較操作符 “===”、“==” 的區別？
- 93. escape,encodeURI,encodeURIComponent 有什么區別？
- 94. Unicode 和 UTF-8 之間的關系？
- 95. js 的事件循環是什么？
- 96. js 中的深淺拷貝實現？
- 97. 手寫 call、apply 及 bind 函數
- 98. 函數柯里化的實現
- 99. 為什么 0.1 0.2 != 0.3？如何解決這個問題？
- 100. 原碼、反碼和補碼的介紹
- 101. toPrecision 和 toFixed 和 Math.round 的區別？
- 102. 什么是 XSS 攻擊？如何防范 XSS 攻擊？
- 103. 什么是 CSP？
- 104. 什么是 CSRF 攻擊？如何防范 CSRF 攻擊？
- 105. 什么是 Samesite Cookie 屬性？
- 106. 什么是點擊劫持？如何防范點擊劫持？
- 107. SQL 注入攻擊？
- 108. 什么是 MVVM？比之 MVC 有什么區別？什么又是 MVP ？
- 109. vue 雙向數據綁定原理？
- 110. Object.defineProperty 介紹？
- 111. 使用 Object.defineProperty() 來進行數據劫持有什么缺點？
- 112. 什么是 Virtual DOM？為什么 Virtual DOM 比原生 DOM 快？
- 113. 如何比較兩個 DOM 樹的差異？
- 114. 什么是 requestAnimationFrame ？
- 115. 談談你對 webpack 的看法
- 116. offsetWidth/offsetHeight,clientWidth/clientHeight 與 scrollWidth/scrollHeight 的區別？
- 117. 談一談你理解的函數式編程？
- 118. 異步編程的實現方式？
- 119. Js 動畫與 CSS 動畫區別及相應實現
- 120. get 請求傳參長度的誤區
- 121. URL 和 URI 的區別？
- 122. get 和 post 請求在緩存方面的區別
- 123. 圖片的懶加載和預加載
- 124. mouseover 和 mouseenter 的區別？
- 125. js 拖拽功能的實現
- 126. 為什么使用 setTimeout 實現 setInterval？怎么模擬？
- 127. let 和 const 的注意點？
- 128. 什么是 rest 參數？
- 129. 什么是尾調用，使用尾調用有什么好處？
- 130. Symbol 類型的注意點？
- 131. Set 和 WeakSet 結構？
- 132. Map 和 WeakMap 結構？
- 133. 什么是 Proxy ？
- 134. Reflect 對象創建目的？
- 135. require 模塊引入的查找方式？
- 136. 什么是 Promise 對象，什么是 Promises/A 規范？
- 137. 手寫一個 Promise
- 138. 如何檢測瀏覽器所支持的最小字體大小？
- 139. 怎么做 JS 代碼 Error 統計？
- 140. 單例模式模式是什么？
- 141. 策略模式是什么？
- 142. 代理模式是什么？
- 143. 中介者模式是什么？
- 144. 適配器模式是什么？
- 145. 觀察者模式和發布訂閱模式有什么不同？
- 146. Vue 的生命周期是什么？
- 147. Vue 的各個生命階段是什么？
- 148. Vue 組件間的參數傳遞方式？
- 149. computed 和 watch 的差異？
- 150. vue-router 中的導航鉤子函數
- 151. $route 和 $router 的區別？
- 152. vue 常用的修飾符？
- 153. vue 中 key 值的作用？
- 154. computed 和 watch 區別？
- 155. keep-alive 組件有什么作用？
- 156. vue 中 mixin 和 mixins 區別？
- 157. 開發中常用的幾種 Content-Type ？
- 158. 如何封裝一個 javascript 的類型判斷函數？
- 159. 如何判斷一個對象是否為空對象？
- 160. 使用閉包實現每隔一秒打印 1,2,3,4
- 161. 手寫一個 jsonp
- 162. 手寫一個觀察者模式？
- 163. EventEmitter 實現
- 164. 一道常被人輕視的前端 JS 面試題
- 165. 如何確定頁面的可用性時間，什么是 Performance API？
- 166. js 中的命名規則
- 167. js 語句末尾分號是否可以省略？
- 168. Object.assign()
- 169. Math.ceil 和 Math.floor
- 170. js for 循環注意點
- 171. 一個列表，假設有 100000 個數據，這個該怎么辦？
- 172. js 中倒計時的糾偏實現？
- 173. 進程間通信的方式？
- 174. 如何查找一篇英文文章中出現頻率最高的單詞？
- 框架
- Vue 常考基礎知識點
- Vue 常考進階知識點
- 對于MVVM的理解
- Vue的生命周期
- Vue實現數據雙向綁定的原理
- Vue組件間的參數傳遞
- Vue的路由實現：hash模式 和 history模式
- Vue與Angular以及React的區別
- Vue路由的鉤子函數
- Vuex是什么？怎么使用？哪種功能場景使用它？
- Vue-cli如何新增自定義指令
- Vue如何自定義一個過濾器
- 對keep-alive 的了解
- 一句話就能回答的Vue面試題
- React 常考基礎知識點
- React 常考進階知識點
- 瀏覽器
- 性能與安全
- 性能
- 安全
- 網絡與操作系統
- 計算機網絡知識總結
- 計算機操作系統
- 設計模式
- 算法
- 排序
- 冒泡排序
- 選擇排序
- 插入排序
- 希爾排序
- 歸并排序
- 快速排序
- 堆排序
- 基數排序
- 快速排序相對于其他排序效率更高的原因
- 系統自帶排序實現
- 穩定性
- 排序面試題目總結
- 樹
- 二叉樹相關性質
- 滿二叉樹
- 完全二叉樹
- 平衡二叉查找樹（AVL）
- B-樹
- B+樹
- 數據庫索引
- 紅黑樹
- Huffman 樹
- 二叉查找樹
- 求解二叉樹中兩個節點的最近公共祖先節點
- 鏈表
- 反轉單向鏈表
- 動態規劃
- 爬樓梯問題
- 遞歸方法分析
- 備忘錄方法
- 迭代法
- 經典筆試題
- 1. js 實現一個函數，完成超過范圍的兩個大整數相加功能
- 2. js 如何實現數組扁平化？
- 3. js 如何實現數組去重？
- 4. 如何求數組的最大值和最小值？
- 5. 如何求兩個數的最大公約數？
- 6. 如何求兩個數的最小公倍數？
- 7. 實現 IndexOf 方法？
- 8. 判斷一個字符串是否為回文字符串？
- 9. 實現一個累加函數的功能比如 sum(1,2,3)(2).valueOf()
- 10. 使用 reduce 方法實現 forEach、map、filter
- 11. 設計一個簡單的任務隊列，要求分別在 1,3,4 秒后打印出 "1", "2", "3"
- 12. 如何查找一篇英文文章中出現頻率最高的單詞？