CSS入门2-认识html之meta标签详解

作者: love丁酥酥 | 来源:发表于2017-11-22 18:49 被阅读78次

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）

上篇我们主要认识了头部内容的标签，但是还留了一个小尾巴，那就是meta标签。在文章中我给出了一篇文章Http meta详解供大家学习参考，该篇作者所述的内容已经非常详尽了，但是我们还是要用自己的方式去理解一遍。

1. 简介

理解一样东西，首先在于理解其存在的意义，或者说这个东西的出现是为了解决什么问题。那么meta到底为我们的网页带来了什么作用呢？大家试想一下，我们写了一个网页丢在网上，是希望别人来访问的。我们把写好的代码放在服务器，需要通过浏览器的处理变成网页。而网络上的网页多如繁星，需要吸引用户搜索，点击这个链接，然后才能最终呈现在用户面前。这里有两个关键点：

浏览器会如何显示网页的内容
用户为何会点击你的网页

meta的出现就是为了解决这两个问题。那么，它是如何解决这两个问题呢？

2. http-equiv

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是：

<meta http-equiv="参数" content="参数变量值"> ；

当浏览器等设备接收服务器端传送的文件时，首先会接收文件的相关名称/值对，通常为多个。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

其中http-equiv属性主要有以下几种参数：

2.1 content-Type(定义mime类型，显示字符集)

作用 content-type用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据，此属性的值可以查看MIME类型。但是其最重要的MIME类型是text/html，并用来设置字符集。

用法：

<meta http-equiv="content-type" content="text/html;charset=XXX">

示例：

<meta http-equiv="content-type" content="text/html;charset=utf-8">

设置字符集时，可以简写：

<meta charset="utf-8">

XXX取值：

gb2312（或gbk）时，代表说明网站是采用的编码是简体中文
big5时，代表说明网站是采用的编码是繁体中文
iso-2022-jp时，代表说明网站是采用的编码是日文
ks_c_5601时，代表说明网站是采用的编码是韩文
iso-8859-1时，代表说明网站是采用的编码是英文
utf-8时，代表世界通用的语言编码（最常用）

2.2content-language(显示语言设置)

作用：设定页面的语言以及国家代码（HTML文档的语言可通过在html标签的lang属性、xml:lang属性或meta标签的content-language中声明。明确网页使用的语言，有助于浏览器与搜索引擎进行相应的解析与索引。
）
用法：

<meta http-equiv="content-language" content="primarycode-subcode">

示例：

<meta http-equiv="content-language" content="zh-cn">

例如：language-code为"en"时，代表English英文，而language-code为"en-US"时，代表the U.S. version of English美国版本的英文。

primary-code为语言代码设置，subcode为国家代码

primarycode常用取值：

zh (Chinese)中国
fr (French)法国
de (German)德国
it (Italian)意大利
nl (Dutch)荷兰
el (Greek)希腊
es (Spanish)西班牙
pt (Portuguese)葡萄牙
ar (Arabic)阿拉伯
ru (Russian)俄罗斯
ja (Japanese)日本

另外，关于charset和content-type的区别，大家可以参考这篇文章：html中charset和content-language的区别

2.3 refresh(刷新与重定向)

作用：用于刷新与重定向页面。

用法示例：
5秒之后刷新本页面：

<meta http-equiv="refresh" content="5">

5秒之后跳转到我的简书主页：

<meta http-equiv="refresh" content="5; url=http://www.jianshu.com/u/7a62ab344c39">

2.4 expires(过期时间-控制缓存)

作用：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。时间必须使用GMT格式。

用法示例：

<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" >

2.5 pragma(cache模式)

作用：禁止浏览器从本地计算机读取缓存
用法：

<meta http-equiv="pragma" content="no-cache">

注意：这样设定，访问者将无法脱机浏览。

2.6 cache-control(缓存设定)

作用：HTTP1.1中启用Cache-Control 来控制页面的缓存与否

用法：

<meta http-equiv="cache-control" content="XXX">

XXX取值如下;

max-age=[秒] — 执行缓存被认为是最新的最长时间。类似于过期时间，这个参数是基于请求时间的相对时间间隔，而不是绝对过期时间，[秒]是一个数字，单位是秒：从请求时间开始到过期时间之间的秒数。
s-maxage=[秒] — 类似于max-age属性，除了他应用于共享（如：代理服务器）缓存。
public — 标记认证内容也可以被缓存，一般来说：经过HTTP认证才能访问的内容，输出是自动不可以缓存的。
no-cache — 强制每次请求直接发送给源服务器，而不经过本地缓存版本的校验。这对于需要确认认证应用很有用（可以和public结合使用），或者严格要求使用最新数据的应用（不惜牺牲使用缓存的所有好处）。
no-store — 强制缓存在任何情况下都不要保留任何副本。
must-revalidate — 告诉缓存必须遵循所有你给予副本的新鲜度，HTTP允许缓存在某些特定情况下返回过期数据，指定了这个属性，你可以高速缓存，表明你希望严格的遵循你的规则。
proxy-revalidate — 和 must-revalidate类似，除了他只对缓存代理服务器起作用。

(ps:可以看到expires,pragma和cache-control都对缓存起作用，那么他们有什么区别，不同的参数在不同的浏览器表现形式如何呢。这一块我们今后会在HTTP系列具体说明。)

