Html頁面head標籤元素的意義和應用場景

時間 2019-12-07

標籤 html 頁面 head 標籤元素意義應用場景欄目 HTML 简体版

原文原文鏈接

　　相信在html5以前，不多人會關注html頁面上head裏標籤元素的定義和應用場景，可能記得住的只有"title"、"keyword"和"description"這些meta在逐漸瞭解使用html新標準後，特別是移動頁面的開發普及，能夠看到html中這一塊內容愈來愈重要爲你們所認識，初次見到這些標籤基本是摸不着頭腦，今天就來梳理這些標籤的定義(以html5標準展開)；html

　　先來一個頁面歸納，head標籤不分排序前後：前端

<!DOCTYPE html>
<html>
<head>

　　<meta charset="UTF-8">
　　<title>Title</title>
　　<meta content="keyword" name="keywords">
　　<meta content="description" name="description">
　　<meta name="renderer" content="webkit">
　　<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
　　<meta http-equiv="Cache-Control" content="no-siteapp" />
　　<meta name="author" content="author,email address">
　　<meta name="robots" content="index,follow">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<meta name="apple-mobile-web-app-capable" content="yes" />
　　<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
　　<meta name="format-detection" content="telephone=no,email=no" />
　　<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
　　<meta name="HandheldFriendly" content="true">
　　<meta name="screen-orientation" content="portrait">
　　<meat name="x5-orientation" content="portrait">
　 <meta name="full-screen" content="yes">
　 <meta name="x5-fullscreen" content="true">
　 <meta name="browsermode" content="application">
　 <meta name="x5-page-mode" content="app">
　 <meta name="msapplication-tap-highlight" content="no">html5

　　<link rel="icon" type="image/ico" href="/favicon.ico" />ios

　　<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />web

　　......chrome

</heda>
<bady>
some content
</bady>
</html>

　　最近收集有這些head標籤，其實另外還有許多，要麼是沒想起來，要麼是我也不知道具體什麼含義==，不過通常網頁上也就這麼多，不少網站是去自定義一些內容的，如這樣的：瀏覽器

額，這些就不去理會吧，採用合適的標籤，達到預設的目的就好了，我的感受這裏仍是不要放不少吧，畢竟這些設定須要瀏覽器去解析執行的，仍是會消耗點資源的；下面就逐個展開一下；前端框架

　　<meta charset="UTF-8">：設定網頁字符編碼，經常使用的有utf-8和gb2312；app

　　<title>Title</title>：頁面title，不解釋；框架

　　<meta content="keyword" name="keywords">：keyword關鍵詞，以逗號區分開，不解釋；

　　<meta content="description" name="description">：description描述不解釋；

　　<meta name="renderer" content="webkit">：優先使用chrome內核渲染頁面；

　　<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">：優先使用最新版ie和chrome瀏覽器；

　　<meta http-equiv="Cache-Control" content="no-siteapp" />：經過手機百毒打開網頁時，百毒可能會對你的網頁進行轉碼，只展示頁面內容，頭底部會被替換而且通常會加點廣告==尿性不改；

　　<meta name="author" content="author,email address">：定義頁面做者，這個不多見人用貌似，固然也有不少人不認識，以前一個項目交付給老闆後他看到這段不認識說咱們在他們網站放木馬==論多讀書多識字的重要性；

　　<meta name="robots" content="index,follow">：定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，一般有以下幾種取值：none，noindex，nofollow，all，index和follow；

　　<meta name="viewport" content="width=device-width, initial-scale=1.0">：這個應用的就比較多了，爲移動設備設定，viewport也可做爲寬度單位，一些參數設定，width viewport 寬度(數值/device-width)，height viewport 高度(數值/device-height)，initial-scale 初始縮放比例，user-scalable 是否容許用戶縮放(yes/no)，通常移動網頁上都是設定設備寬度，默認不可縮放的；

　　<meta name="apple-mobile-web-app-capable" content="yes" />：有個apple，沒錯，這是蘋果設備轉用的，這個是是否啓用 WebApp 全屏模式；蘋果的設備能夠說單成一家，有不少特定的設置，有興趣的小夥伴能夠到官方文檔說明查看詳細，來戳傳送門

　　<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />：設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效；

　　<meta name="format-detection" content="telephone=no,email=no" />：不自動識別頁面中的電話和郵箱，就是點擊數字或郵箱樣的字符不會作其餘操做；

　　<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />：又是大蘋果，沒錯這個是設置ios圖標的，而且能夠設置多個尺寸的，蘋果能夠設定啓動頁面，有興趣繼續戳官網文檔；

　　<meta name="HandheldFriendly" content="true">：恩，若是你單詞量多一些，能夠看出來這個是什麼意思，友好優化手持設備，貌似是針對不認識viewport的設備(蘋果都成街機了，誰閒的沒事用塞班看網頁？)，反正我沒用過，因此能夠認爲沒什麼卵用；

　　<meta name="screen-orientation" content="portrait">：uc強制豎屏；

　　<meta name="x5-orientation" content="portrait">：QQ強制豎屏；

　　<meta name="full-screen" content="yes">：UC強制全屏；

　 <meta name="x5-fullscreen" content="true">:QQ強制全屏
　　<meta name="browsermode" content="application">:UC應用模式
　　<meta name="x5-page-mode" content="app">:QQ應用模式;

　　<link rel="icon" type="image/ico" href="/favicon.ico" />：網頁ico圖標設置；

　　<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />:rss訂閱；

　　......

　　看一下內容仍是很多的，並且不少是爲移動端設定的，pc端相對簡潔了不少，果真多設備多瀏覽器的維護成本就是高啊，因此在許多討論場景中我一直反對pc和移動設備使用一個頁面，也就是適應全部設備的頁面==，雖然有些前端框架是支持這個的，感受尚未分開設計方便省力；ok今天先寫到這裏吧，查漏補缺，有新的發現繼續更；

　　原文地址：Html頁面head標籤元素的意義和應用場景，薛陳磊 | Share the world