html5总的来说比html4多了十个新特性,但其不支持ie8及ie8以下版本的浏览器
一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图
五、SVG绘图
六、地理定位
七、拖放API
八、WebWorker
九、WebStorage
十、WebSocket
一、语义标签
html5语义标签,可以使开发者更方便清晰构建页面的布局
标签 | 描述 |
定义了文档的头部区域 | |
定义了文档的尾部区域 | |
定义文档的导航 | |
定义文档中的节 | |
定义文章 | |
定义页面以外的内容 | |
|
定义用户可以看到或者隐藏的额外细节 |
|
标签包含details元素的标题 |
定义对话框 | |
定义自包含内容,如图表 | |
定义文档主内容 | |
定义文档的主内容 | |
定义日期/时间 |
二、增强型表单
html5修改一些新的input输入特性,改善更好的输入控制和验证
输入类型 | 描述 |
color | 主要用于选取颜色 |
date | 选取日期 |
datetime | 选取日期(UTC时间) |
datetime-local | 选取日期(无时区) |
month | 选择一个月份 |
week | 选择周和年 |
time | 选择一个时间 |
包含e-mail地址的输入域 | |
number | 数值的输入域 |
url | url地址的输入域 |
tel | 定义输入电话号码和字段 |
search | 用于搜索域 |
range | 一个范围内数字值的输入域 |
html5新增了五个表单元素
用户会在他们输入数据时看到域定义选项的下拉列表 | |
进度条,展示连接/下载进度 | |
刻度值,用于某些计量,例如温度、重量等 | |
提供一种验证用户的可靠方法 生成一个公钥和私钥 |
|
用于不同类型的输出 比如尖酸或脚本输出 |
html5新增表单属性
属性 | 描述 |
placehoder | 输入框默认提示文字 |
required | 要求输入的内容是否可为空 |
pattern | 描述一个正则表达式验证输入的值 |
min/max | 设置元素最小/最大值 |
step | 为输入域规定合法的数字间隔 |
height/wdith | 用于image类型标签图像高度/宽度 |
autofocus | 规定在页面加载时,域自动获得焦点 |
multiple | 规定元素中可选择多个值 |
三、音频和视频
html5提供了音频和视频文件的标准,既使用
音频:
<audio controls> //controls属性提供添加播放、暂停和音量控件。 <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 //浏览器不支持时显示文字 audio>
视频:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 video>
四、Canvas绘图
https://www.runoob.com/w3cnote/html5-canvas-intro.html
五、SVG绘图
什么是SVG?
SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准
SVG的优势
与其他图像格式相比,是哟个SVG的优势在于:
SVG图像可通过文本编译器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大
SVG与Canvas区别
*SVG适用于描述XML中的2D图形的语言
*Canvas随时随地绘制2D图形(使用javaScript)
*SVG是基于XML的,意味这可以操作DOM,渲染速度较慢
*在SVG中每个形状都被当做是一个对象,如果SVG发生改变,页面就会发生重绘
*Canvas是一像素一像素地渲染,如果改变某一个位置,整个画布会重绘。
Canvas | SVG |
依赖分辨率 | 不依赖分辨率 |
不支持事件处理器 | 支持事件处理器 |
能够以.png或.jpg格式保存结果图像 | 复杂度会减慢搞渲染速度 |
文字呈现功能比较简单 | 适合大型渲染区域的应用程序 |
最合适图像密集的游戏 | 不适合游戏应用 |
六、地理定位
使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”
七、拖放API
拖放是一种常见的特性,即捉取对象以后拖到另一个位置。
在html5中,拖放是标准的一部分,任何元素都能够拖放。
<div draggable="true">