0.注意
如果本文中某些图片未能正确加载,请移步下面的连接查看。
1.前言
昨天晚上刷朋友圈,发现有同时分享了这么一篇文章。
这篇文章中将我们 Meta 标签 常用的几种用法分别说明,但是发现关于 Meta 标签的说明有些不完善,所以自己决定从新去书写一篇文章,专门来讲解一下我们的 Meta 标签。
好了,陈述完毕,开始正文。
本文主要分为四个模块,请读者自行选择查看。
- Meta 标签是什么?
- 网页当中的 Meta 标签用法
- 网页当中的 Meta 标签 用于 SEO
- 移动端设置中使用 Meta 标签
2. Meta 标签是什么?
Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。
Meta : 即 元数据(Metadata)是数据的数据信息。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
用我们的大白话来说,它本身是一个没什么用的标签,但是一旦在它内部通过其他属性设置了某些效果,它就起作用了,所以我们称之为“ 元数据 ”。
它内部可填写的属性如下:
属性 | 值 | 描述 |
---|---|---|
charset (HTML5) | 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 属性值的格式。 |
那我们现在知道了 Meta 标签是什么东西,那么我们接下来就一起来看看,Meta 标签的用法。
3. 网页当中的 Meta 标签用法
3.1 申明文档使用的字符编码
meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。
它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。
当然,你也可以使用gb2312(简体中文),big5(繁体中文)等等其他字符集。
一般来说,我们使用的时候存在两种用法。
第一种:
<meta charset='utf-8'>
第二种:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
而目前我们一般推荐使用第一种写法,也是HTML5使用的写法。
3.2 优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
当指定的content值为IE=edge,chrome=1时,优先使用 IE 最新版本和 Chrome。
假定客户端安装了Google Chrome Frame,则在IE中使用chrome的渲染引擎来渲染页面,否则,将会使用客户端IE最高的标准模式对页面进行渲染。
还有以下几种设置方式:
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->