前端面試題集錦（一）之HTML部分

時間 2019-12-02

標籤端面試題集錦 html 部分欄目 HTML 简体版

原文原文鏈接

前端的發展突飛猛進，前端開發也早已從原來的切圖套頁面，變成了如今的很是複雜的技術體系，近期因爲找工做，面試了不少家單位，也總結了一部分前端面試中常常會遇到的面試類型，並一一解答。
主要分爲HTML、CSS、Javascript及Javascript進階、瀏覽器原理及相關知識、三大主要前端架構（VUE、Angular、React）、ES6相關知識、
前端中的一些設計模式、前端工程化開發工具、前端所須要瞭解的其餘知識等這些部分。若是有不夠全面和正確的的，歡迎指正和補充。css

前端知識及面試集錦第一部分：HTML和HTML5html

一、HTML與HTML5，聲明模式有什麼不一樣，爲何不一樣前端

解答：面試

<!DOCTYPE> 聲明不是一個 HTML 標籤；它是用來告知 Web 瀏覽器頁面使用了哪一種 HTML 版本。canvas

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前，<!DOCTYPE>聲明告知瀏覽器的解析器用什麼文檔標準解析這個文檔（標準模式）。若聲明錯誤或未聲明會致使文檔以兼容模式/混雜模式呈現。設計模式

<!DOCTYPE> 標籤沒有結束標籤。<!DOCTYPE> 聲明不區分大小寫。老是先給 HTML 文檔添加 <!DOCTYPE> 聲明，確保瀏覽器可以預先知道文檔類型.前端工程化

在html4.01中,<!DOCTYPE>聲明須要引用DTD（文檔類型聲明），由於它是基於SGML（Standard Generalized Markup Language 標準通用標記語言），DTD 指定了標記語言的規則，確保了瀏覽器可以正確的渲染內容。瀏覽器

HTML5不基於SGML所以不須要引用DTD。服務器

HTML5只有一種聲明方式： <!DOCTYPE html>cookie

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">

二、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 屬性指向外部腳本文件。

三、HTML中的塊級元素、行內元素、行內塊元素各有哪些，其語義表達的是什麼

解答：

元素按照功能能夠分爲基礎元素、格式元素、表單元素、框架元素、圖像元素、多媒體元素、連接元素、列表元素、表格元素、樣式語義元素、腳本元素、元信息元素等

（1）經常使用塊級元素div、h1-h六、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

四、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等

五、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的修改

六、HTML5中的Websocket

解答：

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。