【前端知識梳理】HTML篇 筆記整理（一）

寫在開頭

大家好，這裏是lionLoveVue，基礎知識決定了編程思維，學如逆水行舟，不進則退。金三銀四，爲了面試也還在慢慢積累知識，Github上面可以直接查看所有前端知識點梳理，github傳送門，覺得不錯，點個Star★，持續更新中。另外，也可以關注微信公衆號：小獅子前端Vue，源碼以及資料今後都會放在裏面。

一直想着成爲一個up主，正值時間挺多的，4月份左右面試的面經我會製作視頻去分享，趕快捧個場吧。嗶哩嗶哩：一百個Chocolate

1、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]-->

2、前端注意哪些SEO?

• 合理的title、description、keywords：搜索對着三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可
• 語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
• 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
• 重要內容不要用js輸出：爬蟲不會執行js獲取內容
• 少用iframe：搜索引擎不會抓取iframe中的內容
• 非裝飾性圖片必須加alt
• 提高網站速度：網站速度是搜索引擎排序的一個重要指標

3、從瀏覽器地址欄輸入url到顯示頁面的步驟

簡略回答

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
• 服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

詳細回答

1. 從瀏覽器接收url到開啓網絡請求線程（這一部分可以展開瀏覽器的機制以及進程與線程之間的關係）
2. 開啓網絡線程到發出一個完整的HTTP請求（這一部分涉及到dns查詢，TCP/IP請求，五層因特網協議棧等知識）
3. 從服務器接收到請求到對應後臺接收到請求（這一部分可能涉及到負載均衡，安全攔截以及後臺內部的處理等等）
4. 後臺和前臺的HTTP交互（這一部分包括HTTP頭部、響應碼、報文結構、cookie等知識，可以提下靜態資源的cookie優化，以及編碼解碼，如gzip壓縮等）
5. 單獨拎出來的緩存問題，HTTP的緩存（這部分包括http緩存頭部，ETag，catch-control等）
6. 瀏覽器接收到HTTP數據包後的解析流程（解析html-詞法分析然後解析成dom樹、解析css生成css規則樹、合併成render樹，然後layout、painting渲染、複合圖層的合成、GPU繪製、外鏈資源的處理、loaded和DOMContentLoaded等）
7. CSS的可視化格式模型（元素的渲染規則，如包含塊，控制框，BFC，IFC等概念）
8. JS引擎解析過程（JS的解釋階段，預處理階段，執行階段生成執行上下文，VO，作用域鏈、回收機制等等）
9. 其它（可以拓展不同的知識模塊，如跨域，web安全，hybrid模式等等內容）

4、如何進行網站性能優化

• content 方面

  減少HTTP請求：合併文件、CSS精靈、inline Image
  減少DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
  減少DOM元素數量

• Cookie 方面

  減小cookie大小

• Server 方面

  使用CDN
  配置ETag
  對組件使用Gzip壓縮

• 圖片 方面

  優化圖片：根據實際顏色需要選擇色深、壓縮
  優化css精靈
  不要在HTML中拉伸圖片

• css 方面

  將樣式表放到頁面頂部
  不使用CSS表達式
  使用<link>不使用@import

• js 方面

  將腳本放到頁面底部
  將javascript和css從外部引入
  壓縮javascript和css
  刪除不需要的腳本
  減少DOM訪問

5、語義化的理解

• 簡單來說：用正確的標籤做正確的事情！
• HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
• 在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的。
• 搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
• 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

6、對瀏覽器內核的理解

• 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核

• JS引擎則：解析和執行javascript來實現網頁的動態效果

• 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎

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

• cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）

• cookie數據始終在同源的http請求中攜帶（即使不需要），即會在瀏覽器和服務器間來回傳遞

• sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

• 存儲大小：

  cookie數據大小不能超過4k
  sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大

• 有期時間：

  localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
  sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
  cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

8、頁面訪問cookie的限制條件

cookie （儲存在用戶本地終端上的數據）

cookie 指某些網站爲了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據。cookie 在網絡系統中幾乎無處不在，當我們瀏覽以前訪問過的網站時，網頁中可能會出現 ：你好 XXX。

1. 跨域問題：

