<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
兩種寫法等效，推薦寫第一種html
簡體中文git
<html lang="zh-cmn-Hans">
繁體中文github
<html lang="zh-cmn-Hant">
不是寫lang="zh-CN"web
設置IE的優先版本爲edge，若不存在則選擇當前最高版本，含有谷歌內核的會選擇谷歌，若是設置多條的話只有第一條生效chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
針對多內核瀏覽器設置優先使用的內核json
<meta name="renderer" content="webkit"> <!-- webkit: 極速內核 ie-comp: ie兼容內核 ie-stand: ie標準內核 -->
經過百度進去你的網頁，百度可能會對你的網頁進行轉碼，轉碼的意思就是會在你的網頁上加廣告，要防止這種狀況須要加segmentfault
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 頁面標題 --> <title>頁面標題</title> <!-- 做者 --> <meta name="author" content="Jencia"> <!-- 版權 --> <meta name="copyright" content="本頁版權歸XXX全部"> <!-- 使用的編譯器 --> <meta name="generator" content="webstorm"> <!-- 網頁描述 --> <meta name="description" content="這是一個整合meta的頁面"> <!-- 網頁關鍵字 --> <meta name="keywords" content="meta,教程,博客"> <!-- 搜索引擎索引方式 --> <meta name="robots" content="index,follow"> <!-- all 文件將被檢索，且頁面上的連接能夠被查詢 none 文件將不被檢索，且頁面上的連接不能夠被查詢 index 文件將被檢索 follow 頁面上的連接能夠被查詢 noindex 文件將不被檢索 nofollow 頁面上的連接不能夠被查詢 -->
設置頁面緩存的到期時間，content值爲GMT時間格式，若是不想緩存就設置爲0windows
<meta http-equiv="expires" content="Wed, 26 Feb 2012 08:21:57 GMT">
不想從緩存裏讀取頁面，就添加瀏覽器
<meta http-equiv="pragma" content="no-cache">
Windows 8 磁貼顏色緩存
<meta name="msapplication-TileColor" content="#000">
Windows 8 磁貼圖標
<meta name="msapplication-TileImage" content="icon.png">
viewport設置
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <!-- width 寬度（數值 / device-width） height 高度（數值 / device-height) initial-scale 初始的縮放比例 （範圍從0到1） minimum-scale 容許用戶縮放到的最小比例 maximum-scale 容許用戶縮放到的最大比例 user-scalable 是否容許用戶縮放頁面 (no,yes) viewport-fit 適配iPhoneX，使頁面徹底覆蓋整個窗口 -->
針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器
<!-- 黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320">
忽略數字自動識別爲電話號碼
<meta name="format-detection" content="telephone=no">
忽略識別郵箱
<meta name="format-detection" content="email=no">
其餘
<!-- uc強制豎屏 | 橫屏 --> <meta name="screen-orientation" content="portrait | landscape"> <!-- QQ強制豎屏 | 橫屏 --> <meta name="x5-orientation" content="portrait | landscape"> <!-- 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">
PWA應用定義
<link rel="manifest" href="manifest.json">
詳細PWA介紹可參考 https://zhuanlan.zhihu.com/p/...
添加favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"> // 或者 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
詳細favicon介紹可參考 https://github.com/audreyr/fa...
自動刷新或重定向
<!-- 2秒後刷新 --> <meta http-equiv="refresh" content="2;url="> <!-- 5秒後重定向到百度頁面 --> <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
添加rss訂閱
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
添加到主屏後的標題（iOS 6 新增）
<meta name="apple-mobile-web-app-title" content="標題">
是否啓用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes">
設置狀態欄的背景顏色，全屏模式下才生效
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- default 默認 black 黑色 black-translucent 黑色半透明 -->
圖標設置
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="xx.png"> <!-- sizes不寫默認57x57 -->
啓動畫面設置
<link rel="apple-touch-startup-image" sizes="768x1004" href="xx.png">
建議考慮不一樣分辨率，對每一個分辨率設置各自的sizes，配上對應尺寸的圖片，可參考如下表格。
| 手機型號 | 圖標大小 | 分辨率大小 |
|---|---|---|
| iPad | 72x72 | 768x1004(豎屏)、1024x748(豎屏) |
| iPad(Retina) | 144x144 | 1536x2008(豎屏)、2048x1496(豎屏) |
| iPhone/iPod Touch | 57x57 | 320x480 |
| iPhone/iPod Touch(Retina) | 114x114 | 640x960 |
| iPhone 5/iPod Touch 5 | 114x114 | 640x1136 |
| iPhone 6 | 120x120 | 750×1294 |
| iPhone 6 Plus | 180x180 | 1242×2148 |
添加智能APP廣告條 Smart App Banner（iOS 6+ Safari），頂部會自動彈出一條關於應用下載的廣告條，下載地址就是你設置的myURL
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">