注：带* 部分均为个人思考、分析及补充的原创部分。
*在观看字节相关课程时因为基础薄弱以及英语水平不高的原因自行补充了很多内容便于学习。
01 HTML5简介
*HTML5简称H5，它是Web中核心语言HTML的规范。HTML的历史版本已经有1.0、2.0、3.0、4.0到现在5.0五个版本。
*HTML5的新特性主要有智能表单、绘图画布、多媒体、地理定位、数据存储、多线程。新元素包括canvas 、多媒体标签、表单、语义和结构、已移除元素。
*就个人来说，HTML5是HTML发展到现在最新的一个版本，之前我自己所学习所使用的应该也都是HTML5，因为像多媒体之类的是经常涉及的。
02 HTML5存储
课程中提到了三种HTML5的存储方式，分别是Cookies、Local Storage、Session Storage。因为是纯英且涉及到版权问题，以下结合课程内容进行自主补充。
*cookie其实就是一些数据信息，类型为“小型文本文件”，存储于电脑上的文本文件中。Cookie和session的区别就是cookie是存储在客户端的，session是在服务端存储的。
| Cookie | Session |
|---|---|
| 保存在浏览器中，保存的数据是string，可以长期存储在浏览器中，与会话无关，保存不重要的信息 | 保存在服务器中，保存的数据是object，会随着会话的结束而销毁，保存重要的信息 |
| Session Storage | Local Storage |
|---|---|
| (关闭浏览器时即清除)临时性 | （手动清除）长期性 |
图源csdn
03 HTML5 语义化标签
何谓语义化标签？类似于 p，span，img 等这样的，看见标签就知道里面应该保存的是什么内容的是语义化标签，而像 div 这样的里面可以装任意东西的就是非语义化标签。
*HTML5部分新增的标签
| 结构标签 | |
|---|---|
| Header | 一个区块的头部信息 / 标题 |
| footer | 一个区块的底部信息 |
| section | 一个通用独立章节或者区域。一般来说会包含一个标题 |
| article | 一块独立区块，表示一块相对比较独立的内容 |
| aside | 一个和主体内容几乎无关的部分，可以被单独的拆分出来而不会使整体受影响。 |
| nav | 导航栏区域 |
04 HTML5 SVG & Canvas
课程里从以下六个方面来介绍SVG & Canvas，如表所示。
| SVG | Canvas | |
|---|---|---|
| Definition | 一种基于XML的标记语言，用于描述二维矢量图形。 | 一个HTML5元素，用于在网页上绘制图形的技术。 |
| Format | 矢量图像格式 | 位图图像格式 |
| Flexible | 更灵活，可以无损地放大和缩小而不会失真 | 图形是像素化的，因此放大会导致失真。 |
| Event Handles | 可以为事件处理提供任何支持 | 不支持事件处理程序 |
| Gaming | 不适合 | 适合 |
| Program | Draw | paint |
*如果需要创建具有可伸缩性和互动性的图形，例如数据可视化图表或交互式地图，SVG 是一个不错的选择。如果需要进行复杂的绘图操作或实现实时动画，Canvas 可能更适合。
*很多初入门的同学，对于HTML的认知可能更多局限于标签，而今天的课程，介绍了HTML5存储、语义化标签、绘制图形的技术，能扩展加深我们对于HTML的认知。
