HTML head 头标签

Menng_

于 2015-03-14 23:02:00 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/Menng_/article/details/102836830

版权

参考：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" />
　　
　　<meta name="renderer" content="webkit">
　　
　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　
　　<meta name="HandheldFriendly" content="true">
　　
　　<meta name="MobileOptimized" content="320">
　　
　　<meta name="screen-orientation" content="portrait">
　　
　　<meta 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">
　　

百度禁止转码
　　<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)