相信在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. WebSocket 网页聊天室的实现（服务器端：.net + windows服务，前端：Html5）

    websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器 ...

  2. 67.员工职位变动js

    1.员工职位jsp <%@ page language="java" import="java.util.*" pageEncoding="UT ...

  3. Linux扩展正则表达式

    1. 扩展正则表达式 1.1 +(加号) + 表示前一个字符出现1次或1次以上 1.1.1 理解+ 要求:取出文件内容连续出现的小写字母 [root@oldboyedu50-lnb /oldboy]# ...

  4. Another lottery

    http://acm.hdu.edu.cn/showproblem.php?pid=2985 题意:有n个人每个人可以买m轮彩票,每轮可以买尽可能多的彩票.如果该彩票在i轮被抽到,则该人可以获得2^i ...

  5. [Swift通天遁地]五、高级扩展-(2)扩展集合类型

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. async 函数-----------------解决异步操作隧道的亮光

    之前也学过,只是没有学好,公司现在用的都是async函数 , 所以决定把它弄懂.最近看了看阮一峰的博客,做下记录. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用 ...

  7. akka设计模式系列-actor锚定

    actor锚定模式是指使用actorSelection对acor进行锚定的设计模式,也可以说是一个对actor的引用技巧.在某些情况下,我们可能需要能够根据Actor的path锚定对应的实例.简单来说 ...

  8. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  9. Spark 概念学习系列之Spark基本概念和模型（十八）

    打好基础,别小瞧它! spark的运行模式多种多样,在单机上既可以本地模式运行,也可以伪分布模式运行.而当以分布式的方式在集群中运行时.底层的资源调度可以使用Mesos或者Yarn,也可使用spark ...

  10. Xml的读取

    using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebAp ...