第 1 周总结：HTML 基础 — 从零搭出能用的网页
蜗牛往上爬 · 前端工业可视化学习笔记 第 1 周总结
本周从完全零基础起步，用 6 天（每天 2 小时）完成了 HTML 基础的搭建。从"HTML 是什么"到"独立写出设备信息登记表单页"，以下是本周的完整复盘。
目录
一、本周学了什么
知识图谱
HTML 基础
├── 核心概念
│ ├── 什么是 HTML（标记语言，不是编程语言）
│ ├── 网页三件套（HTML = 结构，CSS = 样式，JS = 行为）
│ └── 标签规则（成对标签 vs 单标签）
│
├── 基本骨架（必背）
│ ├── <!DOCTYPE html>
│ ├── <html> → <head> + <body>
│ ├── <meta charset="UTF-8">
│ └── <title>
│
├── 内容标签
│ ├── 标题 h1~h6
│ ├── 段落 p
│ ├── 文本 b/strong, i/em, u, s
│ ├── 换行 br, 分割线 hr
│ └── 注释 <!-- -->
│
├── 组织标签
│ ├── 列表 ul+li / ol+li / dl+dt+dd
│ ├── 链接 a (href, target="_blank", 锚点)
│ ├── 图片 img (src, alt, width/height)
│ └── 表格 table+thead+tbody+tr+th+td
│
├── 交互标签
│ ├── 表单 form
│ ├── input (text/radio/checkbox/number/email/date/file)
│ ├── select+option
│ ├── textarea
│ └── button
│
├── 语义化标签
│ ├── header, nav, main, section, article, aside, footer
│ └── div（块级无语义） vs span（行内无语义）
│
└── 路径规则
├── ./ 当前目录
├── ../ 上一级目录
├── / 网站根目录
└── https://... 网络完整地址
二、三个练习页面回顾
页面 1：个人简介
用时：Day 1-2，约 2 小时
用到：基本骨架、标题、段落、文本标签、属性、注释
核心代码回顾：
<h1>蜗牛往上爬</h1>
<p>正在自学 <strong>Web 前端工业可视化</strong> 的学习者。</p>
<hr>
<h2>我的目标</h2>
<p>做出自己的 <em>智慧工厂大屏</em> 和 <em>数字孪生</em> 作品。</p>
收获：第一次写出能在浏览器里打开的页面，理解了 head（配置）和 body（内容）的区别。
页面 2：学习资源导航
用时：Day 3-4，约 2 小时
用到：有序列表、无序列表、自定义列表、超链接、图片、锚点、路径
核心代码回顾：
<ol>
<li>HTML + CSS（本周）</li>
<li>JavaScript + ES6（阶段1）</li>
</ol>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN</a></li>
</ul>
<dl>
<dt>HTML</dt><dd>网页的骨架</dd>
</dl>
<a href="#top">回到顶部</a>
收获：学会了"组织信息"和"让信息之间互连"，三种列表各司其职，路径规则终于不再迷路。
页面 3：设备信息登记表单
用时：Day 5-6，约 2 小时
用到：表格、表单（text/radio/checkbox/select/textarea/button）、语义化标签
核心代码回顾：
<header>
<h1>设备信息登记</h1>
<nav><a href="#device-table">已有设备</a> | <a href="#device-form">新增设备</a></nav>
</header>
<main>
<section id="device-table">
<table>
<thead><tr><th>设备名称</th><th>状态</th></tr></thead>
<tbody><tr><td>压缩机 A</td><td>运行中</td></tr></tbody>
</table>
</section>
<section id="device-form">
<form>
<label for="deviceName">设备名称</label>
<input type="text" id="deviceName">
<label><input type="radio" name="status" value="running"> 运行中</label>
<select><option>一车间</option></select>
<button type="submit">提交</button>
</form>
</section>
</main>
<footer>© 2026 蜗牛往上爬</footer>
收获：表格表单让页面"能用"，语义化标签让代码结构"读得懂"。这个页面是未来大屏页面的雏形。
三、认知升级：从前 vs 现在
四、本周踩过的坑
五、自测清单
全部打勾再进入下一周。
[ ] 能默写 HTML 基本骨架
[ ] 能说出网页三件套各自的作用
[ ] 能讲清
head与body的区别[ ] 能独立写出：列表、链接、图片、表格、表单各一个
[ ] 能说明相对路径与绝对路径的区别
[ ] 能说出 6 个以上语义化标签
[ ] 3 个练习页面全部完成并在浏览器验证
[ ] 每日博客文章 1 篇（共 3 篇）+ 本篇周总结 = 4 篇完成
六、下周预告
第 2 周：CSS 基础入门
下周将进入网页的"装修"阶段 —— CSS。预计学习内容：
CSS 是什么、怎么写（内联/内部/外部样式表）
选择器（标签选择器、class 选择器、id 选择器、组合选择器）
颜色与背景
盒模型（margin / border / padding / content）
宽高、边框、圆角
文字样式（字体、大小、颜色、行高、对齐）
动手练：把本周的 3 个 HTML 页面加上 CSS 样式，让它们从"毛坯房"变成"精装修"。
📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 1 周 · 总结篇