HTML基础详解：从标准骨架到核心标签的工程实践

坦白说，我见过太多学了半年前端的人，张口闭口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文件，我都会习惯性先看一眼第一行在不在。