H5新增特性(H5的基本特征)

HTML5属于上一代HTML的升级语言。设计HTML5的主要目的是支持移动设备上的多媒体！
优势：跨平台：
举个例子：比如你开发一款HTML5游戏，可以很容易的移植到UC的开放平台，Opera的游戏中心，脸书的应用平台，甚至通过封装技术分发到App Store或者Google Play，所以它的跨平台性非常强，这也是大多数人对HTML5感兴趣的主要原因。
缺点：
pc浏览器的支持不是特别友好，导致用户体验不佳(随着移动终端的发展和win10(ie10)的广泛推广，这个缺点会无限缩小)
新功能：
1.取消了过时的展示效果标志等。
2.引入新的语义标签
3.引入新的表单元素
4.画布标签(图形设计)
5.本地数据库(本地存储)
6.一些API
1.HTML5新语义标签
5新增HTML5标签数量在25个左右，找不到详细信息可查(每个网站显示的数量不一样)。
虽然有很多新标签，但实际使用的只有十个左右。MDN上有一句话
HTML使用“标记”来表示文本、图片和其他内容，以便可以在Web浏览器中显示。HTML包含一些特殊的“元素”，如、等。
这些标签大多有HTML5 previous标签和HTML5标签，而这些恰好是我们常用的标签。没用过的可能不需要太了解布局DIV吧？
此外，建议您在使用新的语义标签时，将每个独立页面仅使用一个标签作为一个包。语义的作用就是seo(具体来说就是百度)，就是让搜索引擎知道互联网上有什么，比如header、main、footer标签等。当然也可以写100个标签！
总结了HTML5中常用的以下标签：header、nav、main、article、address、section、side和footer。
如果您忘记了这些标签的含义，您可以访问MDN、W3C或CSND。当然，在博客花园上搜索可能会更快。
2.视频和音频的关键标签在2。HTML5
视频剪辑
属性：控制显示控制栏
属性：自动播放自动播放
属性：循环设置循环播放。
音频
属性：控制显示控制栏
属性：自动播放自动播放
属性：循环设置循环播放。
视频标签支持的格式：http://www.w3school.com.cn/html5/html_5_video.asp
网页中多媒体标签的兼容性(每个浏览器支持的情况不同，所以需要进行兼容性处理)
(下面的source属性只会生效，也就是if=true不会执行)
3.智能表单控件在3。HTML5
类型值=
Email:输入合法的电子邮件地址。
Url:输入合法的URL。
数字：只能输入数字。
范围：滑块
颜色：颜色选择器
日期：显示日期。
月份：显示月份
周：显示周数
时间：显示时间
(智能表单会自动检查输入的内容，如果内容不符合基本检查，则拒绝提交请求。
属性
表单属性：
Autocomplete=on | off自动完成
Novalidate=true | false关闭验证？
输入属性：
自动对焦：自动获得焦点。
多重：实现多选效果。
占位符：占位符(提示信息)
必需：必需
本地存储
随着互联网的快速发展，基于web的应用越来越普遍，同时也越来越复杂。为了满足各种需求，大量数据会存储在本地。传统上我们使用document.cookie来存储数据，但是由于它的存储大小只有4k左右，而且解析相当复杂，给开发带来了很多不便。HTML5规范提出了一个解决方案，使用sessionStorage和localStorage来存储数据。
本地存储：
1.永久效应
2.多窗口共享
3.容量约为20M。
window . local storage . setitem(key，value)设置存储内容。
window . local storage . getitem(key)获取内容
window . local storage . remove item(键)删除内容
window.localStorage.clear()清除内容。
会话存储：
1.生命周期是关闭当前浏览器窗口
2.可以在同一个窗口下访问它
3.数据大小约为5M。
window . session storage . setitem(key，value)
window . session storage . getitem(key)
window . session storage . remove item(key)
window.sessionStorage.clear()
required如何修改默认提示选项？
需要两个参数。
默认情况下，Placeholder=提示用户输入
Oninvalid event=当用户的输入不符合规则时，随意改变提示的内容。setCustomValidity是用于修改requered值的函数。
Oninput event=约等于川哥事件的立即执行。
4.4中的一些新API。HTML5
获取之前传递的节点。
document . getelementbyid(\ ‘ ID name \ ‘)还有className、name、tagname等方法。获取并返回当前节点。
H5只有两种新的节点获取方法。
document . query selector(\ ‘ selector \ ‘)；返回节点
document . query selector all(\ ‘ selector \ ‘)；返回数组
如果不要求兼容ie10及以下版本，可以完美替代之前的or节点模式。
H5班级的运作
ClassList.add(\ ‘类名\ ‘)
添加类名不会返回任何值。如果将它赋给一个变量，结果是不确定的。
ClassList.remove(\ ‘类名\ ‘)；删除
ClassList.contains(\ ‘类名\ ‘)；
检查has className是否返回了布尔值，即true和false。
class list . toggle(\ ‘ active \ ‘)；
查询active是否存在，存在则删除，不存在则添加，省去了if判断！返回一个布尔值。如果执行多行，即true false true false。
自定义属性(小案例分析经验自定义属性)数据-自定义属性名称
1.获取自定义属性Dom.dataset会返回一个对象。
Dom.dataset .属性名或Dom.dataset[属性名]
注意：属性名不需要添加数据。例如，如果用户定义的属性name=data-canvas，可以通过dataset.canvas直接设置相同的原则
2.设置自定义属性
Dom数据集；自定义属性名称=值或DOM数据集[自定义属性名]=值；
读取文件文件读取器
FileReader接口有三种读取文件的方法，返回的结果在result中。
ReadAsBinaryString -将文件作为二进制代码读取。
以文本形式读取文件
ReadAsDataURL -将文件作为DataURL读取。
FileReader提供的事件模型
onabort中断时触发
发生onerror时触发。
当onload文件读取成功完成时触发。
Onloadend读取完成触发器，无论成功或失败。
当onloadstart读取开始时触发。
正在阅读
获取当前网络状态
Window.navigator.onLine返回一个布尔值。没问题，它返回真，否则返回假。
网络状态事件(大部分是不支持和放弃的状态，可能更多地被移动终端使用)
1.window.ononline
2.window.onoffline
获取地理位置
获取当前位置一次
window . navigator . geolocation . getcurrentposition(成功，错误)；
成功后获取位置信息；否则，抛出一个错误，比如获取位置信息被拒绝。
1.坐标纬度维度
2.坐标经度
实时获取当前位置
window . navigator . geolocation . watch position(成功，错误)；
以上内容可能不足，欢迎指出和补充，谢谢。