|
打开W3Schools的教学HTML教程页面，右侧的网站“Try it Yourself”按钮被点击了上亿次。这个数字背后藏着一个事实：学HTML的教学人最需要的不是看代码，而是网站改代码。你盯着屏幕读十遍` `标签的教学用法，不如亲手把一段文字塞进` `和` `之间，网站然后刷新浏览器看它变成独立段落。教学 我见过太多教学网站把HTML讲成了词典。网站左边是教学标签列表，右边是网站属性说明，中间夹着几句不痛不痒的教学解释。这种结构对查阅有用，网站对学习几乎无效。教学真正管用的网站教学网站，页面本身就该是教学活的。比如MDN Web Docs，你点开任何一个元素页面，顶部永远有一个可交互的示例框——不是截图，是真实运行的代码。你改一个属性值，下面的渲染结果立刻跟着变。这种即时反馈把“学习”变成了“实验”。 HTML教学网站的内容编排有个陷阱：按字母顺序排列标签。``排在最前面，``排在中间，` `根本不存在。初学者打开这样的目录，第一眼看到的是缩写标签，第二眼看到的是地址标签，第三眼就关掉了。合理的顺序应该按使用频率和认知难度来。先讲标题``到``，再讲段落``，然后是链接``和图片`![]() `。这四个东西能搭出一个完整的静态页面，学习者立刻有了“我做出了东西”的感觉。 代码高亮是个细节，但很要命。有些网站把HTML代码染成一片蓝色，标签、属性、属性值全一个颜色。读起来像看天书。好的高亮应该区分标签名、属性名、属性值和文本内容。VS Code默认主题做得不错，教学网站直接嵌入CodeMirror或者Prism.js就能达到类似效果。颜色一分开，眼睛就能快速定位到关键部分，理解速度至少快一倍。 练习环节的设计最能看出一个教学网站的水平。低级的做法是给一道题，下面一个输入框，提交后告诉你对错。高级的做法是给一个半成品页面，让你补全缺失的标签，补完后页面立刻渲染出来。比如给一个没有` `包裹的`- `列表，浏览器显示成一堆没有圆点的文字。你加上`
`标签，刷新，圆点出现了。这种“破坏-修复”的练习比填空题有意思得多，也记得牢。 移动端适配这件事，HTML教学网站自己经常做不好。代码块在手机上横向溢出，示例页面在窄屏下挤成一团。教别人写响应式布局的网站，自己的布局先崩了，这很讽刺。解决办法不复杂：代码块加`overflow-x: auto`，示例用` | 