JS速通Day 5：用一天补好HTML结构课，让DOM操作从根上顺了

前几天梳理JS速通路线的时候，我把第5天安排得有点反常规——没有继续往前啃函数、对象，而是掉头回来，把HTML认认真真补齐了一天。原因是最近刷到不少提问，比如“html文件无法预览”“html基本标签到底要记多少”“html里怎么引js”，大家表面问的是标签和报错，底层卡住的其实是同一个东西：对HTML这门“结构语言”的理解太悬浮，标签和语法全凭记忆，没有落到浏览器实际解析的层面。Day 5这一天，我把HTML和JS的关系重新过了一遍，顺便用js的DOM操作把一个静态的自我介绍页改成能点击、能校验、能回顶的动态页面。

如果你已经开始背JS语法，或者照着教程写了几个页面但总在细节上报错，这篇Day 5的记录应该能帮你省不少事。我会把当天验证过的骨架写法、标签的组织方法、表单处理流程和几个真实的踩坑经过都摊开讲，代码都是自己敲过能跑的，你照着试就行。

1. 把第5天留给HTML：一个JS速通计划里的“地基日”

1.1 为什么速通不能跳过标签

不止一个朋友跟我说，现在框架和工具这么成熟，JSX、Vue模板、小程序WXML都能直接写界面，为什么还要花时间抠HTML？这句话对了一半。工具确实帮你省了手动创建节点的体力活，但你写的JSX最后还是要编译成HTML结构，Vue的template本身就是HTML的超集，就算你用createElement创建节点，也得遵循DOM树那一套规则。

换句话说，HTML不是“页面描述文件”这么简单，它是一棵树的源语言。JS要做的所有事情——查找元素、修改内容、绑定事件——都是在这棵树上操作。你连树长什么样、每个节点有哪些属性、表单提交时数据用什么格式传给后端都不清楚，写JS就会变成“照着记忆打API，报错就看不懂为什么”。

所以我把“HTML Learn Data Day 5”定义为地基日，这一天不做网络请求，不碰复杂逻辑，只做三件事：把HTML骨架里的每个组成讲明白，把常用标签按用途归类，用JS在真实页面里改DOM做交互。地基稳不稳，后面写业务代码时马上能感觉到。

1.2 HTML的学习主线：不是背语法，而是搭骨架

初学者最容易掉进去的坑，是把HTML当单词书背。h1是标题、p是段落、img是图片……背完就忘，忘了再背。我个人的经验是：HTML标签从来不需要单独记忆，它们应该分成几组理解，每一组对应一个“功能块”。

第一组是文本块，作用是表达“一段内容是什么”，包括标题、段落、强调、引用。第二组是结构化容器，作用是表达“页面分成了哪些区域”，包括页头、导航、主体、侧栏、页脚。第三组是资源与交互标签，包括图片、链接、音频视频、表单控件。每组标签解决一类问题，你在写页面时是在做选择题：当前这个内容属于哪种身份？选择对应的标签即可。

这个思路让我复习效率高很多。后面第5天整个上午我就在整理标签的分类关系，整理完再去看那些所谓“HTML大全”就发现没必要逐条背，常用的几十个标签足够覆盖绝大多数页面需求。

2. 页面骨架里那些“复制粘贴”的代码：DOCTYPE、meta与编码的真相

网页搜索热词里，有一类高频片段是<!doctype html><html lang="zh-cn">带head带meta charset的整段模板。大家日常打开编辑器生成页面就是这个模样，但很多人不清楚每行存在的意义，于是代码在别人电脑上正常，到自己手里就出“html文件无法预览”“中文变乱码”“样式失效”这种怪问题。

2.1 第一行DOCTYPE到底有没有用

<!doctype html>不是标签，它是文档类型声明，作用是告诉浏览器：请按现代标准模式解析这份HTML，不要退回IE时代的怪异模式。虽然现在浏览器默认行为越来越标准，但少了这一行，部分CSS属性和盒子模型会表现出让你抓狂的差异。

其实有一个很直观的检测方法：把DOCTYPE删掉刷新页面，大概率发现margin、padding和宽高计算变得“不准”。遇到布局和预想不一致时，先检查文件第一行是不是<!doctype html>，这个细节帮我排除过不少莫名其妙的样式问题。

2.2 head里面的meta设置，每一条都要心里有数

以最简单的页面为例：

html复制<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day 5 练习页</title>
  <meta name="description" content="用于记录JS速通Day 5的HTML练习">
</head>

meta charset="UTF-8"是文件编码声明。现在绝大多数编辑器默认保存为UTF-8，这里也写UTF-8，两边就对上了。如果HTML文件里没有这一行，或者声明的是gb2312而文件实际是UTF-8，浏览器尝试按错误编码解码，中文全变“锟斤拷”。很多网上问的“中文乱码”，八成是编码声明和文件真实编码不一致。

html lang="zh-CN"告诉浏览器和搜索引擎这个页面的主要语言是简体中文。它不影响渲染，但影响屏幕阅读器的发音、浏览器翻译建议、以及搜索引擎对内容的识别。这个属性顺手一写，不用有心理负担。

meta name="viewport"是移动端适配的开关，不写的话手机浏览器会用默认980px宽度渲染再缩放