HTML5中Head內標籤詳解(一)：meta標籤

時間 2019-12-10

標籤 html5 html head 標籤詳解 meta 欄目 HTML5 简体版

原文原文鏈接

引言：

我發現本身最近有點走偏了，愈來愈多的將學習的精力放在編程上，而漸漸的忽略了HTML這個簡單又不簡單的標記語言上。相信你們應該也有這樣的經歷。以爲HTML這種東西很簡單不須要花費太多精力就能使用，可是時間久了我發現會用是遠遠不夠的，要知其然還要之氣因此然，方能作到庖丁解牛，遊刃有餘，而不是被動的查文檔（不是全部人都這樣認爲）。寫了這麼久HTML可是神奇的meta標籤真的搞不懂，只知道用到啥百度一下，找到要用的配置就好，內心仍是好奇（原諒我好奇心重）。css

1.經常使用的header標籤配置

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Document</title>
</head>

這種配置通常會都是編輯器自動生成的，時間長了也就習慣了。沒有去細究這裏面的設置究竟是啥意思，到底對頁面的顯示到底會產生什麼影響。html

2.詳解meta標籤

元數據（Metadata）是數據的數據信息。
<meta> 標籤提供了 HTML 文檔的元數據。元數據不會顯示在客戶端，可是會被瀏覽器解析。
META元素一般用於指定網頁的描述，關鍵詞，文件的最後修改時間，做者及其餘元數據。
元數據能夠被使用瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 Web 服務調用。 -——W3C文檔git

總而言之<meta>標籤的做用是用來告訴瀏瀏覽器個人頁面要怎麼解碼，怎麼展現。web

2.1 <meta>標籤的屬性

charset屬性：這個屬性是HTML5新增的屬性，主要的做用是用來定義文檔的字符編碼，就是告訴瀏覽器在從服務器獲取這個html文檔後採用什麼樣的解碼格式去正確的解碼該文檔。通常值都是UTF-8，一樣的沒有特殊要求的話也推薦使用UTF-8。編程
name屬性：name屬性的做用是用來表示其所在<meta>標籤具體的做用，好比<meta name="keywords">則指明該meta標籤使用來定義該頁面的關鍵字的，利於SEO。瀏覽器
content屬性：用來定義name指定做用的信息，好比<meta name="keywords" content="學習, 工做">做用就是聲明該頁面的搜索關鍵詞是學習或者工做，在搜索引擎中搜索工做或學習能夠搜到該頁面。安全
http-equiv屬性：它的做用和name屬性差很少，就是用來指定meta標籤的做用，可是不一樣的是它會關聯到HTTP頭部的一些做用，也影響就是瀏覽器發送http請求和瀏覽器引擎的行爲，可能這樣說不太對，差很少就這意思。服務器

2.2 charset 和 name屬性值

charset屬性的值通常爲UTF-8，也能夠選用其餘的編碼格式，推薦使用UTF-8。cookie
name屬性的值有：app
- application-name：顧名思義用於定義應用的名稱，名字定義在content屬性的值中，經過搜索引擎能搜到該應用的名字，可是隻有當頁面爲一個webapp時才能使用
- author：做者名字，給搜索引擎提供做者的信息
- description：網頁描述，具體內容定義在content屬性的值中
- generator：這個具體不太清楚是啥用，通常用於顯示網頁的製做工具，好比之前的dreamwave等
- keywords：這個比較重要，搜索引擎根據關鍵詞來歸類網頁，好的關鍵詞描述可以使網頁更加容易的被用戶搜索到
- referrer：這個屬性值比較複雜主要是用來控制頁面與服務器交互時發送的請求，做爲頁面信息安全的保障措施。具體請看這裏能夠參考一下

這些個屬性值是w3c官方標準的屬性值，可是如今瀏覽器上仍是有一些私有的屬性值

<!-- 設置文檔的字符編碼 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其餘任何的 head 內容必須在這些標籤的 *後面* -->
 
<!-- 對外部資源加載的限制（容許控制從哪裏加載資源） -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 儘早地放置在文檔中 -->
<!-- 僅應用於該標籤下的內容 -->
 
<!-- Web 應用的名稱（僅當網站被用做爲一個應用時才使用）-->
<meta name="application-name" content="應用名稱">
 
<!-- 針對頁面的簡短描述（限制 150 字符）-->
<!-- 在*某些*狀況下，該描述是被用做搜索結果展現片斷的一部分 -->
<meta name="description" content="一個頁面描述">
 
<!-- 控制搜索引擎的抓取和索引行爲 -->
<meta name="robots" content="index,follow"><!-- 全部搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 -->
 
<!-- 告訴 Google 不顯示網站連接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
 
<!-- 告訴 Google 不提供此頁面的翻譯 -->
<meta name="google" content="notranslate">
 
<!-- 驗證 Google 搜索控制檯的全部權 -->
<meta name="google-site-verification" content="verification_token">
 
<!-- 驗證 Yandex 網站管理員的全部權 -->
<meta name="yandex-verification" content="verification_token">
 
<!-- 驗證 Bing 網站管理員中心的全部權 -->
<meta name="msvalidate.01" content="verification_token">
 
<!-- 驗證 Alexa 控制檯的全部權 -->
<meta name="alexaVerifyID" content="verification_token">
 
<!-- 驗證 Pinterest 控制檯的全部權 -->
<meta name="p:domain_verify" content="code from pinterest">
 
<!-- 驗證 Norton 安全站點的全部權 -->
<meta name="norton-safeweb-site-verification" content="norton code">
 
<!-- 用來命名軟件或用於構建網頁（如 - WordPress、Dreamweaver）-->
<meta name="generator" content="program">
 
<!-- 關於你的網站主題的簡短描述 -->
<meta name="subject" content="你的網站主題">
 
<!-- 基於網站內容給出通常的年齡分級 -->
<meta name="rating" content="General">
 
<!-- 容許控制 referrer 信息如何傳遞 -->
<meta name="referrer" content="no-referrer">
 
<!-- 禁用自動檢測和格式化可能的電話號碼 -->
<meta name="format-detection" content="telephone=no">
 
<!-- 經過設置爲 「off」 徹底退出 DNS 預取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
 
<!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
 
<!-- 指定要顯示在一個特定框架中的頁面 -->
<meta http-equiv="Window-Target" content="_value">
 
<!-- 地理標籤 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->

——以上代碼引用自：http://www.css88.com/archives...

相關標籤/搜索

每日一句

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