描述HTML文档的元数据
<head>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
<meta charset="UTF-8">
</head>
简介
元数据(Metadata
)是数据的数据信息
<meta>
标签提供了HTML
文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
META
元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web
服务调用。
<meta>
标签通常位于head区域内- 元数据通常以名称/值对出现
meta
有个必须的属性content
用于表示需要设置的项的值- 如果没有提供
name
属性,那么名称/值对中的名称会采用http-equiv
属性的值
属性
属性 | 值 | 描述 |
---|---|---|
charset | charscter_set | 定义文档的字符编码(html5新属性) |
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
、http-equiv
属性的值分别有什么作用。
name属性
name
属性主要用于描述网页,对应属性是content
,以便与搜索引擎机器人查找、分类。
语法
<meta name="参数" content="参数值" />
属性值
Keyword(关键字)
使用:<meta name="keywords" content="meta, html, 标签" />
作用:为搜索引擎提供的关键字列表
Description(简介)
使用:<meta name="description" content="meta标签的介绍和使用讲解" />
作用:description用来告诉搜索引擎你的网站主要内容
robot(机器人向导)
使用:<meta name="robots" content="all | none | index | noindex | follow | nofollow" />
作用:robots告诉搜索引擎哪些页面需要索引,那些页面不需要索引
参数讲解:参数默认为all。
- all:文件被检索,且页面上的链接可以被查询
- none:文件将不被检索,且页面上的链接不可以被查询
- index:文件将被检索
- follow:页面上的链接可以被查询
- noindex:文件将不被检索,单页面上的链接可以被查询
- nofollow:文件将被检索,单页面上的链接不可以被查询
author(作者)
使用:<meta name="author" content="TG, [email protected]" />
作用:标注网页的作者
copyright(版权)
使用:<meta name="copyright" content="本网站版权归TG所有"/>
作用:标注版权
generator
使用:<meta name="generator" content="所用的编辑器" />
作用:说明网站采用什么编辑器制作。
revisit-after(重访)
作用:网站重访
使用:<meta name="revisit-after" content="7days"/>
http-equiv
http-equiv
类似于HTTP
的头部协议,它回应给浏览器一些有用的信息,以帮助正确的精确的显示网页内容。与之对应的属性值为content
,content
中的内容就是各个参数的变量值。
语法
<meta http-equit="参数" content="参数值" />
属性
expires(期限)
作用:指定网页在缓存中的过期时间。一旦网页过期,必须到服务器上重新传输
使用:<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
注意:必须使用GMT的时间格式,或者直接设为0(数字表示多久后过期)
Pragma(chche模式)
作用:禁止浏览器从本地计算机的缓存中访问页面内容
使用:<meta http-equiv="Pragma" content="no-cache"/>
Refresh(刷新)
作用:自动刷新并指向新页面
使用:<meta http-equiv="refresh"content="5; url=http://www.baidu.com/" />
5表示5秒后自动刷新,并跳转到指定的URL路径中
window-target(显示窗口的设定)
作用:强制页面在当前窗口以独立页面显示
使用:<meta http-equiv="window-target" content="_top">
可以防止别人在框架里调用你的页面
content-type(显示字符集的设定)
作用:设置页面使用的字符集
使用:<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
Content-Language(显示语言的设定)
作用:显示语言
使用:<meta http-equiv="Content-Language" content="zh-cn" />
HTML新增属性值
name
viewport
作用:能优化移动浏览器的显示(屏幕的缩放)
使用:<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
参数值:
- 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 [数值] 允许缩放的最大比例
apple-mobile-web-app-capable
作用:启动WebApp全屏模式
使用:<meta name="apple-mobile-web-app-capable" content="yes" />
文章评论