相信在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. 【C语言学习】《C Primer Plus》第2章 C语言的概述

    学习总结 1.#include是C预处理命令之一,#include指向的是头文件,如#include <stdio.h>,这个stdio.h就是程序需要引用的C标准库之一.里面包含了pri ...

  2. Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制

    一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...

  3. 用于主题检测的临时日志(431b1c14-8b75-4f42-994f-cfda72208c10 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

    这是一个未删除的临时日志.请手动删除它.(3bf68152-fcac-4628-92d6-3f8f4d5e0ee4 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

  4. 实现tip浮层

    实现简单的tip浮层: html代码: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  5. Linux grep命令和正则表达式

    介绍 grep是一个功能强大的文本搜索命令,可以用它来搜索某个文件中是否包含指定的搜索内容,它可以利用正则表达式来做复杂的筛选操作,它还可以为其它命令传输给管道的筛选,比如我们常用到的分析单个进程的操 ...

  6. Nginx做前端Proxy时TIME_WAIT过多的问题

    我们的DSP系统目前基本非凌晨时段的QPS都在10W以上,我们使用Golang来处理这些HTTP请求,Web服务器的前端用Nginx来做负载均衡,通过Nginx的proxy_pass来与Golang交 ...

  7. Redis批量删除KEY的方法

    Redis 中有删除单个 Key 的指令 DEL,但好像没有批量删除 Key 的指令,不过我们可以借助 Linux 的 xargs 指令来完成这个动作. 代码如下: redis-cli keys “* ...

  8. Andrew Ng机器学习公开课笔记 -- Regularization and Model Selection

    网易公开课,第10,11课 notes,http://cs229.stanford.edu/notes/cs229-notes5.pdf   Model Selection 首先需要解决的问题是,模型 ...

  9. 合法提交Html标签 Page指令

    3.2.1 提交合法的HTML标签(1) 有时候我们需要让我们提交的文本展示出来的效果非常美观,通常会对服务器提交一些HTML标签来控制文本或内容的样式. HTML标签可能包含了很多不安全的因素,所以 ...

  10. java多线程 sleep()和wait()的区别

    接触了一些多线程的东西,还是从java入手吧. 相信看这篇文章的朋友都已经知道进程和线程的区别,也都知道了为什么要使用多线程了. 这两个方法主要来源是,sleep用于线程控制,而wait用于线程间的通 ...