本文深入解析HTML中的Meta标签，探讨其在网页元信息、搜索引擎优化、移动端适配及跨浏览器兼容性中的关键作用。
meta标签是HTML网页源代码中的一个重要的html标签。META便签用来描述一个HTML网页文档的属性，例如作者、日期和时间、关键词、页面刷新。除此之外，meta标签用于搜索引擎优化。它位于HTML文档中head元素内，虽然它提供的信息用户不可见，但它却是文档最基本的元信息。
meta标签中的属性介绍
-
必选属性：content属性。该属性是为了定义与http-equiv或者name属性相关的元信息，其中的内容是为了便于搜索机器人查找信息和分类使用的。
-
可选属性：
name属性。该属性主要用于描述网页。name属性的值可以有：author、description、keywords、generator、viewport等等http-equiv属性。该属性相当于http的头文件作用，可以向浏览器返回一些有用的信息，以帮助正确和精确的显示内容。http-equiv属性的值可以有content-type、expires、refresh等等。
name属性
-
keywords（关键字：告诉浏览器你的网页的关键字是什么）
-
description（描述：告诉浏览器你的网页的主要内容是什么）
设置这两个值可以帮助你的主页被各大搜索引擎登陆，提高网站的访问量。搜索引擎会首先排除机器人自动检索页面中的keywords和description，并将其加入自己的数据库，然后根据关键词的密度将网站排序
使用方法如下<meta name="keywords" content="111,网页223,3333"> <meta name="description" content="HTML123313121231">注意：keywords的content内容要限制在36个字。
description的content内容要限制在76个字。
name一定要和content属性配合使用。
-
robot（机器人向导：用于告诉机器人哪些页面需要索引，哪些页面不需要）
该属性的值有all、none、index、noindex、follow和nofollow。默认为all。
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
-
Author (作者)
说明：标注网页的作者或制作组
用法：<Meta name="Author" Content="zzzhhhyyy">
注意：Content可以是：你或你的制作组的名字,或Email -
Copyright (版权)
说明：标注版权
用法：<Meta name="Copyright" Content="本页版权归....所有"> -
Generator (编辑器)
说明：编辑器的说明
用法：<Meta name="Generator" Content="PCDATA|FrontPage|">
注意：Content=“你所用编辑器” -
revisit-after (搜索引擎爬虫重访时间)
说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
用法：<META name="revisit-after" Content="7 days" > -
renderer(双核浏览器渲染方式)
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。
用法：
<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
下面为专门为移动端使用的属性
-
viewport(移动端的窗口)
使用该meta标签时，在content中写属性，用逗号隔开
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
其中属性介绍： width 设置layout viewport 的宽度，为一个正整数，使用字符串”device-width”表示设备宽度initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、
device-dpi 这几个字符串中的一个最后一个属性为安卓特有，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。
-
format-detection
我们可以通过这个属性禁止自动识别电话和邮箱。举例如下：
<meta name="format-detection" content="telephone=no,email=no"/>这样，是设备浏览网页时对数字不启用电话功能（注意不同设备的解释可能不同），忽略将页面中的数字识别为电话号码。对邮箱同样如此。
-
apple-mobile-web-app-capable（网站开启对web app程序的支持）
<meta name="app-mobile-web-app-capable" content="yes"/>说明：
1.网站开启对web app的支持2.该meta可以看出内容为”苹果设备web应用程序xx“，就是说该meta是专门定义web应用的。
-
.apple-mobile-web-app-status-bar-style（改变顶部状态条的颜色）
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>说明：
1.在web app应用下状态条的颜色为黑色；2.默认值为default(白色)，可以定义为black（黑色）和black-translucent(灰色半透明)；
http-equiv属性
-
content-type(文档内容类型：用于设定文档的类型和字符集)
这是meta便签中最为常见的一中设置，在制作网页时，我们在纯HTML代码可看到它是定义你的网页的语言，当浏览器访问到你的网页时，浏览器便会根据此来识别并进行相应的设定，否则，浏览器就会使用默认的设定方法。
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8 -
expires(期限：可以用于设定网页的到期期限)
一旦网页过期，那么就必须在服务器上重新刷新而不能通过缓存获取网页。值得注意的是：其中设置的时间必须是GMT格式。或直接设为0(数字表示多少时间后过期)
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">如果你在浏览器中设置浏览器网页先从本地缓存中的页面获取，那么当浏览时，就会只从本地缓存获取，直到meta中设置的时间到期，浏览器才会获取新页面。
-
pragma（cashe模式：即是否从缓存中访问网页内容）
<meta http-equiv="pragma" content="no-cache">这行代码表示不从缓存获取页面，于是访问者将无法脱机工作。
-
refresh(刷新：等待一定时间自动刷新或跳转到其他url)
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/> -
X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面 -
cache-control(指定请求和响应遵循的缓存机制)
用法1. 说明：指导浏览器如何缓存某个响应以及缓存多长时间。<meta http-equiv="cache-control" content="no-cache">共有以下几种用法：
no-cache:
先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store:
不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public :
缓存所有响应，但并非必须。因为max-age也可以做到相同效果
private :
只为单个用户缓存，因此不允许任何中继进行缓存。
maxage :
表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。用法2.(禁止百度自动转码)
说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。
举例：<meta http-equiv="Cache-Control" content="no-siteapp" /> -
Set-Cookie(cookie设定) 说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式 <meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/"> -
Window-target(显示窗口的设定) 说明：强制页面在当前窗口以独立页面显示。 用法：
＜meta http-equiv="Window-target" content="_top"＞注意：用来防止别人在框架里调用自己的页面。Content选项：_blank、_top、_self、_parent
-
Pics-label(网页等级评定) 用法：
<meta http-equiv="Pics-label" contect="">Contect=“(PICS1.1′http://www.rsac.org/ratingsv01.html’ I gen comment ‘RSACi North America Sever’ by ‘inet@microsoft.com’ for
‘http://www.microsoft.com’ on ‘1997.06.30T14:21－0500′ r(n0 s0 v0
l0))">
说明：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。
用户可以设置Microsoft Internet Explorer（IE3.0以上）来排除包含有色情和暴力内容的站点。
上面这个例子中的HTML取自Microsoft的主页。代码中的（n 0 s 0 v 0 l 0）表示该站点不包含不健康内容。
级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www.rsac.org/。 -
Content-Script-Type (脚本相关)
说明：这是近来W3C的规范，指明页面中脚本的类型。
用法：
<meta http-equiv="Content-Script-Type" Content="text/javascript" /> -
Page_Enter、Page_Exit 设定进入页面时的特殊效果
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion= 12)">设定离开页面时的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)">Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表： 0 盒状收缩 1 盒状放射 2 圆形收缩 3 圆形放射 4 由下往上 5 由上往下 6 从左至右 7 从右至左 8 垂直百叶窗 9 水平百叶窗 10 水平格状百叶窗 11垂直格状百叶窗 12 随意溶解 13从左右两端向中间展开 14从中间向左右两端展开 15从上下两端向中间展开 16从中间向上下两端展开 17 从右上角向左下角展开 18 从右下角向左上角展开 19 从左上角向右下角展开 20 从左下角向右上角展开 21 水平线状展开 22 垂直线状展开 23 随机产生一种过渡方式
扫一扫
2041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
