一.文档类型声明
HTML5以前,进行文档类型声明非常麻烦,要好长一串。但在HTML5中却很简单。
<!DOCTYPE html>
文档类型声明的作用?
它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。
浏览器模式?
DOCTYPE一个主要的用途便是文件的合法性验证。 如果文件代码不合法,那么浏览器解析时便会出一些差错。HTML编辑器通常也会在语法高亮的同时提供合法性验证。
为了能够很好地显示满足标准的页面,又能最大程度兼容不合法的HTML。 浏览器厂商一般会提供两种浏览器模式:
- 标准模式(standards mode):浏览器根据标准规约来渲染页面。
- 混杂模式(quirks mode):浏览器采用更加宽松的、向后兼容的方式来渲染页面。
混杂模式下,浏览器会模仿旧浏览器的行为,比如IE6,在此基础上兼容新的标准特性。 混杂模式又称兼容模式、怪异模式等。
DOCTYPE切换
浏览器根据不同的DOCTYPE选择不同的渲染方法就叫做DOCTYPE切换。 其实DOCTYPE切换就是用来识别和兼容旧网页的。
以下情况浏览器会采用标准模式渲染:
- 给出了完整的DOCTYPE声明
- DOCTYPE声明了Strict DTD
- DOCTYPE声明了Transitional DTD和URI
以下情况浏览器会采用混杂模式渲染:
- DOCTYPE声明了Transitional DTD但未给出URI
- DOCTYPE声明不合法
- 未给出DOCTYPE声明
如果你是使用最新标准编写的页面但未给出DOCTYPE声明,这时就可能会出现一些怪异的行为。 例如盒模型不正确、窗口的size不正确等问题。
总结一下:文档类型声明就是告诉浏览器应该拿什么标准解析文档,采用什么方式渲染页面(标准or怪异)。同时并且大多数HTML编辑器会根据文档类为我们提供合法性验证。
二.一些新增标签
HTML5新增了很多语义化的标签,比如 article、footer、header、nav、section,aside,progress。。。更多
那么,语义化标签有什么作用呢?
- 语义化HTML可以让页面结构更清晰,降低了编码人员的认知负担。
- 于机器(搜索引擎,屏幕阅读器)更加友好,有利于SEO,使代码被搜索小蜘蛛更容易的读懂。
挑几个看起来比较厉害的新标签仔细了解一下
1.progress——定义任何类型的任务的进度。
属性:
max:规定任务一共需要多少工作。
value:规定已经完成多少任务。
Progress对象:详情
三.对表单的增强
HTML5 新的 Input 类型
- email—用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。
- url—用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。
- number—number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定
- range—range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定
- Date Pickers —HTML5 拥有多个可供选取日期和时间的新输入类型
- search—用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
- color—颜色选取
HTML5 表单属性
height 和 width 属性:
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。注意,height 和 width 属性只适用于 image 类型的 input 标签。
更多
四.HTML5事件
Window 事件属性:
onload事件:onload 属性在对象已加载时触发。onload 常用在 body中,一旦完全加载所有内容(包括图像、脚本文件、CSS 文件等),就执行一段脚本。
onresize事件: 发生于对象被调整大小时。onresize 常用于 浏览器窗口被调整尺寸时。
`