HTML5新特性
前言
HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出，于2007年获W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。目前Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer 9已支持HTML5技术。
HTML5本质并没有对之前HTML4版本的规范进行彻底的变革，更令人欣喜的是，HTML5一开始设计就考虑了跟之前的标准进行兼容。而且把最新的WEB开发的一些新技术新的规范引入进了新版本的标准中。那么它的本质是什么呢？其实HTML5的发展就是html，css，jsapi的发展。
狭义上的HTML5:(1)HTML4.0的升级版本.(2)HTML5+CSS3+新增JS API的技术组合.
广义上的HTML5:(1)HTML5行业的代名词.(2)当前新技术的代名词.
HTML5的改进 菜鸟链接
- 新元素
- 新属性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制图
- 本地存储
- 本地 SQL 数据
- Web 应用
HTML5的语法规范
- 文档声明
<!DOCTYPE html> - 字符编码设置
<meta charest="UTF-8"> - 语法严格程度
``
//测试标签大写/未闭合this is a text//得到结果 未报错
``
新的语义元素
语义化标签的定义:看到该标签就大概知道其中所包含的内容的这类标签称之为语义化标签.
语义化标签的优点:根据内容的结构化,选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的搜索引擎更好的解析和收录.
HTML5 定了 8 个新的 HTML 语义（semantic)元素。所有这些元素都是 块级 元素。(一般浏览器都定义为块级元素,为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block.)
header, section, footer, aside, nav, main, article, figure { display: block; }
为HTML添加新元素
H5支持添加自定义的新元素,设置其display属性即可.
JS中document.createElement("myDiv")为浏览器添加新元素.
- IE8及更早的版本不支持上述方法.以下代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js文件，并解析它。
``js
``
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
HTML5表单
HTML5中添加了智能表单,让很多操作变得非常简单.
新增表单类型
<form action="">
<fieldset>
<legend>表单输入类型</legend>
<!--1.邮箱 email 检验输入框中的内容是否符合邮箱的标准格式-->
<label for="">
邮箱:<input type="email" name="email" id="email">
</label>
<!--2.网址 要在网址前面添加http协议或https 作用:检验网址是否带有http或https协议-->
<label for="">
网址:<input type="url" name="url" id="url">
</label>
<!--3.搜索 带有清除按钮 -->
<label for="">
搜索:<input type="search" name="search" id="search">
</label>
<!--4.电话号码 tel 会在移动端显示，当type=tel的时候，移动端设备会自动弹出数字键盘-->
<label for="">
电话:<input type="tel" name="tel" id="tel">
</label>
<!--5.number 数字 max 最大值 min最小值 value step步进-->
<label for="">
数字:<input type="number" name="number" id="number" max="100" min="1" step="3" >
</label>
<!--6.range 范围 滑块 max 最大值 min最小值 value step步进-->
<label for="">
滑块:<input type="range" name="range" id="range" max="100" min="1" step="2" >
</label>
<!--7.时间 -->
<label for="">
时间:<input type="time" name="time" >
</label>
<!--8.日期 如何设置value="xxxx-xx-xx"-->
<label for="">
日期:<input type="date" name="date" value="2016-01-06" >
</label>
<!--9.颜色 写成十六进制 不可缩写-->
<label for="">
颜色:<input type="color" name="color" value="#666666" >
</label>
<label for="">
<input type="submit" value="提交">
</label>
</fieldset>
</form>
新增表单元素 Datelist
<form action="">
<fieldset>
<legend>表单输入类型</legend>
<label for="">
所属学院: <input type="text" name="course" list="course" >
<!--datalist 数据列表-->
<datalist id="course">
<option value="test1"></option>
<option value="test2"></option>
<option value="test3"></option>
<option value="test4"></option>
</datalist>
</label>
<label for="">
<input type="submit" value="提交">
</label>
</fieldset>
</form>
新增表单属性
<form action="">
<fieldset>
<legend>表单属性</legend>
<label for="">
<!--占位符 placeholder 作用:提示用户将要在输入框中输入什么样的内容-->
<!--自动聚焦 autofocus 作用:当页面载入之后，光标自动聚焦到该输入框-->
<!--自动完成 autocomplete 自动完成是默认开启的 两个值on开 off关-->
<!--自定义验证 pattern 根据正则表达式验证 -->
<!--必填项 required 拥有该属性的输入框必须填写-->
<!--多文件上传 multiple 让输入框上传多个文件-->
账号: <input type="text" required name="username" placeholder="请输入您的用户名" autofocus pattern="[a-z]{3}" >
</label>
<label for="">
邮箱: <input type="email" name="email" placeholder="请输入您的邮箱" >
</label>
<label for="">
上传: <input type="file" name="file" multiple >
</label>
<label for="">
<input type="submit" value="提交">
</label>
</fieldset>
</form>
新增表单时间
element.oninput=function(){} //当用户在该输入框输入的时候,会多次触发该事件
element.oninvalid=function(){} //当验证不通过的时候,会触发该事件
element.setCustomValidity("设置错误提示的信息")
HTML5多媒体标签
audio 音频标签
<audio src="" controls autoplay loop>
<source src="music.mp3" >
<source src="music.ogg" >
<source src="music.wav" >
</audio>
<!-- 属性: 1.controls 控制菜单
2.autoplay 自动播放
3.loop 循环播放 -->
video 视频标签
<video src="" controls autoplay loop></video>
<!-- 属性: 1.controls 控制菜单
2.autoplay 自动播放
3.loop 循环播放 -->
- 常用api
- 方法:load()加载;play()播放;pause()暂停
- 属性:currentTime 视频播放的进度 duration:视频的总时间
- 时间:oncanplay:事件在用户可以开始播放video/audio时触发
ontimeupdate:时间监控当前播放进度
onended:播放完时触发
- 全屏 video.webkitRequestFullScreen()
HTML5规范允许自定义网页任意元素全屏显示.
requestFullScreen() 开启全屏显示
cancletFullScreen() 关闭全屏显示
document.fullScreen 检测当前是否处于全屏
全屏伪类 :full-screen{}
不同浏览器需添加前缀
webkit
moz
HTML5的DOM扩展
- API获取元素
document.querySelector();document.querySelectirAll - API操作类名
node.classList.add("");
node.classList.remove("");
node.classList.contains("");
node.classList.toggle("");
- API自定义属性
在html中声明一个自定义属性 格式:data-="value";
如果是data- 用javascript如何获取自定义属性的值 node.dataset.*
如果是data-- 用js的方法如何获取自定义属性的值 node.dataset.驼峰命名的写法
获取所有的自定义属性 node.dataset 返回值是对象
网络状态检测
window.online 用户网络连接时被调用 返回一个布尔值
window.addEventListener("online",function(){
alert("连接成功")
})
window.offline 用户网络连接时被调用
window.addEventListener("offline",function(){
alert("连接断开")
})
拖拽
HTML5规范中,可以通过为元素添加draggable="true",来设置元素是否可以拖拽,图片 链接是默认可以拖拽的.
- 事件监听
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
web存储
- 传统方式用cookie进行存储,cookie只有4K左右的储存大小.HTML5规范提出了localStorage和 sessionStorge存储.设置读取方便,容量较大,只能存储字符串,可以将对象JSON.stringify()编码后存储.
| 类型 | 大小 | 周期 |
|---|---|---|
| cookie | 4K | 自己设定 浏览器每次请求都会发送cookie |
| localStorage | 20M | 永久存在 多窗口共享 |
| sessionStorage | 5M | 关闭浏览器窗口 同一浏览器下可共享 |
- 方法
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
应用程序缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
地理位置
HTML5 Geolocation（地理定位）用于定位用户的位置
了解更多
