相信在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="/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="/favicon.ico" />

　　<link rel="alternate" type="application/rss+xml" title="RSS" href="/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="/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="/favicon.ico" />：网页ico图标设置；

　　<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />:rss订阅；

　　......

　　看一下内容还是不少的，而且很多是为移动端设定的，pc端相对简洁了很多，果然多设备多浏览器的维护成本就是高啊，所以在许多讨论场景中我一直反对pc和移动设备使用一个页面，也就是适应所有设备的页面==，虽然有些前端框架是支持这个的，感觉还没有分开设计方便省力；ok今天先写到这里吧，查漏补缺，有新的发现继续更；

　　原文地址：Html页面head标签元素的意义和应用场景，薛陈磊 | Share the world

Html页面head标签元素的意义和应用场景的更多相关文章

  1. Html学习总结（2）——Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  2. 详解HTML<head> 头标签元素的意义以及使用场景

    HTML<head>头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,he ...

  3. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  4. Day2 HTML基本标签元素

    Day2   HTML基本标签元素 HTML:  超文本标记语言(HyperText   Mark-up  Language ) 1.作用:写网页结构  2.HTML不区分大小写,建议小写   3.文 ...

  5. HTML5系列二（标签元素、FileReader、拖放）

    nav元素的使用场合 页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...

  6. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  7. Html常用标签元素

    Html常用标签元素 Html常用标签元素 常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档 <head></head> ...

  8. selenium定位方式-获取标签元素：find_element_by_xxx

    定位方式取舍# 唯一定位方式.多属性定位.层级+角标定位(离目标元素越近,相对定位越好) # 推荐用css selector(很少用递进层次的定位)# 什么时候用xpath呢? 当你定位元素时,必须要 ...

  9. python3 操作页面上各种元素的方法

    (1)       控制浏览器 ①控制浏览器窗口大小set_window_size(宽,高) 打开浏览器全屏maximize_window() ②控制浏览器后退back().前进forward() ③ ...

随机推荐

  1. ASP.NET 5 入门 (3) – Logging

    ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 使用自定义配置文件 ASP.NET 5 入门 (3) – Logging 前几天就关注到汤姆大叔的相关文档: 解读ASP.NET 5 ...

  2. [WPF实用技巧]如何使WPF的TreeView节点之间有连线

    示例代码:TreeViewEx.zip 原文地址:http://www.codeproject.com/Tips/673071/WPF-TreeView-with-WinForms-Style-Fom ...

  3. Async Console Programs 异步控制台程序

    如果你正在写一个控制台程序,你可能最终想要一个异步的main方法,像这样: class Program { static async void Main(string[] args) { ... } ...

  4. 设计模式之美：Template Method（模板方法）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Template Method 模式结构样式代码. 意图 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. Templat ...

  5. C#Light(包括unity一切C#环境可用嵌入式脚本)0.10B稳定版发布，功能已定型

    yo,如题,这个呕心沥血的脚本语言终于完成了. 后面我会: 1.逐渐做一些例子.说明 2.逐渐测试我能获取到的dotnet环境,保证在所有的平台都能正常执行 3.积极推广 0.10B版本较之前的区别主 ...

  6. CSS3 动画一瞥

    伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒 ...

  7. ssh/openssh

    http://www.cnblogs.com/wwufengg/articles/ssh-openssh-detail.html http://www.cnblogs.com/jjkv3/archiv ...

  8. fir.im weekly - 「 持续集成 」实践教程合集

    我们常看到许多团队和开发者分享他们的持续集成实践经验,本期 fir.im Weekly 收集了 iOS,Android,PHP ,NodeJS 等项目搭建持续集成的实践,以及一些国内外公司的内部持续集 ...

  9. 关于C#中的线程重启的问题

    首先不管是C#也好,还是java也好,对于已经Abort的线程是无法再次Start的,除非是声明私有变量new一个新的线程,网上也有很多人说可以Suspend挂起线程,然后再Resume继续,但是相信 ...

  10. salesforce 零基础开发入门学习（七）PickList的value值获取

    之前介绍过PickList类型的声明以及赋值,但是如何取出呢?一个sObject对象可以理解为一条数据.通过sObject直接取恐怕很难做到,因为他只会显示一个值.这时候就要用到Schema命名空间中 ...