HTML meta 标签

!! 标签是 HTML 语言头部的一个辅助性标签,我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等!

 

属性 描述
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时,代表世界通用的语言编码;

在HTML5中,我们一般都是:

7.content-Language(显示语言的设定)

说明:显示语言

语法:

8.http-equiv="imagetoolbar"

指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

!!HTML 5新增

一、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时,代表世界通用的语言编码。

你可能感兴趣的:(HTML,前端理论)