一、语义标签
<header></header> 定义了文档的头部区域 (效果同<div class="header"></div>)
<footer></footer> 定义了文档的尾部区域
<nav></nav>定义文档的导航
<section></section> 定义文档中的节(section、区段)
<article></article>定义页面独立的内容区域
<aside></aside>定义页面的侧边栏内容
<detailes></details>用于描述文档或文档某个部分的细节
<summary></summary>标签包含details元素的标题
<dialog></dialog>定义对话框,比如提示框
二、增强型表单
HTML5新增了多个input输入类型,提供了更好的输入控制和验证
color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期(UTC时间)
datetime-local 选择一个日期和时间(无市区)
email 包含e-mail地址的输入域
montu 选择一个月份
number 数值的输入域
range 一定范围内数字值得输入域
search 用于搜索域
tel 定义输入电话号码字段
time 选择一个时间
url URL地址的输入域
week 选择周和年
HTML5也新增一下表单元素
<datalist> 元素规定输入域的选项列表使用<input>元素的list属性与<datalist>元素的id绑定 id于input相同即可,相当于input的placeholder
<keygen> 提供一种验证用户的可靠方法,标签规定用于表单的秘钥对生成器字段
<output> 用于不同类型的输出 比如计算或脚本输出
HTML5新增表单属性
placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
required 属性,是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性,描述了一个正则表达式用于验证<input>元素的值。
min 和 max 属性,设置元素最小值与最大值。
step 属性,为输入域规定合法的数字间隔。
height 和 width 属性,用于 image 类型的 <input>标签的图像高度和宽度。
autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。multiple 属性 ,是一个 boolean 属性。规定<input>元素中可选择多个值。
三、视频和音频
<audio>标签添加了controls 属性供添加播放、暂停和音量控件。
在<audio>和</audio>之间你需要插入浏览器不支持的
<audio>元素允许使用多个 元素. 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg<video> controls 属性 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停,如 play() 和 pause() 方法。
同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。同audio
video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)
四、Canvas绘图
但绘图还是要写脚本,绘制文本、图形、图片等各种各样的效果都要靠canvas来实现
五、SVG绘图
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
六、地理位置
HTML5 Geolocation(地理定位)用于定位用户的位置。navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间:',pos.timestamp)
console.log('经度:',pos.coords.longitude)
console.log('纬度:',pos.coords.latitude)
console.log('海拔:',pos.coords.altitude)
console.log('速度:',pos.coords.speed)
}, //定位成功的回调 function(err){
console.log('用户定位数据获取失败')
//console.log(arguments);
} //定位失败的回调
)
七、Web Worker
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
八、Web Storage
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后,数据会被删除。
九、WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
十、拖放API
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置的目标位置。