meta标签详解

摘要

随着HTML5的迅速普及,越来越多的网站开始改变原先那种“古老”的写法。历史的推进,无法避免的就是“朝代更替”,正所谓一朝天子一朝臣,网页的变迁也逃不过这个法则。
对于一个网页而言,没有什么是必须的。因为浏览器不断在更新,容错性越来越好。话虽如此,但是你活在当下,还是要遵守一定规范的,要不然,浏览器也会给你“脸色”看的。
今天,笔者就来聊聊meta的那些事。

随着HTML5的迅速普及,越来越多的网站开始改变原先那种“古老”的写法。历史的推进,无法避免的就是“朝代更替”,正所谓一朝天子一朝臣,网页的变迁也逃不过这个法则。

对于一个网页而言,没有什么是必须的。因为浏览器不断在更新,容错性越来越好。话虽如此,但是你活在当下,还是要遵守一定规范的,要不然,浏览器也会给你“脸色”看的。
今天,笔者就来聊聊meta的那些事

1、meta的定义和用法。

<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。meta里的数据是供浏览器解读的,告诉浏览器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容。<meta>标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。<meta>标签永远位于head标签内部,元数据总是以名称/值的形式被成对传递的。

2、网页编码设置

charset是声明文档使用的字符编码,解决乱码问题主要用的就是它。建议将这个charset写在head标签的第一行,不然可能会产生乱码。

charset有两种写法,下面两种写法是等价的,不过更推荐使用第一种写法。

  1. <meta charset="utf-8">
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

3、禁止百度转码

不知道从什么时候起,国内最大的搜索引擎——百度开始成为万人诟病的对象。对于笔者而言,百度近些年来确实在某些方面做的有些“过分”了,比如对于移动端网页,其会强制对用户浏览的网页进行转码。这种不经过站长同意就“为所欲为”的做法让很多站长厌恶。因为转码后不仅改变了原本网站的布局,而且还过份的添加自己的广告。

对于这种“巨无霸”的蛮横行为,我们站长们只能借助其提供的标签属性来杜绝。代码如下:

  1. <meta http-equiv="Cache-Control" content="no-siteapp">

4、针对苹果手机的优化

苹果手机永远可以看作是一个另类。高科技的产品,总是拥有其“自我个性”。对于苹果,我们可以使用如下标签来消除一些“自我个性”。

  1. <!-- 禁止自动探测并格式化手机号码和邮箱 -->
  2. <meta name="format-detection" content="telephone=no, email=no">
  3. <!-- 设置状态栏的背景颜色,只有在apple-mobile-web-app-capable为yes时生效 -->
  4. <meta name="apple-mobile-web-app-capable" content="yes">
  5. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  6. <!-- 移动端必备 viewport-fit=cover属性针对iPhoneX -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

5、使用最新的引擎渲染网页

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

注:IE=edge告诉IE使用最新的引擎渲染网页,chrome=1不是说IE的技术增强了可以模拟Chrome浏览器,而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。

合理的使用meta标签,可以一定程度上方便开发。欢迎你留言补充。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: