Html 5的新特性

阅读目录

1. 新增语义化标签
2. 新增媒体元素
3. 本地存储方式localStorage与sessionStorage
4. 增强的表单控件
5. Canvas

 

---

回到顶部

新增语义化标签

　　在Html5之前，我们习惯使用<div>元素来作为一个通用的容器，而<div>是HTML文档分区元素，本身是没有语义的。Html5新增了大量语义化标签，如<header>表示页眉，<nav>表示导航区，<aside>定义文档主内容之外的内容（像侧边栏之类的）等等。

 

优点：

• 提升页面的阅读性，在样式丢失时可以让页面呈现出清晰的结构；
• 有利于搜索引擎优化（SEO），可以根据标签来确定上下文及关键字的权重；
• 方便屏幕阅读器解析；
• 有助于代码的开发和维护

 

回到顶部

新增媒体元素

　　<audio>元素用于在文档中嵌入音频内容，<video>用于在文档中嵌入媒体播放器。它们有提供默认的控件给用户，来对音频或视频进行操作。

 

回到顶部

本地存储方式localStorage与sessionStorage

 

回到顶部

增强的表单控件

　　为<input>元素新增了更多其他类型的控件，如type = date 表示该<input>是输入日期的控件，type=range使<input>元素呈现出一个调整范围值的控件等等。

 

回到顶部

Canvas

　　Canvas API提供了一个通过JavaScript和HTML的<canvas>元素来绘制图形的方式，主要用于2D图形的绘制。通过在一个canvas上结合<video>元素功能，可以实现实时操作视频数据来合成各种视觉特效呈现到画面中。