霍者博客

HTML5的<meta>标签详解

定义针对搜索引擎的关键词:

<meta name="keywords" content="meta,red" />

定义对页面的描述:

<meta name="description" content="这是meta教程" />

定义页面的最新版本:

<meta name="revised" content="bu, 2016/5/10/" />

每 5 秒刷新一次页面:

<meta http-equiv="refresh" content="5" />

网页作者: 

<meta name="author" content="name, email@gmail.com"/>

添加智能 App 广告条(iOS 6+ Safari):

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

设置苹果工具栏颜色:

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

 忽略页面中的数字识别为电话,忽略email识别 :

<meta name="format-detection" content="telphone=no, email=no"/>

是否启用 WebApp 全屏模式:

<meta name="apple-mobile-web-app-capable" content="yes" />

是否删除默认的苹果工具栏和菜单栏:

<meta name="apple-mobile-web-app-capable" content="yes" />

启用电话功能,请使用<a href="tel:15855555555">15855555555</a>来代替,邮件则为<a href="mailto:xxx@xxx.com">发送邮件</a>

 windows phone 点击无高光 

<meta name=”msapplication-tap-highlight” content=”no”>

不让百度转码

<meta http-equiv=”Cache-Control” content=”no-siteapp” />

设置“添加到主屏幕图标:用户可以像保存书签一样把一个网站添加到主屏幕,下次用户直接点击主屏幕上的图标就能进入网站。

<link rel=“apple-touch-icon-precomposed” href=“/apple-touch-icon-57×57-1.png”/>
<!– iPhone 和 iTouch,默认 57×57 像素,必须有 –>
<link rel=“apple-touch-icon-precomposed” sizes=“114×114” href=“/apple-touch-icon-114×114-precomposed.png”/>
<!– Retina iPhone 和 Retina iTouch,114×114 像素,可以没有,但推荐有 –>
<link rel=“apple-touch-icon-precomposed” sizes=“144×144” href=“/apple-touch-icon-144×144-precomposed.png”/>
<!– Retina iPad,144×144 像素,可以没有,但推荐有 –>

添加到主屏幕后系统会默认给图片加上IOS相关的图标风格(比如圆角),如果需要系统直接展示原图使用apple-touch-icon-precomposed,如果需要系统添加风格使用apple-touch-icon。

15、设置桌面图标的标题

<span style=“font-size:12px;”><meta name=“apple-mobile-web-app-title” content=“标题”></span>

最好限制在六个中文长度内,超长的内容会被隐藏

16、设置启动画面:需要的百度下啊

移动端viewport设置:

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

说明:

width: viewport 的高度 (数值/device-width) ,(范围从 200 到 10,000 ,默认为 980 像素 )

height : viewport 的高度  (数值/device-width) ,(范围从 223 到 10,000 )

user-scalable [yes | no] :是否允许缩放

initial-scale [数值] :初始化比例(范围从 > 0 到 10)

minimum-scale [数值] :允许缩放的最小比例

maximum-scale [数值] :允许缩放的最大比例

<!--社交标签 begin  参考微博API --> 

<meta property="og:type" content="类型" />

<meta property="og:url" content="URL地址" />

<meta property="og:title" content="标题" />

<meta property="og:image" content="图片" />

<meta property="og:description" content="描述" />

<!-- 社交标签 end -->

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/440.html,标题:HTML5的<meta>标签详解

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。