相信在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和移动设备使用一个页面，也就是适应所有设备的页面==，虽然有些前端框架是支持这个的，感觉还没有分开设计方便省力

Html学习总结（2）——Html页面head标签元素的意义和应用场景的更多相关文章

  1. Html页面head标签元素的意义和应用场景

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

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

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

  3. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  4. 【swift学习笔记】二.页面转跳数据回传

    上一篇我们介绍了页面转跳:[swift学习笔记]一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据加上了"回传"两个字 ...

  5. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  6. Asp.Net正则获取页面a标签里的内容

    Asp.Net正则获取页面a标签里的内容 string url = "http://www.114369.com"; string html = MyCLib.NetClass.S ...

  7. javaweb学习总结(二十八)——JSTL标签库之核心标签

    一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...

  8. javaWeb学习总结（9）- JSTL标签库之核心标签

    一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...

  9. Springboot学习05-自定义错误页面完整分析

    Springboot学习06-自定义错误页面完整分析 前言 接着上一篇博客,继续分析Springboot错误页面问题 正文 1-自定义浏览器错误页面(只要将自己的错误页面放在指定的路径下即可) 1-1 ...

随机推荐

  1. 机器视觉: LBP-TOP

    之前介绍过机器视觉中常用到的一种特征:LBP http://blog.csdn.net/matrix_space/article/details/50481641 LBP可以有效地处理光照变化,在纹理 ...

  2. bzoj 5127 数据校验

    题目大意: 一个数列a 对于 a 的一个区间 [l, r],若对于该区间 [l, r] 内的任意一个非空连续子区间,该子区间内出现过的数值在整数上值域连续,则称 [l, r]为合法区间 m次询问  每 ...

  3. linux修改yum源

    在自己安装的CentOS6.5中使用yum安装软件,总是提示404错误信息,百度后发现原来要设置yum源. 在安装完CentOS后一般需要修改yum源,才能够在安装更新rpm包时获得比较理想的速度.国 ...

  4. codevs1154能量项链（环形dp，区间dp）

    1154 能量项链 2006年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold     题目描述 Description 在Mars星球上 ...

  5. 手机不ROOT使用xposed框架-微信群同步-微咖讲师-安装教程

    其实已经很多人知道Xposed框架这个便捷的工具,但是呢由于框架必须root,导致很多用户望而却步,今天就来教下大家,如何不root玩转xposed框架 1.下载 SandVxposed免root 虚 ...

  6. Testng1

    Testng 简介: Testng是一套开源测试框架,是从Junit继承而来,testng意为test next generation,主要有以下特性: annotations  注释,如 @test ...

  7. Aspose Cells dll 实现数据简单下载

    Workbook workbook = new Workbook(); //工作簿                     Worksheet sheet = workbook.Worksheets[ ...

  8. Django总结三

    回顾: - 装饰器 模板 - def wrapper(func): def inner(*args, **args): 执行被执行函数之前的操作 res = func(*args, **args) 执 ...

  9. HDU4340 Capturing a country DP

    自己原来写的两个维度的DP有错,看了半天这个大牛的blog.http://blog.csdn.net/cyberzhg/article/details/7840922 题意:A军队和B军队要一起占领一 ...

  10. 最近几道hihocode不会做的题目

    几个易错点 1.数据范围一定要开大,一般多开10个或者5个. 2. 从经常写 int a[n], 然后访问a[n], 这显然会下标越界. 3. 浮点数,无法精确的比较,等于,大于,小于, 都需要使用e ...