有很多標籤，有助於網站的SEO，資源載入，提升體驗等等，這裡總結了一些能常用到的，共勉。
<meta>標籤
The
<meta>tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
name屬性
name屬性主要用於描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入型別的具體描述，便於搜尋引擎抓取。meta標籤中name屬性語法格式是：
<meta name="引數" content="具體的描述">
複製程式碼| Name | Content | Explain |
|---|---|---|
| keywords | 前端，網站優化（網站關鍵字） | 用於告訴搜尋引擎，你網頁的關鍵字。 |
| description | 致力於前端領域（網站描述） | 用於告訴搜尋引擎，你網站的主要內容。 |
| author | AlenQi | 用於標註網頁作者 |
| copyright | AlenQi | 用於標註版權資訊 |
| robots |
1.none : 搜尋引擎將忽略此網頁，等價於noindex，nofollow。 2.noindex : 搜尋引擎不索引此網。 3.nofollow:搜尋引擎不繼續通過此網頁的連結索引搜尋其它的網頁。 4.all : 搜尋引擎將索引此網頁與繼續通過此網頁的連結索引，等價於index，follow。 5.index : 搜尋引擎索引此網頁。 6.follow : 搜尋引擎繼續通過此網頁的連結索引搜尋其它的網頁。 |
robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。 content的引數有all,none,index,noindex,follow,nofollow。預設是all。 |
| revisit-after | 7 days（搜尋引擎爬蟲重訪時間） | 如果頁面不是經常更新，為了減輕搜尋引擎爬蟲對伺服器帶來的壓力，可以設定一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的預設時間來訪問。 |
| renderer(雙核瀏覽器渲染方式) |
1.webkit：預設webkit核心 2.ie-comp：預設IE相容模式 3.ie-stand：預設IE標準模式 |
renderer適用於雙核瀏覽器，用於指定雙核瀏覽器預設以何種方式渲染頁面。比如說360瀏覽器。 |
| fragment | ! | 表示一個無hash段的URL，通過Ajax獲取內容的頁面。 爬蟲會臨時地將頁面對映為www.example.com?_escapedfragment= 並向伺服器發出請求。伺服器就相應的返回www.example.com的HTML快照。 |
http-equiv屬性
使用帶有 http-equiv屬性的<meta>標籤時，伺服器將把名稱/值對新增到傳送給瀏覽器的內容頭部。meta標籤中http-equiv屬性語法格式是：
<meta http-equiv="引數" content="具體的描述">
複製程式碼| http-equiv | Content | Explain |
|---|---|---|
| content-Type | text/html; charset=utf-8 | 用於設定網頁字符集，便於瀏覽器解析與渲染頁面（HTML5格式為:<meta charset="utf-8">） |
| X-UA-Compatible | IE=edge,chrome=1（指定IE和Chrome使用最新版本渲染當前頁面） | 用於告知瀏覽器以何種版本來渲染頁面。 |
| cache-control |
1.no-cache: 先傳送請求，與伺服器確認該資源是否被更改，如果未被更改，則使用快取。 2.no-store: 不允許快取，每次都要去伺服器上，下載完整的響應。（安全措施） 3.public: 快取所有響應，但並非必須。因為max-age也可以做到相同效果 4.private: 只為單個使用者快取，因此不允許任何中繼進行快取。（比如說CDN就不允許快取private的響應） 5.maxage: 表示當前請求開始，該響應在多久內能被快取和重用，而不去伺服器重新請求。例如：max-age=60表示響應可以再快取和重用 60 秒。 6.no-siteapp:用於禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，但是轉碼效果很多時候卻不盡人意。有時候需要避免百度自動轉碼。 |
指導瀏覽器如何快取某個響應以及快取多長時間。 |
| expires | Sunday, 8-Jan-15 8:00:00 GMT（必須使用GMT的時間格式，或直接設為0(數字表示多少時間後過期)。） | 用於設定網頁的到期時間，過期後網頁必須到伺服器上重新傳輸。 |
| refresh | content="2；URL=http://www.alenqi.site"（2秒後跳轉向我的部落格 ） | 網頁將在設定的時間內，自動重新整理並調向設定的網址。 |
| set-cookie | user=alenqi; path=/; expires=Sunday, 8-Jan-15 8:00:00 GMT（必須使用GMT的時間格式。） | 如果網頁過期。那麼這個網頁存在本地的cookies也會被自動刪除。 |
| Content-Secutity-Policy |
1.base-uri：用於限制可在頁面的 <base> 元素中顯示的網址。 2.child-src：用於列出適用於工作執行緒和嵌入的幀內容的網址。例如：child-src https://youtube.com 將啟用來自 YouTube（而非其他來源）的嵌入視訊。 使用此指令替代已棄用的 frame-src 指令。 3.connect-src：用於限制可（通過 XHR、WebSockets 和 EventSource）連線的來源。 4.font-src：用於指定可提供網頁字型的來源。Google 的網頁字型可通過 font-src https://themes.googleusercontent.com 啟用。 5.form-action：用於列出可從 <form> 標記提交的有效端點。 6.frame-ancestors：用於指定可嵌入當前頁面的來源。此指令適用於 <frame>、<iframe>、<embed> 和 <applet> 標記。此指令不能在 <meta> 標記中使用，並僅適用於非 HTML 資源。 7.img-src：用於定義可從中載入影象的來源。 8.media-src：用於限制允許傳輸視訊和音訊的來源。 9.upgrade-insecure-requests：指示 User Agent 將 HTTP 更改為 HTTPS，重寫網址架構。 |
CSP 定義 Content-Security-Policy HTTP 標頭，其允許您建立信任的內容的來源白名單，並指示瀏覽器僅執行或渲染來自這些來源的資源，而不要盲目地信任伺服器提供的所有內容。即使攻擊者能夠發現可從中注入指令碼的漏洞，由於此指令碼也不符合此白名單，因此，也不會執行該指令碼 |
| x-dns-prefetch-control |
1.on:啟用 DNS 預解析。在瀏覽器支援 DNS 預解析的特性時即使不使用該標籤瀏覽器依然會進行預解析。 2.off:關閉 DNS 預解析。這個屬性在頁面上的連結並不是由你控制的或是你根本不想向這些域名引導資料時是非常有用的。 |
如果網頁過期。那麼這個網頁存在本地的cookies也會被自動刪除。 |
<link>標籤
The HTML
<link>element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This element is most used to link to style sheets.
rel屬性
這個屬性表明了連結的文件對於當前文件的關係。
| rel | Example | Explain |
|---|---|---|
| preload |
1.<link rel="preload" href="style.css" as="style"> 2.<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">（當使用者在使用較窄螢幕的裝置時，較窄的圖片將會被預載入，而在較寬的裝置上，較寬的圖片將被預載入。然後我們仍需要在header元素上附加合適的圖片——通過Window.matchMedia / MediaQueryList 來加以實現） |
preload 屬性值能夠讓你在你的HTML頁面中<head>元素內部書寫一些宣告式的資源獲取請求，可以指明哪些資源是在頁面載入完成後即刻需要的。對於這種即刻需要的資源，你可能希望在頁面載入的生命週期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預載入。這一機制使得資源可以更早的得到載入並可用，且更不易阻塞頁面的初步渲染，進而提升效能。 |
| prefetch | <link rel="prefetch" href="style.css"> | 它是意圖預獲取一些資源，以備下一個導航/頁面使用（比如，當你去到下一個頁面時） |
Other
image標籤
| Example | Explain |
|---|---|
| <img src="/flower.jpg" alt="鮮花" /> |
1.可以增加關鍵詞密度 2.可以讓引擎更好的判斷這張圖片的相關內容 3.圖片未載入出來時，佔位顯示文字 |