于江水坦白说，我见过太多学了半年前端的人，张口闭口Vue、React，让他手写一个页面，第一行却写不完整。刚开始我也觉得HTML基础简单，直到后来带新人、查线上问题，才发现很多稀奇古怪的毛病，最后都出在最基础的标签上——标签忘闭合、编码没声明、路径写错、表单字段没写name。这篇笔记就是我把HTML基础重新过一遍之后的记录：怎么搭一个标准骨架，文本、链接、表格、表单这些基础标签的正确打开方式，以及HTML怎么和CSS、JavaScript配合。不管你是零基础刚开始学网页制作，还是已经写了一阵子代码想回来查漏补缺，都适合对照着过一遍。如果你能完整复现文中的例子，HTML基础基本就算过关了。
1. 一份完整的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>我的第一个HTML页面</title>
</head>
<body>
</body>
</html>
这个骨架里的每一行都有用途。尤其是第一行<!DOCTYPE html>，它不构成页面上任何可见内容，但它的作用很关键：告诉浏览器"这份文档是标准HTML"。如果没有它，浏览器会进入怪异模式，不同浏览器对盒模型、行高、CSS解析的处理会完全不同。我见过有人嫌它碍眼把它删掉，理由是"不写也能打开"。确实能打开，但页面在不同浏览器里的表现会越来越飘，尤其写CSS时width、height、padding的计算方式可能跟你预期不符。所以我的建议是：模板永远保留这一行，顺手养成肌肉记忆。这一行的标准写法是全部大写<!DOCTYPE html>，现代浏览器虽然对大小写没那么敏感，但按规范写最稳妥。
1.1 从开始：为什么"尖括号第一行"这么重要
<!DOCTYPE html>不是一个HTML标签，它是文档类型声明。浏览器看到它之后，会以"标准模式"去解析后续的HTML和CSS。没有它，老浏览器会以为你在写早期那种不规范的网页，从而启用一套兼容旧网页的怪异行为，比如默认字号、内边距、外边距、图片对齐方式都变得不可控。很多人跨浏览器调试时发现同一句CSS在这个浏览器正常、在另一个浏览器偏移，排查到最后，问题常常就出在文档类型没声明。
讲个我自己踩过的坑。早期做项目时，某个页面在Chrome里一切正常，放到IE里盒子宽度差了十几像素，排查了很久才意识到那个页面是从旧项目里复制出来的，第一行被去掉了。补上<!DOCTYPE html>之后，问题直接消失。所以每次新建HTML文件，我都会习惯性先看一眼第一行在不在。
1.2 html、head、body三兄弟的分工与常见错误
<html>标签是整份文档的根节点，它包裹住所有内容。lang属性建议写上，比如中文页面用lang="zh-CN"。不写或者随便写，普通用户看不出区别，但浏览器翻译、屏幕阅读器会依赖它，这是一种成本极低的无障碍优化。
<head>放的是元信息，比如meta、title、外部样式表的link，用户在正文里不会直接看到这些内容。但很多初学者会把可见的<div>放到head里，这是结构错误。浏览器有容错机制，可能仍然显示了，但你在编辑器里能看到结构报错提示。真正可见的页面内容应该全部放进<body>。
<title>标签值得单独说一句。它显示在浏览器标签页上，同时也是搜索引擎结果里通常使用的标题。命名的时候不要图省事，比如个人网站写成"我的个人介绍 - 张三"，远比一个"页面1"更有价值。检查新人作业时，我还见过把<html>写成自结束标签的，比如<html />，这是XML语法残留，在HTML里是错误的。HTML和XML不一样，根元素必须老老实实地用一对开始和结束标签包住整个文档。
1.3 meta charset和viewport：两个必须懂的meta配置
在所有meta里，charset最要紧：
html复制<meta charset="UTF-8">
它声明了文档使用UTF-8字符编码。很多中文页面出现乱码，比如一堆"锟斤拷"或者�，大概率就是没写这一行，或者文件保存时不是UTF-8编码。另一个容易被忽略的点是meta必须放在head靠前的位置，因为浏览器是边读边解析的，如果前面已经有文本被误判成其他编码，后面再声明就晚了。
移动端适配还需要另一行：
html复制<meta name="viewport" content="width=device-width, initial-scale=1.0">
它让页面宽度等于设备宽度，初始缩放比为1。手机浏览器如果没有这一行，页面经常按桌面端宽度渲染，然后缩成一团，字小到看不清。用手机调试页面时，我建议先确认这行存在。
还有老的meta name="keywords"和meta name="description"，keywords对SEO的影响已经非常弱，但description还是值得写，因为搜索结果摘要有时会用到。注意不要堆砌关键词，自然概括页面内容就好。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 标题与文本标签：看着简单，其实最考验语义感
文本相关的标签是HTML里最早学到的东西，但恰恰因为它们太基础，很多人根本没用对。我在代码评审时看到最多的不是不会写，而是把标签当纯样式工具用。比如为了加粗就用<b>，为了换行就塞一堆<br>，这些写法短期内能糊弄出视觉效果，后续维护时会越来越难受。
2.1 h1到h6：标题是给内容分级的，不只是让字变大
<h1>到<h6>是六个级别的标题。我强烈建议从第一个页面开始就养成一个习惯：先想清楚"这一块内容是什么级别"，再决定用什么标签。一篇文章，文章标题通常是h1，章节标题用h2，如果还有小节再用h3。不要跳跃，比如上一层还是h1，下面直接跳到h4，这种结构对读屏软件和搜索引擎都不友好。
关于"一个页面只能有一个h1"这个说法，如今没有被严格限制，但它的核心逻辑是对的：h1通常代表整份页面的主题，满页面都是h1，标题权重会被稀释。我自己的做法是：有独立内容的页面保留一个h1，Logo区通常不用h1硬撑，真正的文章标题才配h1。记住最核心的一点：不要为了字体大小使用标题标签。想让字变大，去用CSS调font-size。标题标签的价值是语义，不是默认样式。
2.2 p、br、hr：段落的正确打开方式
写文本时，很多人第一反应是疯狂打回车。我第一次写HTML也这样，后来发现浏览器根本不买账——HTML里的连续空格默认合并，回车也只相当于一个空格。在代码里换了很多行，浏览器却把它们拼成一行文本。想让文本产生段落边界，要用<p>包裹。
html复制<p>这是第一段内容，段落前后有浏览器默认的上下间距。</p>
<p>这是第二段内容。</p>
<p>是段落，自带上下外边距，用来区分不同段落。有些人为了制造间距，在段落之间拼命插<br>，短期看有效，但<br>是"软换行"，不承担段落间距的职责。间距应该交给CSS的margin。而且太多<br>会把同一段落拆成碎片，读屏工具无法正确识别段落结构。
<hr>的情况比br好一点。早期它就是一条水平分割线，现在HTML标准把它定位成"主题转换"标记。比如一个故事讲完，要切到另一个场景，放一个<hr>是有语义的。如果只是想要一条好看的分隔线，完全可以直接用CSS的border，不要再用一堆hr做装饰了。
2.3 strong、em、del、mark这类格式化标签到底怎么用
文本标签里有一组容易被误用：b、strong、i、em。从视觉效果看，b和strong都能加粗，i和em都能斜体，但语义完全不同。
strong表示"这段内容很重要"，是语义上的强调。b只是"吸引注意但不改变语义"，比如摘要里的关键词。em表示"语气上的强调"，读屏软件会用重音变化来读它。i表示"另一种语气"，例如术语、书名、外文短语，不是单纯为了斜体。
现在的开发团队对b和i的区分没那么较真，写出来也不会报错。但一旦谈到语义化和可访问性，差异就体现出来了。我的习惯是：大多数强调场景用strong和em，只有想"视觉上区别一下但不想增加语义"时才用b和i。
还有几个非常实用的标签：
html复制<del>原价：199元</del>
<ins>现价：99元</ins>
<mark>这一句需要高亮提醒</mark>
X<sup>2</sup> + Y<sub>i</sub>
del表示被删除的内容，ins表示插入的内容，电商的划线价就是这么实现的。sup和sub分别是上标和下标，做数学公式或化学式时很常用。这些标签本身不难，但它们是HTML基础面试里的高频考点，平时随手用几次，比死记硬背管用得多。
3. 链接、图片和路径：新手翻车频率最高的三件套
链接、图片、路径这三样东西，我见过太多人在它们上面栽跟头。有的是图片不显示，有的是点击链接跳到404，有的是本地好好的、一部署到服务器就崩。这些问题往往不是代码不会写，而是对href、src、路径规则的理解不够完整。
3.1 a标签：href里除了网址还能写什么
最常见链接长这样：
html复制<a href="https://example.com">跳转到外部网站</a>
<a href="about.html">站内页面</a>
<a href="#footer">跳到页面底部的锚点</a>
<a href="mailto:hello@example.com">发邮件</a>
<a href="tel:10086">拨打电话</a>
href并不只能填网址。带新人时，几乎所有人在锚点跳转上都错过：在目标元素上写id="footer"，然后链接写href="#footer"，这样点击后会跳到这个元素位置。但如果你把href写成href="footer"，浏览器会认为你要跳转到一个叫footer的页面，自然404。差别就是一个井号。
另外，如果链接设置了target="_blank"，也就是在新标签页打开，我建议顺手加上rel="noopener noreferrer"。原因很简单，不加的话，新打开的页面可以通过window.opener反向控制原来的页面窗口，这是基础安全问题。很多初学者没听过这个，但做网页早晚会遇到。
3.2 img标签：src、alt和loading是整套组合
图片标签的标准写法：
html复制<img src="images/logo.png" alt="公司Logo" width="120" height="60" loading="lazy">
src填图片地址，alt在图片加载失败或读屏工具读取时起作用，它不是只给SEO看的属性。如果放一张纯装饰性图片，alt可以留空字符串alt=""，表示"这张图片不需要被读出来"。但要是有含义的图片，比如产品图、数据图表截图，就必须用文字描述清楚。
很多人不知道loading="lazy"的便捷。它能让图片在滚动到可视区域附近时才加载，对长页面省流量的效果非常直观。但要注意，首屏关键图片不要用lazy，否则会影响加载体验。width和height最好给一个接近实际显示尺寸的值，这样页面加载时能预留空间，避免图片加载完成后内容突然跳动。真要实现响应式尺寸，再用CSS去覆盖。
3.3 相对路径、绝对路径：一个斜杠引发的血案
路径问题大概是"本地能开、部署就挂"的最常见原因。
- 以
/开头的路径是"从站点根目录开始找"，比如/images/logo.png。本地用file://协议直接打开时通常没有站点根目录概念，所以会失败；部署到服务器域名下才正常。 ./images/logo.png表示当前目录下的images文件夹。../images/logo.png表示上一级目录里的images文件夹。- 不写
./直接写images/logo.png，浏览器按当前路径解析，效果和./一样。
我自己写项目的习惯是：如果资源与HTML文件同目录，就直接写images/logo.png。跨目录移动文件时，要同步检查页面里的引用路径，否则分分钟出现白图和404。更要注意的是，别从网上随手复制<img>片段，连带着把别人站上的绝对地址也保留了。真正做项目时，图片、CSS、JS应该放到自己的工程目录里，用相对路径或部署后的根路径引用，否则资源随时可能失效。
4. 表格标签不只是画格子，更要画出规矩
表格在HTML基础里经常被一带而过，很多人学完只会写<table>、<tr>、<td>，一到合并单元格和语义化就懵。其实表格标签的使用有它自己的约定，掌握了之后，不管做数据展示还是处理复杂报表都能事半功倍。
4.1 一张标准表格的完整结构长什么样
结构完整的表格应该是这样的：
html复制<table>
<caption>员工通讯录</caption>
<thead>
<tr>
<th>姓名</th>
<th>部门</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>技术部</td>
<td>123456</td>
</tr>
<tr>
<td>李四</td>
<td>市场部</td>
<td>654321</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">共 2 条记录</td>
</tr>
</tfoot>
</table>
thead里放表头行，通常用th而不是td，因为th表示"这个格的语义是表头"，默认会有加粗居中样式。tbody放数据行，