HTML5 与 HTML4 的主要区别是什么？列举一些 HTML5 的新特。这是一道常见的HTML面试题，下面，咱们就来详细聊聊这些内容。

一、推荐答案

和HTML4相比，HTML5的主要区别体现在多个方面：

  1. 语义化标签强化：HTML5引入了像<header>、<nav>、<article>、<aside>、<footer>、<section>这类语义化标签。借助这些标签，网页结构变得更加清晰直观，搜索引擎能更好地理解网页内容，也方便了那些需要借助辅助工具访问网页的用户。反观HTML4，划分页面结构主要靠<div>标签 。
  2. 多媒体支持升级：HTML5自带<audio>和<video>标签，这就意味着无需依赖Flash等插件，就能直接在网页上播放音频和视频，极大地提升了用户体验。但在HTML4时代，要实现音视频播放，就得借助插件或者第三方库。
  3. Canvas绘图功能：HTML5的<canvas>标签非常强大，配合JavaScript，它能实现动态绘制2D图形的功能。这一特性可不得了，游戏制作、图表绘制、动画设计等都能靠它实现。而HTML4并不具备原生的绘图能力。
  4. 本地存储优化：HTML5提供了localStorage和sessionStorage用于客户端数据存储。这两个新特性完美弥补了HTML4中Cookie的短板，不仅提升了性能，存储容量也大大增加。
  5. Web Workers多线程支持：HTML5的Web Workers允许JavaScript代码在后台线程运行。这就避免了主线程被阻塞的情况，网页的性能和响应速度都得到了显著提升。在HTML4中，JavaScript代码只能在主线程执行。
  6. 表单功能拓展：HTML5新增了不少表单类型，比如email、tel、date、range等，还添加了required、placeholder、autocomplete等表单属性。这些新内容简化了表单验证的流程，让用户交互更加便捷。
  7. 地理定位功能：HTML5的Geolocation API可以获取用户的地理位置信息，为网页开发增添了更多可能性。
  8. 拖放功能增强：HTML5提供的拖放API，让在网页中实现元素拖放操作变得轻松简单。

二、本题详细解读

HTML5的诞生，在Web技术发展进程中具有重要意义。它在HTML4的基础上进行了大量改进和拓展，目的就是为了提升网页的语义化程度、性能表现、用户体验以及可访问性。下面详细介绍HTML5的这些新特性：

  1. 语义化标签：在HTML4中，开发人员主要用<div>和<span>来划分页面结构。但这种方式使得代码的语义不够明确，对搜索引擎优化（SEO）和无障碍访问不太友好。而HTML5引入的语义化标签就解决了这个问题：
    • <header>：用于定义文档的头部区域，通常会包含导航栏或者标题等内容。
    • <nav>：专门用来定义导航链接的容器，让页面导航结构更加清晰。
    • <article>：用来定义独立的文章内容，便于搜索引擎和辅助工具识别。
    • <aside>：定义与页面主要内容相关的侧边栏内容，丰富页面布局。
    • <footer>：定义文档的页脚部分，一般包含版权信息、联系方式等。
    • <section>：用于定义文档中的一个特定区域或部分，通常带有标题，方便组织和管理内容。
      这些语义化标签让HTML代码结构一目了然，无论是开发人员维护代码，还是辅助工具解析内容，都变得更加轻松。
  2. 多媒体支持：在HTML4时代，要在网页中播放音频和视频，必须依赖Flash或其他插件。这不仅会增加页面的加载时间，而且用户还可能需要额外安装插件，十分不便。HTML5引入的<audio>和<video>标签，实现了原生的音频和视频播放支持，并且结合JavaScript，还能实现更灵活的播放控制。
  3. Canvas绘图：HTML5的<canvas>标签就像是一个画布，开发人员可以利用JavaScript在这个画布上绘制各种2D图形。通过它，能实现绚丽的动画效果、直观的数据可视化展示，甚至开发在线游戏，极大地丰富了网页的视觉效果。
  4. 本地存储：HTML5的localStorage和sessionStorage为客户端数据存储带来了新的解决方案。localStorage用于持久化存储数据，数据不会自动过期；sessionStorage则用于会话期间的存储，浏览器关闭后数据就会被清除。这两种存储方式在容量上比Cookie大得多，访问速度也更快，有效弥补了Cookie的不足。
  5. Web Workers：Web Workers允许JavaScript代码在后台线程运行，避免了因代码执行时间过长而阻塞主线程的问题。当处理大数据计算等耗时操作时，Web Workers就能发挥大作用，显著提升页面的响应速度和整体性能。
  6. 新的表单控件和属性：HTML5新增的表单类型和属性，给表单开发带来了诸多便利：
    • email：专门的邮箱输入框，会自动验证输入的邮箱格式是否正确。
    • tel：电话号码输入框，在移动端使用时会自动弹出电话键盘，方便用户输入。
    • date：日期选择器，让用户选择日期更加便捷。
    • range：范围选择器，适用于需要选择一个数值范围的场景。
    • required：将输入框设置为必填项，确保用户输入相关信息。
    • placeholder：可以设置输入框的占位符，提示用户输入内容。
    • autocomplete：用于设置是否启用自动完成功能，提高用户输入效率。
      这些新特性简化了表单的创建和验证过程，大大提升了用户体验。
  7. 地理定位：HTML5的Geolocation API让网页具备了获取用户地理位置信息的能力。基于这个功能，可以开发地图定位、基于位置的服务等丰富多样的应用。
  8. 拖放功能：HTML5的拖放API降低了在网页中实现元素拖放操作的难度。利用这个API，像文件上传、列表排序这类功能的实现变得更加简单高效。