第一天：HTML 入门 — 搭起网页的"钢筋混凝土骨架"

蜗牛往上爬 · 前端工业可视化学习笔记第 1 篇
从今天开始，我用 2 小时/天，从 0 基础向"Web 前端工业可视化"目标爬行。这篇文章是阶段 0（HTML + CSS）第 1 周的第一篇博客，带你认识网页最底层的语言 —— HTML，并亲手写出你的第一个网页。

一、HTML 到底是什么？
二、网页三件套：HTML / CSS / JavaScript
三、HTML 基本骨架（必背）
四、标题与段落
五、常用文本标签
六、注释：写给代码"旁边的人"
七、属性：给标签加"配置"
八、动手练：我的第一个网页 —— 个人简介页面
九、常见坑点与最佳实践
十、这些知识在工业可视化里用在哪？
十一、自测挑战 10 题
十二、总结

一、HTML 到底是什么？

HTML 全称 HyperText Markup Language，中文叫超文本标记语言。

三个关键词逐个拆开：

关键词	含义
HyperText（超文本）	不仅仅是文字，还能包含图片、链接、视频等多媒体内容
Markup（标记）	用一套"标签"来标注内容：这是什么、长什么样
Language（语言）	一套给浏览器"读"的语法规则

1.1 它是不是编程语言？

不是。 HTML 是标记语言，而不是编程语言。两者区别：

编程语言（如 JavaScript）：有逻辑、有判断、有循环，能"算东西"
标记语言（如 HTML）：只负责"描述结构"，不处理任何逻辑

1.2 类比记忆：盖房子

把网页想象成盖房子：

HTML = 房子的钢筋混凝土结构（有几间房、房间怎么布局）
CSS = 装修（墙面刷什么颜色、家具怎么摆）
JavaScript = 电灯开关、门锁（能动、能响应操作）

今天只学 HTML —— 先把骨架立起来。

二、网页三件套：HTML / CSS / JavaScript

技术	角色	类比	一句话理解
HTML	结构	骨架	网页"有什么"
CSS	样式	装修 / 皮肤	网页"长什么样"
JavaScript	行为	大脑 / 肌肉	网页"能做什么"

💡 为什么对做工业可视化很重要
大屏页面里每个数据块、每张图表的"容器"，都是先由 HTML 搭出来的结构。结构不清晰，后面 CSS、JS、图表库（ECharts、Three.js）都无从下手。这就像盖厂房——地基和框架歪了，后面装修得再好也没用。

三、HTML 基本骨架（必背）

新建一个文件，命名为 index.html（index 是网站的默认首页文件名），输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <!-- 网页的可见内容都写在 body 里 -->
  </body>
</html>

逐行拆解

代码	作用
`<!DOCTYPE html>`	声明这是 HTML5 文档，必须写在文件最顶部
`<html lang="zh-CN">`	整个页面的根标签，`lang` 告诉浏览器页面语言是简体中文
`<head>`	头部：存放给浏览器看的"配置信息"（编码、标题、样式等），不直接显示
`<meta charset="UTF-8">`	指定字符编码为 UTF-8，中文不乱码的关键
`<title>`	浏览器标签页上显示的文字
`<body>`	身体：网页上用户能看到的所有内容都写在这里

两个快速自查

缩进：子标签比父标签缩进 2 个空格，一眼能看出嵌套关系
闭合：绝大多数标签成对出现（开标签 + 闭标签），别漏掉 </...>

四、标题与段落

4.1 标题：从大到小共六级

<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>

规范：

一页通常只用一次 <h1>，就像文章只有一个大标题
标题不要跳级使用（<h1> 直接到 <h3> 不规范），要像目录一样一层层往下

4.2 段落

<p>这是一个段落，段落之间会自动换行。</p>
<p>这是第二个段落。</p>

<p> 是 paragraph（段落）的缩写。段落与段落之间天然有间距，不需要手动加空行。

五、常用文本标签

