## **title 標簽** ``` <title>site title</title> ``` ## **link 標簽** ```html <!-- favicon，可更改圖片類型 --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 外聯css --> <link href="" rel="stylesheet"> ``` ## **script標簽** ```html <!-- 外聯js --> <script src="" type="text/javascript"></script> <!-- 內聯js --> <script type="text/javascript"> //... </script> ``` ## **style標簽** ``` <style type="text/css"></style> ``` ## **base標簽** 指定用于一個文檔中包含的所有相對 URL 的根 URL。每個html文檔中只能有一個base元素，重復多個只有一個生效(含有href和target屬性) js獲取根url： ``` //默認值為 document.location.href。 document.baseURI ``` 用法示例 ```html <base href="https://example.com" target="_self"> <!--鏈接指向?https://example.com/#anchor--> ?<a href="#anchor">Anker</a> <!--鏈接指向?https://example.com/static/image/1.jpg--> ?<a href="static/image/1.jpg">Anker</a> ``` ## **meta 標簽** Meta標簽的作用通常是用作網頁關鍵詞、網頁描述、作者、網頁編碼、robots、自動跳轉等說明性標簽。這樣寫法隨處可見，任何一個網頁中都有meta標簽的使用,用于不能用style、title等上面的文檔元數據表示的信息 **1、Meta屬性之http-equiv** http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。如果設置了?http-equiv屬性，meta元素則是編譯指令，提供的信息與類似命名的HTTP頭部相同。 >[info]http-equiv的值： <span style="color:red">content-type</span>: HTML4.01規范時使用的。如果使用這個屬性，其值必須類似`"text/html;?charset=utf-8"`。注意：該屬性只能用于[MIME type](https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)為?`text/html`?的文檔，不能用于MIME類型為XML的文檔 ```html <!-- HTML4.01 --> <meta http-equiv="Content-Type" content="text/html:charset=UTF-8"> <!-- HTML5 --> <meta charset="UTF-8"> ``` <span style="color:red">X-UA-Compatible</span>： 針對 IE8 版本的一個特殊文件頭標記，用于為 IE8 指定不同的頁面渲染模式。由于當下 IE6 和 IE7 使用率依然較高，綜合考慮，啟用 IE8 版本的 X-UA-Compatible 兼容模式顯得相當重要 用戶代理則必須忽略這個編譯指示 各種兼容模式代碼示例 ```html <!-- 優先使用 IE 最新版本并啟用Chrome內核顯示 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 如果IE有安裝Google Chrome Frame組件，就以Chrome內核渲染頁面，否則使用最新版的IE 說明：針對IE 6，7，8等版本的瀏覽器插件Google Chrome Frame，可以讓用戶的瀏覽器外觀依然是IE的菜單和界面，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核 --> <!-- 像是使用了 Windows Internet Explorer 7 的 Quirks 模式，這與 Windows Internet Explorer 5 顯示內容的方式很相似 --> <meta http-equiv="X-UA-Compatible" content="IE=5" /> <!-- 無論頁面是否包含 指令，均使用 Windows Internet Explorer 7 的標準渲染模式 --> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <!-- 開啟 IE8 的標準渲染模式，但由于本身 X-UA-Compatible 文件頭僅支持 IE8 以上版本，因此等同于冗余代碼 --> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <!-- edge模式作用是通知IE以最高級別的可用模式顯示內容，這實際上破壞了“鎖定”模式。即如果你有IE9的話說明你有IE789，那么就調用高版本的那個也就是IE9 --> <meta http-equiv="X-UA-Compatible" content="edge" /> <!-- EmulateIE7 模式通知IE使用 <!DOCTYPE> 指令確定如何呈現內容。標準模式指令以IE7標準模式顯示，而 Quirks 模式指令以 IE5 模式顯示。與 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。對于多數網站來說，它是首選的兼容性模式 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ``` <span style="color:red">refresh</span>： 如果`content`屬性只包含一個正整數,則是重新載入頁面的時間間隔(秒); 如果 content 包含一個正整數并且跟著一個字符串 ';url=' 和一個合法的 URL，則是重定向到指定鏈接的時間間隔(秒) ```html <!-- 每隔一秒刷新一次 --> <meta http-equiv="refresh" content="1" /> <!-- 直接跳轉 --> <meta http-equiv="refresh" content="0; url=www.baidu.com"> <!-- 5秒后直接跳轉 --> <meta http-equiv="refresh" content="5; url=www.baidu.com"> ``` <span style="color:red">default-style</span>： ``` <meta http-equiv="default-style" content="5; url=www.baidu.com"> ``` <span style="color:red">content-security-policy</span>： 它允許頁面作者定義當前頁的?[內容策略](https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives)。?內容策略主要指定允許的服務器源和腳本端點，這有助于防止跨站點腳本攻擊 (瀏覽器兼容性不太好，很少有人使用) ~~~html //禁用不安全的內聯/eval，僅允許通過https加載資源（圖像，字體，腳本等） <meta http-equiv="Content-Security-Policy" content="default-src https:"> ~~~ <span style="color:red">expires</span>： 設定網頁的過期時間（必須使用GMT的時間格式） ~~~ <meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> ~~~ <span style="color:red">set-cookie</span>： 如果網頁過期，那么自動刪除本地cookie（必須使用GMT的時間格式） ~~~ <meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> ~~~ <span style="color:red">windows-target</span>： 強制頁面在當前窗口中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用 ~~~ <meta http-equiv="Window-target" content="_top"> ~~~ <span style="color:red">cache-control</span>： 瀏覽器緩存機制，可能的值： Public：指示響應可被任何緩存區緩存。 Private：指示對于單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對于其他用戶的請求無效。 no-cache：指示請求或響應消息不能緩存。 no-store：用于防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存。 max-age：指示客戶機可以接收生存期不大于指定時間（以秒為單位）的響應。 min-fresh：指示客戶機可以接收響應時間小于當前時間加上指定時間的響應。 max-stale：指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那么客戶機可以接收超出超時期指定值之內的響應消息。 ~~~ <meta http-equiv="cache-control" content="no-cache"> ~~~ **2、Meta屬性之name** 如果設置了?`name`屬性，meta元素提供的是文檔級別（document-level）的元數據，應用于整個頁面，主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的 <span style="color:red">author</span>： 標注網頁的作者 ~~~ <meta name="author" content="dashen" /> ~~~ <span style="color:red">keywords</span>： 頁面關鍵詞，用于被搜索引擎收錄 ~~~ <meta name="keywords" content="新聞,新聞中心, 新聞頻道"> ~~~ <span style="color:red">description</span>： 頁面描述，用于搜索引擎收錄 ~~~ <meta name="description" content="新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站"> ~~~ <span style="color:red">viewport 視口標簽</span>： 用于控制頁面縮放 ~~~html <!-- 適應移動端 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ~~~ | Value | 可能值 | 描述 | | --- | --- | --- | | `width` | 一個正整數或者字符串?`device-width` | 以pixels（像素）為單位， 定義viewport（視口）的寬度。 | | `height` | 一個正整數或者字符串`device-height` | 以pixels（像素）為單位， 定義viewport（視口）的高度。 | | `initial-scale` | `一個0.0`?到`10.0之間的正數` | 定義設備寬度（縱向模式下的設備寬度或橫向模式下的設備高度）與視口大小之間的縮放比率。 | | `maximum-scale` | `一個0.0`?到`10.0之間的正數` | 定義縮放的最大值；它必須大于或等于`minimum-scale`的值，不然會導致不確定的行為發生。 | | `minimum-scale` | 一個`0.0`?到`10.0`之間的正數 | 定義縮放的最小值；它必須小于或等于`maximum-scale`的值，不然會導致不確定的行為發生。 | | `user-scalable` | 一個布爾值（`yes`或者`no`） | 如果設置為`?no`，用戶將不能放大或縮小網頁。默認值為`?yes`。 | <span style="color:red">renderer</span>： 指定雙核瀏覽器默認以何種方式渲染頁面。 ~~~ <meta name="renderer" content="webkit">//默認webkit內核 <meta name="renderer" content="ie-comp">//默認IE兼容模式 <meta name="renderer" content="ie-stand">//默認IE標準模式 ~~~ <span style="color:red">generator</span>： 說明網站的采用的什么軟件制作 ~~~ <meta name="generator" content="Microsoft"/> ~~~ <span style="color:red">revised</span>： 網頁文檔的修改時間 ~~~ <meta name="revised" content="設計網, 6/24/2015"/> ~~~ <span style="color:red">robots</span>： 用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。 all：文件將被檢索，且頁面上的鏈接可以被查詢； none：文件將不被檢索，且頁面上的鏈接不可以被查詢； index：文件將被檢索； follow：頁面上的鏈接可以被查詢； noindex：文件將不被檢索，但頁面上的鏈接可以被查詢； nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。 ~~~ <meta name="robots" content="none"/> ~~~ <span style="color:red">copyright</span>： 網站版權信息 ~~~ <meta name="copyright" content="本頁版權XXX所有。All Rights Reserved" /> ~~~ <span style="color:red">—</span>： **3、Meta屬性之charset** 如果設置了?`charset`屬性，`meta`?元素是一個字符集聲明，告訴文檔使用哪種字符編碼。 **4、Meta屬性之itemprop** 如果設置了?`itemprop`屬性，`meta`?元素提供用戶定義的元數據。 >[danger]name, http-equiv 或者 charset 三者中任何一個屬性存在時，itemprop 屬性不能被使用