meta
HTML5移動開發中的一些webkit專屬頭部標簽,能夠幫助浏覽器更好的解析HTML代碼,從而為HTML5移動開發提供更好的前端表現與體驗
viewport網頁縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
UTF-8編碼
<meta charset="utf-8" />
SEO搜索引擎相關設置
<!-- 作者 -->
<meta name="author" contect="..." />
<!-- 關鍵詞 -->
<meta name="keywords" content="..." />
<!-- 描述 -->
<meta name="description" content="..." />
<!-- 抓取 -->
<meta name="robots" content="..." />
iOS系統相關設置
<!-- 禁用自動識別電話號碼 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁用自動識別電子郵件 -->
<meta name="format-detection" content="email=no" />
Safari浏覽器相關設置
<!-- 強制全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 設置狀態欄顏色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 設置添加至主屏標題 -->
<meta name="apple-mobile-web-app-title" content="..." />
UC浏覽器相關設置
<!-- 強制豎屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- 強制全屏 -->
<meta name="full-screen" content="yes" />
<!-- 應用模式 -->
<meta name="browsermode" content="application" />
QQ浏覽器相關設置
<!-- 強制豎屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- 強制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- 應用模式 -->
<meta name="x5-page-mode" content="app" />
360浏覽器相關設置
<!-- 啟用極速模式 -->
<meta name="renderer" content="webkit" />
WP手機相關設置
<!-- 禁用點擊高光效果 -->
<meta name="msapplication-tap-highlight" content="no" />
Weibo社交標簽相關設置
<!-- 展示標題 -->
<meta property="og:title" content="..." />
<!-- 展示描述 -->
<meta property="og:description" content="..." />
<!-- 展示類型 -->
<meta property="og:type" content="..." />
<!-- 展示圖片 -->
<meta property="og:image" content="..." />
<!-- 展示鏈接 -->
<meta property="og:url" content="..." />
link
讓你的WebAPP看上去更像NativeAPP,帶來不一樣的用戶體驗
RSS訂閱
<link rel="alternate" type="application/rss+xml" href="rss.xml" title="RSS" />
主屏圖標相關設置
<!-- Favicons -->
<link rel="shortcut icon" type="image/ico" href="../images/favicon.ico" />
<!-- Android -->
<link rel="icon" sizes="196x196" href="../images/icon-196x196.png" />
<!-- iPhone、iTouch -->
<link rel="apple-touch-icon-precomposed" href="../images/icon-57x57.png" />
<!-- Retina iPhone、Retina iTouch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/icon-114x114.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../images/icon-144x144.png" />
iOS啟動動畫相關設置
<!-- iPhone、iPod Touch豎屏 -->
<link rel="apple-touch-startup-image" href="../images/icon-320x480.png" />
<!-- Retina iPhone、Retina iPod Touch豎屏 -->
<link rel="apple-touch-startup-image" sizes="640x960" href="../images/icon-640x960.png" />
<!-- Retina iPhone 5、Retina iPod Touch 5豎屏 -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="../images/icon-640x1136.png" />
<!-- iPad豎屏 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="../images/icon-768x1004.png" />
<!-- iPad橫屏 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="../images/icon-1024x748.png" />
<!-- Retina iPad豎屏 -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="../images/icon-1536x2008.png" />
<!-- Retina iPad橫屏 -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="../images/icon-2048x1496.png" />
關於meta與link的設置項其實還有不少,由於太過冷門,就不一一列舉了
HTML5新增的標簽和廢除的標簽 http://www.linuxidc.com/Linux/2016-01/127516.htm
40 個重要的 HTML5 面試題及答案 http://www.linuxidc.com/Linux/2015-12/126824.htm
HTML5與CSS3基礎教程(第8版)中文高清版 PDF http://www.linuxidc.com/Linux/2015-12/125734.htm
HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm
HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm
《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm
關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm
HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm