html中的meta詳解

來源:互聯網
上載者:User

1  name=viewport

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

1、width : 控制viewport的大小,可以指定一個值,如600, 或者特殊的值,如device-width為裝置的寬度(單位為縮放為100%的CSS的像素)

2、height : 和width相對應,指定高度

3、initial-scale : 初始縮放比例,頁面第一次載入時的縮放比例

4、maximum-scale : 允許使用者縮放到的最大比例,範圍從0到10.0

5、minimum-scale : 允許使用者縮放到的最小比例,範圍從0到10.0

6、user-scalable : 使用者是否可以手動縮放,值可以是:①yes、 true允許使用者縮放;②no、false不允許使用者縮放

2  meta中的name屬性
<!--用以說明產生工具--><meta  name="Generator"  content="">      <!--向搜尋引擎說明你的網頁的關鍵詞--><meta  name="Keywords"    content=""> <!-- 告訴搜尋引擎你的網站的主要內容--><meta name="Description"  content=""> <!-- 告訴搜尋引擎你的網站的製作的作者 -->    <meta  name="Author"    content="你的姓名"><meta  name="Robots"    content= "all|none|index|noindex|follow|nofollow"><!--  設定為all:檔案將被檢索,且頁面上的連結可以被查詢;     設定為none:檔案將不被檢索,且頁面上的連結不可以被查詢;     設定為index:檔案將被檢索;     設定為follow:頁面上的連結可以被查詢;     設定為noindex:檔案將不被檢索,但頁面上的連結可以被查詢;     設定為nofollow:檔案將不被檢索,頁面上的連結可以被查詢。-->
3  meta中的 http-equiv屬性
<!--設定字元編碼和檔案格式--><meta http-equiv="Content-Type" content="text/html";charset=utf-8"><!--設定定時重新整理--><meta http-equiv="Refresh"  content="n;url=http://.......><!-- 告訴瀏覽器不要快取頁面面--><meta http-equiv="Pragma"   content="no-cache"><! -- //告訴瀏覽器不要快取頁面面--><meta http-equiv="cache-control" content="no-cache">//告訴瀏覽器不要快取頁面面<!--禁用瀏覽器緩衝此頁面--><meta http-equiv="expires" content="0"><!--設定ie的文檔相容模式,設定IE7+的瀏覽器以IE7的相容模式查看頁面--><meta http-equiv="X-UA-Compatible" content="IE=7">
4 html5中更多的meta與link
<!DOCTYPE html> <!-- HTML5 doctype 不區分大小寫 --><html lang="zh"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa --> <head><meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 優先使用IE最新版本和 Chrome --><meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 瀏覽器核心控制 --><!--content的取值為webkit,ie-comp,ie-stand之一,區分大小寫,分別代表用webkit核心,IE相容核心,IE標準核心。若頁面需預設用極速核,增加標籤:<meta name="renderer" content="webkit"> 若頁面需預設用ie相容核心,增加標籤:<meta name="renderer" content="ie-comp"> 若頁面需預設用ie標準核心,增加標籤:<meta name="renderer" content="ie-stand">--><!-- width=device-width 會導致 iPhone 5 添加到主屏後以 WebAPP 全螢幕模式開啟頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz --><meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏時的標題 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啟用 WebAPP 全螢幕模式 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 狀態條顏色 --> <meta name="format-detection" content="telephone=no" /> <!-- 屏蔽數字自動識別為電話號碼 --><!-- favicon 表徵圖 --><link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/><link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/><link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/><!-- iOS 表徵圖 begin --><!--預設 57x57 像素--><link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" /><!--iPad 1 72x72 像素--><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" /><!--iPhone 4 114x114 像素--><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" /><!-- iOS 表徵圖 end --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 --><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼表徵圖 --><!-- SEO 最佳化 --><meta name="description" content="" /> <!-- 頁面描述 --><meta name="keywords" content=""/> <!-- 頁面關鍵詞 --><title>頁面標題</title><!-- iOS 應用啟動介面設定 begin --><!-- iPad Landscape – 1024 x 748 --><link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /><!-- iPad Portrait – 768 x 1004 --><link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" /><!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) --><link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" /><!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) --><link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /><!-- iOS 應用啟動介面設定 end --></head>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.