爱吃超人的怪兽1. 认识HTML：从最朴素的角度搞懂网页骨架
很多朋友第一天学前端，拿着HTML文档看半天，感觉这玩意儿既不是编程语言，也不是纯文字排版，属于一个“说不上来是什么”的存在。其实不用把HTML想象得太复杂，它本质上是网页内容的“叙事骨架”——你告诉浏览器：这里是一级标题，那里是一段正文，左边放一张图，下面点一个链接。浏览器拿到这套描述之后，再把内容渲染成你看到的页面。
HTML的英文全称是HyperText Markup Language，超文本标记语言。注意“标记”这两个字，它和传统意义上的编程语言有本质区别。编程语言强调逻辑：判断、循环、函数调用。而HTML强调的是“描述结构”：哪个是标题、哪个是段落、哪块是导航、哪块是底部，你负责把信息告诉浏览器即可，不需要写任何逻辑。这也是很多新手第一天会觉得“HTML好像很简单”的原因——确实简单，但要写出结构清晰、符合规范、利于维护和SEO的HTML，却并不像看上去那么轻松。
这条学习路线适合谁？包括从来没写过一行代码的纯小白，也适合已经会一些编程但从没系统梳理过HTML标签的开发者。尤其是那些“东写一点西写一点”的野路子选手，第一天把基础骨架打扎实了，后面学CSS和JavaScript会顺很多，不然等学到Flex布局和DOM操作时，还会回头反复查最基础的标签结构，非常耽误时间。
网上现在最流行的一种说法是：HTML是一个网站的骨架，CSS是皮肤，JavaScript是肌肉和神经。我觉得这个类比大体准确。骨架是什么？是支撑整栋建筑的内在结构，哪怕皮肤和肌肉都还没长出来，骨架立在那里，你就能看出这栋建筑大概是个什么形态、哪些区域放什么内容。所以第一天学HTML，重心就放在“骨架”两个字上，把整个页面最基本的骨骼立起来，后面才有资格谈好看和好用。
从最底层拆解，一个HTML文档从小到大依次是：标签（Tag）、元素（Element）、属性（Attribute）、文档结构（Document Structure）。标签是构成元素的基础单位，通常成对出现，如 <p> 和 </p> 中间夹着内容；元素则由开始标签、内容、结束标签共同组成，它是一个完整的结构单位；属性则是附加在开始标签上的额外描述信息，如 id、class、src、href 等，负责扩展或控制标签的行为和表现。很多人第一天分不清标签和元素的区别，这是一个常见误区。简单记：元素是完整结构，标签是结构的标记符号。
另外我要强调一点，现在的HTML标准已经迭代到HTML5，也就是HTML Living Standard，没必要去钻研那些老旧的、被废弃的写法，比如用 font 标签控制文字颜色、用 center 标签居中内容、用 table 表格去布局页面，这些统统已经是过去式。第一天起步，就按HTML5的规范来，在学习习惯上一步到位。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 文档骨架拆解：一个页面的地基
2.1 第一行代码：<!DOCTYPE html>
打开任何一本HTML教程，基本都会看到这样一段“标准开头”：
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的“地基”，每一个新页面的起点。其中第一行 <!DOCTYPE html> 是文档类型声明，要求必须写在文件最开头，它的作用就是告诉浏览器：“我是按照HTML5标准写的文档，你按现代标准来解析我”。别小看这一行，少了它，浏览器会进入“怪异模式”（Quirks Mode），对CSS和布局的解析规则都会发生变化，导致同样的代码在不同的浏览器里呈现效果不一致。很多初级开发者排查样式错乱问题时找半天原因，最后才发现是doctype被误删或写错了，非常头疼。
2.2 <html> 根标签：整棵结构树的树干
<html> 标签是所有其他标签的最外层容器，整个文档所有内容都被包裹在它里面，因此它也被称为根元素。它的 lang 属性用来标注页面内容的主要语言，比如中文页面写 lang="zh-CN"，英文页面写 lang="en"。这个属性看似不太起眼，但它关系到浏览器翻译、屏幕阅读器朗读、搜索引擎识别页面语言，属于不写不会被发现、写错就会扣细节分的属性。网站如果面向全球用户，就算实际内容只有中文，这个属性也应该正确标记，避免浏览器自动弹出翻译栏造成困扰。
2.3 <head> 与 <body>：一张页面的两块拼图
<head> 和 <body> 是 <html> 下面两个最重要的子区域，一前一后，职责完全不同。
<head> 是“头”部区域，里面的内容不会直接显示在网页主体区域中，它装载的是页面的元信息。用大白话说：<head> 里面的东西不是给用户看的，是给浏览器、搜索引擎、爬虫和机器看的。它告诉浏览器这个页面用什么编码、叫什么名字、作者是谁、针对移动端怎么做适配、SEO关键词是什么、要不要引入外部CSS和JS文件等等。我们常用的 <title>、<meta>、<link>、<style>、<script> 等标签都会放在 <head> 里。
<body> 是“身”体区域，页面中所有用户能直接看到的内容都放在这里，包括文字、图片、视频、链接、按钮、表单等。这部分就是我们写页面时的主战场。初学阶段，你可以先粗略理解为：<head> 承载“关于页面的信息”，<body> 承载“页面展示的内容”，两者分工协作，构成了最基础的HTML文档骨架。
我遇到过很多初学者习惯性的把所有代码全丢进 <body>，比如把 style 标签也写到 body 里，虽然浏览器能解析，但严格来说并不规范，尤其是当项目变大、多人协作时，这种写法会严重拖累可读性。第一天就养成规范习惯，按照骨架区域划分代码，后续做项目时才不会乱。