HTML5是HTML第五版，整合语义化标签、原生音视频、Canvas绘图及localStorage/sessionStorage存储。1、语义标签如<header><nav><main><article><section>提升结构与可访问性；2、<audio><video>支持免插件多媒体，含<source><track>；3、<canvas>配合JS实现2D绘图；4、localStorage持久存储，sessionStorage限会话期。
一、HTML5的定义与定位
HTML5是超文本标记语言（HTML）的第五个主要版本，它不仅扩展了原有HTML4的语法规范，更整合了语义化标签、原生多媒体支持、离线存储、绘图API及设备访问能力等新特性。它并非单一标准，而是由W3C与WHATWG协同推进的一系列开放Web技术集合。
二、语义化标签体系
HTML5引入了具备明确含义的结构化元素，替代传统中大量使用的
1、使用<header>包裹页面或区块的标题区域，如网站顶部导航栏。
2、用<nav>标注主导航链接集合，仅用于主要导航上下文。
立即学习“前端免费学习笔记（深入）”；
3、以<main>标识文档中唯一的核心内容区域，每个页面有且仅有一个。
4、采用<article>封装可独立分发的内容单元，例如博客文章或新闻条目。
5、使用<section>划分具有主题关联的内容组，需配合标题（如<h2>）体现层级。
三、原生多媒体支持
HTML5取消对Flash等插件的依赖，通过<audio>与<video>标签直接嵌入音视频资源，并提供内置控制接口。
1、插入音频：<audio controls src="sound.mp3"></audio>，其中controls属性启用播放控件。
2、嵌入视频并设置尺寸：<video width="640" height="360" controls src="movie.mp4"></video>。
3、为不同格式提供备选源：在<video>内嵌套多个<source>标签，浏览器按顺序选择首个兼容格式。
4、添加<track>元素实现字幕支持，kind="subtitles"且srclang属性必须指定语言代码。
四、Canvas绘图基础
<canvas>提供一块位图画布，开发者可通过JavaScript获取2D渲染上下文，在其上动态绘制图形、动画与交互界面。
1、在HTML中声明画布：<canvas id="myCanvas" width="400" height="300"></canvas>。
2、使用document.getElementById获取DOM节点，再调用getContext('2d')获得绘图环境对象。
3、调用beginPath()开始路径，moveTo()设定起点，lineTo()绘制直线，stroke()描边显示。
4、填充矩形时使用fillRect(x, y, width, height)，坐标原点位于画布左上角，x向右递增，y向下递增。
五、本地存储机制
HTML5提供localStorage与sessionStorage两种客户端存储方案，均以键值对形式保存字符串数据，规避Cookie大小与传输限制。
1、写入数据：localStorage.setItem('username', 'Alice')，数据在关闭浏览器后仍持久保留。
2、读取数据：const name = localStorage.getItem('username')，返回对应键的字符串值或null。
3、删除单项：localStorage.removeItem('username')；清空全部：localStorage.clear()。
4、sessionStorage行为类似，但仅在当前会话周期有效，关闭标签页即自动清除所有数据。
