HTML5知识填坑(一)

最新推荐文章于 2021-11-18 15:56:29 发布

joy_zxj

最新推荐文章于 2021-11-18 15:56:29 发布

阅读量333

点赞数

分类专栏：学习笔记文章标签： html5

本文链接：https://blog.csdn.net/zhoujie_zhoujie/article/details/60966682

版权

35 篇文章 0 订阅

订阅专栏

HTML5以前，进行文档类型声明非常麻烦，要好长一串。但在HTML5中却很简单。

<!DOCTYPE html>

文档类型声明的作用？
它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。

浏览器模式？
DOCTYPE一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。HTML编辑器通常也会在语法高亮的同时提供合法性验证。

为了能够很好地显示满足标准的页面，又能最大程度兼容不合法的HTML。浏览器厂商一般会提供两种浏览器模式：

混杂模式下，浏览器会模仿旧浏览器的行为，比如IE6，在此基础上兼容新的标准特性。混杂模式又称兼容模式、怪异模式等。

DOCTYPE切换
浏览器根据不同的DOCTYPE选择不同的渲染方法就叫做DOCTYPE切换。其实DOCTYPE切换就是用来识别和兼容旧网页的。

以下情况浏览器会采用标准模式渲染：

以下情况浏览器会采用混杂模式渲染：

如果你是使用最新标准编写的页面但未给出DOCTYPE声明，这时就可能会出现一些怪异的行为。例如盒模型不正确、窗口的size不正确等问题。

总结一下：文档类型声明就是告诉浏览器应该拿什么标准解析文档，采用什么方式渲染页面（标准or怪异）。同时并且大多数HTML编辑器会根据文档类为我们提供合法性验证。

HTML5新增了很多语义化的标签，比如 article、footer、header、nav、section，aside，progress。。。更多

那么，语义化标签有什么作用呢？

挑几个看起来比较厉害的新标签仔细了解一下
1.progress——定义任何类型的任务的进度。
属性：
max:规定任务一共需要多少工作。
value:规定已经完成多少任务。

Progress对象：详情

HTML5 新的 Input 类型

HTML5 表单属性
height 和 width 属性：
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。注意，height 和 width 属性只适用于 image 类型的 input 标签。
更多

Window 事件属性：

onload事件：onload 属性在对象已加载时触发。onload 常用在 body中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。
onresize事件：发生于对象被调整大小时。onresize 常用于浏览器窗口被调整尺寸时。

关注