企业官网建设流程全解析

HTML这门语言，门槛不高，但坑不少。很多朋友第一次接触HTML，可能不是为了做网站，而是因为在搜索引擎里看到了“中秋祝福代码”“爱心代码”“表白网页”这些花哨的词，复制粘贴一段代码，想发给喜欢的人或者用在公众号里。结果代码是复制过来了，稍微想改个字、换个颜色，就完全动不了手，一改就乱。这就是典型的“只会抄，不会写”。HTML和HTML5是网页的骨架，也是前端学习的第一站，不管是想系统转行做前端，还是只想做点好玩的网页自娱自乐，花点时间把基础真正搞懂，后面所有东西都会顺起来。这篇文章，我就从最典型的模板代码讲起，把标签、属性、语义化、表单、和CSS/JS的配合，以及我在实际使用中踩过的坑一起说完。

1. 先吃透网页模板：那段反复出现的代码到底在干什么

如果你搜索过任何“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> </head> <body> <h1>你好，世界</h1> </body> </html>

不少人会直接跳过这段，觉得“反正复制了能跑就行”。但它恰恰是理解HTML的第一个钥匙。这里面每一个看起来像废话的标签，都有它存在的意义。

1.1 DOCTYPE 声明为什么不能省

<!DOCTYPE html>是所有HTML文档里必须出现的第一行内容。它的中文名字叫“文档类型声明”，作用只有一个：告诉浏览器“我这是一个标准的HTML文档”。但为什么非得这么写？

这里有一段历史。早年的网页并没有统一标准，同一个页面在IE和Firefox里显示得完全不一样。后来W3C（万维网联盟）制定了HTML4、XHTML这些标准，而浏览器又存在两种解析模式：一种是“标准模式”，严格按规范渲染；另一种是“怪异模式”，模仿当年老版本浏览器的错乱渲染方式。为了让浏览器知道“你别进入怪异模式，请给我按标准来”，DTD（文档类型定义）就派上了用场。

在HTML4时代，声明长得像这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

又长又难记。到了HTML5，标准作者终于想通了，既然DTD只是一个给浏览器认路的信号，那就没必要写那么复杂，直接简化为<!DOCTYPE html>就好。

这个简化导致很多人误以为“可以随便删掉它”。你删掉以后页面大概率也能打开，但浏览器会直接进入“怪异模式”，最典型的后果就是：盒模型计算方式改变、块级元素间距异常、字号缩放规则混乱。你辛辛苦苦写的CSS，在怪异模式下很可能全白费。所以我建议所有HTML模板第一行都固定写<!DOCTYPE html>，这不是形式主义，是给浏览器递的投名状。

1.2 lang、charset、viewport 这些细节别忽略

再看<html lang="zh-cn">。lang属性是在声明这个页面的语言是简体中文（如果是香港繁体可以写成zh-hk，台湾繁体是zh-tw）。这个属性对搜索引擎和屏幕阅读器很重要，它可以帮助浏览器自动翻译、阅读器正确发音。如果你写的是英文页面，就写成lang="en"，不用纠结。

<meta charset="utf-8">解决的是字符编码问题。UTF-8是目前最通用的编码方式，能覆盖世界上几乎所有文字。如果你不写这个meta，浏览器默认可能会用系统编码去解析你的文件，那么网页里的中文就会变成一堆“乱码”——这是新手遇到最多的“诡异问题”之一，九成原因就是charset没写对或者文件本身被用GBK存盘而声明的是UTF-8。

<meta name="viewport" content="width=device-width, initial-scale=1.0">这行是移动端适配的基石。没有它，手机浏览器会默认用一个虚拟的“PC版宽度”来渲染页面，然后让你在手机上像放大镜一样左右拖动。加上它，页面宽度才会等于设备宽度，初始缩放比例也是1，这也就是响应式布局的前提。

最后是<title>，它虽然写在head里，不显示在页面主体中，但会显示在浏览器标签页上，也是搜索结果里的标题文字，所以别随便写“无标题文档”。对SEO来说，title是每个页面最重要的一个标签。

如果你用的是纯文本编辑器（比如Windows自带的记事本）保存HTML文件，请务必确认另存为时编码选择的是UTF-8。很多乱码问题都不是代码写错了，而是文件的编码格式错了。

