HTML 常用头部标签（meta）

来看下常用的标签列表，后文会一一介绍：

<!DOCTYPE html>

<head>

</head>

基本标签

使用 HTML5 doctype，不区分大小写。

<!DOCTYPE html>

声明文档使用的字符编码

更加标准的 lang 属性写法 http://zhi.hu/XyIa

简体中文
<html lang="zh-cmn-Hans">
繁体中文
<html lang="zh-cmn-Hant">

很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

菠萝和鳳梨其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为黄梨。

优先使用 IE 最新版本和 Chrome

SEO 优化

页面描述

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

页面关键词

定义页面标题

定义网页作者

定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档

可选标签

为移动设备添加 viewport

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

添加到主屏后的标题（iOS 6 新增）

是否启用 WebApp 全屏模式

设置状态栏的背景颜色

content 参数：

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。

如果设置为 default 或 black ,网页内容从状态栏底部开始。

如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

iOS 图标

rel 参数：

apple-touch-icon 图片自动处理成圆角和高光等效果。

apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

iPhone 和 iTouch，默认 57x57 像素，必须有

iPad，72x72 像素，可以没有，但推荐有

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

Retina iPad，144x144 像素，可以没有，但推荐有

iOS 启动画面

官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）

iPad 竖屏 1536x2008（Retina）

iPad 横屏 1024x748（标准分辨率）

iPad 横屏 2048x1496（Retina）

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

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

iPhone/iPod Touch 竖屏 640x960 (Retina)

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁贴颜色

Windows 8 磁贴图标

其他

添加 RSS 订阅

添加 favicon icon

禁止 Chrome 浏览器中自动提示翻译

eta标签介绍

meta标签是HTML语言head区域的一个辅助性标签，常用于定义页面的说明，关键字，最后修改的日期和其他的元数据。这些元数据将服务于浏览器，搜索引擎和其他网络服务。

meta标签的组成

meta标签共有两个属性，分别是http-equiv属性和name属性。

name属性

name属性主要是用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。

meta标签中name属性语法格式是：

<meta name="参数" content="具体的描述">

其中name属性共有以下几种参数。(A-C为常用属性)

（1） keywords(关键字)

说明：用于告诉搜索引擎，你网页的关键字。举例：

<meta name="keywords" content="PHP中文网">

（2）description(网站内容的描述)

说明：用于告诉搜索引擎，你网站的主要内容。举例：

<meta name="description" content="php中文网提供大量免费、原创、高清的php视频教程">

（3）viewport(移动端的窗口)

说明：这个概念较为复杂，具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。

<meta name="viewport" content="width=device-width, initial-scale=1">

（4） robots(定义搜索引擎爬虫的索引方式)

说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

<meta name="robots" content="none">

具体参数如下：

1、none : 搜索引擎将忽略此网页，等价于noindex，nofollow。

2、noindex : 搜索引擎不索引此网页。

3、nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。

4、all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。

5、index : 搜索引擎索引此网页。

6、follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

（5）author(作者)

说明：用于标注网页作者举例：

<meta name="author" content="PHP中文网">

（6） generator(网页制作软件)

说明：用于标明网页是什么软件做的举例: (不知道能不能这样写)：

<meta name="generator" content="Sublime Text3">

（7）copyright(版权)

说明：用于标注版权信息举例：

（8）revisit-after(搜索引擎爬虫重访时间)

说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。举例：

<meta name="revisit-after" content="7 days" >

（9）renderer(双核浏览器渲染方式)

说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例：

<meta name="renderer" content="webkit"> //默认webkit内核

<meta name="renderer" content="ie-comp"> //默认IE兼容模式

<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv属性

http-equiv顾名思义，相当于HTTP的作用。

meta标签中http-equiv属性语法格式是：

<meta http-equiv="参数" content="具体的描述">

其中http-equiv属性主要有以下几种参数：

（1） content-Type(设定网页字符集)(推荐使用HTML5的方式)

说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐

<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

（2）X-UA-Compatible(浏览器采取何种版本渲染当前页面)

说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

（3） cache-control(指定请求和响应遵循的缓存机制)

