常用meta标签的作用以及全面整理
1、定义
标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
2、作用
meta里的数据是供机器解读的,告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容,例如我们为页面中添加如下meta标签:
浏览器的头部就会包括这些:
charset:iso-8859-1
expires:31 Dec 2008
只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。
3、meta的必需属性和可选属性
meta的必需属性是content,当然并不是说meta标签里一定要有content,而是当有http-equiv或name属性的时候,一定要有content属性对其进行说明。例如:
必需属性
这里面content里的属性就是对keywords进行的说明,所以呢也可以理解成一个键值对吧,就是{keywords:HTML,ASP,PHP,SQL}。
可选属性
在W3school中,对于meta的可选属性说到了三个,分别是http-equiv、name和scheme。考虑到scheme不是很常用,所以就只说下前两个属性吧。
http-equiv
http-equiv属性是添加http头部内容,对一些自定义的,或者需要额外添加的http头部内容,需要发送到浏览器中,我们就可以是使用这个属性。在上面的meta作用中也有简单的说明,那么现在再举个例子。例如我们不想使用js来重定向,用http头部内容控制,那么就可以这样控制:
在页面中加入这个后,5秒钟后就会跳转到指定页面啦,效果可看W3school的例子
name
第二个可选属性是name,这个属性是供浏览器进行解析,对于一些浏览器兼容性问题,name属性是最常用的,当然有个前提就是浏览器能够解析你写进去的name属性才可以,不然就是没有意义的。还是举个例子吧:
这个meta标签的意思就是告诉浏览器,用webkit内核进行解析,当然前提是浏览器有webkit内核才可以,不然就是没有意义的啦。当然看到这个你可能会有疑问,这个renderer是从哪里冒出来的,我要怎么知道呢?这个就是在对应的浏览器的开发文档里就会有表明的,例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档
常用meta标签大总结
接下来就是常用的meta标签大总结啦,我会尽可能的做到全
charset
charset是声明文档使用的字符编码,解决乱码问题主要用的就是它,值得一提的是,这个charset一定要写第一行,不然就可能会产生乱码了。
charset有两种写法
两个都是等效的。
百度禁止转码
百度会自动对网页进行转码,这个标签是禁止百度的自动转码
SEO 优化部分
your title
viewport
viewport主要是影响移动端页面布局的,例如:
content 参数:
- width viewport 宽度(数值/device-width)
- height viewport 高度(数值/device-height)
- initial-scale 初始缩放比例
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
- user-scalable 是否允许用户缩放(yes/no)
各浏览器平台
Microsoft Internet Explorer
Google Chrome
360浏览器
QQ手机浏览器
Apple iOS
Google Android
App Links
最后——移动端常用的meta