相信在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. 如何自行处理写好的eclipse插件安装不生效

    本帖最后由 anrainie 于 2013-7-23 11:31 编辑 对于eclipse插件开发的新手,经常会遇到插件写好了,拷贝到plugins或dropins文件下,但是没有生效.上网各种问,也 ...

  2. Java多线程15：Queue、BlockingQueue以及利用BlockingQueue实现生产者/消费者模型

    Queue是什么 队列,是一种数据结构.除了优先级队列和LIFO队列外,队列都是以FIFO(先进先出)的方式对各个元素进行排序的.无论使用哪种排序方式,队列的头都是调用remove()或poll()移 ...

  3. 千万用户级别应用系统背后的SOA组件化容器

    背景 在<我们的应用系统是如何支撑千万级别用户的>随笔中已经从“宏观”角度去介绍了整个应用系统的布局.组件化是整个系统由头到尾都始终坚持的一个设计原则,其中“SOA组件化容器”也是我们应用 ...

  4. Javascript：是你的高阶函数

    在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用.但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回.所谓高阶函数就是可 ...

  5. 作业三：代码规范、代码复审、PSP

    一.代码规范 我认为我们编写的代码都需要进行规范的操作,因为如果为了图省事情或者为了减少时间去完成这个编程.在最后检验的时候就会出现一些警告,导致你这次编程的代码出现问题,当出现问题的时候你在回头去检 ...

  6. Mysql日常开发注意要点

    1.MySQL存储引擎介绍 MyISAM:低版本MySQL默认的MySQL插件式存储引擎,存储文件易损坏,不支持事务.InnoDB:目前默认的MySQL存储引擎,用于事务处理应用程序,具有众多特性,包 ...

  7. fir.im Weekly - 进击的 Swift

    最近 Swift 开源了,众开发者们欢呼雀跃.感谢开源,这是最好的时代.本期 fir.im Weekly 准备了一些关于 Swift 的"新鲜"干货分享,也包括一些优秀的 GitH ...

  8. 【JMS】JMS之ActiveMQ的使用

    这篇文章主要是简单介绍一下JMS和ActiveMQ,以及使用ActiveMQ来写两个demo. 1. JMS是啥 百度百科的解释: JMS即Java消息服务(Java Message Service) ...

  9. 每天一个linux命令（15）：tail 命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  10. viewpage listview gridview加载本地大图多图OOM处理办法

    很少上博客园写东西了. 最近在写公司项目,由于需要加载本地相册通过viewpager方式来加载, 最后发现直接进入界面就OOM了. 经过几天的整理最终搞定. 现在将加载本地和加载网络图片的缓存工具类贴 ...