首页 前端知识 【html5】01-了解HTML5

【html5】01-了解HTML5

2024-10-27 22:10:34 前端知识 前端哥 602 431 我要收藏

引言 

 ☞HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!!!

   例如: video 标签和 audio 及 canvas 标记

 ☞ 新特性

         1. 取消了过时的显示效果标记  <font></font> 和 <center></center> ...

  • HTML5不再支持这些旧有的用于直接设置样式和布局的标签,因为它们是表示性(presentational)的,而非语义性(semantic)的。在HTML5中,推荐使用CSS来控制页面元素的样式和布局。

         2. 新表单元素引入 

  • HTML5引入了一系列新的表单输入类型,如emailurlnumberrangedatetimedatetime-localmonthweeksearchcolortel等。这些新类型增强了表单的验证能力,提高了用户体验。
  • 应用场景:在创建注册、搜索或用户输入表单时,可以使用这些新类型的输入字段来增强表单的验证功能,减少用户输入错误。

         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端浏览器(低版本)支持不是特别友好,造成用户体验不佳

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19245.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!