前端面试题集锦（一）之HTML部分
前端的發展日新月異，前端開發也早已從原來的切圖套頁面，變成了現在的非常復雜的技術體系，近期由于找工作，面試了很多家單位，也總結了一部分前端面試中經常會遇到的面試類型，并一一解答。
主要分為HTML、CSS、Javascript及Javascript進階、瀏覽器原理及相關知識、三大主要前端架構（VUE、Angular、React）、ES6相關知識、
前端中的一些設計模式、前端工程化開發工具、前端所需要了解的其他知識等這些部分。如果有不夠全面和正確的的，歡迎指正和補充。
前端知識及面試集錦第一部分：HTML和HTML5
1、HTML與HTML5，聲明模式有什么不同，為什么不同
解答：
<!DOCTYPE> 聲明不是一個 HTML 標簽；它是用來告知 Web 瀏覽器頁面使用了哪種 HTML 版本。
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前，<!DOCTYPE>聲明告知瀏覽器的解析器用什么文檔標準解析這個文檔（標準模式）。若聲明錯誤或未聲明會導致文檔以兼容模式/混雜模式呈現。
<!DOCTYPE> 標簽沒有結束標簽。<!DOCTYPE> 聲明不區分大小寫。總是先給 HTML 文檔添加 <!DOCTYPE> 聲明，確保瀏覽器能夠預先知道文檔類型.
在html4.01中,<!DOCTYPE>聲明需要引用DTD（文檔類型聲明），因為它是基于SGML（Standard Generalized Markup Language 標準通用標記語言），DTD 指定了標記語言的規則，確保了瀏覽器能夠正確的渲染內容。
HTML5不基于SGML因此不需要引用DTD。
HTML5只有一種聲明方式： <!DOCTYPE html>
HTML 4.01 規定了三種不同的 <!DOCTYPE> 聲明，分別是：Strict、Transitional 和 Frameset
Strict模式，不允許使用表現性、廢棄元素（如font）以及框架集（如frameset）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional 模式 ，允許使用表現性、廢棄元素（如font），不允許使用框架集（如frameset）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset 模式，允許表現性元素，廢棄元素以及框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2、HTML的組成部分，每個部分的結構和作用
解答：
一個標準完整的HTML主要由聲明、html標簽，head標簽,body標簽等組成
head中可以包括 meta 、link、title、base、style、script等標簽
body定義文檔的主題，大部分實體元素在body中
其中meta標簽：可提供有關頁面的原信息（mata-information）,meta 有一個必選屬性content 和三個可選屬性 http-equiv ,name, scheme
link標簽：用于引入CSS樣式表文件，只能出現在head中
title標簽：定義文檔的標題，可顯示在瀏覽器頁簽中
base標簽： 為頁面上的所有鏈接規定默認地址或默認目標。通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。使用 <base> 標簽可以改變這一點。瀏覽器隨后將不再使用 當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。
style標簽：標簽用于為 HTML 文檔定義樣式信息。在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文檔。type 屬性是必需的，唯一可能的值是 "text/css"。
script標簽：標簽用于定義客戶端腳本，比如 JavaScript。script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。
?
3、HTML中的塊級元素、行內元素、行內塊元素各有哪些，其語義表達的是什么
解答：
?
元素按照功能可以分為基礎元素、格式元素、表單元素、框架元素、圖像元素、多媒體元素、鏈接元素、列表元素、表格元素、樣式語義元素、腳本元素、元信息元素等
?
（1）常用塊級元素div、h1-h6、p、table、ul、ol、dl、li、dt、dd、header、footer、article、aside、section
?
? (2)? ?常用行內元素span、大部分的格式元素b、strong、i、del、em、pre、sub、sup、u等，image、a、input、button、select、textarea、label
?
4、HTML5中新增了哪些元素？廢除了哪些元素？，
（1）HTML5中引入了新的canvas元素，新的多媒體元素audio、video、source、embed、track等，新的表單元素datelist、keygen、output，新的語義化元素article、aside、details、command、header、footer、nav、section等
（2） 廢除了舊版中一些用于格式的元素，applet、basefont、font、center、big、dir、frame等
?
5、HTML5中的WebStorage技術
解答：
WebStorage是HTML新增的本地存儲解決方案之一，但并不是為了取代cookie而制定的標準，
cookie作為HTTP協議的一部分用來處理客戶端和服務器通信是不可或缺的，session正是依賴于實現的客戶端狀態保持。
WebStorage的意圖在于解決本來不應該cookie做，卻不得不用cookie的本地存儲。
HTML5 提供了兩種在客戶端存儲數據的新方法：localStorage,sessionStorage,
localStorage在本地永久性存儲數據，除非顯式將其刪除或清空，
sessionStorage存儲的數據只在會話期間有效，關閉瀏覽器則自動刪除。兩個對象都有共同的API
length、key、getItem、setItem、removeItem、clear
同時HTML5規定了一個storage事件，在WebStorage發生變化的時候觸發，可以用此監視不同頁面對storage的修改
?
6、HTML5中的Websocket
解答：
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。
在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。
?
轉載于:https://www.cnblogs.com/liquanjiang/p/10568427.html
總結
以上是生活随笔為你收集整理的前端面试题集锦（一）之HTML部分的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++读取与保持图片
- 下一篇： 简单的前端上传图片代码