cookie允許Web開發者保留他們的用戶的登錄狀態。但是當你的站點有一個以上的域名時就會出現問題了。在cookie規範上說，一個cookie只能用於一個域名，不能夠發給其它的域名。因此，如果在瀏覽器中對一個域名設置了一個cookie，這個cookie對於其它的域名將無效。

解決：

• 通過nginx反向代理
• jsonp方式請求

2. 設置了HTTP only：

如果在cookie中設置了HttpOnly屬性，那麼通過程序(JS腳本、Applet等)將無法讀取到cookie信息，這樣能有效的防止XSS攻擊。

9、cookie的作用與弊端

cookie的作用

• 可以在客戶端上保存用戶數據，起到簡單的緩存和用戶身份識別等作用。
• 保存用戶的登陸狀態，用戶進行登陸，成功登陸後，服務器生成特定的cookie返回給客戶端，客戶端下次訪問該域名下的任何頁面，將該cookie的信息發送給服務器，服務器經過檢驗，來判斷用戶是否登陸。
• 記錄用戶的行爲。

cookie弊端

• 增加流量消耗，每次請求都需要帶上cookie信息。
• 安全性隱患，cookie使用明文傳輸。如果cookie被人攔截了，那人就可以取得所有的session信息。
• Cookie數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉

10、介紹cookie的屬性

在chrome控制檯中的Application選項卡中可以看到cookie的信息。

一個域名下面可能存在着很多個cookie對象。但一個cookie只能用於一個域名，不能夠發給其它的域名。

• Name

  爲一個cookie的名稱（用 JavaScript 操作 Cookie 的時候注意對 Value 進行編碼處理。）

• value

  爲一個cookie的值（用 JavaScript 操作 Cookie 的時候注意對 Value 進行編碼處理。）

• Domain
  爲可以訪問此cookie的域名

注：二級域名能讀取設置了domain爲頂級域名或者自身的cookie，不能讀取其他二級域名domain的cookie。所以要想cookie在多個二級域名中共享，需要設置domain爲頂級域名，這樣就可以在所有二級域名裏面獲得到這個cookie的值了。

頂級域名只能獲取到domain設置爲頂級域名的cookie，其他domain設置爲二級域名的無法獲取。

• Path

爲可以訪問此cookie的頁面路徑。 比如domain是abc.com,path是/test，那麼只有/test路徑下的頁面可以讀取此cookie

• Expires

字段爲此cookie超時時間。若設置其值爲一個時間，那麼當到達此時間後，此cookie失效。不設置的話默認值是Session，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標籤頁，而是整個瀏覽器) 後，此cookie失效。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

當爲會話性 Cookie 的時候，值保存在客戶端內存中，並在用戶關閉瀏覽器時失效。需要注意的是，有些瀏覽器提供了會話恢復功能，這種情況下即使關閉了瀏覽器，會話期 Cookie 也會被保留下來，就好像瀏覽器從來沒有關閉一樣。

與會話性 Cookie 相對的是持久性 Cookie，持久性 Cookies 會保存在用戶的硬盤中，直至過期或者清除 Cookie。這裏值得注意的是，設定的日期和時間只與客戶端相關，而不是服務端。

• Max-Age

Max-Age用於設置在 Cookie 失效之前需要經過的秒數。比如：

Set-Cookie: id=a3fWa; Max-Age=604800;

Max-Age 可以爲正數、負數、甚至是 0。

如果 max-Age 屬性爲正數時，瀏覽器會將其持久化，即寫到對應的 Cookie 文件中。

當 max-Age 屬性爲負數，則表示該 Cookie 只是一個會話性 Cookie。

當 max-Age 爲 0時，則會立即刪除這個 Cookie。

假如 Expires和 Max-Age 都存在，Max-Age優先級更高。

• Size
  此cookie大小

• HttpOnly

若此屬性爲true，則只有在http請求頭中會帶有此cookie的信息，而不能通過document.cookie來訪問此cookie。

• Secure
  設置是否只能通過https來傳遞此條cookie。使用 HTTPS安全協議，可以保護 Cookie 在瀏覽器和 Web 服務器間的傳輸過程中不被竊取和篡改。

