爱吃超人的怪兽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 里，虽然浏览器能解析，但严格来说并不规范，尤其是当项目变大、多人协作时，这种写法会严重拖累可读性。第一天就养成规范习惯，按照骨架区域划分代码，后续做项目时才不会乱。
3. <head> 区的主角：meta与title的使用细则
3.1 <title>：页面名字，也是搜索结果里的那行标题
<title> 是 <head> 区里最简单也最重要的一个标签，它定义了浏览器标签页上显示的文字，同时也是搜索引擎结果页里那一行蓝色的可点击标题。一个好的 <title> 写法应该简明扼要、信息明确，包含主要关键词，比如“HTML入门教程 - 三天搞定前端基础”，比单纯写“教程”两个字要好得多。标题是SEO的基石之一，搜索引擎主要通过标题来判断这个页面的核心内容是什么。
实操中还要注意 <title> 不能重复、不能为空，并且每个页面都应该有自己独立的标题。很多使用模板建站的用户会发现所有页面标题都相同，这种做法的后果就是搜索引擎分不清你不同页面的侧重，流量分配非常吃亏。
3.2 <meta> 标签：看不见的“配置项”
<meta> 标签让我印象非常深刻的一点是，很多新手学了很长一段时间都搞不清楚它到底有什么用，以为只是模板自带的一行“神秘代码”。实际上 <meta> 是一个“元数据”标签，用来向浏览器和机器描述与页面本身相关的信息，它的类型主要由 charset、name、http-equiv 等属性决定。
最常用的几个写法：
html复制<meta charset="UTF-8">
charset 属性声明文档的字符编码。UTF-8 是当前互联网应用最广泛的编码格式，支持几乎所有语言的字符集。如果这个属性缺失或写错，很常见的现象就是页面里的中文变成乱码，但英文字母和数字显示正常。这个坑我帮人排查过很多次，有些项目部署到服务器后中文全部变成“锟斤拷”，最后一查是服务器返回的响应头里没有带对编码信息，而本地HTML文件里又忘了写 charset。所以我会建议你每次新建HTML文件，第一件事就是把 doctype 和 charset 这两行敲下来，形成肌肉记忆。
html复制<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport 是做移动端适配的一个基础meta标签，它告诉浏览器：页面的宽度跟设备的屏幕宽度保持一致，初始缩放比例为1，也就是不缩放。当前手机浏览器默认的渲染宽度其实是980像素左右，如果没有这个标签，手机打开页面就像在看一个缩小版的电脑页面，需要手动双指放大才能看清内容。
html复制<meta name="description" content="这里是页面的描述信息，通常会显示在搜索结果标题下方">
description 标签的 content 内容会被搜索引擎显示为搜索结果中的摘要文字，虽然它对排名权重的影响已经不像早年那么明显，但它直接影响点击率。一个写得准确、有吸引力的描述，能显著提升用户从搜索结果跳转到页面的概率。
3.3 外部资源的引入：<link> 与 <script>
第一天接触HTML，还会频繁遇到两个需要放在 <head> 里的标签：<link> 用来引入外部CSS文件，<script> 用来引入外部JavaScript文件。两者虽然在写法上很像，但作用完全不同。
html复制<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
这里要注意的一个细节是：CSS一般放在 <head> 里提前加载，避免页面出现“裸奔”和样式闪烁（FOUC）问题；而JS如果不需要在页面加载完成前执行，建议放在 <body> 的末尾，或者使用 defer 属性，否则脚本会阻塞后续HTML的解析，导致页面白屏时间变长。很多初学者最初会把所有 <script> 都堆在 <head> 里，结果页面加载时一直转圈，体验非常糟糕。理解了 defer 的作用之后，这个问题就会迎刃而解。
4. <body> 里的高频标签：初学者的必修清单
4.1 文本段落与标题标签
文本内容在HTML中按层级可以分为两类：标题和正文。标题标签从 <h1> 到 <h6> 一共六级，重要性从高到低递减。<h1> 在一个页面里一般只出现一次，它表示这个页面最重要的标题，通常也是SEO优化的核心目标；<h2> 到 <h6> 可以多次使用，用来组织和细分信息层级。初学者最常见的错误是把标题标签当成“加粗大字”来用——想放大文字就用 <h1>，想缩小就用 <h4>，最后整个页面的标题层级乱成一锅粥，搜索引擎和屏幕阅读器都无法正确理解内容结构。
段落标签 <p> 用于包裹一段独立文字，浏览器会自动在段落前后加上一定间距。这里注意一个规范中的细节：<p> 是块级元素，默认占满整行宽度，两个段落的间距是自动生成的，不要依赖连续回车换行来制造间距，那在HTML里是无效的。
换行标签 <br> 是少数几个“空标签”之一，不需要结束标签，作用是在当前段落内强制换行。它适合用在地址、诗歌、歌词等本身需要手工换行的场景，但不要用它来制造段落间距，那属于滥用。
4.2 图片标签 <img>：最容易踩坑的元素
<img> 是一个非常经典的自闭合标签，不需要 </img> 结束标签，它通过 src 属性指定图片地址，通过 alt 属性提供图片加载失败或无法显示时的替代文本。
html复制<img src="cat.jpg" alt="一只橘猫在晒太阳">
alt 属性常被新手忽略，但它对可访问性和SEO来说非常重要。屏幕阅读器会朗读 alt 内容，帮助视障用户理解图片信息；当图片链接失效时，页面上也会显示这段文字；搜索引擎的图片搜索也主要依赖 alt 来理解图片主题。我遇到过很多同学觉得 alt 可有可无，实际上一旦因为图片CDN出问题导致图片加载失败，页面上留白一片，用户也不知道这块区域原本想展示什么，体验就很差。
图片加载失败（俗称“裂图”）的原因有很多：相对路径写错、文件名大小写不一致、资源被删、服务器跨域限制、防盗链等等。排查思路遵循从内到外：先看本地文件是否存在，再看路径是否相对正确，然后用浏览器开发者工具的Network面板确认请求是否发出、状态码是什么。404表示资源不存在，403通常表示权限或防盗链，200但显示不了则可能是图片格式浏览器不支持。
4.3 链接标签 <a>：从一页到另一页的桥梁
超链接是互联网最核心的交互方式之一，HTML中用 <a> 标签实现。<a> 的 href 属性表示目标地址，可以是绝对URL（如 https://example.com），也可以是站内相对路径（如 /about.html 或 ../about.html），还可以是锚点（页面内的位置跳转，如 #section2）。
html复制<a href="https://example.com" target="_blank" rel="noopener noreferrer">访问示例网站</a>
关于 target="_blank" 在高版本浏览器中会自动带有 noopener 效果，但在旧代码或老旧浏览器中，缺少 rel="noopener noreferrer" 可能存在安全风险。因此当你用新标签页打开链接时，建议保持 rel 的完整写法，这是行业内比较标准的安全实践。
锚点跳转是页面内导航的常用方法，比如最经典的“一键返回顶部”功能，最早就是靠一个 <a href="#"> 实现的，现在则更多结合JavaScript实现平滑滚动效果。
4.4 列表标签的三个兄弟
HTML中有三种列表：无序列表 <ul>、有序列表 <ol> 和自定义列表 <dl>。以 <ul> 为例，它内部只能包含 <li> 列表项，<li> 内可以再嵌套其他任意内容，包括另一个列表，从而实现多级菜单。
html复制<ul>
<li>前端基础</li>
<li>CSS布局</li>
<li>JavaScript交互</li>
</ul>
<ol>
<li>第一步：创建文件</li>
<li>第二步：编写代码</li>
<li>第三步：浏览器预览</li>
</ol>
无序列表适合没有先后顺序的内容，有序列表适合步骤、排行等有明确顺序的内容。列表标签看起来简单，但它是网页布局中最常用的结构容器之一，导航菜单、新闻列表、商品列表、步骤说明，几乎处处都能看到列表的影子。
4.5 表单标签：用户与网页的对话窗口
表单是网页实现“用户输入”的主要手段，登录、注册、搜索、评论、留言、问卷，背后都是表单在支撑。最基础的表单结构包括 <form> 表单容器、用于输入的 <input> 标签、用于多行文本的 <textarea> 标签、用于选择的 <select> 与 <option> 标签，以及提交按钮。
<input> 可以通过 type 属性切换出各种输入形态：
type="text"：单行文本框，普通文本输入type="password"：密码框，输入内容以圆点遮罩type="email"：邮箱输入框，浏览器会做简单格式校验type="number"：数字输入框，支持步进按钮type="radio"：单选按钮，同组互斥type="checkbox"：复选框，支持多选type="file"：文件上传type="submit"：提交按钮type="button"：普通按钮，一般配合JavaScript使用
一个经典的搜索表单可以这样写：
html复制<form action="/search" method="get">
<input type="text" name="keyword" placeholder="请输入搜索关键词">
<button type="submit">搜索</button>
</form>
这里要强调一个初学者容易忽略的点：name 属性是表单数据提交的关键。如果 input 标签上没有 name，那么表单提交的时候这个字段的值不会被发送给服务器。当年我帮一个同学排查一段看似完全正常但就是无法提交数据的表单，排查了很久才发现所有输入框都忘了写 name 属性。这个教训很深刻，到今天我新建表单第一件事就是把 name 先规划好。
5. 标签的嵌套规则与语义化：从“能显示”到“更专业”
5.1 块级元素与行内元素
初学HTML时就会遇到两个高频概念：块级元素（block-level）和行内元素（inline）。块级元素在页面上占据一整行，前后都会换行，宽度默认填满父容器，比如 <div>、<p>、<h1>~<h6>、<ul>、<li>、<table>、<form> 等。行内元素则在同一行内从左到右排列，宽度由内容撑开，比如 <span>、<a>、<strong>、<em>、<img> 等。
这里有一个很实用的规律：块级元素通常可以包含行内元素和块级元素，但行内元素通常不应该包含块级元素。比如 <a> 标签内部嵌一个 <div> 虽然现代浏览器能渲染出来，但严格来说并不规范，会造成嵌套层级混乱。实操中最容易犯的错误是在 <ul> 下直接写 <div> 而不是 <li>，这在标准HTML中是不允许的，浏览器解析时可能会自动调整结构，导致布局诡异。遇到这种情况，先别急着怀疑是CSS的锅，用开发者工具看一遍DOM结构，往往就恍然大悟了。
5.2 语义化标签：让标签自己“说话”
HTML5 引入了一批有明确语义的标签，这是HTML进化的一个重要里程碑。在它们出现之前，整个页面布局基本靠 <div> 堆砌，从代码里你根本看不出哪个是导航、哪个是页脚，全靠 class 命名来弥补。比如 <div class="header">、<div class="nav">、<div class="footer">，这种写法虽然能出效果，但对机器、对搜索引擎、对维护者都极其不友好。
HTML5 给出的解决方案是：直接用语义化标签来表达区域含义。
<header>：页面或区块的头部<nav>：导航区域<main>：页面主内容区域<article>：独立的文章或内容块<section>：一个主题相关的分区<aside>：侧边栏或补充信息<footer>：页面或区块的底部
用语义化标签重写一个博客页面头部，大概长这样：
html复制<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>今天的文章</h2>
<p>正文内容……</p>
</article>
</main>
<footer>
<p>版权信息</p>
</footer>
这种做法对 SEO 和可访问性都比较友好：搜索引擎的爬虫可以更准确地识别页面结构，屏幕阅读器也可以更高效地导航内容。所以第一天学习HTML，就尽量用语义化标签替代纯 <div>，相当于从一开始就打上正确的“思维方式钢印”。
5.3 HTML注释：写给代码维护者的便利贴
注释在HTML中写作 <!-- 注释内容 -->，它的内容不会显示在页面上，只存在于源码中。初学者往往觉得注释没用，觉得“代码是自己写的，自己记得住”，但现实是：任何项目过两周再看，记忆就会模糊。尤其是后面学了CSS做样式调整时，看到某个区块注释写着“这里是导航栏，样式见style.css第42行”，定位问题的效率会高很多。
一个比较好的习惯是：在每个大区块的起始位置加一行注释说明该区域的作用，在复杂嵌套结构结束的地方加一行结束注释，如 <!-- /header -->，这样能大幅提升代码的可读性。多人协作项目里，这一点尤其重要。
5.4 特殊字符的转义写法
HTML文档中，<、>、&、引号等字符有特殊含义，不能直接在正文中使用。比如你想在页面上显示 5 < 10，如果直接写成 5 < 10，浏览器会认为 < 后面是标签的开始，导致解析异常。正确的做法是使用HTML实体字符：
<写作<>写作>&写作&- 双引号
"写作" - 不断行空格写作
例如：
html复制<p>5 < 10 是恒成立的。</p>
这个知识点在写技术教程页面时尤其常用，因为教程页面需要大量展示代码片段，而这些代码片段里充满了尖括号和引号。很多初学做个人博客的朋友都遇到过“我怎么把 <div> 写进正文，页面却把它当标签吃了”的问题，本质就是没有做转义。
6. 踩坑记录：HTML新手最容易遇到的五个问题
6.1 HTML文件用浏览器打开显示乱码
现象：浏览器打开 .html 文件后，中文全部变成“锟斤拷”、“烫烫烫”之类的乱码。
原因：绝大多数情况是文档没有声明字符编码，或者声明的编码与文件保存时使用的编码不一致。比如文件保存为GBK编码，但HTML里声明了 UTF-8，就会出现乱码。
解决：把 <meta charset="UTF-8"> 放在 <head> 最前面，同时确认编辑器保存文件时使用的编码也是UTF-8。以VS Code为例，右下角会显示当前文件的编码格式，点击可以切换为UTF-8。
6.2 HTML文件无法预览
现象：双击 .html 文件后，浏览器打开的是源码而不是渲染后的页面。
原因：大概率是文件关联出了问题，或者用文本编辑器打开了文件。
解决：右键点击HTML文件，选择“打开方式”，选择Chrome或Edge等现代浏览器；也可以先打开浏览器，按 Ctrl + O 手动选择文件。注意文件名后缀必须以 .html 或 .htm 结尾，如果是 .txt，浏览器只会显示源码。
6.3 图片加载失败，页面出现小图标
现象：页面上的 <img> 区域显示为一个破图图标或一个空白占位。
原因：src 指定的图片地址无法访问，可能是路径写错、文件名拼写错误、文件不存在、服务器跨域限制等。
解决：优先排查路径。如果图片和HTML文件在同一目录下，直接写文件名；如果在子目录，写 子目录/图片名.jpg；如果在上级目录，写 ../图片名.jpg。其次检查文件名大小写是否完全一致，Linux服务器对大小写是敏感的，Cat.jpg 和 cat.jpg 是两个完全不同的文件。最后，建议始终给 <img> 添加 alt 属性，这样即使图片加载失败，也能显示一段描述文字，不至于让用户面对空白区域。
6.4 写了 <style> 但样式完全不生效
现象：在 <head> 里写好了 <style> 标签和CSS规则，保存刷新后页面样式完全没变化。
原因：可能是 <style> 标签被放到了 <body> 里面，虽然浏览器能解析但不符合规范；也可能是CSS选择器写错，比如类名是 class="box" 但选择器写成了 #box（那是ID选择器）；还可能是因为样式被后面的规则覆盖了。
解决：先确认 <style> 放在 <head> 区域；再用开发者工具（F12）选中目标元素，查看Styles面板中哪些规则生效、哪些被划掉；特别注意选择器的优先级问题。
6.5 页面在手机上显示很挤或很小
现象：用手机浏览器打开页面，文字小得看不清，整个页面像是被等比缩小了。
原因：缺少移动端视口声明。
解决：在 <head> 里加一行：
html复制<meta name="viewport" content="width=device-width, initial-scale=1.0">
加上之后，页面宽度就会和手机屏幕宽度保持一致，浏览体验会有质的提升。现在很多前端框架和构建工具会自动注入这个标签，但手写页面时必须自己加上，算是移动端适配的“第一块基石”。
7. 一篇完整的HTML上手实操
说了一堆原理和概念，还是得动手才踏实。这里带你把今天学到的内容串起来，做一个真正能够运行的、完整的HTML页面。虽然它没有什么花哨功能，但它包含了今天讲解的所有核心标签。
第一步：新建一个文本文件，命名为 day01.html，注意后缀是 .html，不是 .txt。如果你用的是VS Code、Sublime Text、Notepad++这类编辑器，可以直接“新建文件并保存为HTML”格式。
第二步：输入以下完整代码：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="我的第一个HTML页面，用于学习基础标签">
<title>Day01：HTML骨架与基础标签</title>
</head>
<body>
<header>
<h1>我的第一个HTML页面</h1>
<nav>
<ul>
<li><a href="#page1">页面结构</a></li>
<li><a href="#page2">图片与链接</a></li>
<li><a href="#page3">表单示例</a></li>
</ul>
</nav>
</header>
<main>
<article id="page1">
<h2>页面结构</h2>
<p>这是一个包含<strong>标题、段落、列表</strong>的基本结构。</p>
<p>HTML由标签和属性构成，标签决定内容类型，属性提供额外信息。</p>
</article>
<article id="page2">
<h2>图片与链接</h2>
<p>下面是一张示例图片：</p>
<img src="https://picsum.photos/400/200" alt="随机风景图片" width="400" height="200">
<p>点击这里访问<a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer">MDN Web Docs</a>，这是前端学习最权威的资料站。</p>
</article>
<article id="page3">
<h2>表单示例</h2>
<form action="#" method="get">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱">
<br>
<button type="submit">提交</button>
</form>
</article>
</main>
<footer>
<p>Copyright 2024 · 个人学习记录</p>
</footer>
</body>
</html>
第三步：用浏览器打开这个文件，双击即可看到页面效果。页面里应该有导航菜单、三个内容区块、一张图片、一个表单和一个页脚。这个页面虽然简陋，但它已经具备了现代网页的基本骨架：doctype 声明、html 根标签、head 元信息区、body 内容区、语义化结构标签、图片、链接、列表和表单。
如果图片加载不出来，可能和网络环境有关——picsum.photos 是一个随机图片服务，国内访问有时候不稳定。可以换成其他你经常用的图片链接，或者直接把图片下载到本地，把 src 改成相对路径。这个操作本身就是在实践“图片加载失败排查”这个知识点。
动手过程中，你还可以试着在浏览器里按 F12 打开开发者工具，选择“Elements”面板，你会发现页面的所有元素都以树状结构展示在面前。这就是HTML的DOM结构，之后的CSS和JavaScript学习，都会围绕它展开。
8. 写在最后：第一天之后该怎么走
完成今天的HTML基础学习之后，下一阶段建议把重心转向CSS：盒模型、浮动、Flex布局、Grid布局。这几块学完，你就能把今天写的“骨架”变成真正有样式的界面了。再往后是JavaScript的基础语法和DOM操作，到那时，你就能让页面“动”起来——响应用户点击、动态加载数据、控制页面元素等。
HTML本身并不难，难的是把它放在整个前端知识体系里正确理解它的位置。它不负责美观、不负责逻辑，它只负责“准确描述内容”，这个定位决定了学习HTML时的评判标准——不是看你的标签用得多炫，而是看你的结构是否清晰、语义是否准确、代码是否易于维护。
我自己的体会是，HTML表面简单，但真正写好需要长期积累。很多工作了三五年的前端，回头看自己早年写的HTML也会觉得惨不忍睹。这不是坏事，恰恰说明你在进步。第一天只要你把骨架的概念、基本标签的用法、嵌套规则和语义化这几个点吃透，就已经给后面的学习铺好了一条扎实的路。接下来要做的，就是每天练一点，每天写一点，从一个页面到十个页面，从纯HTML到加上CSS和JS，慢慢你就能感受到从“写代码”到“做作品”的那层突破感了。