如果让我给刚接触前端的新手写一句开场白，我会说：HTML是你在浏览器里看到的每一个网页的骨架。学HTML基础语法，其实就是在学怎么把骨架搭对、搭稳。很多初学者一上来就被“标签”“属性”“元素”这些概念绕晕，或者把HTML当成一门编程语言来死记硬背，结果越学越乱。实际上，HTML没那么玄乎，它的核心就是“用一套约定好的标记，把文字、图片、链接等内容组织起来，让浏览器知道该怎么展示”。
这篇文章适合所有刚开始学网页制作的人，也适合那些已经写过一点HTML、但基础概念还模棱两可的朋友。我会从HTML到底是什么讲起，把标签、元素、属性、文档结构这些基础语法全部拆开揉碎，再给出一套可以直接照抄的页面骨架模板，最后聊聊我平时写HTML时踩过的坑。内容不涉及复杂框架，也不依赖任何开发工具，你只需要一个记事本加一个浏览器就能跟着操作。
1. 先搞清楚HTML到底是门什么“语言”
1.1 HTML不是编程语言，它是一套“内容标记规则”
很多新手会问：HTML需要学算法吗？需要学逻辑判断吗？答案都不需要。HTML全称是HyperText Markup Language，中文叫“超文本标记语言”。注意“标记语言”这四个字，它和Python、Java、C++这类“编程语言”完全是两个物种。编程语言需要处理变量、条件、循环、函数，而HTML不负责这些，它只负责“告诉你这段文字是标题”“这张图片要放在这里”“这个链接指向哪个地址”。
我常打一个比方：HTML像是一份装修图纸。图纸上不会写“怎么搅拌水泥”，也不会写“电路怎么走”，它只标注“这里是卧室”“这里是厨房”“窗户装在这个位置”。浏览器拿到HTML源码后，就像装修工人拿到图纸，照着标记把网页内容渲染出来。所以，学HTML基础语法，本质上是在学“看图例、写标注”，而不是在学“写程序”。
1.2 标签、元素、属性，别把它们混成一锅粥
HTML语法的基础单位是“标签”。标签用尖括号包裹，比如<p>、<h1>、<div>。大部分标签都是成对出现的，一个开始标签加一个结束标签，结束标签在标签名前加斜杠，例如<p>这里是内容</p>。
由开始标签、结束标签以及中间的内容组合在一起，就构成了一个“元素”。比如下面这段：
<p>这是一段文字</p>这里的<p>是开始标签，</p>是结束标签，“这是一段文字”是元素内容，整件事合起来是一个p元素。在HTML里，“标签”和“元素”经常被混着说，但严格讲，元素是“标签+内容”的整体。
标签还可以带上“属性”，属性用来给元素补充信息。比如链接标签<a>，光有标签不知道跳转到哪里，所以要用href属性指定地址：
<a href="https://example.com">点击访问示例网站</a>这里href="https://example.com"就是一个属性，属性名是href，属性值是https://example.com。属性写在开始标签内部，多个属性之间用空格隔开。属性值一般用双引号包裹，虽然某些情况下单引号或者不写引号也能解析，但建议养成“属性值一律用双引号”的习惯，能省掉很多奇怪的Bug。
还有一类标签没有内容，叫“空标签”或“自闭合标签”。最典型的是换行标签<br>和图片标签<img>，他们的写法是在标签内部加一个斜杠，例如<br />或<img src="cat.jpg" alt="一张猫的照片" />。在HTML5的规范里，<br>和<br />都合法，我个人的习惯是写<br>，简洁且不容易出错。
2. 一个页面从骨架开始：文档结构与基础骨架
2.1 完整页面骨架长什么样
学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>Hello，HTML！</h1> <p>这是我用HTML基础语法写出的第一个页面。</p> </body> </html>把这串代码保存成一个index.html文件，用浏览器打开，就能看到一个最简单的网页。第一行<!DOCTYPE html>不是标签，而是文档类型声明。它的作用是告诉浏览器：“我这个文件遵循的是HTML5标准，请用现代模式解析。”没有这一行，浏览器会进入一种“怪异模式”，页面的排版可能跟你想的不太一样。
第二行<html lang="zh-CN">是根标签，整个页面所有内容都包在它里面。lang="zh-CN"是声明页面主要语言为简体中文，方便浏览器、搜索引擎和屏幕阅读器识别。国内做中文网页时，这个语言属性写成zh-CN或zh-Hans都很常见。
2.2 head：不直接显示页面内容，却极其重要的“幕后信息区”
<head>区域存放的是页面的元信息，用户不会直接在网页上看到这些内容（title除外，它会出现在浏览器标签栏上）。基础语法里最常遇到的head标签有这么几类：<meta charset="UTF-8">声明字符编码，解决中文乱码问题；<meta name="viewport" content="width=device-width, initial-scale=1.0">是移动端适配的关键设置，它告诉浏览器“把页面宽度当作手机屏幕宽度来渲染，初始缩放比例为1”，没有这条，手机浏览器会强行把页面缩得很小，字都看不清；<title>定义网页标题，同时也是搜索引擎结果里显示的标题。
head区域还会放CSS样式和外部样式表的引用。初学者经常犯的错是把<style>样式块或<script>脚本块一股脑全塞进body里，虽然浏览器大多数时候能解析，但标准做法是：CSS放在head里，JS脚本放在body的最后位置。这个后面可以单独细说，但基础阶段先把“head放头部信息，body放页面内容”这个规矩记住。
2.3 body：用户能看到的全部内容都在这
<body>标签内部就是网页的主体区域。你在页面上看到的文字、图片、表单、按钮、视频，全部写在body里。body里面可以继续嵌套其他标签，比如h1、p、div、ul这些。嵌套时要注意层级关系，就像整理箱子，大箱子套小箱子，但小箱子不能一半放在大箱子里、一半露在外面。
HTML允许在代码里写注释，格式是<!-- 注释内容 -->。注释不会被浏览器显示，但写代码的人能看到。我强烈建议新手从第一天就养成写结构化注释的习惯，比如在</body>前面写<!-- 页面底部内容结束 -->，时间久了，维护大文件时会感激当初的自己。
3. 最常用的基础语法块：从文本到表单
3.1 文本标题与段落：h1~h6、p、br、hr
HTML提供六级标题标签，从<h1>到<h6>，重要性依次递减。<h1>一般是页面的主标题，一个页面建议只出现一次，因为搜索引擎很看重它；<h2>到<h6>可以作为板块标题、子标题层层递进。记住标题标签的作用是“表示文章的层级结构”，不是为了把字变大。想要控制字体大小，应该用CSS的font-size，而不是选一个更大级别的标题。
段落标签<p>用来表示一段文字。浏览器在渲染p元素时，默认会在段落上下加一点间距，所以你不需要手动加空行。如果你在HTML源码里写了几个连续换行，浏览器只会把它当作一个空格处理，这就是HTML的“空白折叠”特性。想要真正换行，用<br>标签；想要画一条水平分割线，用<hr>标签。br和hr都是空标签，不需要结束标签。
文本强调方面，基础语法里常用<strong>表示加粗强调，<em>表示斜体强调。注意<strong>和<em>带有“强调”的语义含义，不只是视觉上的加粗和斜体；如果只是想改变样式，依然建议交给CSS处理。
3.2 链接和图片：让页面连接起来的关键语法
链接标签<a>是最能体现“超文本”特点的标签：
<a href="https://www.example.com" target="_blank">打开示例网站</a>href表示链接地址，target="_blank"表示在新标签页打开。还有一个容易被忽视的title属性，鼠标悬停在链接上时会出现提示文字，用户体验更好，也方便SEO。如果是页面内部跳转，可以把href指向某个元素的id值，比如<a href="#section1">跳转到第一部分</a>，这就是“锚点跳转”的基本原理，也是热词里“HTML一键返回顶部”的基础玩法。
图片标签<img>比链接更特殊，它没有结束标签，内容通过src属性引入：
<img src="images/cat.jpg" alt="一只橘猫趴在窗台上" width="400" height="300">src是图片地址，alt是图片加载失败或屏幕阅读器访问时替代展示的文字。width和height可以写像素值，但更推荐把尺寸控制交给CSS。千万不要忽略alt，它既是无障碍访问的基础，也是图片搜索引擎抓取的重要依据。基础语法阶段，每次写img标签都强制自己写出有意义的alt文字。
3.3 有序列表和无序列表：内容结构化的好帮手
列表在网页里出现的频率非常高，导航菜单、商品参数、新闻列表，全都是列表的变体。无序列表用ul（unordered list）包裹，每一项用li（list item）：
<ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> </ul>有序列表用ol（ordered list），浏览器会自动给每一项编号：
<ol> <li>打开编辑器</li> <li>新建HTML文件</li> <li>在浏览器中预览</li> </ol>列表之间可以互相嵌套，比如在li里面再放一个ul，做成多级菜单。不过嵌套层级太深会影响阅读和维护，一般建议不超过三层。另外要特别留意，ul和ol的直接子元素必须是li，不要把div或者其他标签直接塞在ul里，这是基础语法里一个容易忽略的规则。
3.4 表格：最基础的数据展示语法
表格由<table>标签包裹，内部按行和单元格组织。常见的标签有<tr>表示一行，<th>表示表头单元格，<td>表示普通数据单元格。
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>小明</td> <td>18</td> <td>北京</td> </tr> <tr> <td>小红</td> <td>20</td> <td>上海</td> </tr> </table>我故意在table标签上加了border="1"，方便新手在浏览器里直观看到表格边框。但这属于“表现层”的东西，实际开发中应该用CSS的border属性来美化。表格还有colspan（跨列合并）和rowspan（跨行合并）属性，比如<td colspan="2">合并两个单元格</td>。合并单元格是新手比较容易数错的地方，合并后该行的列数要和其他行保持一致，否则表格会变得歪歪扭扭。
3.5 表单：和用户交互的第一步
表单标签<form>是网页收集用户输入的核心。基础语法至少要掌握input、textarea、select和button。
<form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <br> <label for="password">密码：</label> <input type="password" id="password" name="password"> <br> <textarea id="intro" name="intro" rows="4" cols="30">个人简介</textarea> <br> <select name="city" id="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> <br> <button type="submit">注册</button> </form>form的action属性表示表单提交到哪个地址，method表示用什么方式提交，常见的有get和post。input是表单里最灵活的标签，通过type属性的不同取值，可以变成文本框、密码框、单选按钮、复选框、日期选择器等。label用for属性关联到某个input的id，这样点击“用户名”文字时，对应的输入框就会获得焦点，这个细节在移动端尤其好用。name属性是表单数据的“键”，提交到服务器时，数据会以用户名=某个值&密码=某个值的形式发送，没有name的数据是传不过去的。
4. HTML基础语法里那些容易忽略的“暗坑”
4.1 布尔属性：看到标签就生效
HTML里有一类属性叫“布尔属性”，它不需要写属性值，只要属性名出现在标签里，就代表“打开”这个功能。最典型的是disabled、checked、required、readonly、selected。
<input type="text" disabled>这段代码表示输入框被禁用，用户无法编辑。布尔属性不是不能写值，只是值写不写效果都一样，checked="checked"和checked都代表选中。新手容易困惑的是“我要让复选框默认选中，应该怎么写”，答案就是加checked即可：
<input type="checkbox" checked> 我已阅读用户协议4.2 在网页上显示HTML代码：实体字符逃不开
如果我想在网页上展示一段HTML代码，直接写<p>的话，浏览器会把它解析成一个真实的段落标签，画面就乱了。这时候要用HTML实体（Entity）。常见的实体有：
| 显示结果 | 实体写法 | 说明 |
|---|---|---|
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 和号 |
| 空格 | | 不换行空格 |
| © | © | 版权符号 |
比如我在本文里要展示这段源码：
<p>这是一个段落</p>浏览器渲染时会显示为<p>这是一个段落</p>。如果你在页面上看到别的内容莫名消失了，不用怀疑，大概率是尖括号被浏览器当成了标签开头，这时候就要检查是否需要对特殊字符做转义。
4.3 标签嵌套的规则：别想怎么套就怎么套
HTML标签的嵌套逻辑必须像洋葱一样一层一层包住，不能交叉。下面的写法是错误的：
<p><strong>文字加粗</p></strong><p>先开始，<strong>后开始，那么结束顺序必须是先结束<strong>，再结束<p>，也就是写成<p><strong>文字加粗</strong></p>。浏览器对交叉嵌套有容错处理，有时候会自动修正，但修正结果不一定是你想要的。与其后面排查一堆诡异问题，不如开始写代码时就一层层理顺。
另一个嵌套规则和“块级元素”“行内元素”的划分有关。传统上，块级元素（如div、p、h1、ul、li）会独占一行，可以设置宽高和上下边距；行内元素（如span、a、strong、em）在一行内排列，设置宽高无效。基础语法阶段要记住一个硬性规则：p标签里不能嵌套块级元素，比如不能在<p>里放一个<div>或者一个<ul>，这在HTML5规范里是不合法的。如果想在段落里圈出一块区域设置样式，应该用行内元素span。
4.4 别再用div一把梭：基础语法就有的语义化标签
很久以前，网页制作流行用<div>划分页面区域，每个区域再加id或class区分。这个做法能用，但对阅读代码、搜索引擎优化、屏幕阅读器都很不友好。HTML5在基础语法中加入了一系列语义化标签：<header>表示页眉，<nav>表示导航栏，<main>表示主体内容，<article>表示一篇文章，<section>表示一个区块，<aside>表示侧边栏，<footer>表示页脚。
<body> <header>网站标题</header> <nav>导航链接列表</nav> <main> <article>文章内容</article> <aside>侧边栏内容</aside> </main> <footer>版权信息</footer> </body>这些标签在浏览器里默认看起来和div没什么两样，但它们携带语义。就好比你搬家时把箱子贴上“厨房用品”“卧室衣物”的标签，找东西就快很多。理解HTML基础语法不能只停留在“标签能显示什么”，还要理解“标签代表什么意义”，这是从“能写”走向“会写”的关键一步。
5. 新手高频问题与排查技巧实录
5.1 中文乱码了怎么办？
网页中文乱码的原因基本都是“文件保存的编码”和“浏览器解析的编码”不一致。HTML文件默认保存为UTF-8编码时，要在head里写<meta charset="UTF-8">；如果你的编辑器把文件保存成了GBK编码，而页面声明的还是UTF-8，必然乱码。解决思路是：先在编辑器右下角确认文件编码格式，再让meta声明的编码和它保持一致。如果用的是VS Code，右下角状态栏能直接切换编码方式，这个细节我遇到无数次了。
5.2 图片不显示，链接打不开，路径写错了
新手经常把图片地址写成src="/images/cat.jpg"或者src="C:\Users\...\cat.jpg"这类形式。前者是绝对路径（从根目录开始找），后者是电脑本地路径，换一台电脑或换一个服务器就失效。正确做法是在项目文件夹内部使用相对路径，比如项目根目录下有个images文件夹，图片文件就在里面，那么应该写src="images/cat.jpg"。如果想引用上一级目录的文件，用../。简单记：./表示当前目录，../表示上一级目录，别想当然地写绝对路径。
5.3 页面打开是一堆代码，而不是网页
出现这种情况，要么是文件扩展名不是.html，要么是系统隐藏了扩展名，导致你建了一个index.html.txt，浏览器当然不会把它当成网页解析。解决办法是打开文件管理器的“显示文件扩展名”选项，确认文件名后缀。还有另一种情况是把HTML文件放在某个在线代码仓库里，直接用浏览器访问纯文本链接，这时候要确保访问的是页面地址而不是源码下载地址。
5.4 我用VS Code写HTML，怎么快速预览？
我自己日常用VS Code写前端代码，基础阶段推荐装一个叫Live Server的插件。装好之后，在HTML文件上点击右键，选择“Open with Live Server”，它会在浏览器里启动一个本地预览服务。好处是修改代码保存后，浏览器会自动刷新，不需要手动按F5。如果你想用最简单的方式，也可以直接在文件夹里双击HTML文件，用系统默认浏览器打开预览。区别是直接双击打开不走本地服务器，一些涉及模块加载或异步请求的功能会受限，但纯HTML基础语法展示完全够用。
5.5 页面里想实现“一键返回顶部”怎么写？
这个词在热搜里经常出现，我顺便把基础语法能实现的方式写一下。最简单的做法是利用锚点：在body最顶端放一个<div id="top"></div>，然后在页面靠下位置放一个链接<a href="#top">返回顶部</a>，点击链接，浏览器就会跳到id为top的元素位置，也就是页面顶部。想要平滑滚动，可以后续加一行CSS：html { scroll-behavior: smooth; }。这个方案不需要任何JavaScript，纯HTML加一行CSS就能搞定，特别适合验证“属性值通过#来定位页面元素”这个基础知识点。
5.6 排错基本法：CSS没生效先查标签闭合
我刚带新人做网页制作时，最常碰到的场景是：样式写着写着突然不生效了，改了半天CSS没动静。最后一看，是前面某个标签没闭合。因为浏览器遇到没闭合的标签会试图“自动补全”，补全位置和你预期完全不一样，后续元素全被塞进了一个奇怪的嵌套关系里，样式自然就乱了。排查方法很简单：按F12打开浏览器开发者工具，查看Elements面板里元素的实际嵌套关系，一眼就能找出被浏览器“纠正”过的地方。记住，前端排错永远先把页面结构查清楚，再谈样式和脚本。
在HTML基础语法这件事上，我见过太多人把时间耗在背标签上，其实真正常用的标签就那么二十来个，多写几次自然就记住了。我自己带新人的体会是：真正难的不是标签怎么拼，而是元素之间怎么嵌套、路径怎么引用、文档结构怎么组织。这三个点基本功打牢了，后面学CSS和JavaScript会顺利很多。最后再分享一个小技巧——每次写完一个HTML文件，都试着用浏览器开发者工具检查一下结构，或者用一些在线HTML校验工具过一遍，慢慢你会发现，原来那些奇奇怪怪的显示问题，八成都是基础语法里某个细节没写对。HTML基础语法一点也不难，难的是愿不愿意静下心来把每个细节都弄明白，希望看完整篇文章的你，能立刻新建一个HTML文件，亲手把骨架搭起来。
