Html5_移動前端不得不瞭解的html5 head 頭標籤

時間  2019-11-24
標籤 html5 html 移動 前端 不得 不瞭解 head 標籤 欄目 HTML5 简体版
原文   原文鏈接

移動前端不得不瞭解的html5 head 頭標籤

 

本文主要內容來自一絲的經常使用的 HTML 頭部標籤和百度FEX的HTML head 頭標籤。php

移動端的工做已經愈來愈成爲前端工做的重要內容，除了日常的項目開發，HTML 頭部標籤功能，特別是meta標籤顯得很是重要。html


 

DOCTYPE

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

使用 HTML5 doctype，不區分大小寫。html5

  1. <!DOCTYPE html><!-- 使用 HTML5 doctype，不區分大小寫 -->

charset

聲明文檔使用的字符編碼，ios

  1. <metacharset="utf-8">

html5 以前網頁中會這樣寫：git

  1. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

這兩個是等效的，具體可移步閱讀：<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，因此建議使用較短的，易於記憶。github

lang屬性

更加標準的 lang 屬性寫法 http://zhi.hu/XyIaweb

簡體中文chrome

  1. <htmllang="zh-cmn-Hans"><!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

繁體中文express

  1. <htmllang="zh-cmn-Hant"><!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

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

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

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

優先使用 IE 最新版本和 Chrome

  1. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>

360 使用Google Chrome Frame

  1. <metaname="renderer"content="webkit">

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

  1. <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

這樣寫能夠達到的效果是若是安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，若是沒有安裝 GCF，則使用最高版本的 IE 內核進行渲染。

相關連接：瀏覽器內核控制 Meta 標籤說明文檔

百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，爲此可在 head 內添加

  1. <metahttp-equiv="Cache-Control"content="no-siteapp"/>

相關連接：SiteApp 轉碼聲明

SEO 優化部分

  • 頁面標題<title>標籤(head 頭部必須)
    1. <title>your title</title>
  • 頁面關鍵詞 keywords
    1. <metaname="keywords"content="your keywords">
  • 頁面描述內容 description
    1. <metaname="description"content="your description">
  • 定義網頁做者 author
    1. <metaname="author"content="author,email address">
  • 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，一般有以下幾種取值：none，noindex，nofollow，all，index和follow。
    1. <metaname="robots"content="index,follow">

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

爲移動設備添加 viewport

viewport 可讓佈局在移動瀏覽器上顯示的更好。 一般會寫

  1. <metaname="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 -->

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 中已經刪除），能夠在頁面加載時最小化上下狀態欄。這是一個布爾值，能夠直接這樣寫：
    1. <metaname="viewport"content="width=device-width, initial-scale=1, minimal-ui">

而若是你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。

  1. <metaname="viewport"content="width=device-width,user-scalable=yes">

相關連接：非響應式設計的viewport

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

  1. <metaname="viewport"content="width=375">
  2. <metaname="viewport"content="width=414">

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

ios 設備

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

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

是否啓用 WebApp 全屏模式

  1. <metaname="apple-mobile-web-app-capable"content="yes"/><!-- 是否啓用 WebApp 全屏模式 -->

設置狀態欄的背景顏色

  1. <metaname="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 ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

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

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

iOS 圖標

rel 參數： apple-touch-icon 圖片自動處理成圓角和高光等效果。 apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。 iPhone 和 iTouch，默認 57×57 像素，必須有

  1. <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/><!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->

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

  1. <linkrel="apple-touch-icon-precomposed"sizes="72x72"href="/apple-touch-icon-72x72-precomposed.png"/><!-- iPad，72x72 像素，能夠沒有，但推薦有 -->

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

  1. <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/><!-- Retina iPhone 和 Retina iTouch，114x114 像素，能夠沒有，但推薦有 -->

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

  1. <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/><!-- Retina iPad，144x144 像素，能夠沒有，但推薦有 -->

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

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

iOS 啓動畫面

官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html 參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

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

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

  1. <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/><!-- iPad 豎屏 768 x 1004（標準分辨率） -->

iPad 豎屏 1536×2008（Retina）

  1. <linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/><!-- iPad 豎屏 1536x2008（Retina） -->

iPad 橫屏 1024×748（標準分辨率）

  1. <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/><!-- iPad 橫屏 1024x748（標準分辨率） -->

iPad 橫屏 2048×1496（Retina）

  1. <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/><!-- iPad 橫屏 2048x1496（Retina） -->

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

iPhone/iPod Touch 豎屏 320×480 (標準分辨率)

  1. <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/><!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->

iPhone/iPod Touch 豎屏 640×960 (Retina)

  1. <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/><!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->

iPhone 5/iPod Touch 5 豎屏 640×1136 (Retina)

  1. <linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/><!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->

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

  1. <metaname="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"><!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->

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

  1. <linkrel="apple-touch-startup-image"href="launch6.png"media="(device-width: 375px)">
  2. <linkrel="apple-touch-startup-image"href="launch6plus.png"media="(device-width: 414px)">

Android

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

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

