移动端专题页、小程序内嵌页面、后台管理系统和数据可视化大屏等不同的表现形式所采用的技术都是一样的——HTML5，它是整个系统的基础。标签结构决定了整个页面的框架是否合理，并且使搜索引擎更容易地理解其中的内容。直接学习框架的话就会出现很多的问题了，例如可以使用组件但是不能抄袭文档，在遇到兼容性问题或者布局塌陷时就会束手无策。一条清晰的HTML5学习路线可以节省大量的试错时间。
下面的HTML5的学习路径是根据“能够产生结果”的原则来划分的，在每个阶段结束时都会有一个具体的成果，并且在完成之后就可以用来验证了。
刚开始就要确保网站的基本结构稳定
HTML5入门阶段的主要知识点是“语义”，并不需要记住所有的标签。
一个标准的HTML文档会以<!DOCTYPE html>作为开头，在头部会写明字符集、视口、标题以及描述等信息，在主体部分则用header、nav、main、article、aside、footer等标签来分隔出有含义的段落。尽管可以使用大量的div元素把网页拼接在一起，但是屏幕阅读器并不能识别其中的内容，搜索引擎也不能找到重要的信息，在进行后续修改时还会遇到很多麻烦。
HTML5 增加了很多有用的功能：表单中 email、url、date、range、color 等等输入类型自带校验以及原生的控件；audio、video 让音视频不再受制于插件；canvas 可以画像素级图像；figure、time、mark、details 等标签使内容表达更精准。
生产出来的东西应该是这样的：用文字写一份简历，并且所有信息都用语义标签进行标注，在简历里加一个可以验证的注册表格和一个音频或视频文件，最后要确保整张网页都能通过浏览器的右键菜单选择“查看源代码”来查看它的代码。
样式与布局：使用CSS3以及响应式设计
等到HTML5的页面结构搭建完成之后再去处理风格的问题吧。
盒子模型、选择器优先级、文档流以及定位等都是导致各种布局问题的原因之一，所以要一直去研究它们。之后再重点学习两种现代化的布局方法：Flex用来处理一维排列问题，Grid用来解决二维网格问题，并且两者结合起来可以满足大多数页面的布局需求。
响应式不仅仅是简单的媒体查询，还包括视口单位vw、rem适配方案、clamp()流式字号、picture元素配合srcset实现图片自适应等等细节，这些都会影响到页面在折叠屏或者老款安卓手机上的显示效果。动画方面用transition来做简单的过渡效果，用transform和opacity来做合成层的效果不会引起重排，性能要好得多。
产生的结果是把上一版中简历页面改成可以适配三种不同的设备（桌面、平板电脑以及手机）的形式，并且只用CSS来完成它，不需要用到任何的界面框架。
交互能力：用Javascript与DOM
HTML5把原来用于展示的页面变成了可以使用的页面，这就是它的作用所在。
在掌握了DOM查询、事件绑定与冒泡、事件委托、节点增删改查等基础知识之后，再深入学习ES6+的相关语法：解构赋值、模板字符串、箭头函数、Promise、async/await以及模块化import/export，并且用Fetch和try...catch的方式来进行网络请求的各种情况处理。
调试能力也要加以培养，在控制台里设置断点、查看网络请求和进行性能分析等工具的使用情况会直接影响问题解决的速度。
待办事项是建立一个可以增删改查的任务清单，并且能存到本地、批量执行、用关键词筛选，在重新加载页面后仍然保留之前的信息。
核心API是HTML5所特有的功能
很多人学完前三章之后就会觉得自己已经学会了HTML5，但是拉开距离的是后面这些内容。
依托于Canvas不仅能对图像进行像素级的操作，还能绘制出各种各样的图表，甚至还能开发一些简单的小游戏，而SVG就更适合用来制作一些比较复杂的图标、可伸缩的图形或者带有事件的响应的设计等。但从存储的角度来讲，localStorage更适合作为轻量级的配置信息的存储器，而sessionStorage的数据则随着页面的关闭而消失；而当我们需要大规模的结构化的数据的存储时，IndexedDB就成为了最好的选择了。依托于对WebSocket和EventSource的巧妙结合，我们不仅可以实现实时的聊天功能，还可以更好的实现实时的推送等一系列的高交互的应用。尤其是对EventSource的接收服务器发出的单向数据流的支持，进一步的丰富了我们的前端开发的可能。
另外一些不太起眼的地方有：地理定位（Geolocation）、把耗时的计算放到独立的线程里去执行（Web Worker）、没有刷新页面也能切换路由（History API）、拖拽上传文件（Drag and Drop）、懒加载和曝光统计（IntersectionObserver）、保证动画流畅度（requestAnimationFrame）。
得到的结果是：用Canvas画出了折线图、支持鼠标悬停显示数据、带进度条的地方用于上传文件，并且把断点信息存入了IndexedDB里。
工程化就是从单个文件发展到整个项目的过程
用手写的方法制作出一个.html文件之后就到此为止了，在HTML5项目里之后要做的事情就是真正的团队协作了。
版本控制系统用Git，分支管理以及提交信息的规定要尽快养成习惯；包管理器选用npm或pnpm，构建工具优先选择Vite，因为它的启动速度快、配置简单；样式预处理可以用Sass或者Less，代码规范则由ESLint和Prettier负责。
按照框架的方式去选择的话，在Vue和React当中选一个深入学习，并且把组件通信、状态管理、路由、生命周期这些基本的概念搞清楚之后再考虑生态系统的难题。另外学一下TypeScript也是一个不错的选择，在代码重构或者团队协作的时候它的优点非常突出。
输出结果建议：将原来的任务清单用框架的方式重新整理好，并且添加上路由、状态管理和ESLint配置以及上传至免费的静态网站托管服务之后获得一个可访问的网址。
通过对响应式的企业网站的多方面的优化如对其多页面的精美的排版、对其在搜索引擎中的优化的元数据的设置、以及对其骨架的屏幕的设计以及对其的滚动的动画等等的优化都可以大大的提升企业的网站的结构和性能.。
数据可视化大屏：采用Canvas或者ECharts的方式制作，并通过WebSocket来实现实时刷新、自适应缩放的效果，同时锻炼自己的绘图能力和通信技能。
移动端H5专题页面：使用手势来操作页面、对长图片进行优化、保证首屏能够迅速加载出来、为分享按钮添加样式等，提高手机端的兼容性。
依托于对Service Worker的缓存策略的巧妙利用，PWA的离线应用不仅可以实现出色的离线访问的体验，还能被完美的添加到我们的桌面图标中，从而更深的锻炼了我们对存储与网络的理解。
做完这四项工作后，HTML5整个流程都通了，并且还有一份可以用来展示的简历作品。
经常犯的错误
只观看视频而不进行编程就是浪费时间；把标签说明书当作背诵的内容来对待比记住常用的二十条并且学会查阅文档要好得多；在手机上用浏览器缩放窗口的方法来代替真实的键盘输入、安全区以及字体大小调节等等；还没学到框架就去研究源代码，性价比不高；不考虑无障碍性和语义化，尽管页面可以浏览但是用起来很不方便。
标准的时间分配
如果按每天两个小时计算的话，HTML5入门阶段大约需要一到两周的时间，样式布局大约需要两到三周左右的时间，JavaScript大约需要四到六周左右的时间，核心API大约需要三到四周左右的时间，工程化和框架大约需要两个月到三个月左右的时间，在实际项目中穿插进行。快慢并不是最重要的事情，在每个阶段都能得到成果才是最关键的。
不管技术栈更新得有多快，浏览器解析出来的结果都是这个文档的结构。打好HTML5基础之后就可以更换更多的框架了，但是学习的成本却越来越低了。路线图的目的在于打勾而不是按部就班地做某件事情，在每个阶段都做出符合自己能力的作品来证明自己进步的过程才是最正确的做法。