HTML Meta详解
一.思维导图
首先来个整体印象,请看以下思维导图(ps:思维导图用来总结很好用)
Meta思维导图二、定义
<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
三、属性
mate属性包括http-equiv,name,scheme,content,下面对这四个属性一一进行介绍
1.http-equiv
把 content 属性关联到 HTTP 头部
1)content-type/content-language
设定页面使用的字符集,用以说明主页制作使用的文字语言,浏览器会根据此来调用相应的字符集显示page内容
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta http-equiv="content-language" content="zh-CN">
2) expire
指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅,时间格式必须是GMT
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
3) refersh
让网页多长时间(秒)刷新自己,或在多长时间后让网页自动链接到其他网页
//30秒后刷新
<meta http-equiv="refresh" content="30">
//5秒后重定向
<meta http-equiv="refresh" content="5; Url=http://www.baidu.com">
4) set-cookie
缓存cookie,时间格式必须使用GMT
<meta http-equiv="set-cookie" content="cookie" value=xxx; expires=Wednesday,21-Oct-17 16:14:21 GMT; path=/">
5) pragma
禁止浏览器从本地机的缓存中调阅页面内容
<meta http-equiv="pragma" content="no-cach">
2. name
把 content 属性关联到一个名称
1) author
标注网页的作者或制作组
<meta name="author" content="天边的拾荒者,jyhuang.vip@foxmail.com">
2) description
description用来告诉搜索引擎你的网站主要内容
<meta name="description" content="你网页的简述">
3) keywords
为搜索引擎提供的关键字列表,关键字以[',']分割
<meta name="keywords" content="关键词1,关键词2,关键词3,关键词4,……">
4) generator
编辑器的说明
<meta name="generator" content="PCDATA|FrontPage|">
5) robots
robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引
<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">
6) revised
定义页面的最新版本
<meta name="revised" content="Frank, 2016/3/1" />
7) viewport
用于移动设备控制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
字段解释
width:设置展示区域宽度,为一个正数或"width-device"
initial-scale:设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数
user-scalable:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
3. scheme
定义 content 属性值的格式
<meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" >
4.content
定义与 http-equiv 或 name 属性相关的元信息