meta标签详解【黑马web前端】

更新时间:2019年07月26日 10时54分13秒来源:黑马程序员论坛

随着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

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

meta标签详解【黑马web前端】

相关阅读