2.7 set-cookie(cookie设定)

作用：如果网页过期，那么存盘的cookie将被删除。

用法：

<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">

注意：必须使用GMT的时间格式。

2.8 window-target(显示窗口的设定)

作用：强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。

用法：

<meta http-equiv="Window-target" content="_top">

2.9 X-UA-Compatible(IE8专用标记-兼容)

作用：IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题。
用法示例：

<meta http-equiv="X-UA-Compatible" content="IE=7">

以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8">

以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。

PS：谷歌添加一个插件：Google Chrome Frame（谷歌内嵌浏览器框架GCF），这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

3. name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是：

<meta name="参数" content="具体的参数值">；

name主要有以下几种参数：

3.1 author(定义网页作者)

作用：定义网页作者

用法示例：

<meta name="author" content="yourName">

网页作者是yourName

3.2 keywords(定义关键词)

作用：定义页面关键词，用于被搜索引擎收录。

用法示例：

<meta name ="keywords" content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

3.3 descption(网页描述)

作用：用来告诉搜索引擎你的网站主要内容。

用法示例：

<meta name="description" content="This page is about the meaning of science,education,culture.">

网站内容描述（description）的设计要点：

①网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）；

②尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息；

③网页描述中含有有效关键词；

④网页描述内容与网页标题内容有高度相关性；

⑤网页描述内容与网页主体内容有高度相关性；

⑥网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数（通常在100中文字之内，不同搜索引擎略有差异）。

3.4 robots(搜索引擎索引方式)

作用：用于定义网页搜索引擎索引方式。告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

用法：

<meta name="robots" content="XXX">

XXX取值说明（默认是all）：

none
搜索引擎将忽略此网页，等价于noindex，nofollow。
noindex
搜索引擎不索引此网页。
nofollow
搜索引擎不继续通过此网页的链接索引搜索其它的网页。
all
搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
index
搜索引擎索引此网页。
follow
搜索引擎继续通过此网页的链接索引搜索其它的网页。
noarchive
禁止搜索引擎建立网页快照。

特殊用法示例：

针对谷歌GOOGLEBOT使用robots
可以将name的属性只定义为GOOGLEBOT标识为谷歌搜索引擎。

<meta name="googlebot" content="noindex, nofollow" />

针对百度baiduspider使用robots
可以将name的属性只定义为baiduspider标识为百度搜索引擎。

<meta name="baiduspider" content="noarchive" />

3.5 copyright(网页版权)

作用：定义网页的版权

用法示例：

<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />

3.6 data(定义网页生成时间)

作用：定义网页生成时间

用法示例：

<meta name="data" content="2017-11-22T13:47:30+00:00">

3.7 revisied(定义网页文档修改时间)

作用：定义网页文档修改时间

用法示例：

<meta name="revised" content="css入门修炼, 11/23/2017"/>

3.8 renderer(渲染方式)

作用：指定双核浏览器默认以何种方式渲染页面。

用法示例：

<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式

PS：360浏览器支持

3.9 generator(网页制作软件)

用法示例：

<meta name="generator" content="Microsoft"/>

3.10 viewport(用户网页的可视区域)

作用：设置用户网页的可视区域
(ps：viewport展开来讲又是一个很大的话题，首先需要我们对像素，分辨率等内容有所了解。这一块我会专门放在单位和响应式布局的章节中来讲解。现在我们先简单看一下，content的可选项)

width：viewport 的宽度
height：viewport的高度（很少使用）
initial-scale：设置页面的初始缩放值
minimum-scale：允许用户的最小缩放值
maximum-scale：允许用户的最大缩放值
user-scalable：是否允许用户进行缩放
target-densitydpi（android才生效）：设备的密度等级

常用移动端设置方法如下：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一般主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更高细腻。

参考

W3school-HTML <meta> 标签
 百度百科-meta
Http meta详解
 html中charset和content-language的区别
 HTML meta content-language 定义页面语言
 语言名称代码表
 国家名称代码表
 梦之都-HTML meta 标签
 页面的缓存设置与meta的作用详细解释
 Http头介绍:Expires,Cache-Control,Last-Modified,ETag
百度百科-Cache-control
响应式 Web 设计 - Viewport
说说移动前端中 viewport (视口)
HTML meta viewport属性说明(mark)
viewport就是这回事

CSS入门2-认识html之meta标签详解

1. 简介

2. http-equiv

2.1 content-Type(定义mime类型，显示字符集)

2.2content-language(显示语言设置)

2.3 refresh(刷新与重定向)

2.4 expires(过期时间-控制缓存)

2.5 pragma(cache模式)

2.6 cache-control(缓存设定)

2.7 set-cookie(cookie设定)

2.8 window-target(显示窗口的设定)

2.9 X-UA-Compatible(IE8专用标记-兼容)

3. name

3.1 author(定义网页作者)

3.2 keywords(定义关键词)

3.3 descption(网页描述)

3.4 robots(搜索引擎索引方式)

3.5 copyright(网页版权)

3.6 data(定义网页生成时间)

3.7 revisied(定义网页文档修改时间)

3.8 renderer(渲染方式)

3.9 generator(网页制作软件)

3.10 viewport(用户网页的可视区域)

参考

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读