一、html lang 屬性
以前我們常用的是 <html lang="zh-CN"> 或簡寫的 <html lang="zh">，但實際上 W3 language tags 推薦使用 zh-Hans 簡體中文、zh-Hant 繁體中文，可以提高一致性和準確。
二、meta 標籤
-
1.聲明文檔使用的字符編碼
-
<meta charset="utf-8">用於HTML5 -
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">用於HTML4或者XHTML或用於過時的 dom 解析器
-
通常我們會使用短的。實際上，在 `HTML5` 中，以上兩種是等價的，只是短的更容易被記住。更多對比見 [stackoverflow](https://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type)
-
2.優先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> -
3.360 使用 Google Chrome Frame
<!-- 如果沒有安裝 GCF(Google Chrome Frame)，使用最高版本的IE內核渲染 --> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />具體詳情見 360 瀏覽器內核控制
<!-- 強制使用webkit渲染 --> <meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> -
4.百度禁止轉碼
在使用百度移動搜索時，百度會自動將網站進行轉碼，添加一些煩人的廣告，如果我們不做百度廣告，是可以通過meta標籤禁止網站被轉碼<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 表示頁面同時適合在移動設備和PC上進行瀏覽 --> <meta name="applicable-device" content="pc,mobile">相關網站:
-
5.SEO 優化
- 頁面標題 title
<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">- 定義網頁搜索引擎索引方式 SEO--Robots
<meta name="robots" content="index,follow">
-
6.爲移動設備添加
viewport,可以讓佈局在移動瀏覽器上顯示的更好<meta name ="viewport" content =" width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=no " >width=device-width會導致 iPhone5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊注意：
minimal-uiiOS8 中已經刪除 -
7.ios 設備
- 添加到主屏後的標題（iOS 6 新增）
<meta name="apple-mobile-web-app-title" content="標題">- 是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄
<meta name="apple-mobile-web-app-capable" content="yes"/>- 設置狀態欄的背景顏色
<!-- 在 "apple-mobile-web-app-capable" content="yes" 時生效 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
[content 參數](http://blog.jayself.com/2014/03/22/meta/)
```
default 默認值。
black 狀態欄背景是黑色。
black-translucent 狀態欄背景是黑色半透明。
如果設置爲 default 或 black ,網頁內容從狀態欄底部開始。
如果設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。
```
- 禁止數字識自動別爲電話號碼
```html
<meta name="format-detection" content="telephone=no" />
<!-- 電話號碼、郵箱 -->
<meta name="format-detection" content="telephone=no,email=no" />
```
- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
```html
<meta
name="apple-itunes-app"
content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
>
```
content 屬性可以傳三個參數，以逗號隔開:
```
app-id(必選) 填寫應用在APPStrore的ID
affiliate-data(可選) 是iTunes 分銷聯盟計劃的ID 一般用不到。
app-argument（可選）點擊『打開』給APP傳參數
```
-
8.關閉 chrome 瀏覽器下翻譯插件
<meta name="google" value="notranslate" /> -
9.去除手機半透明背景
- ios 點擊鏈接，會出現一個半透明灰色遮罩
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);- android 點擊鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可以做一下設置去除部分機器自帶的效果
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);- windows phone 系統，點擊標籤產生的灰色半透明背景，添加
meta標籤去除
<meta name="msapplication-tap-highlight" content="no">
注意：部分機型可能去除不了，如果是按鈕，可以避免使用 `a`、`input`，使用 `div` 代替
-
10.刷新瀏覽器
content -- 時間;網址<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com"> -
11.強制豎屏與全屏
landscape -- 橫屏;portrait -- 豎屏<!-- 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"> -
12.應用模式
<!-- UC應用模式:默認全屏，禁止長按菜單，禁止手勢，標準排版，強制圖片顯示 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app">browsermode作用：<!-- UC使用適屏模式顯示 --> <meta name="layoutmode" content="fitscreen"> <!-- UC強制圖片顯示 --> <meta name="imagemode" content="force"> <!-- UC禁止夜間模式顯示 enable|disable --> <meta name="nightmode" content="disable"> <!-- UC當頁面有太多文字時禁止縮放 --> <meta name="wap-font-scale" content="no"> -
13.UC排版模式
UC 瀏覽器提供兩種排版模式，分別是適屏模式（fitscreen）及標準模式（standard），其中適屏模式簡化了一些頁面的處理，使得頁面內容更適合進行頁面閱讀、節省流量及響應更快，而標準模式則能按照標準規範對頁面進行排版及渲染。
<meta name="layoutmode" content="fitscreen|standard"> -
14.cookie 設定指定時間後刪除
<!-- Set-Cookie(cookie設定):如果網頁過期，那麼存盤的cookie將被刪除 GMT格式 --> <meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/" >
