<!doctype html>

 <!doctype html>是申明作用告诉浏览器以html5的标准去解析渲染页面。

   DOCTYPE（是Document Type文档类型的简写）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格。

严格模式和混杂模式

   严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法

   混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。

触发模式

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

常用的meta 标签

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
有什么用：
帮助主页被各大搜索引擎登录，meta一个重要的功能就是设置关键字，其中最重要的就是对Keywords和description的设置。因为因为按照搜索引擎的工作原理,：搜索引擎首先派出机器人自动检索页面中的keywords和description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。

1.定义页面的使用语言

下面就是一个具有代表性的例子：

＜meta http-equiv=″content－Type″ content=″text/html; charset=gb2312″>
//代表说明网站采用的编码是简体中文; 
//charset=utf-8代表世界通用的语言编码.

2.自动刷新并指向新的页面

如果你想使您的网页在无人控制的情况下，能自动在指定的时间内去访问指定的网页，就可以使用meta标签的自动刷新网页的功能。下面我们来看一段代码：

< meta http-equiv=″refresh″ content=″２; URL=[http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html](http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html)″>

// 这段代码可以使当前某一个网页在２秒后自动转到http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html页面中去,
// 这就是meta的刷新作用
// content='２'代表设置的时间（单位为秒）,
//而URL就是在指定的时间后自动连接的网页地址。

3.实现网页转换时的动画效果

使用meta标签，我们还可以在进入网页或者离开网页的一刹那实现动画效果，我们只要在页面的html代码中的
＜head＞＜/head＞标签之间添加如下代码就可以了：

    ＜meta http-equiv="Page-Enter" content="revealTrans(duration=5.0, transition=20)"＞ 
    ＜meta http-equiv="Page-Exit" content="revealTrans(duration=5.0, transition=20)"＞ 
    //一旦上述代码被加到一个网页中后，我们再进出页面时就会看到一些特殊效果，这个功能其实与FrontPage2000中的Format/Page Transition一样，但我们要注意的是所加网页不能是一个Frame页;

4.网页定级评价

IE4.0以上版本的浏览器可以防止浏览一些受限制的网站,而之所以浏览器会自动识别某些网站是否受限制,就是因为在网站meta标签中已经设置好了该网站的级别,而该级别的评定是由美国RSAC,即娱乐委员会的评级机构评定的,如果你需要评价自己的网站,可以连接到网站http://www.020webseo.com/,按要求提交表格,那么RSAC会提供一段meta代码给你,复制到自己网页里就可以了。

5.控制页面缓冲

meta标签可以设置网页到期的时间,也就是说,当你在Internet Explorer 浏览器中设置浏览网页时首先查看本地缓冲里的页面,那么当浏览某一网页,而本地缓冲又有时,那么浏览器会自动浏览缓冲区里的页面,直到meta中设置的时间到期,这时候,浏览器才会去取得新页面。例如下面这段代码就表示网页的到期时间是2001年1月12日18时18分18秒。

    <meta http-equiv=″expires″ content=″Friday, 12-Jan-2001 18:18:18 GMT″>

6. 控制网页显示的窗口

我们还可以使用meta标签来控制网页显示的窗口，只要在网页中加入下面的代码就可以了：

  ＜metahttp-equiv="window-target" content="_top"＞，
   // 这段代码可以防止网页被别人作为一个Frame调用。

常见的属性和值：

name

name属性用于描述页面，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

name属性语法格式是：

    ＜meta name=“参数” content="具体的参数值"＞ 。

name属性的主要有以下几种参数：

Keywords(关键字)
说明：keywords用来告诉搜索引擎你网页的关键字是什么。
举例：

 ＜meta name ="keywords" content="science,education,culture,politics,ecnomics，relationships, entertaiment, human"＞

description(网站内容描述)

说明：description用来告诉搜索引擎你的网站主要内容。
举例：

＜meta name="description" content="This page is about the meaning of science, education,culture."＞

robots(机器人向导)
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：

＜meta name="robots" content="none"＞

author(作者)
说明：标注网页的作者
举例：

＜meta name="author" content="root,root@21cn.com"＞

http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是：

＜meta http-equiv=“参数” content="参数变量值"＞

其中http-equiv属性主要有以下几种参数：

Expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
用法：

＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞ 
//注意：必须使用GMT的时间格式。

Pragma(cache模式)
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
用法：

＜meta http-equiv=“Pragma” content="no-cache"＞ 
//注意：这样设定，访问者将无法脱机浏览。

Refresh(刷新)
说明：自动刷新并指向新页面。
用法：

＜meta http-equiv="Refresh" content="2；URL=[http://www.root.net](http://www.root.net)"＞ 
//注意：其中的2是指停留2秒钟后自动刷新到URL网址。

Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
用法：

＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞ 
//注意：必须使用GMT的时间格式。

Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
用法：

＜meta http-equiv="Window-target" content="_top"＞ 
//注意：用来防止别人在框架里调用自己的页面。

content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：

＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

汇总：

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/>       页面描述
<meta name=”keywords” content=””/>      页面关键词
<meta name=”author” content=”name, email@gmail.com”/>    网页作者
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<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”>  启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
<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应用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

常见的浏览器和内核

浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。

关于<!doctype html> 和 <meta>