HTML中meta标签

57 sec read

<meta>标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。meta 标签包含了 HTTP 标题信息(http-equiv) 和页面描述信息(name)。

http-equiv:该枚举的属性定义,可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。最常见的大概属于Content-Type了,设置编码类型。如

HTML5中可以简化为

http-equiv常见还有其它如下等。

  • Content-Language : 设置网页语言
  • Refresh : 指定时间刷新页面
  • set-cookie : 设定页面 cookie 过期时间
  • last-modified : 页面最后生成时间
  • expires : 设置 cache 过期时间
  • cache-control : 设置文档的缓存机制

name:该属性定义了文档级元数据的名称。用于对应网页内容,便于搜索引擎查找分类,如 keywords, description; 也可以使用浏览器厂商自定义的 meta, 如 viewport.

SEO相关

页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字。

页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

搜索引擎索引方式,robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。

定义网页作者

显示区域

viewport:可视区域的定义,如屏幕缩放等。告诉浏览器如何规范的渲染网页。能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。

  • width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
  • height:高度(数值 / device-height)(范围从223 到10,000)
  • initial-scale:初始的缩放比例 (范围从>0 到10)
  • minimum-scale:允许用户缩放到的最小比例
  • maximum-scale:允许用户缩放到的最大比例
  • user-scalable:用户是否可以手动缩 (no,yes)
  • minimal-ui:iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:<meta name=”viewport” content=”width=device-width, initial-scale=1, minimal-ui”>

注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

IOS私有属性

1)apple-mobile-web-app-capable

启用 webapp 模式, 会隐藏工具栏和菜单栏,和其它配合使用。

2)apple-mobile-web-app-status-bar-style

隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default(白色,默认) | black(黑色) | black-translucent(半透明)

注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度, Retina 屏幕为 40px )。

3)添加到主屏后的标题(iOS 6 新增)

4)iOS 图标

rel 参数:

  • apple-touch-icon 图片自动处理成圆角和高光等效果。
  • apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。

iPhone 和 iTouch,默认 57×57 像素,必须有

5)iOS 启动画面

iPad 的启动画面是不包括状态栏区域的。iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

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

iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。

浏览器内核控制

国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。国内双核浏览器默认内核模式如下:

  • 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
  • 360极速浏览器、遨游浏览器:Webkit内核(极速模式)

其他一些meta标签

参考链接:

  • https://wiki.whatwg.org/wiki/MetaExtensions
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
  • http://www.w3.org/TR/html5/document-metadata.html
  • http://www.html-5.com/metatags/
  • https://developer.apple.com/library/ios/qa/qa1686/_index.html
  • https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
  • https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html
  • https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
  • http://code.lancepollard.com/complete-list-of-html-meta-tags/
打赏作者
微信支付标点符 wechat qrcode
支付宝标点符 alipay qrcode

C语言学习:size_t

在学习C语言的时候,遇到了一个新的数据类型size_t,截止目前也没有完全理清这个类似的具体场景及出现的原因。
44 sec read

C语言学习:main()函数的正确写法

C语言虽然是一门古老的语言,但是其标准一直在完善,所以很多以前支持的语法在到当前已经不能在使用了。 C语言的版
41 sec read

Scipy数学函数的Scala实现

最近在推进项目的时候,遇到需要将线下的Python代码转化成线上的集群代码,由于机器代码环境是Scala,所以
4 min read

One Reply to “HTML中meta标签”

  1. Hi~ 在使用 apple-mobile-web-app-capable 的时候,将网页固定到主屏幕,确实是隐藏了工具栏和地址栏,但是点击打开的链接,会在 safari 中打开,而不是在固定到主屏幕的网页 web app 中打开。怎么解决呢?

发表评论

电子邮件地址不会被公开。 必填项已用*标注