【每日一題】說說你對HTML里的meta元素的理解
人生苦短，總需要一點儀式感。比如學(xué)前端～
目錄：
元數(shù)據(jù)
meta 元素
meta 元素包含四大屬性：
用途
name 指定名/值對定義的元數(shù)據(jù)
charset聲明字符編碼
http-equiv模擬 http 標(biāo)頭字段
常用的 meta 屬性
元數(shù)據(jù)
元數(shù)據(jù)(metadata)：用來構(gòu)建 HTML 文檔的基本結(jié)構(gòu)以及向瀏覽器提供“如何處理文檔”的信息和指示，它們本身不是文檔內(nèi)容，但提供了關(guān)于后面文檔內(nèi)容的信息，如 title、base、meta等都是元數(shù)據(jù)元素。
meta 元素
meta 元素可提供有關(guān)頁面的元信息(meta-information)，比如針對搜索引擎和更新頻率的描述和關(guān)鍵詞。
meta 元素可以定義文檔的各種元數(shù)據(jù)，提供各種文檔信息，通俗點就是可以理解為提供了關(guān)于網(wǎng)站的各種信息。html 文檔中可以包含多個 meta 元素，每個 meta 元素只能用作一種用途，如果想定義多個文檔信息，則需要在 head 標(biāo)簽中添加多個 meta 元素。
meta 元素包含四大屬性：
charset、content、http-equiv、name
charset:
該屬性聲明了頁面的字符編碼。
常用的值：UTF-8(Unicode字符編碼)、ISO-8859-1(拉丁字母表的字符編碼)。
content：
這個屬性通常配合name或http-equiv使用，能夠給這兩個屬性提供一個值。
http-equiv：
這個屬性可以用做http頭部的某些作用，通過定義該屬性可以改變服務(wù)器和用戶代理的行為。
name：
用于定義頁面的元數(shù)據(jù)。他不能與http-equiv、charset共存。通常是content配合使用。
用途
meta 元素除了 charset 屬性外，都是 http-equiv 屬性或 name 屬性結(jié)合 content 來使用。
name 指定名/值對定義的元數(shù)據(jù)
<meta name="參數(shù)" content="具體描述信息" />
name 屬性與 content 屬性結(jié)合使用。
name 用來表示元素數(shù)據(jù)類型，表示當(dāng)前 meta 標(biāo)簽的具體作用；content 屬性用來提供值。
示例代碼：
<head>
<title>示例</title>
<meta
name="keywords"
content="描述網(wǎng)站內(nèi)容的關(guān)鍵詞，以逗號隔開，用于SEO搜索"
/>
<meta name="application name" content="當(dāng)前頁所屬Web應(yīng)用系統(tǒng)的名稱" />
<meta name="description" content="當(dāng)前頁的說明" />
<meta name="author" content="當(dāng)前頁的作者名" />
<meta name="copyright" content="版權(quán)信息" />
<meta
name="renderer"
content="renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面"
/>
<meta
name="viewreport"
content="它提供有關(guān)視口初始大小的提示，僅供移動設(shè)備使用"
/>
</head>
charset聲明字符編碼
charset 屬性作為 HTML5 新增的屬性，用于聲明字符編碼，有兩種寫法：
<!-- HTML5 推薦方式 -->
<meta charset="utf-8" />
<!-- 舊的HTML -->
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
理論上，可以使用任何字符編碼，但是并不是所有瀏覽器都能夠理解它們。
http-equiv模擬 http 標(biāo)頭字段
http-equiv 屬性與 content 屬性結(jié)合使用，http-equiv 屬性為指定所要模擬的標(biāo)頭字段的名稱，content 屬性用來提供值。
<meta http-equiv="參數(shù)" content="具體的描述" />
<!-- content-Type 聲明網(wǎng)頁字符編碼 -->
<meta http-equiv="content-Type" content="text/html charset=UTF-8" />
<!-- refresh 指定一個時間間隔(以秒為單位),在此時間過去之后從服務(wù)器重新載入當(dāng)前頁面,也可以另外指定一個頁面. -->
<!-- 2秒后在當(dāng)前頁跳轉(zhuǎn)到百度 -->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com" />
<!-- X-UA-Compatible 瀏覽器采取何種版本渲染當(dāng)前頁面 -->
<!-- 指定IE和Chrome使用最新版本渲染當(dāng)前頁面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- catch-control 用于指定所有緩存機制在整個請求/響應(yīng)鏈中必須服從的指令 -->
<meta http-equiv="cache-control" content="no-cache" />
常用的 meta 屬性
<!-- 聲明文檔使用的字符編碼 -->
<meta charset='utf-8'>
<!-- 優(yōu)先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 頁面描述 -->
<meta name="description" content="不超過150個字符"/>
<!-- 頁面關(guān)鍵詞 -->
<meta name="keywords" content=""/>
<!-- 網(wǎng)頁作者 -->
<meta name="author" content="name, [email protected]"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 為移動設(shè)備添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 會導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設(shè)備 begin -->
<meta name="apple-mobile-web-app-title" content="標(biāo)題">
<!-- 添加到主屏后的標(biāo)題（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否啟用 WebApp 全屏模式，刪除蘋果默認(rèn)的工具欄和菜單欄 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 設(shè)置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略頁面中的數(shù)字識別為電話，忽略email識別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不讓百度轉(zhuǎn)碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 設(shè)備 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁貼圖標(biāo) -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交標(biāo)簽 begin -->
<!-- 參考微博API -->
<meta property="og:type" content="類型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="標(biāo)題" />
<meta property="og:image" content="圖片" />
<meta property="og:description" content="描述" />
<!-- sns 社交標(biāo)簽 end -->
所有《每日一題》的 知識大綱索引腦圖 整理在此：
https://www.yuque.com/dfe_evernote/interview/everyday
你也可以點擊文末的 “閱讀原文” 快速跳轉(zhuǎn)
讓我們一起攜手同走前端路！
關(guān)注公眾號回復(fù)【加群】即可