先说一个可能颠覆不少人认知的观点：HTML其实不算是一门“编程语言”。它没有变量、没有循环、不会计算，它是“超文本标记语言”，干的事情是用一套成体系的标签，给一段内容的“结构”和“语义”做标注。你去查语源就知道，HyperText Markup Language，重点在Markup（标记）。但正是这层标记，撑起了整个互联网的基础——你正在看的这个页面，我写的这篇博客，本质上都是一堆HTML标签在“搭骨架”，CSS负责“穿衣打扮”，JavaScript负责“动起来”。所以学HTML基础语法，不是“学一门编程语言的语法规则”，而是“学会用浏览器能看懂的方式，描述一份文档的结构”。
这篇内容想把HTML最核心的那部分语法讲透：从一段代码的骨架结构、标签的基本书写规范、高频常用标签的实操、到表格和表单这种最容易写乱的地方，最后再分享一些我实际写页面时踩过的坑和养成的习惯。不管你之后要走前端开发、做爬虫需要解析页面，还是只是想在博客园、Github Pages这类地方搭一个自己的页面，把这篇基础打牢，后面都能省很多事。
1. 先说清楚：HTML到底算不算“编程语言”
1.1 为什么这个问题的答案会影响你的学习方式
我在很多技术群里看到新人问“我是不是该先学Python再学HTML”，也有人问“HTML基础语法是不是和Java差不多”。这些问题的背后都带着同一个误解：把HTML当成了另一门通用的计算机语言。
搞清楚HTML不是编程语言，对你的学习方式影响非常大。如果你拿学Python、Java的那套思路来学HTML——纠结“变量怎么定义”“函数怎么调用”“循环怎么写”——你大概率会懵很久，因为这些概念在HTML里根本不存在。HTML不控制逻辑，它只负责描述“这里是一个标题”、“这里是一个段落”、“这里是一张图片”、“这里是一个输入框”。它要解决的唯一问题是：让浏览器知道，文档的每个部分分别是什么含义、按什么结构组织。
所以正确的学习方法应该是：看到一个标签，问自己三个问题——这个标签是干嘛的？它应该放在哪里？它能带哪些属性？而不是去想“它执行了什么逻辑”。
1.2 用“作文纸”的类比理解HTML的底层逻辑
把HTML想象成一张带有固定稿纸格式的作文纸。你在纸上写作文的时候，标题写在第一行居中，正文每段开头空两格，日期落款写在右下角。这些格式要求，就是“语法”。HTML的语法就是你告诉浏览器：“看好了，这两个字是标题，用h1的样式去显示；这四行话是第一段，用p的方式去呈现；这个位置我要放一张图，图的地址是xxx。”
浏览器拿到你的HTML代码之后，做的工作就类似于“阅卷老师”在扫描你的作文纸：它会从第一个字符开始，按顺序理解每一个标签，然后把它们“渲染”成你在屏幕上看到的网页。注意这句话里的关键词——“按顺序”。HTML从技术角度讲是一门“顺序解释”的标记语言，代码从上到下、从左到右被浏览器解析。这也是为什么很多新手发现“我的内容都写对了，为什么顺序乱了”的时候，第一反应是检查标签有没有写错位置，而不是去想某个标签有什么神秘逻辑。
2. 一个HTML页面的骨架：从DOCTYPE到body，你每天都会写这一段
2.1 DOCTYPE不是标签，但比一半的标签都重要
打开任何一个现代网页的源代码，第一行几乎都是<!DOCTYPE html>。很多新手会问：“这一行到底是干嘛的？它怎么长得跟别的标签不一样？”。
先说结论：<!DOCTYPE html>不是HTML标签，它是一条“文档类型声明”，写给浏览器的“前置指令”。它的作用是告诉浏览器：“请用现代标准的模式来解析我这个页面，别用那些古董模式的怪癖行为。”早期的网页标准混乱，浏览器之间存在很多兼容性怪癖，如果一个页面不加DOCTYPE，浏览器可能会进入“怪癖模式（Quirks Mode）”，导致同一个页面在不同浏览器里渲染出来的效果差异巨大。
所以不管后面出现什么新东西，HTML文件第一行老老实实写上<!DOCTYPE html>，永远没错。它就是一张“标准模式通行证”，写不写，很多时候决定了你页面里的CSS样式能不能正常工作。
2.2 html、head、body三兄弟各管什么
看完DOCTYPE之后，顺着代码往下扫，你会看到一个<html>标签，里面通常装着<head>和<body>两个子标签。这三者的关系可以类比成一棵树：<html>是根，<head>是“树冠的信息层”，<body>是“树干和树叶的实体部分”。
<html>：告诉浏览器“从这里开始，都是HTML文档内容”。它有一个lang属性，比如lang="zh-CN"，表示这个页面主要内容用的是简体中文，方便搜索引擎和读屏软件识别页面语言。<head>：页面的“大脑配置区”，里面放的是给浏览器和搜索引擎看的“元信息”，比如字符编码、页面标题、外部CSS和JS文件的引入等。它里面的内容默认不会直接显示在页面上。<body>：页面的“实际展示区”，你在屏幕上看到的文字、图片、按钮、视频，全部放在<body>里面。普通用户浏览网页时，看到的全是<body>的功劳。
新手常见的困惑之一：写了内容但不显示。十有八九是把内容写进了<head>而不是<body>，或者写在了<html>之外。记住：想要内容出现在页面上，就往<body>里塞。
2.3 head里必须有的几样东西
很多新手搭页面的时候<head>里只写一个<title>，然后发现页面上中文变成乱码，或者分享链接时标题、缩略图完全不对。教你把<head>里最常用的几样配齐，这是基础中的基础：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个页面</title> <meta name="description" content="这是页面的描述，搜索引擎摘要时会用到"> <link rel="stylesheet" href="style.css"> </head><meta charset="UTF-8">：声明字符编码。不写这个，浏览器默认可能用系统编码解析你的文件，中文就变成“锟斤拷”了。这是中文开发者最容易踩的坑之一。<meta name="viewport">：移动端浏览器适配的关键。不写这个，手机打开你的页面会像在电脑上看一样被缩小，字小到看不清。有了这行，页面宽度才会和手机屏幕宽度对齐。<title>：浏览器标签页上显示的文字，也是搜索引擎结果里那行大标题。每个页面都应该有一个唯一的、能概括内容的title。<meta name="description">：页面摘要。写得好，别人在搜索引擎里看到你的内容简介时，点击意愿会高很多。
3. 标签的基本盘：写法、属性、嵌套，这三件事决定你代码的寿命
3.1 成对标签和自闭合标签，什么时候用哪种
HTML标签按写法分两类：成对标签和自闭合标签。成对标签有开始和结束两部分，比如<p>这是段落</p>，内容夹在两者之间；自闭合标签则没有嵌套内容，自己一个就代表一次“插入”，比如<img src="a.jpg">、<br>。
这个区分背后其实是一个很朴素的逻辑：标签所代表的“语义”需不需要包裹内容。你要声明一段文字是段落，那必须明确“从哪儿开始到哪儿结束”，所以要<p>和</p>成对出现；你要在页面里插入一张图片，图片本身是外部资源，没有内部的文字内容要包裹，“插入”这个动作一次完成就够了，所以<img>不需要</img>。
以下是常见的自闭合标签速查表，记熟它们能避免很多低级错误：
| 标签 | 作用 | 常见属性 |
|---|---|---|
img | 引用外部图片 | src（图片地址）、alt（替代文字） |
br | 换行 | 无 |
meta | 文档元信息 | charset、name、content |
input | 输入框 | type、name、value、placeholder |
link | 引入CSS文件 | rel、href |
hr | 水平分割线 | 无 |
有人可能知道HTML5里自闭合标签后面的斜杠可以不写，比如<br/>写<br>就行。我自己推荐不写，因为更干净，HTML5规范也允许。
3.2 属性是标签的“配置项”，先记住这几个
光有标签名字，只能定义“这是什么东西”，但实现不了“这个东东西有什么具体特征”。属性就是标签的“配置项”。写法的通用格式是：标签名后跟空格，然后属性名="属性值"，多个属性之间用空格隔开。
<a href="https://example.com" target="_blank" title="点击跳转到example">这是一个链接</a>上面这段里，href表示链接指向的地址，target="_blank"表示在新标签页打开，title表示鼠标悬停时的提示文字。每个标签支持的属性并不完全一样，但有几个通用属性很常用，比如id（页面内唯一标识）、class（CSS类名）、style（内联样式）、title（悬停提示）。
新手写属性最常犯的错误是漏掉引号，或者用了单引号、双引号混用。说个经验之谈：HTML属性值一律用双引号包起来，不要为了省事省略引号。虽然HTML规范在某些情况下允许不带引号，但一旦属性值里出现空格或特殊字符，不带引号就会出bug，而且这种bug特别难排查。
3.3 嵌套的关键：千万别“交叉”
HTML标签允许嵌套，比如<ul>里面放若干<li>，<div>里面放<p>再放<a>。嵌套正确的写法必须满足“闭合顺序和打开顺序相反”，就像一层一层剥洋葱：
<!-- 错误：交叉嵌套 --> <div>文字<p>段落</div></p> <!-- 正确：先开的人后关 --> <div>文字<p>段落</p></div>交叉嵌套是HTML语法里最基础也最容易犯的错误之一。后果是什么？浏览器的解析器会自动“修正”这种错误，但它修正的方式和你预期的可能完全不一样，会导致页面布局乱套、CSS选择器匹配不到、JavaScript获取DOM对象失败等一连串问题。
有个简单的自查技巧：写完一段HTML后，检查每个成对标签的闭合标签，和开始标签的顺序是否正好是反过来的。编辑器的自动缩进也能帮你看出嵌套关系，缩进不对的基本就是嵌套错了。
3.4 块级元素和行内元素，决定了页面怎么“排”
写HTML的时候，你会慢慢发现有些标签天生占一整行，比如<div>、<p>、<h1>，这些是块级元素；有些标签只占自身内容的宽度，比如<span>、<a>、<strong>，这些是行内元素。
- 块级元素：在页面上以“块”的形式出现，默认会另起一行，并独占一行的宽度。类似Word里“一个段落”的概念。
- 行内元素：在页面上宽高由内容撑开，不会换行，多个行内元素可以并排在一条水平线上。类似Word里的“一个加粗的词”，它嵌在段落文本中间。
这个区别是后面学CSS布局的基石。你控制width、margin、padding时，这些属性对块级元素和行内元素的生效逻辑完全不同。学HTML基础阶段不需要把每个属性记下来，但必须建立这个分类意识，知道它们是两套东西。
4. 高频标签实操速查：从文本到图片，一天就能用熟
4.1 文本与标题：页面内容的主体
网页归根到底是给人看的文字信息。HTML里描述文本结构的标签，是你第一个要掌握的家族。
| 标签 | 语义 | 实际显示效果 | 使用建议 |
|---|---|---|---|
h1~h6 | 六级标题 | 从大到小逐级变粗 | h1一页面只用一个，用于主标题；h2以下可多处使用 |
p | 段落 | 段落前后有默认间距 | 连续的正文文字记得分段，别硬用<br>换行 |
strong | 重要强调 | 加粗 | 表示“重点内容”，不只是为了加粗外观 |
em | 语气强调 | 斜体 | 表示这句话需要重读，也不只是为了外观 |
span | 无语义的行内容器 | 无默认样式 | 配合CSS做局部样式时使用 |
br | 换行 | 文本另起一行 | 只在确实需要换行处使用 |
hr | 分割线 | 水平线 | 表示内容主题切换时使用 |
这里想多说一句，标题标签的层级不只是“字号区别”，它代表的是文档的“大纲结构”。搜索引擎抓取页面时，会把标题层级作为一个重要的语义信号：h1是页面主题，h2是各章节标题，h3是章节下的小标题。所以写标题时，应该像写论文目录一样从大到小逐层递进，别跳级。
4.2 链接与图片：连接互联网的两只手
网页之所以叫“超文本”，链接和图片功不可没。先说链接：
<a href="page.html">站内页面</a> <a href="https://example.com" target="_blank">外部链接（新窗口打开）</a> <a href="#comments">页面内锚点跳转</a> <a href="mailto:hello@example.com">发送邮件</a>href属性是链接的核心。新手最容易在这里犯的错是把“页面内锚点”写成完整URL。#开头的地址代表的是“当前页面里id等于某值的元素位置”，不是指定网址。还有，站内链接建议用相对路径，比如about.html、./pages/about.html，这样整个网站换域名时不用改链接。
图片标签稍微复杂一点，因为它牵扯到外部资源加载：
<img src="images/logo.png" alt="公司Logo" width="200" height="100">src：图片路径。可以是相对路径，比如images/logo.png，也可以是完整URL。alt：图片加载失败时显示的替代文字，也是读屏软件识别图片的方式。这个属性必须写，哪怕是空字符串alt=""，也比你完全不写要好。不写alt，搜索引擎无法理解你的图片内容，还会被认为是无障碍问题。width和height：这两个属性可以控制图片显示尺寸，但注意，它只改变显示尺寸，不影响图片实际文件大小。
一个实操小技巧：如果你的图片加载不出来，第一步先按F12打开浏览器开发者工具，切到Network面板，刷新页面，看图片请求的状态是不是404。404就说明路径错了，不是代码语法错了。
4.3 列表：不只是“加圆点”那么简单
HTML里有三种列表：无序列表ul、有序列表ol、描述列表dl。新手阶段用得最多的是前两种。
<ul> <li>产品功能</li> <li>价格方案</li> <li>联系我们</li> </ul> <ol> <li>填写个人信息</li> <li>验证手机号</li> <li>设置登录密码</li> </ol>无序列表每个项前面有一个圆点，适合并列关系的条目；有序列表前面是序号，适合有先后顺序的步骤。列表可以直接嵌套，比如多级菜单就靠ul套li、li里再套ul来实现。写列表最容易犯的错是忘记li的闭合，或者直接在ul下面塞div。记住：ul和ol的直接子元素，只能是li，别的都不合法。这个规则能避免很多样式丢失的问题。
导航菜单、文章目录、商品参数列表，都用列表。它是网页结构里被严重低估但使用率非常高的标签。
4.4 无语义容器div和span：先学会用，想清楚再换
<div>和<span>是HTML里最“没脾气”的两个标签。它们不表达任何语义，就是纯粹的容器。div是块级的容器，span是行内的容器。它们的用途是给一段内容“套壳”，方便你用CSS批量设置样式，或者用JavaScript批量获取操作。
早年网页开发大量依赖div来切版，所以到现在还有很多老前端说“DIV+CSS布局”。但现在HTML5推出了一套语义化标签，比如header、nav、main、article、section、footer，它们的语义比div更明确。现代页面的结构通常长这样：
<body> <header>页面顶部区域</header> <nav>导航栏</nav> <main> <article>正文内容</article> <aside>侧边栏</aside> </main> <footer>页脚区域</footer> </body>这些语义化标签不会带来肉眼可见的外观变化，但会让你的代码“会说话”：谁都能一眼看出页面哪个部分表示导航、哪部分是正文主体、哪部分是页脚。这对团队协作和搜索引擎优化都非常友好。我的建议是：默认优先用语义化标签，确实找不到匹配语义的，再用div兜底。
5. 表格与表单：工作中最容易写乱的两块
5.1 表格：先分三块，别一锅炖
表格在HTML里曾经是页面布局的主力，现在已经被CSS Grid和Flexbox取代了。但表格语法本身依然重要，因为但凡涉及二维数据展示，比如股价列表、成绩单、订单明细，表格依然是最直接的手段。
表格的完整结构应该分成三个部分：
<table> <caption>2024年季度销售统计</caption> <thead> <tr> <th>产品</th> <th>一季度</th> <th>二季度</th> </tr> </thead> <tbody> <tr> <th>笔记本电脑</th> <td>350</td> <td>400</td> </tr> <tr> <th>显示器</th> <td>120</td> <td>170</td> </tr> </tbody> <tfoot> <tr> <th>合计</th> <td>470</td> <td>570</td> </tr> </tfoot> </table>caption：表格标题，默认显示在表格上方，用来说明这个表格的整体内容。thead：表头区域，里面通常是tr包th。th是表头单元格，文字默认加粗居中。tbody：数据主体区域，一行是一个tr，每个数据格子是td。tfoot：表尾区域，通常放合计等汇总信息。
新手写表格最常见的毛病是把整个表格的所有行塞在一起，不区分thead和tbody。这在纯视觉效果上可能没什么问题，但对CSS和JavaScript来说就很难定位“哪一行是表头、哪一段是数据”。早年间甚至有些极端做法会用表格整体来搭页面版式，我强烈劝你不要学那套。表格就老老实实拿来展示数据表，版式交给CSS。
合并单元格也是表格里很常用的操作，用rowspan和colspan属性实现。colspan横向合并几列，rowspan纵向合并几行。合并单元格最容易出错，需要你在脑子里把网格行列数数清楚，不然表格会歪掉。
5.2 表单：交互的起点，也是最需要耐心练的模块
HTML里如果有一个标签值得你认真研究，那就是form。它是网页从“单向展示”变成“双向交互”的关键。
一个完整的表单通常长这样：
<form action="/submit" method="POST"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" required> </div> <div> <span>性别：</span> <label><input type="radio" name="gender" value="male"> 男</label> <label><input type="radio" name="gender" value="female"> 女</label> </div> <div> <label for="city">城市：</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select> </div> <div> <label for="intro">自我介绍：</label> <textarea id="intro" name="intro" rows="4" cols="50"></textarea> </div> <button type="submit">提交</button> </form>逐个拆开来说：
form元素的action属性决定表单提交到哪里，method属性决定用GET还是POST请求。GET适合不敏感的小型查询参数，POST适合数据量较大或敏感信息的提交。input是表单里的万金油，靠type属性切换形态。text是文本框，password是密码框，radio是单选按钮，checkbox是多选按钮，email会自动校验邮箱格式，submit是提交按钮。label的for属性要和对应输入框的id配对。这样做的好处是：用户点击“用户名”这三个字时，光标会自动聚焦到输入框里。这个细节对移动端用户特别重要，因为手指点选文字比点选小小的输入框容易多了。name属性是表单成功提交的数据键名，相当于“变量名”。没有name的输入框，提交时根本不会把数据发出去。这是新手最容易困惑的点：前端页面上明明看到了输入框，填了内容，但后端收不到数据。检查一下name是不是漏了。placeholder是输入框内的灰色提示文字，一旦用户开始输入就会消失。
还有一个很多人踩过的坑：required属性表示必填项，但它的校验提示样式是浏览器内置的，不同浏览器长得不一样。而你用JavaScript做自定义表单校验时，要注意别把浏览器默认校验和JS校验的逻辑搞混了，不然会出现“某个字段填了就报错，不填反而能提交”这种诡异的组合bug。
5.3 按钮提交的一个常见问题：按钮type别乱写
很多新手写表单时，按钮用的是<button>提交</button>，没有写type属性。这里要知道，<button>元素的默认type是submit，也就是说不写type时，这个按钮就是“提交按钮”。如果你在表单里放一个需要绑定JS点击事件的普通按钮，却没写type="button"，一点击就会触发表单提交，然后页面刷新，你的JS逻辑全白写了。
所以在form里，写按钮必须明确写type：
- 想提交表单：
<button type="submit">提交</button> - 想重置表单：
<button type="reset">重置</button> - 想绑定JS事件：
<button type="button">普通按钮</button>
这属于那种“查半天查不出来、知道了就再也不会犯”的小问题。提出来单独说，是想让你一次性记住。
6. 写HTML时最该养成的几个习惯：来自我实际踩过的坑
6.1 属性值永远加引号，节点闭合永远别偷懒
前面提到过属性值加引号的问题。再展开说一下为什么有些人会犯这个错：他们看到某些官方文档里出现了不带引号的写法，比如<a href=https://example.com>，就以为引号可以省略。确实，HTML规范允许在属性值没有特殊字符时省略引号，但互联网上真实的页面中，属性值带空格、带问号参数、带中文的情况太多了，这次省略没问题，下次就出问题。与其每次去判断“这里需不需要引号”，不如养成统一加双引号的条件反射。
还有标签闭合。有些人写<p>容易忘写</p>，写<ul>容易忘写</ul>。忘了一个两个可能页面还是能显示，但嵌套层级一多，各种莫名其妙的样式问题就冒出来了。我的习惯是：所有成对标签，先把开始和结束标签一起写好，再往中间填内容。这就像写代码先写函数签名再写函数体，套路不一样但思路一致。
6.2 字符编码统一用UTF-8
中文网站最经典的坑就是乱码：页面上出现“锟斤拷�”之类的内容。本质原因就是文件和浏览器之间的编码不一致。
正确做法是两件事同时做：
- 在HTML的
<head>里写明<meta charset="UTF-8">。 - 用编辑器（比如VS Code）保存文件的时候，右下角确认编码选择的是UTF-8。
这两步都做了，才叫真正的“UTF-8”。只写meta不检查文件编码，或者反过来，都还是会遇到乱码。特别提醒一下，如果你用Windows自带的记事本编辑HTML文件然后另存为，编码选项里要注意选“UTF-8”，不要选“UTF-8 with BOM”。BOM头有时候会让浏览器在页面顶部多出一个空白行或一个零宽字符，虽然不严重，但看着难受。
6.3 认识注释：给自己留后路，也给别人留方便
HTML注释的写法是<!-- 注释内容 -->，注释里的内容浏览器不会渲染，也不会显示在页面上，但它会存在于源代码里，别人按F12就能看到。
我写注释的习惯分两种：
- 一是区域分隔型注释，类似“========== header区域开始 ==========”这种，用于页面结构较长时快速定位功能区块。
- 二是临时注销型注释，写代码时哪块内容暂时不想显示，也不想删除，就先用注释包起来。这个方法在排查问题时尤其好用：怀疑某块代码影响到了布局，先注释掉，刷新看看，如果不是再撤销。
不过也要提醒，注释不是写得越多越好。满屏注释会污染代码可读性，真正好的注释是“解释为什么要这么写”，而不是“这个div是干什么的”这种废话——div是干什么的看代码就该知道，不需要注释来复述。
6.4 学会看浏览器开发者工具，比背任何语法都强
学HTML基础语法有一个实践成本几乎为零但效果极好的方法：在任意网页上按F12打开开发者工具，切到Elements（元素）面板，你会看到这个页面的HTML结构。鼠标在元素列表上滑过时，页面上对应的内容区域会高亮显示。
我特别推荐新手做下面这几个练习：
- 打开任意新闻网站的首页，定位页面的
header、nav、main、footer分别在哪里。 - 找一个列表页面，数一数它用了多少个
ul/ol来组织内容。 - 找一个带搜索框的网站，看看搜索框的
input标签是怎么写的，有没有name属性。 - 找一个图片不显示的页面（或者自己造一个），实战演练一把404排查思路。
这个“逆向拆解”练习能让你在短时间内积累大量“原来这个功能是这个标签实现的”的直观印象，比单纯看文档记标签快得多。
7. 基础学完之后，接下来往哪个方向走
7.1 和CSS、JavaScript的分工关系
HTML只是结构，页面要好看要靠CSS，要能交互要靠JavaScript。我见过太多人在HTML上花了两周，然后问“为什么我写出来的页面像1998年的网站”。答案是：因为你还没学CSS，没必要焦虑。
CSS（层叠样式表）负责的是“视觉效果”：颜色、字体、间距、边框、布局、动画。JavaScript负责的是“行为逻辑”：点击事件、表单验证、异步加载数据、修改DOM内容。三者的关系可以用盖房子类比：
- HTML = 毛坯房的结构：几室几厅、哪里是墙、哪里是门、哪里是窗。
- CSS = 装修：墙面刷什么颜色、地板铺什么材质、家具怎么摆。
- JavaScript = 水电和智能家居：灯什么时候亮、门禁怎么开门、温度怎么自动调节。
基础阶段建议按这个顺序推进：HTML语法熟悉到能独立写一个带标题、段落、列表、图片、链接、表格、表单的页面，再开始学CSS。别急着跳进框架的坑。
7.2 新手最该避开的两个误区
误区一：不断刷新语法细节，不动手写整页。看十遍<a>标签的用法，不如实际写一个包含五个页面互相跳转的静态网站。HTML基础语法没有一个动作是从入门到精通的关键，关键是把知识组合起来使用。
误区二：一开始就沉迷“高级写法”。比如试图用各种奇技淫巧去“模拟”页面元素，而不去理解标签本身的语义。有些老教程里的写法今天看已经过时了，比如用<table>做整体布局、用<font>改字体颜色，这些都应该果断跳过，直接学HTML5的标准语义化方式。
我曾经带过一些新人，总结下来，那些进步快的都有一个共同点：给自己设定“可交付的小目标”。比如“今天做一个个人名片页”“明天做一个课程表页面”“这一周给自己搭一个纯HTML的博客首页”。目标越小越具体越好，因为HTML基础语法只有在一次次“把想法变成真实页面”的过程里，才会真正内化成你自己的技能。
按照这个路径走下去，练上两三周，你就能很自然地写出一份结构干净、语义清晰的HTML页面了。到那时候再回头看这篇博文里的每个标签和习惯，你会发现自己已经可以举一反三，也就真正迈进了前端世界的大门。
