H5的新特新
1.语义化的标签：header、footer、section、nav、aside、article
| 标签 | 描述 |
| header | 定义文档的头部区域 |
| footer | 定义文档的尾部区域 |
| nav | 定义文档的导航栏部分 |
| section | 定义文档中的节（section、区段） |
| article | 定义页面独立的内容区域 |
| aside | 定义页面的侧边栏部分 |
| details | 用于描述文档或者某个部分的细节 |
| summary | 标签包含details元素的标题 |
| dialog | 定义对话框，比如提示框 |
2.增强型表单：HTML5拥有多个新的表单Input输入类型，这些新的特性提供了更好的输入控制和验证
| input的type | 描述 |
| color | 主要用于选择颜色 |
| data | 从一个日期选择器选择一个日期 |
| datatime | 选择一个日期（UTC时间） |
| 包含e-mail地址的输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码的字段 |
| time | 选择一个时间 |
| url | URL地址的输入域 |
| week | 选择周和年 |
3.新增表单元素：datalist、keygen、output
| 表单元素 | 描述 |
| datalist | 元素规定输入域的选项列表，使用input元素的list属性与datalist元素的id绑定 |
| keygen | 提供一种验证用户的可靠方法，标签规定用于表单的秘钥对生成器字段 |
| output | 用于不同类型的输出，比如计算机的脚本输出 |
4.新增的表单属性：placeholder、require、min、max、.......
| 表单属性 | 描述 |
| placeholder | 输入框的默认提示 |
| required | 是一个boolean属性，要求填写的输入域不能为空值 |
| pattern | 描述一个正则表达式，用于验证input元素的值 |
| min/max | 设置元素的最大值和最小值 |
| step | 为输入域规定合法的数字间隔 |
| height/width | 用于image类型的input标签的图像高度和宽度 |
| autofocus | 是一个boolean属性，规定在页面加载时，域自动的获取到焦点 |
| multipe | 是一个boolean属性，规定input元素中可选择多个值 |
5.音频、视频：audio、video
6.canvas：在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。
要指定的是 id、width、height三个属性
<canvas id="canvas" width="400" height="300" />
7.地理定位：getCurrentPosition()
返回用户位置的经度和纬度
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>
8.拖拽：
9.本地存储：
localStorage：没有时间限制的数据存储
sessionStorage：针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除
10.新的事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
| 事件 | 描述 |
| onresize | 调整窗口大小时触发的事件 |
| ondrag | 当元素拖拽时触发的事件 |
| onscroll | 当滚动元素的滚动条变化时触发事件 |
| onmousewheel | 当转动鼠标滚轮时候触发的事件 |
| onerror | 当错误发生时触发的事件 |
| onplay | 当媒介数据将要开始播放时触发的事件 |
| onpause | 当媒介数据暂停时触发的事件 |
11.WebSocket:单个TCP连接上进行全双工通讯的协议
12.块级元素和行内元素的总结
块级元素：div、p、h1~h5、ul、ol、li、dd、table、hr、blockquote（标记长的引用）、address（ <address> 元素位于 <article> 元素内，定义文档或文章的作者/拥有者的联系信息）、menu、pre（pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。）、还有上面新增的语义化的标签：header、footer、section、nav、aside、article
行内元素：span、img、a、label、input、abbr（缩写）、em（强调）、big（呈现大号字体效果）、cite（引用a标签包裹引用的标题）、i（斜体）、q（标记短的引用）、textarea、select、small（ 标签呈现小号字体效果）、sub（下标）、sup（上标）、strong（加粗）、u（下划线）、button
<menu>标签:
带有两个菜单按钮 （"File" 和 "Edit"） 的工具栏，每个按钮都包含带有一系列选项的下拉列表：
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="file_new()">New...</button> <button type="button" onclick="file_open()">Open...</button> <button type="button" onclick="file_save()">Save</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="edit_cut()">Cut</button> <button type="button" onclick="edit_copy()">Copy</button> <button type="button" onclick="edit_paste()">Paste</button> </menu> </li> </menu>
<abbr>标签的作用：
此标签用于标记一个缩写，当鼠标停留到标记的缩写上面时会展示"title"属性的全部内容
<html> <head> <meta charset="utf-8"> <title>abbr标签</title> </head> <body> <abbr title="中国航天四老之一">任新民</abbr>，航天技术与液体火箭发动机技术专家，中国导弹与航天技术的重要开拓者之一。 </body> </html>
原文：https://www.cnblogs.com/dongdong1996/p/12106492.html