HTML入门第一天：先认骨架再抓标签，手写干净网页

第一天接触HTML，很多人第一件事就是复制一段代码粘贴到记事本里，双击打开，看到一片白底黑字，然后就开始背标签。背了两天，h1、p、img 倒是记住了，可一脱离模板就发现自己连一个空白页面都搭不利索。问题出在哪？出在你把 HTML 的“骨架”和“标签”割裂开看了。HTML 入门其实就一句话：先认骨架，再抓标签，最后拿标签去填空。这篇内容我把 Day01 的学习路线给你捋完整了，按我平时的习惯走，纯小白看完能自己手动写出一个结构干净、不乱报错的页面，写过一段时间但一直靠模板撑场面的同学，也可以借这个机会把底子补一补。

1. 先别急着背标签：HTML骨架究竟长什么样

1.1 把HTML理解成毛坯房

很多教程一上来就扔给你几十个标签，让你背，这是最劝退的学习方式。HTML 的英文全称是 HyperText Markup Language，翻译过来是“超文本标记语言”。注意，它不是编程语言，没有 if、for、变量和作用域，它做的唯一一件事就是用一堆“标签”告诉浏览器：这里是一个标题，那里是一段文字，这张图放这个位置，这个表单点一下能提交。你可以把 HTML 想成毛坯房的承重结构，CSS 是墙面、地板和瓷砖，JavaScript 才是水电和智能家居。毛坯房没砌好，后面装修再漂亮也白搭。

所以学习 HTML 的第一天，不是把所有标签都记下来，而是先把“骨架”这堵承重墙立起来。骨架不乱，标签才有地方放。

1.2 标准骨架逐行拆解

打开任意一个现代网页，右键查看源代码，你会发现最终都会落到这样一个结构上：

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>
  <!-- 你写的内容将来都放在这里 -->
</body>
</html>

这段代码一共没多少行，但每一行都有讲究。

<!doctype html> 不是标签，它是文档类型声明。它告诉浏览器：“请用现代标准模式来解析我，不要用古董兼容模式。”很多老网页缺了这行，在IE里会进入怪异模式，盒模型和排版全乱。现在虽然浏览器容错能力很强，但你写标准骨架，将来排查问题会省一半力气。

<html lang="zh-cn"> 是根元素，整个页面所有标签都装在它里面。lang 属性告诉浏览器和搜索引擎，这个页面是中文内容。为什么重要？对屏幕阅读器来说，它决定用哪套语音库朗读；对搜索引擎来说，它决定收录语言。中文站点建议写成 zh-CN，英文站写 en。

<head> 是页面的“配置区”，里面写的内容不会直接显示在浏览器里，但它控制着页面编码、viewport、标题、样式和脚本。很多人忽略了 head，这是不对的，后面专门讲。

<body> 才是用户真正看到的内容区。你在浏览器里看到的所有文字、图片、按钮，全部写在 body 里面。骨架的练习，其实就是守着 head 和 body 这两个大容器，把标签分门别类放对位置。

1.3 为什么骨架顺序不能乱

有人觉得 <meta charset="utf-8"> 写在 title 后面也没事，事实是大多数情况确实能显示，但如果你在 meta 之前出现了非 ASCI 字符，或者浏览器先解析了 title 里的中文，就可能出现乱码。标准姿势是：meta charset 放在 head 最前面，紧跟其后的是 title。

viewport 这个 meta 也不可省略。它的作用是让页面按设备宽度渲染，而不是默认用 980px 的虚拟宽度。没有它，手机端打开页面会像看缩小版网页，字体小到看不清楚。所以移动端适配第一步，不是 CSS，而是先写对 viewport。

骨架顺序还可以用“先声明、后设置、再内容”来记：先 doctype 声明文档类型，再 head 设置编码和配置，最后 body 放内容。这个顺序建议你手动敲五遍，不要复制粘贴。第一遍照抄，第二遍盖住代码默写，第三遍故意删掉 doctype 或者 meta charset，然后刷新看浏览器如何表现。你会发现，只有亲手踩过坑，才真正明白那一行的价值。

2. head区没你想象得简单：meta和title都得会

2.1 head区是给浏览器看的说明书

很多新手看 head 标签少，就跳过不学，这是亏的。head 相当于产品说明书，浏览器、搜索引擎、社交平台分享机器人都在读它。你辛辛苦苦写了一个页面，想分享到微信或微博，结果缩略图不显示、标题乱码、描述是乱的，大概率就是 head 没写对。

head 里面常用的标签包括：title、meta、link、style、script、base。第一天不需要全部掌握，但 title、meta、link、style、script 这五个必须认识，因为几乎每个页面都会用到。

2.2 meta标签：除了charset还要会这几个

meta 是一个“自我描述”标签，通过 name 加 content 的形式给页面附加信息。我不建议你背所有 meta，但下面这张表里的，是实际开发中高频出现的。