属性 | 值 | 描述 |
---|---|---|
charset( H5 New) | character_set | 定义文档的字符编码。 |
content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
http-equiv | content-type default-style refresh |
把 content 属性关联到 HTTP 头部。 |
name | application-name author description generator keywords |
把 content 属性关联到一个名称。 |
scheme(H5 删除) | format/URI | HTML5不支持。 定义用于翻译 content 属性值的格式。 |
整体来看,HTML5之前,meta标签只有两个主要属性,分别是 name 属性和 http-equiv 属性。 HTML5新添加"charset".
一、name
name属性主要用于描述网页,对应属性是 content ,以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。
语法:
1.Keywords(关键字)
说明:为搜索引擎提供的关键字列表
语法:
2.Description(简介)
说明:Description用来告诉搜索引擎你的网站主要内容。
语法:
3.robots(机器人向导)
说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
语法:
content的参数值有all,none,index,noindex,follow,nofollow,默认值是all。
参数说明:
参数为 all :文件将被检索,且页面上的链接可以被查询; 参数为 none :文件将不被检索,且页面上的链接不可以被查询; 参数为 index :文件将被检索; 参数为 follow :页面上的链接可以被查询; 参数为 noindex :文件将不被检索,但页面上的链接可以被查询; 参数为 nofollow :文件将被检索,但页面上的链接不可以被查询;
4.author(作者)
说明:标注网页的作者
语法:
5.copyright(版权)
说明:标注版权
语法:
6.generator
说明:说明网站采用什么编辑器制作。
语法:
7.revisit-after(重访)
说明:网站重访
语法:
二、http-equiv
http-equiv类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
语法:
参数说明:
1.Expires(期限)
说明:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新传输。
语法:
注意:必须使用GMT的时间格式,或者直接设为0(数字表示多久后过期)
2.Pragma(cache模式)
说明:禁止浏览器从本地计算机的缓存中访问页面内容。
语法:
注意:网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。
3.Refresh(刷新)
说明:自动刷新并指向新页面。
语法:
其中的5表示5秒后自动刷新并调整到URL新页面。
4.Set-Cookie(cookie设定)
说明:浏览器访问某个页面时会将它存在缓存中,下次再次访问时就可从缓存中读取,以提高速度。当你希望访问者每次都刷新你广告的图标,或每次都刷新你的计数器,就要禁用缓存了。
如果网页过期,那么存盘的cookie将被删除。
语法:
注意:必须使用GMT的时间格式
5.Window-target(显示窗口的设定)
说明:强制页面在当前窗口以独立页面显示
语法:
可以用来防止别人在框架里调用你的页面。
6.content-Type(显示字符集的设定)
说明:设定页面使用的字符集
其他参数值:
meta标签的charset的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;
meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;
meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;
meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;
meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;
meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码;
7.content-Language(显示语言的设定)
说明:显示语言
语法:
8.http-equiv="imagetoolbar"
指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。
一、name
1.viewport
说明:能优化移动浏览器的显示(屏幕的缩放)
语法:
参数值:
width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持;
height – viewport 的高度 (范围从 223 到 10,000 )
user-scalable [yes | no]是否允许缩放
initial-scale [数值] 初始化比例(范围从 > 0 到 10)
minimum-scale [数值] 允许缩放的最小比例
maximum-scale [数值] 允许缩放的最大比例
2.format-detection(忽略电话号码和邮箱)
说明:忽略电话号码和邮箱
语法:
//忽略页面中的数字识别为电话号码
//忽略页面中的邮箱格式识别为邮箱
也可以写成:
3、浏览器内核控制:国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。(仅限360浏览器)
若页面需默认用极速核,增加标签:
若页面需默认用ie兼容内核,增加标签:
若页面需默认用ie标准内核,增加标签:
内核 | Webkit | IE兼容 | IE标准 |
---|---|---|---|
内核版本 | Chrome 45 | IE6/7 | IE9/IE10/IE11(取决于用户的IE) |
HTML5支持 | YES | NO | YES |
ActiveX控件支持 | NO | YES | YES |
4、WebApp全屏模式
5、隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
6、不同浏览器
二、http-equiv
1、优先使用 IE 最新版本和 Chrome
2、转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta
三、charset
meta标签的charset的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;
meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;
meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;
meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;
meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;
meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码。