黑马程序员技术交流社区

标题: 【上海校区】meta标签详解 [打印本页]

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

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

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

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

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

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

[HTML] 纯文本查看 复制代码

<meta charset="utf-8">

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

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

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

[HTML] 纯文本查看 复制代码

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

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

[HTML] 纯文本查看 复制代码

<!-- 禁止自动探测并格式化手机号码和邮箱 -->

<meta name="format-detection" content="telephone=no, email=no">

<!-- 设置状态栏的背景颜色，只有在apple-mobile-web-app-capable为yes时生效 -->

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 移动端必备 viewport-fit=cover属性针对iPhoneX -->

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

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

[HTML] 纯文本查看 复制代码

<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标签，可以一定程度上方便开发。欢迎你留言补充。转自http://www.xiaoxiaohan.com/html/73.html

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2