2. HTML5语义化：告别一锅端的div

HTML5和之前版本最大的区别之一，就是增加了一批“有含义”的标签。在HTML4时代，网页布局基本都是靠<div>一块一块堆起来的。每个开发者都有自己的习惯，有的用id="header"，有的用id="top"，有的用class="head"，搜索引擎根本不知道这块区域到底是什么。HTML5的语义化标签就是为了解决这种混乱——让标签自己说话，告诉机器和开发者：“我这块是页眉、导航、页脚，还是正文内容。”

2.1 为什么语义化重要

可能有人觉得“反正显示效果都差不多，何必较真”。显示效果确实差不多，但语义化背后有三层实际价值。

第一层是对SEO（搜索引擎优化）友好。搜索引擎的爬虫在分析网页结构时，语义化标签能帮助它更快地识别页面的主要内容和主题。比如<article>里的内容通常会被判定为页面核心，而<nav>里的链接通常不会被视为关键词正文。

第二层是对无障碍访问友好。盲人用户使用的屏幕阅读器会按照语义标签的层次来朗读页面。如果你的页面全是div，阅读器就只能一个区块一个区块地读，没有任何结构提示，体验很差。而使用<nav>、<main>这些标签后，阅读器可以直接跳到主要内容区，把导航跳过去。

第三层是从团队协作和项目维护的角度出发的。两年后再回来看自己写的一堆div，你根本分不清谁是谁。但写着语义化标签的页面，哪怕没看注释，大致结构也是一目了然的。

2.2 怎么布置一个标准的页面结构

下面是一个典型博客文章页面的骨架：

<body> <header> <h1>我的博客</h1> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于</a></li> </ul> </nav> </header> <main> <article> <h2>标题</h2> <p>发布者、发布日期等信息</p> <p>正文内容……</p> </article> <aside> <h2>相关阅读</h2> <ul>...</ul> </aside> </main> <footer> <p>版权信息</p> </footer> </body>

这里要特别注意<article>和<section>的区别。<article>代表一个“独立、完整”的内容块，比如一篇帖子、一条评论、一篇新闻。即使把它单独拿出来，它仍然可以独立存在、能被订阅或分享。<section>则是一个更有“分组”意味的容器，它通常包含一组相关内容，比如一篇长文章下面的多个章节。你可以这样理解：如果内容能独立成文，就用<article>；如果只是把一个话题下的内容分几个段落来组织，用<section>更合适。

<main>在一个页面里只能使用一次，代表页面核心内容区，不要把它放在<aside>或<header>里。<aside>通常用于侧边栏、广告、引述信息等与正文相关但非核心的内容。<footer>也不一定只能放在页面最底部，它也可以放在<article>内部，表示这篇帖子的“尾部信息”，比如标签、发布时间、作者信息。

2.3 老话题：div到底能不能用了

当然能用。HTML5虽然新增了语义标签，但div并没有被删除，它的角色变成了“无语义容器”——当你不想表达任何语义，只是单纯需要一块地方来包住内容、方便写CSS或JS时，div仍然是正确选择。

很多新手容易走向另一个极端，把<div>全部替换成<section>或<div>，以为这样就算语义化了，其实不对。语义化讲究的是“合适”，不是“多用”。看到<div>时你应该先问：这块内容有没有更合适的语义标签？没有的话用div就心安理得。看到<section>时则应该问：这个section有个明确的主题吗？如果只是为了套样式，请换回div。

3. 高频标签实操：文本、链接、图片、多媒体

如果说HTML整体是建房子，那么标签就是砖块和钢筋。下面这些标签，是日常页面中使用频率最高的，每一个都有值得注意的细节。

3.1 文本标签里面的坑

从最基础的标题开始。HTML一共提供了6级标题，从<h1>到<h6>。很多人以为这六级标题是“六种不同大小的字号”，于是为了把字放大就用<h3>，为了把字缩小就用<h5>，这是完全错误的理解。标题标签代表的是文档的“层级结构”，就像Word里的一级标题、二级标题一样。一个页面里原则上只需要一个<h1>，用来表示整个页面的主题，然后往下按层次用<h2>、<h3>。字号大小只是默认样式，完全可以由CSS统一控制，而不是换标题级别来调整字号。

