html meta有什么作用?html meta标签用法详细介绍
meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。
meta标签的组成
meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
html meta标签实例
描述 HTML 文档的元数据:
<head><meta name="description" content="免费在线教程"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="169it.com"><meta charset="utf-8"></head>
所有主流浏览器都支持 <meta> 标签。
标签定义及使用说明
元数据(Metadata)是数据的数据信息。
<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
META元素通常用于指定网页的描述,关键词,的文件的最后修改,作者,和其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间,它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。
注意:<meta> 标签通常位于 <head> 区域内。
注意: 元数据通常以 名称/值 对出现。
注意: 如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。
HTML 4.01 与 HTML5之间的差异
HTML5 不支持 scheme 属性。
在 HTML5 中,有一个新的 charset 属性,它使字符集的定义更加容易:
HTML 与 XHTML 之间的差异
在 HTML 中 <meta> 标签没有结束标签。
在 XHTML 中 <meta> 标签必须包含结束标签。
实例
实例 1 - 定义文档关键词,用于搜索引擎:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
实例 2 - 定义web页面描述:
<meta name="description" content="Free Web tutorials on HTML and CSS">
实例 3 - 定义页面作者:
<meta name="author" content="Hege Refsnes">
实例 4 - 每30秒刷新页面:
<meta http-equiv="refresh" content="30">
html meta 标签属性
New :HTML5 新属性。
属性 | 值 | 描述 |
---|
charsetNew | 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" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;
2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词;
3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容;
4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者;
5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
其中的属性说明如下:
设定为all:文件将被检索,且页面上的链接可以被查询;
设定为none:文件将不被检索,且页面上的链接不可以被查询;
设定为index:文件将被检索;
设定为follow:页面上的链接可以被查询;
设定为noindex:文件将不被检索,但页面上的链接可以被查询;
设定为nofollow:文件将不被检索,页面上的链接可以被查询。
http-equiv属性详细介绍
1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言;又如英文是iso-8859-1字符集,还有big5、utf-8、shift-jis、euc、koi8-2等字符集;
2、<meta http-equiv="Refresh" contect="n;url=http://">定时让网页在指定的时间n内,跳转到页面http://;
3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;
4、<meta http-equiv="pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从cache中再调出;
5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;
6、<meta http-equiv="Pics-label" contect="">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;
7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;
8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。
<p> 标签支持所有 HTML事件属性。