經常使用 HTML 頭部標籤解析

時間 2019-12-01

標籤經常使用 html 頭部標籤解析欄目 HTML 简体版

原文原文鏈接

做爲一名 Web 開發者，對頭部標籤必需要了解，本篇着重介紹一些咱們容易忽視和用錯的頭部標籤，特別是 iOS 等針對移動設備的一些標籤。瞭解這些標籤的意義，寫出知足本身需求的 head 頭標籤，是本文的目的。本文以一絲的文章和 FEX 的 HTML head 頭標籤爲基礎，介紹經常使用的 head 中各個標籤、元素的意義。php

DOCTYPE

DOCTYPE(Document Type)，該聲明位於文檔中最前面的位置，處於 html 標籤以前，此標籤告知瀏覽器文檔使用哪一種 HTML 或者 XHTML 規範。html

DTD(Document Type Definition) 聲明以 <!DOCTYPE> 開始，不區分大小寫，前面沒有任何內容，若是有其餘內容(空格除外)會使瀏覽器在 IE 下開啓怪異模式(quirks mode)渲染網頁。公共 DTD，名稱格式爲註冊//組織//類型標籤//語言,註冊指組織是否由國際標準化組織(ISO)註冊，+ 表示是，- 表示不是。組織即組織名稱，如：W3C。類型通常是 DTD。標籤是指定公開文本描述，即對所引用的公開文本的惟一描述性名稱，後面可附帶版本號。最後語言是 DTD 語言的 ISO 639 語言標識符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可聲明三種 DTD 類型。分別表示嚴格版本，過渡版本，以及基於框架的 HTML 文檔。html5

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

最新 HTML5 推出更加簡潔的書寫，它向前向後兼容，推薦使用

<!DOCTYPE html>

在 HTML中 doctype 有兩個主要做用android

對文檔進行有效性驗證
它告訴用戶代理和校驗器這個文檔是按照什麼 DTD 寫的。這個動做是被動的，每次頁面加載時，瀏覽器並不會下載 DTD 並檢查合法性，只有當手動校驗頁面時才啓用。ios
決定瀏覽器的呈現模式
對於實際操做，通知瀏覽器讀取文檔時用哪一種解析算法。若是沒有寫，則瀏覽器則根據自身的規則對代碼進行解析，可能會嚴重影響 html 排版佈局。瀏覽器有三種方式解析 HTML 文檔。

(1) 非怪異（標準）模式git

(2) 怪異模式github

(3) 部分怪異（近乎標準）模式關於IE瀏覽器的文檔模式，瀏覽器模式，嚴格模式，怪異模式，DOCTYPE 標籤，可詳細閱讀模式？標準！的內容web

charset

聲明文檔使用的字符編碼算法

<meta charset="utf-8">

在 html5 以前網頁中會這樣寫chrome

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

lang屬性

<html lang="zh-cmn-Hans">  //簡體中文

<html lang="zh-cmn-Hant">  //繁體中文

不多狀況才須要加地區代碼，一般是爲了強調不一樣地區漢語使用差別。例如：

<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>實際上是同一種水果。只是大陸和臺灣稱謂不一樣，且新加坡、馬來西亞一帶的稱謂也是不一樣的，稱之爲<strong lang="zh-cmn-Hans-SG">黃梨</strong>。
</p>

爲何 lang="zh-cmn-Hans" 而不是咱們一般寫的 lang="zh-CN" 呢？請移步閱讀：網頁頭部的聲明應該是用 lang="zh" 仍是 lang="zh-cn"

優先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

360 使用Google Chrome Frame

<meta name="renderer" content="webkit">

360 瀏覽器就會在讀取到這個標籤後，當即切換對應的極速核。另外爲了保險起見再加入

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

這樣寫能夠達到的效果是若是安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，若是沒有安裝 GCF，則使用最高版本的 IE 內核進行渲染。
相關連接：瀏覽器內核控制 Meta 標籤說明文檔

百度禁止轉碼

過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，爲此可在 head 內添加

<meta http-equiv="Cache-Control" content="no-siteapp">

相關連接：SiteApp 轉碼聲明

SEO 優化部分

頁面標題 <title> 標籤( head 頭部必須)

<title>your title</title>

頁面關鍵詞 keywords

<meta name="keywords" content="your keywords">

頁面描述內容 description

<meta name="description" content="your description">

定義網頁做者 author

<meta name="author" content="author,email address">

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

<meta name="robots" content="index,follow">

相關連接：WEB1038 - 標記包含無效的值

爲移動設備添加 viewport

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

width=device-width 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz

content 參數：

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否容許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），能夠在頁面加載時最小化上下狀態欄。這是一個布爾值，能夠直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

適配 iPhone 6 和 iPhone 6plus 則須要寫：

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓設備的 viewport 寬設爲 360px，iPhone 6 上倒是 375px，大部分 5.5 寸安卓機器（好比說三星 Note）的 viewport 寬爲 400，iPhone 6 plus 上是 414px。

ios 設備

【1】添加到主屏後的標題（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏後的標題（iOS 6 新增） -->

【2】是否啓用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 是否啓用 WebApp 全屏模式 -->

【3】設置狀態欄的背景顏色

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

只有在 "apple-mobile-web-app-capable" content="yes" 時生效

content 參數：

default 默認值
black 狀態欄背景是黑色
black-translucent 狀態欄背景是黑色半透明。

