是申明作用告诉浏览器以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=″2; URL=[http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html](http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html)″>
// 这段代码可以使当前某一个网页在2秒后自动转到http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html页面中去,
// 这就是meta的刷新作用
// content='2'代表设置的时间(单位为秒),
//而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秒。
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,[email protected]">
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">
汇总:
H5标准声明,使用 HTML5 doctype,不区分大小写
标准的 lang 属性写法
声明文档使用的字符编码
优先使用 IE 最新版本和 Chrome
页面描述
页面关键词
网页作者
搜索引擎抓取
为移动设备添加 viewport
iOS 设备 begin
添加到主屏后的标题(iOS 6 新增)
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
设置苹果工具栏颜色
启用360浏览器的极速模式(webkit)
避免IE使用兼容模式
不让百度转码
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
微软的老式浏览器
uc强制竖屏
QQ强制竖屏
UC强制全屏
QQ强制全屏
UC应用模式
QQ应用模式
windows phone 点击无高光
设置页面不缓存
常见的浏览器和内核
浏览器内核主要指的是浏览器的渲染引擎,2013 年以前,代表有 Trident(IE),Gecko(firefox),Webkit(Safari chrome 等)以及 Presto(opera)。2013 年,谷歌开始研发 blink 引擎,chrome 28 以后开始使用,而 opera 则放弃了自主研发的 Presto 引擎,投入谷歌怀抱,和谷歌一起研发 blink 引擎,国内各种 chrome系的浏览器(360、UC、QQ、2345 等等)也纷纷放弃 webkit,投入 blink 的怀抱。