零基础学HTML应先做三个即时可见效果的小页面：用记事本写“我的第一行HTML”并双击运行；加同目录图片和百度链接验证路径与跳转；用header/main/footer语义化标签重构结构，专注中文、图片、链接三要素是否正常。
零基础练手HTML，别从“做一个完整网站”开始——先做三个能立刻看到效果、改完保存双击就能运行的小页面，比抄一百行模板更有效。
用记事本写一个「我的第一行HTML」并双击打开
这是最短路径：不装任何工具，只靠系统自带编辑器和浏览器。关键不是写得多，而是理解「改了哪一行 → 页面哪里变了」的因果关系。
-
notepad（Windows）或TextEdit（macOS，切记选“纯文本”模式）新建文件，粘贴以下内容： - 必须严格复制，尤其注意
在第一行、<code><meta charset="UTF-8">不能漏——否则中文会乱码 - 保存为
hello.html（后缀必须是.html，不能是.txt） - 直接双击该文件，浏览器自动打开；再回到编辑器改
<h1></h1>里的文字，保存 → 切到浏览器按F5刷新，变化立刻可见
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>你好，HTML！</h1> <p>这是我的第一个段落。</p> </body> </html>
加一张图 + 一个链接：验证路径和跳转逻辑
新手卡住最多的地方不是标签不会写，而是 src 和 href 的路径写错。练手时就用最直白的相对路径，不碰服务器、不设文件夹嵌套。
立即学习“前端免费学习笔记（深入）”；
- 把一张叫
photo.jpg的图片和你的hello.html放在**同一个文件夹**里 - 在
里加一行：<img src="photo.jpg" alt="我的照片"> - 再加一个链接：
<a href="https://www.baidu.com">去百度搜一搜</a> - 如果图片不显示，90% 是文件名大小写错了（
Photo.JPG≠photo.jpg）或扩展名没写对（photo.jpeg）
用语义化标签重写结构：避免未来被CSS和JS反杀
很多人后期加样式或交互时崩溃，是因为一开始用一堆 <div> 堆结构。现在花2分钟改成 <code><header></header>、<main></main>、<footer></footer>，后面所有操作都更稳。
- 把原来的
<h1></h1>包进<header></header>，把<p></p>包进<main></main>，末尾加<footer><p>© 2026</p></footer> - 不要为了“看起来高级”而滥用
<article></article>或<section></section>——单页无分栏、无独立内容块时，<main></main>就够了 - 浏览器不认这些标签？完全不会。它们只是给代码“贴标签”，不影响当前显示，但会让未来协作、SEO、屏幕阅读器支持直接拉满
真正容易被忽略的点是：练手时别追求“看起来像网站”，重点盯住三件事——中文是否正常、图片是否加载、链接能否跳转。只要这三件事稳了，你就已经跨过了90%初学者的门槛。剩下的，是边做边查、边错边改的事。
