相信在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. 我的ORM之十-- MyOql实现原理

    我的ORM索引 ORM的功能 两个基本功能 翻译:对象查询转化为SQL 映射:把查询结果转化为实体 更多功能 如果仅仅实现这两个功能,那这两个是可以独立的,实现起来也就很简单了.但MyOql的目标还有 ...

  2. 在代码中设置IE9的默认文档模式

    要在旧系统中加一个jquery插件,本地demo测试没问题,部署到服务器后却报错.使用的是IE9浏览器,打开F12调试台,发现默认的文档模式是IE7,调成IE9后,报错消失.可以确认是该插件不兼容IE ...

  3. 【原创】我是怎么从零开始教女同学进行php开发的（4）

    周末给自己放了一个小假,周五晚上跟同学出去吃饭,周六又休息了一天,直到周日才坐到电脑前面码字. 本来说好周末这两天把之前三篇的代码根据评论中的建议好好修改一下的,顺便认真系统地学习一遍HTML基础.结 ...

  4. Preserving Remote IP/Host while proxying

    因为这个文章用一般手段看不到,所以摘录下来备用 (From http://kasunh.wordpress.com/2011/10/11/preserving-remote-iphost-while- ...

  5. [ZigBee] 4、ZigBee基础实验——中断

    前言 上一篇介绍了CC2530的IO的基础知识,并用LED的控制来展示如何配置并控制GPIO的输出,用KEY状态的读取实验来展示如何读取GPIO的状态.从上一节的KEY状态读取的代码看出是采用轮训方式 ...

  6. Unity3D使用经验总结 优点篇

    09年还在和其它小伙伴开发引擎的时候,Unity3D就初露头角. 当时就对这种基于组件式的设计结构很不理解. 觉得拆分过于细致,同时影响效率. 而时至今日,UNITY3D已经成为了众多团队的首选3D引 ...

  7. 用python语言讲解数据结构与算法

    写在前面的话:关于数据结构与算法讲解的书籍很多,但是用python语言去实现的不是很多,最近有幸看到一本这样的书籍,由Brad Miller and David Ranum编写的<Problem ...

  8. 用python实现的百度新歌榜、热歌榜下载器

    首先声明,本工具仅仅为学习之用,不涉及版权问题,因为百度音乐里面的歌曲本身是可以下载的,而且现在百度也提供了”百度音乐播放器”,可以通过这个工具进行批量下载. 我当时做这个工具的时候,百度还没有提供” ...

  9. 十分钟搞定CSS选择器

    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...

  10. 三天学会HTML5 之第一天

    引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念. 首先了解一些基本的术语和概念. SGML, HTML,XML三者之间的区别 Doc类 ...