• SameSite
  ( 3月份比較火的一個問題，下面會參考別人文章進行整理）

11、預測最近面試會考 Cookie 的 SameSite 屬性

參考文章出處

前言

2 月份發佈的 Chrome 80 版本中默認屏蔽了第三方的 Cookie，在灰度期間，就導致了阿里系的很多應用都產生了問題，爲此還專門成立了小組，推動各 BU 進行改造，目前阿里系基本已經改造完成。所有的前端團隊估計都收到過通知，也着實加深了一把大家對於 Cookie 的理解，所以很可能就此出個面試題，而即便不是面試題，當問到 HTTP 相關內容的時候，不妨也扯到這件事情來，一能表明你對前端時事的跟進，二還能借此引申到前端安全方面的內容，爲你的面試加分。

HTTP

一般我們都會說 “HTTP 是一個無狀態的協議”，不過要注意這裏的 HTTP 其實是指 HTTP 1.x，而所謂無狀態協議，簡單的理解就是即使同一個客戶端連續兩次發送請求給服務器，服務器也識別不出這是同一個客戶端發送的請求，這導致的問題就比如你加了一個商品到購物車中，但因爲識別不出是同一個客戶端，你刷新下頁面就沒有了……

Cookie

爲了解決 HTTP 無狀態導致的問題，後來出現了 Cookie。不過這樣說可能會讓你產生一些誤解，首先無狀態並不是不好，有優點，但也會導致一些問題。而 Cookie 的存在也不是爲了解決通訊協議無狀態的問題，只是爲了解決客戶端與服務端會話狀態的問題，這個狀態是指後端服務的狀態而非通訊協議的狀態。

Cookie 的設置

那 Cookie 是怎麼設置的呢？簡單來說就是

1. 客戶端發送 HTTP 請求到服務器
2. 當服務器收到 HTTP 請求時，在響應頭裏面添加一個 Set-Cookie 字段
3. 瀏覽器收到響應後保存下 Cookie
4. 之後對該服務器每一次請求中都通過 Cookie 字段將 Cookie 信息發送給服務器。

12、SameSite

SameSite 是最近非常值得一提的內容，因爲 2 月份發佈的 Chrome80 版本中默認屏蔽了第三方的 Cookie，這會導致阿里系的很多應用都產生問題，爲此還專門成立了問題小組，推動各 BU 進行改造。

作用

SameSite 屬性可以讓Cookie在跨站請求時不會被髮送，從而可以阻止跨站請求僞造攻擊（CSRF）。

屬性值

• Strict僅允許一方請求攜帶 Cookie，即瀏覽器將只發送相同站點請求的 Cookie，即當前網頁 URL 與請求目標 URL 完全一致。
• Lax允許部分第三方請求攜帶 Cookie
• None無論是否跨站都會發送 Cookie

之前默認是None 的，Chrome80 後默認是 Lax。

跨域和跨站

首先要理解的一點就是跨站和跨域是不同的。同站(same-site)/跨站(cross-site)」和第一方(first-party)/第三方(third-party)是等價的。但是與瀏覽器同源策略（SOP）中的「同源(same-origin)/跨域(cross-origin)」是完全不同的概念。

同源策略的同源是指兩個 URL 的協議/主機名/端口一致。例如，https://www.taobao.com/pages/...，它的協議是https，主機名是www.taobao.com，端口是 443。

同源策略作爲瀏覽器的安全基石，其「同源」判斷是比較嚴格的，相對而言，Cookie中的「同站」判斷就比較寬鬆：只要兩個 URL 的 eTLD+1 相同即可，不需要考慮協議和端口。其中，eTLD 表示有效頂級域名，註冊於 Mozilla 維護的公共後綴列表（Public Suffix List）中，例如，.com、.co.uk、.github.io 等。eTLD+1 則表示，有效頂級域名+二級域名，例如taobao.com等

舉幾個例子，www.taobao.com和www.baidu.com是跨站，www.a.taobao.com和www.b.taobao.com是同站，a.github.io和b.github.io是跨站(注意是跨站)。

改變

接下來看下從 None 改成 Lax 到底影響了哪些地方的 Cookies 的發送？直接來一個圖表：

從上圖可以看出，對大部分 web 應用而言，Post 表單，iframe，AJAX，Image 這四種情況從以前的跨站會發送三方 Cookie，變成了不發送。

Post表單：應該的，學 CSRF 總會舉表單的例子。

iframe：iframe 嵌入的 web 應用有很多是跨站的，都會受到影響。

AJAX：可能會影響部分前端取值的行爲和結果。

Image：圖片一般放 CDN，大部分情況不需要 Cookie，故影響有限。但如果引用了需要鑑權的圖片，可能會受到影響。

除了這些還有 script 的方式，這種方式也不會發送 Cookie，像淘寶的大部分請求都是 jsonp，如果涉及到跨站也有可能會被影響。

問題

我們再看看會出現什麼的問題？舉幾個例子：

• 天貓和飛豬的頁面靠請求淘寶域名下的接口獲取登錄信息，由於 Cookie 丟失，用戶無法登錄，頁面還會誤判斷成是由於用戶開啓了瀏覽器的“禁止第三方 Cookie”功能導致而給與錯誤的提示
• 淘寶部分頁面內嵌支付寶確認付款和確認收貨頁面、天貓內嵌淘寶的登錄頁面等，由於 Cookie 失效，付款、登錄等操作都會失敗
• 阿里媽媽在各大網站比如今日頭條，網易，微博等投放的廣告，也是用 iframe 嵌入的，沒有了 Cookie，就不能準確的進行推薦
• 一些埋點系統會把用戶 id 信息埋到 Cookie 中，用於日誌上報，這種系統一般走的都是單獨的域名，與業務域名分開，所以也會受到影響。
• 一些用於防止惡意請求的系統，對判斷爲惡意請求的訪問會彈出驗證碼讓用戶進行安全驗證，通過安全驗證後會在請求所在域種一個Cookie，請求中帶上這個Cookie之後，短時間內不再彈安全驗證碼。在Chrome80以上如果因爲Samesite的原因請求沒辦法帶上這個Cookie，則會出現一直彈出驗證碼進行安全驗證。
• 天貓商家後臺請求了跨域的接口，因爲沒有 Cookie，接口不會返回數據
• ……

如果不解決，影響的系統其實還是很多的……

解決方案就是設置 SameSite 爲 none。

13、doctype 的作用？嚴格模式與混雜模式如何區分？它們有何意義？

DOCTYPE是document type (文檔類型) 的縮寫。 < !DOCTYPE > 聲明位於文檔的最前面，處於標籤之前，它不是html標籤。主要作用是告訴瀏覽器的解析器使用哪種HTML規範或者XHTML規範來解析頁面。

嚴格模式和混雜模式都是瀏覽器的呈現模式，瀏覽器究竟使用混雜模式還是嚴格模式呈現頁面與網頁中的DTD（文件類型定義）有關，DTD裏面包含了文檔的規則。比如：loose.dtd

• 嚴格模式：又稱標準模式，是指瀏覽器按照W3C標準來解析代碼，呈現頁面
• 混雜模式：又稱爲怪異模式或者兼容模式，是指瀏覽器按照自己的方式來解析代碼，使用一種比較寬鬆的向後兼容的方式來顯示頁面。

14、HTML5 爲什麼只需寫< !DOCTYPE HTML> ?

HTML5不基於SGML （標準通用標記語言），因此不需要對DTD（ DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。）進行引用，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）。

而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

15、WEB標準以及W3C標準是什麼?

標籤閉合、標籤小寫、不亂嵌套、使用外鏈css和js、結構行爲表現的分離

16、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？

行內元素不可以設置寬高，不獨佔一行
塊級元素可以設置寬高，獨佔一行

• 行內：

<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>

• 塊級：

<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>

• 空：

常見的：

<br> <hr> <img> <input> <link> <meta>

鮮爲人知的：

<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>

17、xhtml和html有什麼區別?

• 功能上的差別

  主要是XHTML可兼容各大瀏覽器、手機以及PDA，並且瀏覽器也能快速正確地編譯網頁

• 書寫習慣的差別

  XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素

18、iframe有那些缺點？

• iframe會阻塞主頁面的Onload事件
• 搜索引擎的檢索程序無法解讀這種頁面，不利於SEO
  -iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載
• 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題

19、網頁驗證碼是幹嘛的，是爲了解決什麼安全問題

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

20、title與h1的區別、b與strong的區別、i與em的區別？

• title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響;
• strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時，<strong> 會重讀，而<B>是展示強調內容。
• i內容展示爲斜體，em表示強調的文本

結尾

歡迎關注微信公衆號：小獅子前端Vue

謝謝您的支持！✿✿ヽ(°▽°)ノ✿

學如逆水行舟，不進則退