相信在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. 71.Ext.form.ComboBox 完整属性

    转自:https://blog.csdn.net/taotaoqi/article/details/7409514 Ext.form.ComboBox 类全称: Ext.form.ComboBox 继 ...

  2. 在 CentOS 7上安装并配置 Python 3.6 环境

    前言 按照此方法安装保证以下报错什么的统统都没有! 基础环境 系统:centos7.4 软件:python3 Retrying (Retry(total=0, connect=None, read=N ...

  3. Redis学习和应用记录(1)--介绍和安装

    Redis是一个开源的分布式缓存框架,它也常被理解为数据结构服务器,因为它包含丰富的数据类型,如strings, hashes, lists, sets, sorted sets, bitmaps a ...

  4. E20170628-hm

    forgery   n. 伪造; 伪造罪; 伪造物; 伪造签字; distribute   vt. 分配,散布; 散发,分发; 把…分类; [电] 配电; contribute to(contribu ...

  5. 解决UTF-8方法归纳

    1:通过spring配置过滤器解决 <!-- 配置Spring提供的字符编码过滤器 --> <filter> <filter-name>SpringCharacte ...

  6. Speed Limit

    http://poj.org/problem?id=2017 #include<stdio.h> int main() { int n,mile,hour; ) { ,h = ; whil ...

  7. BZOJ 4867 分块+神tm卡常

    思路: 注意到len<=10 按照权值max-min<=sqrt(n)*len 分块 记一下前缀和  每修改sqrt(n)次以后重新分块   修改的时候整块打标记  两边重构 (这题常数卡 ...

  8. 【BZOJ3527】[ZJOI2014] 力（FFT）

    题目: BZOJ3527 分析: FFT应用第一题-- 首先很明显能把\(F_j\)约掉,变成: \[E_j=\sum _{i<j} \frac{q_i}{(i-j)^2}-\sum_{i> ...

  9. ACM_夏天到了,又到了出游的季节

    夏天到了,又到了出游的季节 Time Limit: 2000/1000ms (Java/Others) Problem Description: QWER最近无心打代码,于是带着n套衣服出去浪.但是每 ...

  10. 什么是mycat？

    Mycat关键特性 关键特性 支持SQL92标准 支持MySQL.Oracle.DB2.SQL Server.PostgreSQL等DB的常见SQL语法 遵守Mysql原生协议,跨语言,跨平台,跨数据 ...