<p>这是<b>加粗</b>文字，这是<strong>重要强调</strong>文字。</p>
<p>这是<i>斜体</i>文字，这是<em>语气强调</em>文字。</p>
<p>这是<u>下划线</u>文字，这是<s>删除线</s>文字。</p>
<p>第一行<br>换行到第二行（br 是单标签）</p>
<p>上面有一条分割线：</p>
<hr>

标签	含义	备注
`<b>` / `<strong>`	加粗	推荐用 `strong`（带强调语义）
`<i>` / `<em>`	斜体	推荐用 `em`（带强调语义）
`<u>`	下划线
`<s>`	删除线
`<br>`	换行	单标签，无结束标签
`<hr>`	水平分割线	单标签

🧠 核心规则：大多数标签成对出现，如 <p>内容</p>；少数单标签（自闭合）如 <br>、<hr>、<img>。
b 只是"视觉上加粗"，strong 除了加粗还表示"这段很重要"，屏幕阅读器会加重朗读 —— 所以能表达语义时，优先用语义化标签。

六、注释：写给代码"旁边的人"

<!-- 这是一行注释，浏览器不会显示 -->
<!--
  多行注释
  可以写好几行
-->

浏览器完全忽略注释，它只给"人"看
注释写的是"这段代码为什么这样写"、“要注意什么”，比代码本身更值钱
养成写注释的习惯，一周后回头看自己代码才不会一头雾水

七、属性：给标签加"配置"

标签可以带属性，格式：<标签名属性名="属性值">

<!-- id：页面上唯一的"身份证号"，一个页面只能有一个 -->
<div id="main-panel">主面板</div>

<!-- class：可重复的"分类名"，CSS 常用来选中它 -->
<div class="device-card">设备卡片一</div>
<div class="device-card">设备卡片二</div>

<!-- style：直接写少量样式（后面学 CSS 后会少用它） -->
<p style="color: red;">这段文字是红色的</p>

<!-- title：鼠标悬停时的提示文字 -->
<p title="这是一段提示">把鼠标放在我上面试试</p>

属性	作用	特点
`id`	唯一标识	一页只能出现一次，常被 JS、锚点使用
`class`	分类名	可重复，CSS 主要靠它选中元素
`style`	行内样式	直接写 CSS，临时调试用
`title`	悬停提示	鼠标放上去显示提示文字

八、动手练：我的第一个网页 —— 个人简介页面

练习三步法：先照敲一遍 → 再改成自己的信息 → 最后合上文档独立写一遍。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的个人简介</title>
  </head>
  <body>
    <!-- 一级标题：页面上最大的标题 -->
    <h1>蜗牛往上爬</h1>
    <!-- 用 strong 强调身份 -->
    <p>正在自学 <strong>Web 前端工业可视化</strong> 的学习者。</p>

    <!-- 分割线，把标题区和内容区分开 -->
    <hr>

    <!-- 二级标题：页面里的小节标题 -->
    <h2>我的目标</h2>
    <p>做出自己的 <em>智慧工厂大屏</em> 和 <em>数字孪生</em> 作品。</p>

    <h2>我每天在学</h2>
    <p>HTML → CSS → JavaScript → TypeScript → 可视化图表 → 3D 场景<br>
       一步一步往上爬，学习为王！</p>

    <!-- 明天会学列表，把"我每天在学"改成列表更清晰 -->
  </body>
</html>

验证方式：

双击文件，用浏览器打开 —— 能看到页面内容
按 F12 打开开发者工具 → 点 Elements（元素） 面板 —— 可以看到这页的完整 HTML 结构

🎉 完成这一步，你就已经写出了人生第一个网页！

九、常见坑点与最佳实践

坑 1：中文乱码

<!-- ✅ 正确：在 head 里声明 UTF-8 -->
<meta charset="UTF-8">

如果 <head> 里没有这一行，中文在浏览器里会显示成"乱码"。这也是为什么 meta charset="UTF-8" 是骨架里最不能删的一行。

坑 2：标签漏闭合

<!-- ❌ 错误：p 标签没闭合，后面所有内容都会被"吞"进第一个段落 -->
<p>第一段
<p>第二段