段落标签<p>里的文字在浏览器里默认会上下留白，并自动换行。要注意<p>标签内不能嵌套<div>等块级元素。<br>是换行标签，但它是“纯装饰”标签，不要把连续多个<br>用来拉开段落间距——那就该用CSS的margin和padding。<strong>表示“重要内容”，<em>表示“强调内容”。默认样式上，<strong>是加粗，<em>是斜体，但更重要的是它们的语义。在屏幕阅读器里，<strong>会被用特别的语调读出来，而<b>和<i>只是“视觉上加粗、斜体”，没有语义含义。所以“表达重要”用<strong>，“只是字体想加粗”用<b>，也说得过去。

块级引述使用<blockquote>，行内引用或引文出处使用<cite>。这些细节在实际页面中可能不起眼，但它们是“基础扎实”和“基础不牢”的分水岭。

3.2 链接：target、href、title属性

链接是HTML里最核心的元素之一。基本语法是：

<a href="https://example.com">打开示例网站</a>

href的值可以是绝对URL（比如https://开头的完整地址）、相对路径（比如./about.html，指当前目录下的about.html文件），还可以是邮件地址（mailto:foo@example.com）、电话号码（tel:123456789），以及页面内部的锚点（href="#section2"）。

相对路径里最容易出错的是./和../的区别。./表示当前目录，../表示上级目录。举个例子，你的页面在site/blog/index.html，你想链接到site/about.html，那就应该写../about.html，不是about.html。很多新手把一堆静态页面在本地打开时是好的，打包上传后链接全部失效，往往是路径写错了。

target="_blank"表示在新标签页打开链接。这个属性很常用，但它和window.opener存在一个安全隐患：新打开的页面可以通过脚本操纵原页面。所以如果你要用target="_blank"，同时建议加上rel="noopener"或rel="noreferrer"。现在很多框架的默认做法是：新窗口打开一律加rel="noopener"，这是行业共识。

title属性可以为链接提供一段悬停提示文字，但对触屏设备，提示只在长按时偶尔出现，所以不要把关键信息只放在title里，提示文字只作为锦上添花。

3.3 图片：src、alt是必须的吗

<img>不是src和alt两个属性都“必须”存在，但正确的做法是：src必须有（没有它图片显示不出来），alt也必须有（即使值为空字符串）。alt属性是图片的替代文本，当图片加载失败或用户使用屏幕阅读器时，这段文字会替代图片出现。

这里有个常见的误解，alt并不是让你把图片里所有细节都写进去。比如一张照片是“一只金毛犬在草地上奔跑”，alt写“金毛犬草地奔跑”就够了，不需要写相机、光线、天气。但如果图片本身就是一项内容（比如一个图表、一张包含文字的截图），那么alt应该完整传达图中信息。

HTML5还提供了srcset和sizes属性，用来实现响应式图片。简单说，srcset允许你针对不同屏幕宽度提供不同尺寸的图片文件，浏览器会自行选择最合适的一个。比如：

<img src="small.jpg" srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="示例图片">

这种方式能避免手机访问时下载超大尺寸的图片，对页面性能很有帮助。不过初学阶段，先保证src和alt写对，srcset可以等后续再深入。

3.4 音频和视频：HTML5的多媒体

在HTML5之前，想在网页里播放视频大多依赖Flash插件，又卡又不安全。HTML5原生支持了<video>和<audio>标签，基础用法很简单：

<video src="movie.mp4" controls width="640"></video> <audio src="music.mp3" controls></audio>

controls属性用于显示浏览器自带的播放控制条，如果不写，页面上就看不到任何播放按钮，用户也没法操作。autoplay属性表示自动播放，但现代浏览器对自动播放限制很严格——通常带声音的视频不能在进入页面时直接自动播放，除非用户与页面有过交互（比如点过按钮），或者视频处于静音状态。所以做自动播放时最好同时加上muted和playsinline，否则在手机上很可能播不出来。

为了兼容不同浏览器，HTML5还提供了<source>子元素来指定多格式视频源：

<video controls> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> 你的浏览器不支持视频播放。 </video>

当浏览器不支持第一个格式时，它会尝试下一个。最后那段文字是在浏览器完全不支持<video>时显示的兜底内容，这种多一层“降级”的思路在业务开发里很常用。

4. 表单标签：从最基础到HTML5新控件