说明：指导浏览器如何缓存某个响应以及缓存多长时间

<meta http-equiv="cache-control" content="no-cache">

共有以下几种用法：

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）

public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）

maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

禁止百度自动转码

说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。

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

（4）expires(网页到期时间)

说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

（5） refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。

<meta http-equiv="refresh" content="2；URL=http://www.xxx.com/"> //意思是2秒后跳转到PHP中文网

（6） Set-Cookie(cookie设定)

说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

总结：meta标签的自定义属性实在太多了。所以只总结了一些常用的，希望对大家有所帮助。

天查Html手册时，又有了新的发现。也就这机会，好好总结下HTML中Meta的使用。

HTML <meta> 标签，所有浏览器都支持 <meta> 标签。它提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），对搜索引擎和更新频度的描述和关键词，或其他 web 服务。

在 HTML 中，<meta> 标签没有结束标签,在 XHTML 中，<meta> 标签必须被正确地关闭。

必要属性

属性值描述contentsome text定义与http-equiv或name属性相关的元信息

可选属性

属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。contentsome text定义用于翻译 content 属性值的格式。

SEO优化

　　　　关键词:类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助.使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关,标记不应超过 874 个字符。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

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

<meta name="description" content="your description">

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

<meta name="robots" content="index,follow" />

　　页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
　　<meta http-equiv="Refresh" content="5;" />

移动设备

　　 viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

　　　　　　content 参数：

　　　　　　　　width viewport 宽度(数值/device-width)
　　　　　　　　height viewport 高度(数值/device-height)
　　　　　　　　initial-scale 初始缩放比例
　　　　　　　　maximum-scale 最大缩放比例
　　　　　　　　minimum-scale 最小缩放比例
　　　　　　　　user-scalable 是否允许用户缩放(yes/no)

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

　　各浏览器平台

　　Microsoft Internet Explorer

<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >


<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">

<meta name="msapplication-config" content="ieconfig.xml">

　　Google Chrome

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

<meta name="google" value="notranslate">

　　360浏览器

<meta name="renderer" content="webkit|ie-comp|ie-stand">

　　UC手机浏览器

<meta name="screen-orientation" content="landscape/portrait">

<meta name="full-screen" content="yes">

<meta name="imagemode" content="force">

<meta name="browsermode" content="application">

<meta name="nightmode" content="disable">

<meta name="layoutmode" content="fitscreen">

<meta name="wap-font-scale" content="no">

　　QQ手机浏览器

<meta name="x5-orientation" content="landscape/portrait">

<meta name="x5-fullscreen" content="true">

<meta name="x5-page-mode" content="app">

　　Apple iOS

<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<meta name="format-detection" content="telephone=no">


<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="App Title">

　　Google Android

<meta name="theme-color" content="#E64545">

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

App Links

<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">

<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">

<meta property="al:web:url" content="http://applinks.org/documentation">

　　其它常用的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telphone=no, email=no" />

<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

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

网页相关

　　网页编码：以下两种charset定义方式均可

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

　　禁止缓存：禁止浏览器从本地机的缓存中调阅页面内容，网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览

<meta http-equiv="Pragma" content="no-cache">

　　网页过期：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。注意：必须使用GMT的时间格式，或直接设为0（数字表示多少时间后过期）

<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

　　Cookie设置：注意：必须使用GMT的时间格式

<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

　　显示窗口的设定：强制页面在当前窗口以独立页面显示，这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent.

<Meta http-equiv="Widow-target" Content="_top">

　　进入与退出：这个是页面被载入和调出时的一些特效。这个有好多特效，可以查询Page-Exit去了解更多。

<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

安全相关

　　内容安全策略CSP（Content-Security-Policy）,可以参考https://blog.csdn.net/u014465934/article/details/84199171

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章。

我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！

如果你也想学习前端，可以观看【置顶】文章。也可以私信【1】拿

在线咨询

上一篇：HTML 表格
下一篇：为什么有的马桶上有两个按钮？会用的人不多，看完涨知识了！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 常用头部标签（meta）

您的项目需求