687474703a2f2f757064617465732e68746d6c35726f636b732e636f6d2f6173736574732f7468656d652d636f6c6f722d73732d39393530666431336130633532623332623662643538303330396435356136622e706e67

  1. <metaname="theme-color"content="#db5945">

Windows 8

Windows 8 磁貼顏色

  1. <metaname="msapplication-TileColor"content="#000"/><!-- Windows 8 磁貼顏色 -->

Windows 8 磁貼圖標

  1. <metaname="msapplication-TileImage"content="icon.png"/><!-- Windows 8 磁貼圖標 -->

rss訂閱

  1. <linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/><!-- 添加 RSS 訂閱 -->

favicon icon

  1. <linkrel="shortcut icon"type="image/ico"href="/favicon.ico"/><!-- 添加 favicon icon -->

比較詳細的 favicon 介紹可參考https://github.com/audreyr/favicon-cheat-sheet

移動端的頭部標籤和meta

  1. <!DOCTYPE html><!-- 使用 HTML5 doctype，不區分大小寫 -->
  2. <htmllang="zh-cmn-Hans"><!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
  3. <head>
  4. <!-- 聲明文檔使用的字符編碼 -->
  5. <metacharset='utf-8'>
  6. <!-- 優先使用 IE 最新版本和 Chrome -->
  7. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
  8. <!-- 頁面描述 -->
  9. <metaname="description"content="不超過150個字符"/>
  10. <!-- 頁面關鍵詞 -->
  11. <metaname="keywords"content=""/>
  12. <!-- 網頁做者 -->
  13. <metaname="author"content="name, email@gmail.com"/>
  14. <!-- 搜索引擎抓取 -->
  15. <metaname="robots"content="index,follow"/>
  16. <!-- 爲移動設備添加 viewport -->
  17. <metaname="viewport"content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  18. <!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
  19.  
  20. <!-- iOS 設備 begin -->
  21. <metaname="apple-mobile-web-app-title"content="標題">
  22. <!-- 添加到主屏後的標題（iOS 6 新增） -->
  23. <metaname="apple-mobile-web-app-capable"content="yes"/>
  24. <!-- 是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->
  25.  
  26. <metaname="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  27. <!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
  28. <metaname="apple-mobile-web-app-status-bar-style"content="black"/>
  29. <!-- 設置蘋果工具欄顏色 -->
  30. <metaname="format-detection"content="telphone=no, email=no"/>
  31. <!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->
  32. <!-- 啓用360瀏覽器的極速模式(webkit) -->
  33. <metaname="renderer"content="webkit">
  34. <!-- 避免IE使用兼容模式 -->
  35. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  36. <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
  37. <metaname="HandheldFriendly"content="true">
  38. <!-- 微軟的老式瀏覽器 -->
  39. <metaname="MobileOptimized"content="320">
  40. <!-- uc強制豎屏 -->
  41. <metaname="screen-orientation"content="portrait">
  42. <!-- QQ強制豎屏 -->
  43. <metaname="x5-orientation"content="portrait">
  44. <!-- UC強制全屏 -->
  45. <metaname="full-screen"content="yes">
  46. <!-- QQ強制全屏 -->
  47. <metaname="x5-fullscreen"content="true">
  48. <!-- UC應用模式 -->
  49. <metaname="browsermode"content="application">
  50. <!-- QQ應用模式 -->
  51. <metaname="x5-page-mode"content="app">
  52. <!-- windows phone 點擊無高光 -->
  53. <metaname="msapplication-tap-highlight"content="no">
  54. <!-- iOS 圖標 begin -->
  55. <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>
  56. <!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
  57. <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>
  58. <!-- Retina iPhone 和 Retina iTouch，114x114 像素，能夠沒有，但推薦有 -->
  59. <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>
  60. <!-- Retina iPad，144x144 像素，能夠沒有，但推薦有 -->
  61. <!-- iOS 圖標 end -->
  62.  
  63. <!-- iOS 啓動畫面 begin -->
  64. <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>
  65. <!-- iPad 豎屏 768 x 1004（標準分辨率） -->
  66. <linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>
  67. <!-- iPad 豎屏 1536x2008（Retina） -->
  68. <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>
  69. <!-- iPad 橫屏 1024x748（標準分辨率） -->
  70. <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>
  71. <!-- iPad 橫屏 2048x1496（Retina） -->
  72.  
  73. <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>
  74. <!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->
  75. <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>
  76. <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
  77. <linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/>
  78. <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
  79. <!-- iOS 啓動畫面 end -->
  80.  
  81. <!-- iOS 設備 end -->
  82. <metaname="msapplication-TileColor"content="#000"/>
  83. <!-- Windows 8 磁貼顏色 -->
  84. <metaname="msapplication-TileImage"content="icon.png"/>
  85. <!-- Windows 8 磁貼圖標 -->
  86.  
  87. <linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/>
  88. <!-- 添加 RSS 訂閱 -->
  89. <linkrel="shortcut icon"type="image/ico"href="/favicon.ico"/>
  90. <!-- 添加 favicon icon -->
  91.  
  92. <title>標題</title>
  93. </head>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程