HTML head 头标签

参考:http://fex.baidu.com/blog/2014/10/html-head-tags/

Head 
  DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
  DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始,不区分大小写,前面没有任何内容。
  HTML 4.01 strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  HTML5: <!doctype html> 它向前向后兼容,推荐使用。

  在 HTML中 doctype 有两个主要目的
    a)对文档进行有效性验证。它告诉用户代理和校验器这个文档是按照什么 DTD 写的。是被动的,每次页面加载时,浏览器并不会下载 DTD 并检查合法性,只有当手动校验页面时才启用。
    b)决定浏览器的呈现模式。http://padding.me/blog/2014/07/04/mode-or-standard/

Charset
  声明文档使用的字符编码
  推荐写法: <meta charset="utf-8">
  Html5之前的写法:<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  两者等效,具体:http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type

Lang属性
  简体中文: <html lang="zh-cmn-Hans">
  繁体中文页面:<html lang="zh-cmn-Hant">
  英语页面:<html lang="en">

Meta
  优先使用 IE 最新版本和 Chrome: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  360 使用Google Chrome Frame: <meta name="renderer" content="webkit"> 另外为了保险起见再加入: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  浏览器内核控制Meta标签说明文档: http://se.360.cn/v6/help/meta.html

移动端的meta
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection"content="telephone=no, email=no" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
  <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  <!-- 启用360浏览器的极速模式(webkit) -->
  <meta name="renderer" content="webkit">
  <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
  <meta name="HandheldFriendly" content="true">
  <!-- 微软的老式浏览器 -->
  <meta name="MobileOptimized" content="320">
  <!-- uc强制竖屏 -->
  <meta name="screen-orientation" content="portrait">
  <!-- QQ强制竖屏 -->
  <meta name="x5-orientation" content="portrait">
  <!-- UC强制全屏 -->
  <meta name="full-screen" content="yes">
  <!-- QQ强制全屏 -->
  <meta name="x5-fullscreen" content="true">
  <!-- UC应用模式 -->
  <meta name="browsermode" content="application">
  <!-- QQ应用模式 -->
  <meta name="x5-page-mode" content="app">
  <!-- windows phone 点击无高光 -->
  <meta name="msapplication-tap-highlight" content="no">
  <!-- 适应移动端end -->

百度禁止转码
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  百度转码说明:http://m.baidu.com/pub/help.php?pn=22&ssid=0&from=844b&bd_page_type=1

SEO 优化部分
  a)页面标题<title>标签(head 头部必须): <title>your title</title>
  b)页面关键词 keywords:<meta name="keywords" content="your keywords"> 多个用逗号隔开
  c)页面描述内容 description: <meta name="description" content="your description">
  d)定义网页作者 author: <meta name="author" content="author,email address">
  c)定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。: <meta name="robots" content="index,follow">

viewport
  viewport 可以让布局在移动浏览器上显示的更好。 通常会写: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  content 参数:
    width viewport 宽度(数值/device-width)
    height viewport 高度(数值/device-height)
    initial-scale 初始缩放比例
    maximum-scale 最大缩放比例
    minimum-scale 最小缩放比例
    user-scalable 是否允许用户缩放(yes/no)

原文地址:https://www.cnblogs.com/ConciseAaron/p/4338508.html