meta元素在HTML中占据了着很重要的位置,其作用是不可替代的。
一、meta元素是什么:
meta元素是html中的一个头部标签,通常用于描述网页的一些基本信息。
二、meta元素都有哪些属性:
meta元素包含四大属性: charset、 content 、http-equiv、name;
1.charset
charset属性声明了页面的字符编码,如果某个元素使用lang属性,他将被局部的覆盖。charset属性替换了
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8">,目前仍然允许使用 http-equiv 属性来规定字符集,但是使用 新方法可以减少代码量。
charset常用的值:
- UTF-8 - Unicode 字符编码
- ISO-8859-1 - 拉丁字母表的字符编码
在理论上,可以使用任何字符编码,但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广,浏览器就越有可能理解它。
注意:
1.这个属性的设定必须匹配页面,不能用错误的值。
2.HTTP-equiv的content-type和一些别的浏览器元素会优先该属性。
3.我们最好为每个页面都定义一个charset,这样能很好的提高我们网站的安全性。如果不设置该属性,一些置换脚本可能会影响到网页。
2.content
content属性通常配合name或http-equiv使用,能够给这两个属性提供一个值。
3.http-equiv
http-equiv可用用做 HTTP头部的某些作用,通过定义该属性可以改变服务器和用户代理的行为。
常用的值:
①refresh:设定网页定时刷新或者跳转
页面每5秒刷新一次
<meta http-equiv="refresh" content="5"/>
页面5秒后跳转到百度首页
<meta http-equiv="refresh" content="5;url='http://www.baidu.com'"/>
②default-style:指定页面优先使用的样式表,content属性的值必须匹配同一文档中的一个link元素上的title属性的值,或者必须匹配同一文档中的一个style元素上的title属性的值。
<meta http-equiv="default-style" content="the document's preferred stylesheet">
③content-type:目前别charset属性取代了。
4.name
name属性用于定义页面的元数据。他不能与http-equiv、charset共存。通常是content配合使用。
常用的值:
①application-name:定义网站应用的名字。
②author:定义作者的名字。
③description:包含该网页的一个简单的、精准的描述。
④keywords:定义网站的关键字,主要用于百度的SEO,谷歌的排名不依靠该属性。
⑤viewport:主要用于移动端的设置,规定初始的窗口属性,
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
content 参数解释:
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
⑥robots
robots.txt是放在网站中,文件级的网络蜘蛛授权;而robots Meta标签是放在网页中,一般用于部分网页需要单独设置的情况下。两者的功能是一样的。
Meta robots标签必须放在<head>和</head>之间,格式:
<meta name="robots" content="index,follow" />
content中的值决定允许抓取的类型,必须同时包含两个值:是否允许索引(index)和是否跟踪链接(follow,也可以理解为是否允许沿着网页中的超级链接继续抓取)。共有4个参数可选,组成4个组合:
index,follow:允许抓取本页,允许跟踪链接。
index,nofollow:允许抓取本页,但禁止跟踪链接。
noindex,follow:禁止抓取本页,但允许跟踪链接。
noindex,nofllow:禁止抓取本页,同时禁止跟踪本页中的链接。
以上1和4还有另一种写法:
index,follow可以写成all,如:
<meta name="robots" content="all" />
noindex,nofollow可以写成none,如:
<meta name="robots" content="none" />
需要注意的是,robots Meta标签很多搜索引擎是不支持的,只有少数搜索引擎能够识别并按给定的值抓取。所以,尽可能的使用robots.txt文件来限制抓取。
ps:还有很多其他的用法,后续再补充。。。