引言
☞HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!!!
例如: video 标签和 audio 及 canvas 标记
☞ 新特性
1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ...
- HTML5不再支持这些旧有的用于直接设置样式和布局的标签,因为它们是表示性(presentational)的,而非语义性(semantic)的。在HTML5中,推荐使用CSS来控制页面元素的样式和布局。
2. 新表单元素引入
- HTML5引入了一系列新的表单输入类型,如
url
、number
、range
、date
、time
、datetime-local
、month
、week
、search
、color
和tel
等。这些新类型增强了表单的验证能力,提高了用户体验。- 应用场景:在创建注册、搜索或用户输入表单时,可以使用这些新类型的输入字段来增强表单的验证功能,减少用户输入错误。
3. 新语义标签的引入
- HTML5增加了许多新的语义化标签,如
<header>
、<footer>
、<article>
、<section>
、<nav>
、<aside>
、<figure>
和<figcaption>
等。这些标签为页面内容提供了更明确的语义结构,有助于搜索引擎理解页面内容,提高页面的可访问性和SEO效果。- 应用场景:在构建复杂的网页布局时,可以使用这些新标签来划分页面结构,提高页面的可读性和可维护性。
4. canvas标签(图形设计)
<canvas>
标签允许在HTML页面上通过JavaScript绘制图形、图像和动画。这使得网页上的图形设计变得更加灵活和动态。- 应用场景:游戏开发、动态图表、交互式图像和动画效果等都可以使用
<canvas>
标签来实现。
5. 本地数据库(本地存储)
- HTML5提供了Web Storage API(包括localStorage和sessionStorage)用于在用户的浏览器上存储数据。这些数据是持久化的,可以跨多个页面和会话进行访问。
- 应用场景:存储用户偏好、缓存数据以减少服务器请求、实现离线应用等
6. 一些API
- Geolocation API:用于获取用户的地理位置信息。应用场景包括基于位置的搜索、地图应用、天气应用等。
- Drag and Drop API:允许用户通过拖放操作来重新排序或移动页面上的元素。应用场景包括在线文档编辑器、任务管理工具等。
- Web Audio API:用于在网页上处理音频数据,包括播放、录制和分析音频。应用场景包括音乐播放器、声音效果编辑器、语音识别等。
- Web Workers API:允许在浏览器后台线程中运行JavaScript代码,以提高页面性能。应用场景包括处理大量数据、执行复杂的计算任务等。
- Server-Sent Events:允许服务器向客户端推送实时更新。应用场景包括实时聊天、股票行情更新、新闻推送等。
☞ 好处
1. 跨平台
例如:比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。
☞ 缺点
1. pc端浏览器(低版本)支持不是特别友好,造成用户体验不佳