Html学习总结（2）——Html页面head标签元素的意义和应用场景
相信在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标签元素的意义和应用场景的更多相关文章
- Html页面head标签元素的意义和应用场景
相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...
- 详解HTML<head> 头标签元素的意义以及使用场景
HTML<head>头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,he ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- 【swift学习笔记】二.页面转跳数据回传
上一篇我们介绍了页面转跳:[swift学习笔记]一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据加上了"回传"两个字 ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- Asp.Net正则获取页面a标签里的内容
Asp.Net正则获取页面a标签里的内容 string url = "http://www.114369.com"; string html = MyCLib.NetClass.S ...
- javaweb学习总结(二十八)——JSTL标签库之核心标签
一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...
- javaWeb学习总结（9）- JSTL标签库之核心标签
一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...
- Springboot学习05-自定义错误页面完整分析
Springboot学习06-自定义错误页面完整分析 前言 接着上一篇博客,继续分析Springboot错误页面问题 正文 1-自定义浏览器错误页面(只要将自己的错误页面放在指定的路径下即可) 1-1 ...
随机推荐
- 在Struts2中ognl.MethodFailedExceptiond异常的解决办法
问题描述: 在 Struts2 里面,当页面向服务器提交参数时报ognl.MethodFailedException:和java.lang.NoSuchMethodException:异常 异常信息 ...
- E20170624-ts
stateless adj. 无国家的,无国籍的; groupware 群件 cookie n. 饼干; 小甜点; 吸引人的年轻妇女; 甜面包; session n. 开会,会议; (法庭的) 开 ...
- codevs1690 开关灯(线段树)
1690 开关灯 USACO 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description YYX家门前的街上有N(2< ...
- [Apple开发者帐户帮助]七、注册设备（3）禁用或启用设备
您可以禁用和启用设备,但不能从开发者帐户中删除它.您可以禁用不再用于开发或测试的设备.但是,这样做会使包含设备的配置文件无效,并且不会增加当年设备的总数. 所需角色:帐户持有人或管理员. 在“ 证书” ...
- [Swift通天遁地]二、表格表单-(10)快速添加日期选择/多选/动作表单/地图等自定义表单
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- JVM-垃圾回收器
目录 垃圾收集器 Serial收集器 Serial Old 收集器 ParNew 收集器 Parallel Scavenge 收集器 (并行清除) /'pærəlɛl/ /'skævɪndʒ/ Par ...
- Lambda表达式怎么写SQL中的in？
ambda表达式查询没有IN这个方法,可以变通一下,in查询的数组是否包含在映射对象里面的集合里 直接贴代码吧,一看就懂了 class Program { static void Main(strin ...
- tomcat解决 java.lang.IllegalArgumentException: Request header is too large
tomcat运行项目时,有一个请求过去后,后台报这样的错java.lang.IllegalArgumentException: Request header is too large 原因:请求头超过 ...
- 【转】Linux账号管理之useradd
转自:http://www.jb51.net/article/45848.htm Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然 ...
- Unity学习-摄像机的使用（六）
快速对齐摄像机 [选择摄像机-GameObject-Align With View] Game模板中显示的界面,就是摄像机拍摄后的画面 本次学习案例 添加一个地形,一个点光源,三个Cube 了解摄 ...