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

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

lixiyuan198887·2026-09-04·阅读 22 GEO检测（免费）

HTMLDOMJavaScript

|难度：普通|阅读约 30 分钟

前几天梳理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大全”就发现没必要逐条背，常用的几十个标签足够覆盖绝大多数页面需求。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

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宽度渲染再缩放，字小到看不清。我之前图省事漏掉过它，结果在手机上打开页面，字小得离谱。第一次做网页的同学，建议把上面这个骨架当作固定起点。

2.3 一套可以直接抄的标准骨架

我第5天反复默写过几次，最后固定在编辑器里的新文件模板是这样的：

html复制<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题 - 简短描述</title>
  <meta name="description" content="不超过150字的页面摘要">
</head>
<body>
  <!-- 页面内容写在这里 -->
</body>
</html>

写注释是个好习惯，尤其对新手，里的内容不会显示在页面上，是留给你自己的地图。有了标准骨架后，再遇到“html文件无法预览”这类问题，就能按层次排查：先看文件扩展名是否是.html，再看头部有没有完整骨架，再看浏览器地址栏的路径是否指向了正确文件。大多数“预览失败”其实不是代码问题，是文件问题。

3. 标签分类记忆法：把零散标签按“内容身份”串起来

3.1 文本内容：标题、段落、强调，讲清楚一件小事

一篇文章的文本内容，在HTML里可以拆成标题层级、段落、强调三个维度。标题用h1到h6表示，h1通常是页面主标题，一页最好只有一个；h2是区块标题，就像我这篇文章的各个大章节；h3是子标题。标题层级不要乱跳，比如h1后面直接跟h4，搜索引擎和屏幕阅读器会认为结构缺失。

段落用p包裹，强调文本可以这样处理：

html复制<p>不要只写<strong>重要内容</strong>，还要知道为什么它重要。</p>
<p>斜体文字用<em>强调语气</em>，小字注释可以用<span class="note">备注信息</span>。</p>

strong和em是有语义的，浏览器默认表现为加粗和斜体，但意义并不只是样式，而是告诉辅助技术这里需要被重视。换行要使用<br>，但别用它来做段落间距——段落间距应该交给CSS的margin，这是很多新手排版变乱的原因。

3.2 页面结构：div、span与HTML5语义标签的分工

以前做页面喜欢清一色div套div，看代码满屏<div>不知道谁是谁。HTML5提供了语义结构标签，让页面区域“有名有姓”：顶端是header，底部是footer，主导航用nav，页面主体用main，独立内容块用article，侧边相关推荐用aside。

我当时用“博主自我介绍页”做练习，结构长这样：

html复制<body>
  <header>
    <h1>这是一份Day 5的自我介绍页</h1>
    <nav>
      <a href="#about">关于我</a>
      <a href="#skills">技能</a>
      <a href="#contact">联系我</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>关于我</h2>
      <p>一名正在用项目驱动学习前端的新手。</p>
    </section>

    <section id="skills">
      <h2>技能</h2>
      <ul>
        <li>HTML：基础扎实</li>
        <li>JS：Day 5 学习中</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>© 前端速通笔记</p>
  </footer>
</body>

这样划分之后，整个页面的“骨架感”非常清楚。header、nav、main、section、footer是语义标签，本质是div的“带名字版本”，它们给搜索引擎和阅读器提供了更清晰的页面逻辑。div仍然有用，比如纯粹为了CSS布局而包裹一层容器，但至少要保证：能用语义标签说明身份的内容，就不要用无名div。

3.3 图片、链接和多媒体：学会声明资源，也学会兜底

图片的写法是<img src="图片地址" alt="图片说明">。新手最容易忽略alt，但alt是必须养成的习惯：图片加载失败时，浏览器会显示alt文字；读屏软件会用alt描述图片；搜索引擎也要靠它理解图片内容。

链接用a标签，比如想跳转到外部网站：

html复制<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>

target="_blank"能让链接在新标签页打开，但加上rel="noopener noreferrer"更稳妥，可以避免新页面通过window.opener反向操作原页面，属于写网页的安全习惯。