热词里有“html——表单类的标签”，这确实是HTML里非常重要的一块，因为只要是涉及到用户输入的内容，登录注册、搜索、留言、下单，全部离不开表单。

4.1 表单是怎么提交的

一个最基本的表单长这样：

<form action="/search" method="get"> <label for="q">搜索关键词</label> <input type="text" id="q" name="q"> <button type="submit">搜索</button> </form>

action是表单提交到的服务器地址，method是请求方式，常见的是get和post。get方式会把表单数据拼接到URL的查询字符串里，比如/search?q=html，适合搜索、筛选这类没有副作用的请求。post方式会把数据放在请求体里，适合登录、注册、提交订单这些不能把信息暴露在链接里的场景。

这里有一个特别容易犯的错：<input>一定要写name属性。如果只写id，虽然页面显示正常，但提交时这个输入框根本不会被发送到服务器。因为表单数据的键就是name的值，id只是用来在页面内标识元素、配合<label>做绑定的。在热词里会看到很多人搜索表单相关问题，一大半都是没写name导致后端拿不到数据。

另外注意<label for="q">里的for值必须和<input>的id值完全一致，这样点击“搜索关键词”文字时，浏览器会自动聚焦到对应的输入框。这既是无障碍需求，也能提升用户体验，强烈建议每个表单控件都配一个<label>。

4.2 input 的 type 家族

HTML5给<input>增加了很多新的type值，极大提升了表单体验。常用如下：

HTML5还添加了placeholder="请输入文字"，这是输入框里显示的灰色提示，一旦开始输入提示就会消失。但要记住，placeholder不能替代<label>，因为它在空状态下提示的信息，不能辅助屏幕阅读器识别控件用途。required属性用来声明“必填”，不填时浏览器会阻止提交并给出提示。pattern属性则用于正则表达式校验，比如限制手机号为11位数字：

<input type="text" id="phone" name="phone" pattern="[0-9]{11}" placeholder="请输入11位手机号" required>

这只是一个示例，国内手机号的正则要比这个复杂。前端校验的作用是“提升用户体验”，让用户尽早发现错误，它不能替代后端校验，因为任何人都可以绕过前端直接向服务器发送请求。新手一定要有这个安全意识。

4.3 下拉菜单与数据列表

下拉菜单用<select>和<option>实现：

<select name="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> </select>

selected属性可以让某个选项默认被选中。多个选项分组可以用<optgroup>：

<select name="city"> <optgroup label="直辖市"> <option value="beijing">北京</option> <option value="shanghai">上海</option> </optgroup> <optgroup label="省会城市"> <option value="changsha">长沙</option> <option value="chengdu">成都</option> </optgroup> </select>

HTML5的<datalist>则是一个“可输入的下拉列表”，既允许用户在下拉里选，也允许自己输入。它通过input的list属性和<datalist>的id关联：

<input type="text" name="fruit" list="fruit-list" placeholder="请输入或选择水果"> <datalist id="fruit-list"> <option value="苹果"></option> <option value="香蕉"></option> <option value="橘子"></option> </datalist>

这种控件在旧浏览器里支持度一般，好处是交互上比原生下拉要灵活。不过它的默认样式很难完全自定义，所以很多站点依然倾向于用<select>加一套自己写的前端组件。

4.4 表单校验的小知识

上面提到了required和pattern，这里补充关于校验的另一个细节：校验时机。浏览器会在表单提交那一刻执行内置校验，需要阻止这次默认校验时，可以使用JS里的form.noValidate = true，比如你想用自己的校验逻辑覆盖浏览器的默认提示。但如果只是做基础页面，用浏览器内置校验就够了，它免费、不依赖任何JS代码。

服务端校验永远不能省。我在实际项目中遇到过好几次拿着前端校验过的假数据往里塞的情况，不是用户恶意，而是有人拿接口去测试，绕过了页面直接发请求。这个问题和HTML本身无关，但每个写表单的人都应该明白：HTML只是第一道门，不是最后一道。

5. 和CSS、JS打配合：首个可交互页面

