1. 标签类型
-
!DOCTYPE标签
doctype是html5标准网页声明，是来告知web浏览器的解析器解析文档所需的文档标准，不同的解析模式会影响浏览器对于CSS代码甚至JavaScript脚本的解析。
文档解析类型:
1.标准模式(standards mode):浏览器使用W3C的标准解析渲染的模式;页面按照HTML与CSS的定义进行渲染。
2.怪异模式(quirks mode):浏览器使用自己的怪异模式解析渲染页面，如果没有声明DOCTYPE就默认该模式解析;会模拟更旧的浏览器行为。
3.近乎模式(almost standards):会实施一种表格单元格尺寸的怪异模式。
-
head
是所有头部元素的容器，绝大多是头部标签的内容都不会显示给读者。可加入的标签有title、base、link、meta、script 以及 style。
1.title:定义文档的标题(定义浏览器工具栏中的标题,提供页面被添加到收藏夹时显示的标题,显示在搜索引擎结果中的页面标题)。
2.base:为页面上所有的链接规定默认地址或默认目标,例如下面<a>标签中href为空，但是可以直接访问空间，因为head中的base已经设置了默认url。
3.link:定义文档与外部资源之间的关系,常用于链接样式表。
4.meta:定义网页关键词、网页作者、网页描述、网页刷新时间、网页对不同设备的自适应等。
5.script:放置在head中的<script>标签会在页面加载之前加载到浏览器里。
6.style:标签用于为HTML文档定义样式信息。
-
body
用于定义文档的主体,包含了文档的所有内容，该标签支持html全局属性和时间属性。
2. h5新特性
- 语意化标签:
footer、header、nav、article、section
<title> <!--：页面主体内容。-->
<hn> <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul> <!--：无序列表。-->
<li> <!--：有序列表。-->
<header> <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav> <!--：标记导航，仅对文档中重要的链接群使用。-->
<main> <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article> <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section> <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside> <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer> <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small> <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong> <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em> <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark> <!--：使用黄色突出显示部分文本。-->
<figure> <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption> <!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite> <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q> <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time> <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr> <!--：简称或缩写。-->
<dfn> <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address> <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del> <!--：移除的内容。-->
<ins> <!--：添加的内容。-->
<code> <!--：标记代码。-->
<meter> <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress> <!--：定义运行中的进度（进程）。-->
扩展：语义化的优点
1. 易于用户阅读，样式丢失时能让页面呈现清晰的结构。
2. 利于SEO，搜索引擎根据标签来确定上下文各个关键字的权重。
3. 方便屏幕阅读器解析，并根据语义渲染网页。
4. 有利于开发和维护，语义化更具可读性，代码更好维护。
- 本地存储:
localStorage、sessionStorage
localStorage 存储的数据是永久性的，除非用户人为删除否则会一直存在；
sessionStorage 存储的数据在当前会话结束时会被清除，一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删除。
- 媒体播放:
video、audio - 地理位置:
Geolocation - 增强表单控件:
calendar、date、time、email、url、search - 跨域资源共享(CORS):
Access-Control-Allow-Origin - 新增选择器:
document.querySelector、document.querySelectorAll - 拖拽释放:
drag、drop
//发生在源对象上的事件
ondragstart:用户开始拖动页面中的某个元素时触发的事件
ondrag: 源对象在拖拽过程中持续触发的事件
ondragend:拖动完成时触发的事件，一般用于清空拖动过程中的状态等。
//发生在目标对象上的事件
ondragenter:源对象进入到目标对象时，会触发目标对象的ondragenter事件
ondragleave:源对象移除之前调用了dragenter的元素时，目标元素触发的事件
ondragover:源对象进入目标对象后持续触发的事件
onwqwaedrop:用户释放鼠标时，drop会在目标对象上被调用
- 离线应用:
manifest - 桌面通知:
Notifications - 多任务:
webworker - 全双工通信协议:
websocket - 历史管理:
history - 页面可见性改变事件:
visibilitychange - 跨窗口通信:
PostMessage - Form Data对象:
本身没有任何属性和方法，所有的操作方法都在其原型上 - 绘画：
canvas