<!-- ✅ 正确 -->
<p>第一段</p>
<p>第二段</p>

漏闭合是新手最高频的错误。写完一个标签立刻写闭合标签，再往中间填内容，能避免 90% 的嵌套错误。

坑 3：标题跳级

<!-- ❌ 不规范：h1 直接跳到 h3 -->
<h1>大标题</h1>
<h3>小标题</h3>

<!-- ✅ 规范：一级一级往下 -->
<h1>大标题</h1>
<h2>小节标题</h2>

标题层级混乱会影响 SEO 和阅读结构。把它当成文档目录来写。

最佳实践清单

[x] 骨架必背：<!DOCTYPE html> + <html> + <head> + <body>
[x] 缩进用 2 空格，让嵌套结构一眼可见
[x] 能表达语义的标签（strong/em）优先于纯视觉标签（b/i）
[x] 注释只写"为什么"，不写"是什么"（代码自己会说明是什么）
[x] 用浏览器 F12 的 Elements 面板当"照妖镜"，随时检查结构

十、这些知识在工业可视化里用在哪？

你可能在想：一个 <h1>、一个 <p>，和智慧工厂大屏有什么关系？

以未来要做的智慧工厂大屏为例，它的页面结构长这样：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>智慧工厂监控大屏</title>
  </head>
  <body>
    <!-- 大屏顶部标题栏 -->
    <h1>智慧工厂运行监控中心</h1>

    <!-- 大屏内容区：第一块数据面板 -->
    <div class="device-card">
      <h2>设备状态</h2>
      <p>压缩机 A：<strong>运行中</strong></p>
      <p>冷却泵 B：<em>待机</em></p>
    </div>

    <!-- 大屏内容区：第二块数据面板 -->
    <div class="device-card">
      <h2>告警信息</h2>
      <p>温度过高 <s>（已处理）</s></p>
    </div>

    <!-- 更多面板：产量、能耗、人员…… 后面会用 CSS 排版、JS 填数据 -->
  </body>
</html>

看到共性了吗？大屏 = 标题 + 一堆结构清晰的"盒子"（面板）。今天学的标题、段落、div 盒子，正是未来大屏页面的地基。区别只是后面会用 CSS 让盒子排成大屏布局、用 JS + 图表库往盒子里灌实时数据。

十一、自测挑战 10 题

每题的答案尽量不看示例默写，写不出来再回看。这一步比读十遍都有效。

HTML 的中文全称是什么？它是编程语言吗？
网页三件套 HTML / CSS / JS 分别负责什么？
<!DOCTYPE html> 写在文件的什么位置？作用是什么？
为什么要有 <meta charset="UTF-8">？删掉它会怎样？
<h1> 和 <h6> 哪个字号最大？一页能出现几次 <h1>？
加粗、强调、斜体分别用哪个标签（各举一个）？
注释的写法是什么？浏览器会显示注释吗？
写出带 id、class、title 三种属性的任意三个标签示例。
单标签有哪些（举 2 个）？成对标签的书写规则是什么？
把自己简介页的 <title> 改成"XX 的个人简介"，刷新浏览器验证标签页标题变化。

加分挑战：用 F12 打开任意一个知名网站（比如你常看的博客），在 Elements 面板里找到它的 <h1>、<nav>、<footer>，看看真实网站的骨架长什么样。

十二、总结

今天学完，你应该能做到：

[x] 说出 HTML 是什么、网页三件套各管什么
[x] 默写 HTML 基本骨架
[x] 分清 head（配置区）和 body（内容区）
[x] 使用标题、段落、文本标签、注释、属性
[x] 独立写出一页"个人简介"页面并在浏览器打开验证

一句话带走：HTML 是网页的骨架，今天你搭出了人生第一个骨架。明天开始学"列表、链接、图片"，把骨架填充得更丰满 —— 一步一步往上爬，学习为王！

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 1 周 · 第 1 篇

【HTML+CSS】day01-html-intro