首页 > 代码库 > Html页面head标签元素的意义和应用场景
Html页面head标签元素的意义和应用场景
相信在html5之前，很少人会关注html页面上head里标签元素的定义和应用场景，可能记得住的只有"title"、"keyword"和"description"这些meta在逐渐了解使用html新标准后，特别是移动页面的开发普及，可以看到html中这一块内容越来越重要为大家所认识，初次见到这些标签基本是摸不着头脑，今天就来梳理这些标签的定义(以html5标准展开)；
先来一个页面概括，head标签不分排序先后：
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Title</title>
<meta content="keyword" name="keywords">
<meta content="description" name="description">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon-precomposed" href="http://www.mamicode.com/apple-touch-icon.png" />
<meta name="HandheldFriendly" content="true">
<meta name="screen-orientation" content="portrait">
<meat name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/ico" href="http://www.mamicode.com/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.mamicode.com/rss.xml" />
......
</heda><bady>some content</bady></html>
最近收集有这些head标签，其实另外还有许多，要么是没想起来，要么是我也不知道具体什么含义==，不过一般网页上也就这么多，很多网站是去自定义一些内容的，如这样的：
额，这些就不去理会吧，采用合适的标签，达到预设的目的就行了，个人感觉这里还是不要放很多吧，毕竟这些设定需要浏览器去解析执行的，还是会消耗点资源的；下面就逐个展开一下；
<meta charset="UTF-8">：设定网页字符编码，常用的有utf-8和gb2312；
<title>Title</title>：页面title，不解释；
<meta content="keyword" name="keywords">：keyword关键词，以逗号区分开，不解释；
<meta content="description" name="description">：description描述不解释；
<meta name="renderer" content="webkit">：优先使用chrome内核渲染页面；
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">：优先使用最新版ie和chrome浏览器；
<meta http-equiv="Cache-Control" content="no-siteapp" />：通过手机百毒打开网页时，百毒可能会对你的网页进行转码，只展现页面内容，头底部会被替换并且一般会加点广告==尿性不改；
<meta name="author" content="author,email address">：定义页面作者，这个很少见人用貌似，当然也有很多人不认识，之前一个项目交付给老板后他看到这段不认识说我们在他们网站放木马==论多读书多识字的重要性；
<meta name="robots" content="index,follow">：定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow；
<meta name="viewport" content="width=device-width, initial-scale=1.0">：这个应用的就比较多了，为移动设备设定，viewport也可作为宽度单位，一些参数设定，width viewport 宽度(数值/device-width)，height viewport 高度(数值/device-height)，initial-scale 初始缩放比例，user-scalable 是否允许用户缩放(yes/no)，一般移动网页上都是设定设备宽度，默认不可缩放的；
<meta name="apple-mobile-web-app-capable" content="yes" />：有个apple，没错，这是苹果设备转用的，这个是是否启用 WebApp 全屏模式；苹果的设备可以说单成一家，有很多特定的设置，有兴趣的小伙伴可以到官方文档说明查看详细，来戳传送门
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />：设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效；
<meta name="format-detection" content="telephone=no,email=no" />：不自动识别页面中的 电话和邮箱，就是点击数字或邮箱样的字符不会做其他操作；
<link rel="apple-touch-icon-precomposed" href="http://www.mamicode.com/apple-touch-icon.png" />：又是大苹果，没错这个是设置ios图标的，并且可以设置多个尺寸的，苹果可以设定启动页面，有兴趣继续戳官网文档；
<meta name="HandheldFriendly" content="true">：恩，如果你单词量多一些，可以看出来这个是什么意思，友好优化手持设备，貌似是针对不认识viewport的设备(苹果都成街机了，谁闲的没事用塞班看网页？)，反正我没用过，所以可以认为没什么卵用；
<meta name="screen-orientation" content="portrait">：uc强制竖屏；
<meta name="x5-orientation" content="portrait">：QQ强制竖屏；
<meta name="full-screen" content="yes">：UC强制全屏；
<meta name="x5-fullscreen" content="true">:QQ强制全屏
<meta name="browsermode" content="application">:UC应用模式
<meta name="x5-page-mode" content="app">:QQ应用模式;
<link rel="icon" type="image/ico" href="http://www.mamicode.com/favicon.ico" />：网页ico图标设置；
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.mamicode.com/rss.xml" />:rss订阅；
......
看一下内容还是不少的，而且很多是为移动端设定的，pc端相对简洁了很多，果然多设备多浏览器的维护成本就是高啊，所以在许多讨论场景中我一直反对pc和移动设备使用一个页面，也就是适应所有设备的页面==，虽然有些前端框架是支持这个的，感觉还没有分开设计方便省力；ok今天先写到这里吧，查漏补缺，有新的发现继续更；
Html页面head标签元素的意义和应用场景