多媒体方面，音频用audio，视频用video，各自的controls属性可以调出浏览器自带控制条：

html复制<audio src="music.mp3" controls></audio>
<video src="movie.mp4" controls width="480"></video>

新人做练习时本地没有合适的媒体文件，会出现audio/video区域空白。这时不用慌，先确认文件路径和文件格式是否被浏览器支持，再确认浏览器版本。也可以临时用一个网上公开的音频示例地址来测试效果，看到控制条渲染出来，说明代码本身没问题。

4. 表单这一关：从“摆输入框”到“接住提交数据”

热搜里有一类词是“html——表单类的标签”，可见表单在HTML学习中是独立且重要的一环。Day 5下午我专门把表单过了一遍，因为表单是用户输入的前端入口，也是JS最容易派上用场的场景之一。

4.1 表单控件的核心属性，为什么name比id还重要

一个基础搜索表单长这样：

html复制<form id="searchForm">
  <label for="keyword">关键词</label>
  <input type="text" id="keyword" name="keyword" placeholder="输入要搜索的内容">
  <button type="submit">搜索</button>
</form>

input的type决定控件长什么样，比如text是单行文本框，password是密码框，email会有简单的邮箱格式提醒，number在桌面端会带增减按钮。

很多人会问：id和name有什么区别？两者都很重要，但作用不同。id主要给CSS选择器和JS查找元素用，页面内唯一；name是控件提交给服务器时的字段名。传统表单用GET/POST方式提交时，浏览器会把所有带name的表单控件组拼成keyword=xxx&...这样的查询串送给后端。就算你用JS接管提交，FormData读取的也是name，不是id。

所以写表单时我的习惯是：每个需要提交的控件都同时写id和name，id方便前端获取DOM，name保证数据有名字。只写id不写name，刷新时能看到地址栏参数缺一半，数据根本没有字段名，后端接不到完整内容。

4.2 label、fieldset这些“辅助标签”决定表单可用性

<label for="keyword">关键词</label>里这个for不是白写的，它把文字和表单单关联起来。用户点“关键词”三个字，焦点会自动落到对应的输入框。鼠标可点击范围变大，对移动端和残障用户都友好。for的值必须和对应控件的id一致，这点特别容易拼错。

多个相关控件可以用fieldset分组并加legend做标题：

html复制<fieldset>
  <legend>联系方式</legend>
  <p>
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email">
  </p>
  <p>
    <label for="phone">手机号</label>
    <input type="tel" id="phone" name="phone">
  </p>
</fieldset>

下拉框select也和input属性语法有区别：

html复制<select name="level" id="level">
  <option value="beginner">入门</option>
  <option value="intermediate">进阶</option>
</select>

value是实际提交的值，option里的文字是显示给用户看的。它们可以不一样，比如显示“北京”提交的是“beijing”，这在后端处理时更友好。

4.3 用JS接管提交：必填校验和URL格式判断

传统表单提交会刷新页面，现代页面则倾向于用JS拦截submit事件，做前端校验后再交给后端API。这里可以把我Day 5练习的一个例子贴上。需求是：用户输入姓名和邮箱，点提交后，如果姓名为空，提示；如果邮箱格式不对，也提示；都通过则console输出表单数据。

HTML部分：

html复制<form id="registerForm">
  <p>
    <label for="username">姓名</label>
    <input type="text" id="username" name="username" required>
  </p>
  <p>
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email" required>
  </p>
  <button type="submit">注册</button>
</form>

JS部分：

javascript复制const form = document.getElementById('registerForm');

form.addEventListener('submit', function (event) {
  event.preventDefault();

  const username = document.getElementById('username').value.trim();
  const email = document.getElementById('email').value.trim();

  if (username === '') {
    alert('姓名不能为空');
    return;
  }

  if (!isValidEmail(email)) {
    alert('邮箱格式不正确');
    return;
  }

  const formData = new FormData(form);
  console.log('提交的数据：');
  for (const [key, value] of formData.entries()) {
    console.log(key + ' = ' + value);
  }
});

function isValidEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}

event.preventDefault()的作用是把浏览器默认的表单提交行为挡住，页面不会刷新，转由后面的JS逻辑处理。给FormData一传form对象，它会自动收集所有带name的控件，这是刚才强调name重要的直接体现。

正则表达式/^[^\s@]+@[^\s@]+\.[^\s@]+$/是邮箱格式的常用简单校验，要求@前后不能是空白字符，并且@后面的点不能缺。它不能保证邮箱真实存在，但能拦下八成手滑填错的情况。想校验URL格式，可以把正则换掉，用new URL也可以，但要做好try/catch，因为URL构造函数遇到非法字符串会直接抛异常。

5. 让页面“活”起来的第一段脚本：script位置与DOM改动实战

5.1 script标签放哪才对：一次把head、body尾部、defer、async讲明白

HTML引用JS有几种常见做法，很多人还在纠结script到底放head还是body底部。先说结论：在项目里最省心的是把script放在</body>之前，因为浏览器解析HTML是从上往下的，脚本放底部可以保证执行时DOM已经就位。

如果非要放在head里，就会遇到JS执行时下面的元素还没解析出来的问题。这时候如果用getElementById取一个尚未渲染的元素，得到的只能是null。解决办法有两个：一是把代码放进DOMContentLoaded事件回调里，二是给script标签加defer属性。

加defer之后，脚本会等文档解析完成后再按顺序执行：

html复制<!doctype html>
<html lang="zh-CN">
<head>
  <script src="app.js" defer></script>
</head>
<body>
  ...
</body>
</html>

async也可以让脚本不阻塞页面解析，但它不保证执行顺序，更适合独立的第三方统计脚本。普通业务脚本，推荐用defer或直接放到body尾部，两者都行，关键是别因为在head里同步执行而踩“找不到元素”的坑。

5.2 实战：一键返回顶部按钮的完整实现

热搜里有“html一键返回顶部算法”这个词，说明很多人第一次做页面交互时都想做这个功能。这确实是最好的入门案例：涉及滚动监听、元素增删、事件处理和条件判断。

HTML里先放一个按钮：

html复制<button id="backToTop" style="display: none; position: fixed; right: 20px; bottom: 20px;">返回顶部</button>

JS逻辑：

javascript复制const backToTop = document.getElementById('backToTop');

function updateBackToTopVisibility() {
  const scrollY = window.scrollY || document.documentElement.scrollTop;
  if (scrollY > 300) {
    backToTop.style.display = 'block';
  } else {
    backToTop.style.display = 'none';
  }
}

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

window.addEventListener('scroll', updateBackToTopVisibility);
backToTop.addEventListener('click', scrollToTop);

逻辑很直白：页面滚动距离超过300px时显示按钮，否则隐藏；点击按钮调用window.scrollTo平滑滚动到顶部。window.scrollY是页面垂直滚动的距离，老浏览器可能不认识它，所以加了|| document.documentElement.scrollTop做兼容。测试时页面要有足够长的内容才能撑出滚动条，我当时给页面塞了几十行示例文本才看到按钮出现，这也是很多教程没提醒的细节。

这种写法把功能封装进了两个函数，一个负责“按钮显隐”，一个负责“执行回顶”。函数命名的好处是HTML里不用写onclick属性，JS也不用依赖内联事件，代码清清爽爽，日后改动也好找位置。

5.3 顺手写两个通用小函数：字符串包含判断和URL校验

Day 5最后阶段，我把前几天的零散JS基础做成了两个可以直接复用的小函数。热搜里也有人搜“js判断字符串是否包含”和“js验证url有效性”，它们属于高频操作。

判断字符串是否包含子串，新版JS直接用includes即可：

javascript复制function containsText(source, target) {
  return source.includes(target);
}

console.log(containsText('hello day5', 'day'));

校验URL，我想介绍一个比正则更稳妥的方法，利用URL构造函数：

