HTML网页制作应从明确内容目标和语义结构开始，确保DOCTYPE声明、UTF-8编码、title标签正确使用，优先采用article、time、h2等语义化标签，通过HTTP服务本地预览，并用W3C验证工具检查合法性。
HTML 网页制作不是从“新建文件”开始的，而是从明确「这个页面要让人看到什么、能做什么」开始的。没有语义结构和内容目标的 HTML，写得再标准也只是空壳。
用 <!DOCTYPE html> 开头，而不是复制粘贴模板
很多初学者直接从网上抄一段包含 <html lang="zh-CN">、<meta charset="UTF-8"> 的完整结构，但没理解每行的作用。实际开发中，只要确保三件事：
-
<!DOCTYPE html>必须是第一行，且不能少——缺了它，浏览器会进怪异模式（Quirks Mode），CSS 布局可能全乱 -
<meta charset="UTF-8">要放在<head>最前面，否则中文可能显示为方块或问号 -
<title>不是装饰，它影响浏览器标签名、SEO、甚至微信分享卡片标题——别留空或写“我的网页”
用语义化标签组织内容，别只靠 <div> 堆砌
写一个新闻列表页，有人这样写：
<div class="article"> <div class="title">标题</div> <div class="date">2024-06-15</div> <div class="content">正文...</div> </div>
这在视觉上没问题，但对屏幕阅读器、搜索引擎、甚至未来你自己维护都埋了坑。应该用：
立即学习“前端免费学习笔记（深入）”；
<article> <h2>标题</h2> <time datetime="2024-06-15">2024年6月15日</time> <p>正文...</p> </article>
关键区别：
-
<article>告诉浏览器：“这是独立可分发的内容单元”，RSS 抓取、SEO 权重都会识别 -
<time datetime>的datetime属性是机器可读的时间格式，比纯文本更可靠 -
<h2>不仅是变大加粗，它定义了内容层级——跳过<h1>直接用<h2>会破坏文档大纲
本地预览别依赖双击打开，用轻量 HTTP 服务启动
直接双击 index.html 打开，地址栏是 file:/// 开头，这时：fetch() 会失败、localStorage 可能受限、图片路径带 ../ 时容易 404。正确做法是起一个最小 HTTP 服务：
- VS Code 安装插件
Live Server，右键 HTML 文件 → “Open with Live Server” - 命令行（需 Node.js）：运行
npx http-server，然后访问http://localhost:8080 - Python 3 自带：终端进入目录，执行
python3 -m http.server 8000
所有方式本质都是让页面走 http:// 协议，绕过浏览器对 file:// 的安全限制。
验证 HTML 是否写对，别只靠“看起来正常”
浏览器渲染不出错 ≠ HTML 合法。常见问题如：<p> 里嵌 <div>（HTML5 允许但语义错误）、<img> 缺 alt 属性、多个 id 重复。推荐两个免费动作：
- 把代码粘贴到 W3C Markup Validation Service，选 “Validate by Direct Input” —— 它不只报错，还会说明为什么该改
- 在 Chrome DevTools 的 Elements 面板中右键节点 → “Reveal in Elements Panel”，观察自动补全的闭合标签是否符合预期（比如你没写
</p>，浏览器却帮你补了，说明结构有歧义）
真正卡住人的，往往不是语法不会写，而是写了却不知道哪里“不对劲”——验证不是交作业，是帮你看清浏览器到底怎么理解你的 HTML。
