照着入门文档抄了一段 canvas 的代码，保存成 html 双击打开，页面一片空白，控制台红字报错说找不到元素。不是代码抄错，是执行顺序的问题。

H5 这个说法指什么

H5 一般指 HTML5，也就是第五版超文本标记语言，配套的还有 CSS3 和 JavaScript。国内语境里 H5 还常被用来指手机端的活动页、宣传页，两者说的不是一回事，看上下文。

入门文档站比如常见的菜鸟教程一类，把标签、属性、示例代码按条目列出来，适合查语法、看最小示例，遇到不认识的标签翻一下很快。这类站点把知识点拆得碎，学完一章往往还是串不起来。看的时候顺手在本地建个文件跑一遍，比读完就关掉管用。

入门站适合查，不适合当唯一来源

这类站点的示例偏短，覆盖的是单个知识点，缺少边界情况和兼容性说明。想搞清一个属性在哪些浏览器可用，得去查权威的兼容性表格。

  • 语法和示例：入门站够用，复制下来改一改就能跑。
  • 标准细节：以 W3C 或者 MDN 这类规范文档为准，属性取值和默认行为写得清楚。
  • 兼容性：查主流的兼容表，别拿十年前的写法套现在的需求。

本地跑不起来的常见原因

直接双击打开是 file 协议，很多功能受限制：读取本地文件会被跨域策略挡掉，部分接口要求安全上下文，模块化脚本也会报错。起一个本地服务器，用 http 访问，问题基本消失。脚本写在 head 里，执行时 DOM 还没解析完，取元素自然拿不到，把 script 放到 body 末尾，或者用 DOMContentLoaded 包起来，都能解决。控制台第一行红字往往就是原因，报错里的行号和文件名要一起看，只扫最后一句常常找错方向。

学 H5 更有效的顺序

先把语义标签和表单控件过一遍，再做布局，flex 和 grid 能解决大部分排版。之后是事件、DOM 操作，然后是 canvas、音视频、本地存储这些 H5 特有的部分。每一块都配一个能跑的小页面，比只看文档记得住。每做完一块给自己加个小需求，比如加个按钮、换个颜色，练的是改代码的手感。

文档只是起点，能独立把一个页面做出来、在手机和电脑上都正常显示，才算真的入门。入门阶段不用纠结框架，原生写法跑通了，再学什么都快。