javascript复制function isValidUrl(value) {
  try {
    const url = new URL(value);
    return url.protocol === 'http:' || url.protocol === 'https:';
  } catch (error) {
    return false;
  }
}

console.log(isValidUrl('https://example.com'));
console.log(isValidUrl('不是网址'));

URL构造函数的解析能力比手写正则更接近浏览器的真实判断，非法字符串传入会抛异常，包一层try/catch就好。限制只允许http和https，是避免用户填一个file:或者ftp:地址进来。

几个小函数做完，一个静态页已经具备了基本的交互能力：能校验表单、能判断输入、能响应滚动并快速回顶。这也正是HTML和JS配合的日常——HTML负责提供结构和控件，JS负责在合适时机改变状态、验证数据或操作滚动。

6. Day 5错题本：预览失败、乱码、样式失联的排查顺序

6.1 HTML文件无法预览，先看这三处

“html文件无法预览”是广泛出现的问题，我在Day 5也遇到了，当时差点以为代码写错了。排查一圈发现代码没有任何问题，纯粹是打开方式不对。如果你也在浏览器里看到源码、看到空白页、或者提示“文件不存在”，按以下顺序自查：

第一，文件扩展名是不是.html或者.htm。Windows资源管理器经常默认隐藏扩展名，你新建的文本文档可能实际叫“index.html.txt”。浏览器拿到txt扩展名不会当网页渲染，只会显示纯文本。可以在文件夹选项里打开“显示文件扩展名”，做完要保存成“index.html”而不是“index.html.txt”。

第二，文件编码是不是UTF-8。打开Notepad等编辑器另存为时，注意编码选项，如果保存成ANSI而在HTML头部写UTF-8，中文就会乱码，并且预览可能异常。统一保存为UTF-8是最省事的方案。

第三，文件路径是否正确。直接双击本地HTML文件通常能浏览器打开，如果是通过VSCode的Live Server或WebStorm内置服务器预览，要看项目文件是不是放在工作区根目录、文件名有没有中文或空格。某些本地静态服务器对中文路径支持差，会返回404，将文件夹改成英文路径能减少很多麻烦。

6.2 一张排查表梳理“文件层面”的坑

我把当时遇到和收集到的问题整理成了表格，方便以后排错时对号入座：

现象	可能原因	快速检查方法	解决方向
双击文件显示源码	文件扩展名是.txt	右键属性看类型	改名并确保显示扩展名
页面中文乱码	编码保存和meta声明不一致	源码里看控制台有无乱码提示	统一用UTF-8编码保存
修改HTML后浏览器没变化	浏览器缓存	按Ctrl+F5强制刷新	养成强刷习惯
图片显示裂开	img的src路径不对	打开控制台看404路径	检查相对路径层级
CSS/JS文件不生效	外部文件路径用绝对路径开头`/`	看控制台网络请求	改用相对路径或正确根目录
手机打开排版很乱	缺viewport设置	检查head里meta	加viewport声明

第六行是很多新手会犯的路径错误。在本地文件里写href="/style.css"，浏览器会认为“从根目录找style.css”，本地双打开时会解析成当前磁盘根目录甚至报错。本地用相对路径写法，例如CSS文件在项目根目录，页面在子目录里，就要写../style.css。这类问题在控制台Networks面板里看得最清楚——请求失败的资源地址会红字标出来。

Day 5结束的时候，我最大的体会是：HTML与其说是语法，不如说是浏览器的“世界观”。JS之所以能灵活操纵页面，是因为HTML已经把内容划分成节点、属性、文本和事件可以作用的结构。与其急着背诵各种API，不如先把一个页面的出生、渲染和加载过程想清楚；知道页面为什么是这样一棵树，再回头写JS，会顺畅非常多。

最后补一个日常能提高效率的小习惯：每次新建练习项目，都固定好文件夹结构，根目录里放index.html、css/style.css、js/script.js，并立刻在HTML里引用好它们。先让一个红色标题成功渲染出来，再开始写功能，可以避免很多“代码没问题但页面空白”的无效焦虑。这个习惯从Day 5一直保持到现在，帮我省下的时间比想象中的多。