- 2019-12-13
要写这个的时候才发现这个想写清楚内容真的好多… 估计我能写到明年去…
所以这里就列举比较基础和常用的新内容。 - 本篇讲HTML5,CSS3在下篇讲,放上链接 HTML5、CSS3新特性一览(下)。
要素过多,这里加个目录
— 浏览器支持 —
- 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
- 如果想兼容IE6,可以手动“教会”浏览器识别新元素。详情见参考文档。
— 新增元素 —
- 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者等。
1.语义元素
HTML5 添加了很多语义元素,常用的有:
- < header > 定义了文档的头部区域
- < footer > 定义 section 或 document 的页脚。
- < mark > 定义带有记号的文本。
- < nav > 定义导航链接的部分。
- < progress > 定义任何类型的任务的进度。
- < section > 定义文档中的节(section、区段)。
- < time > 定义日期或时间。
2. Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
3. 表单元素
- < datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
- < keygen> 规定用于表单的密钥对生成器字段。
- < output> 定义不同类型的输出,比如脚本的输出。
4. 表单属性
HTML5 的 和 标签添加了几个新属性.
- < form> 新属性:
autocomplete、novalidate - < input> 新属性:
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step
3. 绘图元素
- < canvas > 画布
canvas本身没有绘图能力,可以通过js等脚本语言控制画图。 - < svg > 可缩放矢量图形
iconfont里面的Symbol 引用就是用了svg绘画。
相比添加 img 来说,svg 类似矢量图,缩放不会模糊而且可以设置颜色。 - 使用 CSS3 2D 转换、CSS3 3D 转换。
4. 多媒体元素
- < audio > 定义音频内容。
- < video >定义视频(video 或者 movie)。
- < source> 定义多媒体资源 < video> 和 < audio>
- < embed> 定义嵌入的内容,比如插件。
- < track> 为诸如 < video> 和 < audio> 元素之类的媒介规定外部文本轨道。
— 已移除元素 —
以下的 HTML 4.01 元素在HTML5中已经被删除:
- < acronym >
- < applet >
- < basefont >
- < big >
- < center >
- < dir >
- < font >
- < frame >
- < frameset >
- < noframes >
- < strike >
— 新功能 —
1.完全支持CSS3
html5使用css3有很多新的功能和效果,这里先放个目录,具体的在下篇详细说明。
- 新选择器
- 新属性
- 动画
- 2D/3D 转换
- 圆角
- 阴影效果
- 可下载的字体
2. 拖放
- 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
<img draggable="true">
- 为了使元素可拖动,把 draggable 属性设置为 true
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover
进行放置 - ondrop
3. 地理定位
- HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position){
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
4. 本地存储
- sessionStorage—客户端数据存储,只能维持在当前会话范围内。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。 - localStorage—客户端数据存储,能维持在多个会话范围内。
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
— 其他新特性(持更)—
- HTML5 离线Web应用(应用程序缓存)
- Manifest 文件
- HTML5 Web Workers
- HTML5 SSE
- HTML5 WebSocket
- 本地 SQL 数据
- Web 应用
- 服务端事件推送事件