<meta>标签基础

浏览器支持

　          opera     goole     

　　所有主流浏览器都支持 <meta> 标签。

 定义和用法

　　元数据（Metadata）是数据的数据信息

　　通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

　　meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

　　<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

深层理解：

　　meta是用来在HTML文档中模拟HTTP协议的响应头报文。

　　meta   标签用于网页的＜head＞与＜/head＞中，meta   标签的用处很多。

　　meta   的属性有两种：name和http-equiv。

　　name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。

此处描述链接：http://blog.sina.com.cn/s/blog_473f94590100j4jz.html

※注释：

　　（1）<meta> 标签永远位于 head 元素内部。
　　（2）元数据总是以名称/值的形式被成对传递的。
　　（3）如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

额外补充：

scheme(方案)：
　　说明：scheme can be used when name is used to specify how the value of content should
be interpreted.
　　用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。
　　用法：<meta scheme="ISBN" name="identifier" content="0-14-XXXXXX-1" >
 
Link （链接）
说明：链接到文件
用法：<Link href="soim.ico" rel="Shortcut Icon">
注意：很多网站如果你把它保存在收件夹中后，会发现它连带着一个小图标，如果再次点击进入之后还会发现地址栏中也有个小图标。现在只要在你的页头加上这段话，就能轻松实现这一功能。
 
Base (基链接)
说明：插入网页基链接属性
注意：你网页上的所有相对路径在链接时都将在前面加上URL。其中target="_blank"是链接文件在新的窗口中打开，你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开；改为“_self”链接文件在当前窗口（帧）中打开；改为“_top”链接文件全屏显示。
 

 HTML 4.01 与 HTML5之间的差异

HTML5 不支持 scheme 属性。（部分应用见额外补充）

在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：

  • HTML 4.01：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5：<meta charset="UTF-8">

 属性整理：

属性 值 描述
charset（新属性）
 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 format/URI HTML5不支持。 定义用于翻译 content 属性值的格式。

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

name属性：

1、＜meta   name= "Generator "   content= " "＞用以说明生成工具（如Microsoft   FrontPage  4.0）等；

2、＜meta   name= "KEYWords "   content= " "＞向搜索引擎说明你的网页的关键词；

3、＜meta   name= "DEscription "   content= " "＞告诉搜索引擎你的站点的主要内容；

4、＜meta   name= "Author "   content= "你的姓名 "＞告诉搜索引擎你的站点的制作的作者；

5、＜meta   name= "Robots "   content= "all|none|index|noindex|follow|nofollow "＞

　其中的属性说明如下：

　　设定为all：文件将被检索，且页面上的链接可以被查询；

　　设定为none：文件将不被检索，且页面上的链接不可以被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的链接可以被查询；

　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；

　　设定为nofollow：文件将不被检索，页面上的链接可以被查询。

 

http-equiv属性：

1、  <meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80">和

　　<meta http-equiv="Content-Language" content="zh-CN">

　　用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

2、  <meta http-equiv="Refresh" content="n;url=http://yourlink">

　　定时让网页在指定的时间n内，跳转到你的页面；

3、<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">

　　可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

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

　　是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

5、<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">

　　cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

6、<meta http-equiv="Pics-label" content="">

　　网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

7、<meta http-equiv="windows-Target" content="_top">

　　强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

8、<meta http-equiv="Page-Enter" content="revealTrans（duration=10,transition= 50）">和

　　<meta http-equiv="Page-Exit" content="revealTrans（duration=20，transition=6）">

　　设定进入和离开页面时的特殊效果，这个功能即FrontPage中的"格式/网页过渡"，不过所加的页面不能够是一个frame页面。

　　HTTP-EQUIV用于向浏览器提供一些说明信息，从而可以根据这些说明做出反应。HTTP-EQUIV其实并不仅仅只有说明网页的字符编码这一个作用，常用的HTTP-EQUIV类型还包括：网页到期时间、默认的脚本语言、默认的风格页语言、网页自动刷新时间等。

http-equiv（百度百科） ：

【注】：与之前8点无太大出入，感觉看着顺眼就粘过来了

A、Expires（期限）

　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

　　用法：<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">

　　注意：必须使用GMT的时间格式。

B、Pragma(cache模式）

　　说明：禁止浏览器从本地计算机的缓存中访问页面内容。

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

　　注意：这样设定，访问者将无法脱机浏览。

C、Refresh（刷新）

　　说明：自动刷新并转到新页面。

　　用法：<meta http-equiv="Refresh" content="2;URL">；（注意后面的分号，分别在秒数的前面和网址的后面，URL可为空）

　　注意：其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定）

　　说明：如果网页过期，那么存盘的cookie将被删除。

　　用法：<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">

　　注意：必须使用GMT的时间格式。

E、Window-target（显示窗口的设定）

　　说明：强制页面在当前窗口以独立页面显示。

　　用法：<meta http-equiv="Window-target" content="_top">

　　注意：用来防止别人在框架里调用自己的页面。

F、content-Type（显示字符集的设定）

　　说明：设定页面使用的字符集。

　　用法：<meta http-equiv="content-Type" content="text/html; charset=gb2312">

G、content-Language（显示语言的设定）

　　用法：<meta http-equiv="Content-Language" content="zh-cn" />

http-equiv其他用法：

　　动画效果、网页定级评价、控制页面缓冲、控制网页窗口等。

 

整理纰漏之处欢迎提出~

posted @ 2017-11-30 22:48  渡劫的咸鱼哥  阅读(219)  评论(0)  编辑  收藏  举报