若是設置爲 default 或 black , 網頁內容從狀態欄底部開始。
若是設置爲 black-translucent , 網頁內容充滿整個屏幕，頂部會被狀態欄遮擋

【4】禁止數字自動識別爲電話號碼

<meta name="format-detection" content="telephone=no"> <!-- 禁止數字識自動別爲電話號碼 -->

【5】禁止自動自動識別地址

<meta name="format-detection" content="address=no"> <!-- 禁止自動自動識別地址 -->

【6】禁止自動自動識別日期

<meta name="format-detection" content="date=no">  <!-- 禁止自動自動識別日期 -->

【7】禁止自動自動識別 Email

<meta name="format-detection" content="email=no">  <!-- 禁止自動自動識別 Email -->

【8】iOS 圖標

rel 參數：
apple-touch-icon 圖片自動處理成圓角和高光等效果
apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖

iPhone 和 iTouch，默認 57x57 像素，必須有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

iPad，72x72 像素，能夠沒有，但推薦有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">

Retina iPhone 和 Retina iTouch，114x114 像素，能夠沒有，但推薦有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />

Retina iPad，144x144 像素，能夠沒有，但推薦有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">

IOS 圖標大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。適配iPhone 6 plus，則須要在中加上這段

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

【9】iOS 啓動畫面

官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html

iPad 的啓動畫面是不包括狀態欄區域的

1.iPad 豎屏 768 x 1004（標準分辨率）

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png">

2.iPad 豎屏 1536x2008（Retina）

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png">

3.iPad 橫屏 1024x748（標準分辨率）

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png">

4.iPad 橫屏 2048x1496（Retina）

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png">

iPhone 和 iPod touch 的啓動畫面是包含狀態欄區域的

1.iPhone/iPod Touch 豎屏 320x480 (標準分辨率)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png">

2.iPhone/iPod Touch 豎屏 640x960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png">

3.iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png">

4.iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">

<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

【10】添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Android

Android Lollipop 中的 Chrome 39 增長 theme-color meta 標籤，用來控制選項卡顏色

<meta name="theme-color" content="#db5945">

Windows 8

Windows 8 磁貼顏色

<meta name="msapplication-TileColor" content="#000">

Windows 8 磁貼圖標

<meta name="msapplication-TileImage" content="icon.png">

360 瀏覽器

設置 360 瀏覽器渲染模式，webkit 爲極速內核，ie-comp 爲 IE 兼容內核，ie-stand 爲 IE 標準內核。

<meta name="renderer" content="webkit|ie-comp|ie-stand">

UC 瀏覽器

設置屏幕方向，portrait 爲橫屏，landscape 爲豎屏。

<meta name="screen-orientation" content="portrait|landscape">

設置全屏

<meta name="full-screen" content="yes">

設置適應屏幕排版（縮放是否顯示滾動條）
UC 瀏覽器在標準排版效果實現的基礎上，提供適應屏幕的排版方式，當設置爲 uc-fitscreen=yes，頁面進行縮放操做時，僅放大圖片和文字等元素，但不放大屏幕寬度，保持不出現水平（橫向）滾動條。

<meta name="viewport" content="uc-fitscreen=no|yes">

排版模式
UC 瀏覽器提供兩種排版模式，分別是適屏模式（fitscreen）及標準模式（standard），其中適屏模式簡化了一些頁面的處理，使得頁面內容更適合進行頁面閱讀、節省流量及響應更快，而標準模式則能按照標準規範對頁面進行排版及渲染。

<meta name="layoutmode" content="fitscreen|standard">

夜間模式
能夠幫助用戶在低亮度或黑暗狀況下更溫馨的進行頁面瀏覽。因爲基於網頁的應用越發複雜，由瀏覽器實現的單一晚上間模式不必定可以適應全部狀況(例如遊戲應用)，所以 UC 瀏覽器容許網頁設計者對其設計的頁面禁用瀏覽器的夜間模式，自行設計更適合用戶使用的夜間模式。
注意：頁面內的 frame/iframe 中的夜間模式的 meta 不生效。

<meta name="nightmode" content="enable|disable">

整頁圖片強制顯示
爲了節省流量及加快速度，UC 爲用戶提供了無圖模式，在實際使用中存在頁面中的圖片是不可缺乏的，例如驗證碼，地圖等。經過強制圖片顯示的功能能夠保證圖片顯示不受用戶的設置影響。
注意：整頁圖片強制顯示僅對當前頁面生效，對頁面內的 frame/iframe 不生效，也不影響前進後退的頁面*

<meta name="imagemode" content="force">

QQ 瀏覽器（X5 內核）

<!-- 設置橫屏、豎屏顯示，portrait 橫屏，landscape 豎屏-->
<meta name="x5-orientation" content="portrait|landscape">

<!-- 設置全屏顯示 -->
<meta name="x5-fullscreen" content="true">

<!-- 開啓應用模式 -->
<meta name="x5-page-mode" content="app">

其餘

添加 RSS 訂閱

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

添加 favicon icon

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

禁止 Chrome 瀏覽器中自動提示翻譯

<meta name="google" value="notranslate">

最後給出一個移動端的 meta 示例

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection"content="telephone=no, email=no">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"><!-- 刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 設置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no"><!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->
<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別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應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 適應移動端end -->