網頁中head標籤中的經常使用標籤總結

時間 2019-11-10

標籤網頁 head 標籤經常使用總結欄目 HTML 简体版

原文原文鏈接

常見的<head></head>之間的標籤爲：meta , title , link , style ,script。css

一、meta 標籤----namehtml

　　<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。　　chrome

1.1　　Keywords
　　#關鍵詞
<meta name="Keywords" content=""/>瀏覽器

1.2　　Description
　　#描述：主要用戶搜索引擎中的說明
<meta name="Description" content=""/>緩存

1.3　　Copyright
　　#版權信息
<meta name="Copyright" content=""/>服務器

1.4　　author
　　#做者
<meta name="author" content=""/>cookie

1.五、robots(機器人嚮導)
　　#告訴機器人那些頁面須要索引，哪些頁面不須要索引。
content的參數有：all,none,onindex,follow,nofollow
<meta name="robots" content="all">框架

二、meta 標籤---http-equivfetch

　　http-equiv顧名思義，至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容網站

2.1　　Expires（期限）
說明：能夠用於設定網頁的到期時間。一旦網頁過時，必須到服務器上從新傳輸。
用法：<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">
注意：必須使用GMT的時間格式。

2.2　　Pragma(cache模式）
說明：禁止瀏覽器從本地計算機的緩存中訪問頁面內容。
用法：<meta http-equiv="Pragma" content="no-cache">
注意：這樣設定，訪問者將沒法脫機瀏覽。

2.3　　cache-control（緩存控制）
說明：禁止緩存頁面
用法：<meta http-equiv="cache-control" content="no-store">

2.3　　Refresh（刷新）
說明：自動刷新並轉到新頁面。
用法：<meta http-equiv="Refresh" content="2;URL">；（注意後面的分號，分別在秒數的前面和網址的後面，URL可爲空）
注意：其中的2是指停留2秒鐘後自動刷新到URL網址。

2.4　　Set-Cookie(cookie設定）
說明：若是網頁過時，那麼存盤的cookie將被刪除。
用法：<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">
注意：必須使用GMT的時間格式。

2.5　　Window-target（顯示窗口的設定）
說明：強制頁面在當前窗口以獨立頁面顯示。
用法：<meta http-equiv="Window-target" content="_top">
注意：用來防止別人在框架裏調用本身的頁面。

2.6　　content-Type（顯示字符集的設定）
說明：設定頁面使用的字符集。
用法：<meta http-equiv="content-Type" content="text/html; charset=gb2312">

2.七、content-Language（顯示語言的設定）
用法：<meta http-equiv="Content-Language" content="zh-cn" />

http-equiv還有不少其餘的key-values對，他們一般是由某個公司定製，以實現特殊用途的。

2.8 X-UA-Compatible (IE瀏覽器識別，規定瀏覽器的渲染引擎，這是微軟爲了保持兼容性採起的一種折中策略)

用法：<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
　　　　最新的引擎渲染網頁，chrome=1則能夠激活IE中的Chrome Frame插件.

******（任何人均可以定製這些key-value對，但若是沒有人理解和使用你的個性key-value，那它們沒有一點用處。）

例如：

網頁定級評價
IE4.0以上版本的瀏覽器能夠防止瀏覽一些受限制的網站，而之因此瀏覽器會自動識別某些網站是否受限制，就是由於在網站meta標籤中已經設置好了該網站的級別，而該級別的評定是由美國RSAC，即娛樂委員會的評級機構評定的，若是你須要評價本身的網站，按要求提交表格，那麼RSAC會提供一段meta代碼給你，複製到本身網頁裏就能夠了。下面就是一段代碼的樣例：
〈meta http-equiv=″PICS－Label″ content=′（PICS－1.1 l gen true comment ″RSACi North America Server″ for on ″2001.08.16T08:15－0500″ r (n 0 s 0 v 0 l 0））′〉

三、link(指向某一資源)

　　經常使用的格式<link rel="" href="" type=""></link>

　　rel：該資源與本網頁的關係，href：該資源的地址，type：該資源的MIME類型。rel分類以下：

3.1　　rel = "stylesheet" (外部樣式表)

3.2　　rel = "shortcut icon" (網站圖標)
<link rel="shortcut icon" type="image/x-icon" href="xxx.ico"></link>

3.3　　rel = "dns-prefetch" (dns預解析)
<link rel="dns-prefetch" href="//www.baidu.com"></link>

咱們知道，當咱們訪問一個網站如 www.amazon.com 時，須要將這個域名先轉化爲對應的 IP 地址，這是一個很是耗時的過程。

DNS prefetch 分析這個頁面須要的資源所在的域名，瀏覽器空閒時提早將這些域名轉化爲 IP 地址，真正請求資源時就避免了上述這個過程的時間。

<meta http-equiv='x-dns-prefetch-control' content='on'> <link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://completion.amazon.com'> <link rel='dns-prefetch' href='http://fls-na.amazon.com'>

應用場景1：咱們的資源存在在不一樣的 CDN 中，那提早聲明好這些資源的域名，就能夠節省請求發生時產生的域名解析的時間。
應用場景2：若是咱們知道用戶接下來的操做必定會發起一塊兒資源的請求，那就能夠將這個資源進行 DNS-Prefetch，增強用戶體驗。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。