HTML基础里永远绕不开另外两兄弟：CSS和JavaScript。热词中有“HTML+CSS+JS基础语法”，这其实是前端入门路上的“三件套”。可以把HTML理解为一套毛坯房的结构：哪是墙、哪是门、哪是窗。CSS就是装修：墙刷什么颜色、门用什么材质、窗挂什么窗帘。JavaScript则是水电和智能家居：有人按了门铃就开灯，有人点了开关就运行特定指令。三者各干各的活，但都在同一个页面里协同工作。

5.1 三者的分工

写CSS一般有三种方式：行内样式style="..."，写在<style>标签里，以及写成独立的.css文件用<link>引入。最佳实践是尽量使用外部样式表，因为这样多个页面可以复用同一套样式，浏览器缓存一次后，其他页面加载速度也会变快。行内样式优先级最高、但最难维护，所以不建议随便使用。

JS也有三种写法：事件属性（比如onclick，不推荐）、<script>标签、外部JS文件。最佳实践也是写成外部文件并放在<body>底部（或者使用defer属性），因为JS的执行会阻塞页面渲染，如果放在head里，页面可能要等脚本下载完才能显示内容。

5.2 一个带样式的卡片组件

下面是一个小例子，将HTML结构、CSS样式和JS交互放在一起：

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三件套小例子</title> <style> .card { width: 280px; border: 1px solid #ddd; border-radius: 12px; padding: 20px; margin: 40px auto; text-align: center; font-family: sans-serif; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .count { font-size: 32px; color: #333; } .btn { background: #4A7CF7; color: #fff; border: none; border-radius: 6px; padding: 10px 18px; cursor: pointer; } .btn:hover { background: #3860d0; } </style> </head> <body> <div class="card"> <p class="count" id="num">0</p> <button class="btn" id="add">点我加一</button> </div> <script> let count = 0; const numEl = document.getElementById('num'); const addBtn = document.getElementById('add'); addBtn.addEventListener('click', function () { count += 1; numEl.textContent = count; }); </script> </body> </html>

这里CSS通过.card类来控制卡片居中、边框和圆角，.btn控制按钮颜色、间距。JS通过getElementById找到页面里的元素，再用addEventListener给按钮绑定点击事件。每次点击，count加一，同时把<p>里的文字更新成新的数字。这就是最典型的“HTML定结构、CSS定外观、JS定行为”的组合。

5.3 给按钮加一个点击事件

上面代码中addEventListener是推荐的事件绑定方式，而不是在HTML里写onclick="..."。两种方式都能用，但addEventListener的优点是可以让JS和HTML分离，对一个元素也能绑定多个事件处理器。而onclick属性如果再赋值一个函数，之前的事件就被覆盖了。从代码可维护性角度，当然选addEventListener。

5.4 怎么调试和查看结构

写页面肯定要调试。最常用的工具就是浏览器内置的开发者工具，按F12（Mac上可能是Command+Option+I）就能打开。在“元素”或“Elements”面板里可以看到整个HTML的树状结构，鼠标悬停任意标签都能在页面上高亮对应区域，还能实时修改CSS看效果。这个功能对学习HTML极有帮助：看到一个大神写的页面，直接用开发者工具“解剖”它，比自己在代码编辑器里猜快得多。

还有一个常用技巧：在开发者工具的控制台里输入$0可以拿到当前选中元素的引用，输入document.title可以查看页面标题，输入document.querySelector('.card')可以找到第一个class为card的元素。这些是入门阶段就会用到的调试小妙招。

6. 实操中常见问题和排查方法

从前面这些内容可以看出来，HTML本身并不复杂，复杂的是它和编码、浏览器、服务器以及各种系统之间的配合。在这一节里，我把平时被问到最多的几个“疑难杂症”集中总结一下，每一个都是真实踩过的坑。

6.1 乱码问题

现象：网页上的中文全部变成“文嗔或者“锟斤拷”一类的东西。原因几乎都是字符编码不一致。排查顺序如下：

• 先确认<meta charset="utf-8">是否在<head>里。
• 再确认文件本身的编码格式。如果你用记事本打开文件，点击“另存为”，看右下角编码处是不是UTF-8。
• 最后检查服务器返回的Content-Type头是否带有charset，比如text/html; charset=utf-8。

如果HTML里没写charset，但服务器响应头里指定了GBK，那浏览器就会以GBK来解码，这时候哪怕你的文件是UTF-8，也会乱码。解决方法是两者都统一成UTF-8。

6.2 HTML邮件为什么辣么多不兼容

有人搜索“html邮件”，确实，很多运营人员需要制作HTML邮件。这里要先给你打好预防针：邮件里的HTML和网页里的HTML完全不是一个世界。邮件客户端的HTML引擎非常保守，主流客户端的开放程度甚至低于十年前的浏览器。

做HTML邮件有几个不成文的规矩：用<table>布局而不是<div>布局；CSS尽量使用行内样式，并且避免使用<style>；不要用JS和<video>；图片要使用绝对URL；字体尽量用系统默认字体。为什么这么麻烦？因为Outlook、Gmail、网易邮箱这些客户端的渲染引擎各不相同，很多CSS属性不支持，<div>定位也会错位，而<table>这套老方法兼容性最高。

如果你只是临时做个简单邮件通知，直接写一个单列的<table>配上几个<td>就够了，不要去追求什么精美排版，保证收件人能看到内容不乱，比什么都重要。

6.3 在特殊环境里显示HTML

有热词提到“pyqt5显示html”，这其实不是网页开发，而是桌面应用开发里的一种需求。PyQt5通过QWebEngineView组件可以加载HTML内容，实现在桌面程序里渲染网页UI。这里的关键点在于：这是一个“浏览器内核”在渲染HTML，同样支持HTML5的大部分标准，但它和完整浏览器还是有差异，比如对特定API的权限控制更严格。如果你遇到页面在PyQt5里显示不全，大概率是缺少对QWebEngineSettings里JavaScript和LocalStorage开关的开启。

类似的环境还有微信小程序的WebView、安卓的WebView、iOS的WKWebView。它们都是内嵌浏览器，不能保证所有HTML5特性都支持，所以在写“会被嵌进App的页面”时，要注意特性兼容性，并做好降级方案。

6.4 打包多个HTML/格式转换

热词里有“打包多个html”，这个很实在。做一个小项目时，通常会有一个index.html，里面链接了about.html、contact.html。你在本地双击index.html时能正常点开，但打包给别人后，别人双击发现页面里的图片、样式全没了，链接也打不开。核心原因就是你用了绝对路径或本地盘符路径，比如src="C:\Users\xxx\img.png"。正确做法是：

• 所有资源文件（图片、CSS、JS）都放在项目目录内。
• HTML里用相对路径，比如./css/style.css或者css/style.css。
• 目录结构保持完整，一起打包发送。

至于“html格式转换wps表格”“html转md”这类需求，通常不是写代码，而是借助工具。html转md可以试试Pandoc，它支持从HTML转Markdown。html内容转成Excel表格则比较麻烦，因为HTML表格式结构可以用<table>呈现，用Python的pandas读取HTML里的表格也能做到。这些属于“HTML数据再加工”的工具流，等基础熟之后自然会接触到。

6.5 趣味应用：中秋祝福和表白页面

最后聊聊那些让人入坑HTML的场景。每年中秋、情人节前后，搜索中秋节代码、爱心代码、表白代码的人都会增多。这类页面通常只有几个特点：一张背景图、几行祝福文字、一些漂浮动画效果，甚至一段音乐。看起来花哨，其实用到的HTML标签非常少，主要还是CSS3动画和JS的功劳。如果你刚把HTML基础学完，我建议不要直接复制粘贴一整屏的复杂特效代码，而是先自己写一个静态页面：

<h1>中秋快乐</h1> <p>但愿人长久，千里共婵娟。</p>

然后用CSS加个背景色、居中布局，再用JS在页面里动态生成几十个“小月亮”元素，让它们飘落。这个小练习做完，你对DOM操作、循环、事件的理解就能上一个台阶。以后再看到网上那些花里胡哨的爱心代码，也能看得懂每一段是在干什么，而不是只会收藏了。

在实际调试中，我最常用的方法是“每次只改一点”。新手往往一次性写一大段HTML，然后页面显示不对，就不知道该从哪里排查。正确的做法是写完一个标签就打开浏览器看一眼，确认没问题再继续往下写。宁可慢，也别让错误累积。HTML基础这个阶段，最大的价值不是背下多少标签，而是建立起“结构意识”——当你看到一个网页，能自动在脑子里把它拆成一个个语义块、一对对标签、一套套属性时，你就真的入门了。