布局的页面别慌，那是历史的痕迹。
1.2 HTML文档结构——骨架长什么样？
每个HTML页面都有固定的骨架。就像盖房子，先有地基和框架，再往里填东西。我刚开始学的时候，总记不住DOCTYPE声明，结果页面在IE下显示得乱七八糟。
来看一个最基础的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>你好，世界！</h1>
<p>这是我的第一个HTML页面。</p>
</body>
</html>
拆开来看：
- <!DOCTYPE html>：告诉浏览器这是HTML5文档。少了它，浏览器会进入「怪异模式」，布局可能崩掉。我曾经因为这个被坑过，排查了半天才发现是DOCTYPE没写。
- <html>：根元素，所有内容都包在里面。lang属性建议加上，对SEO和屏幕阅读器友好。
- <head>：放元数据的地方。标题、字符编码、样式表链接都在这。用户看不到，但浏览器需要。
- <body>：页面可见内容全在这。你写的文字、图片、按钮，都放这里。
注意：meta标签的charset一定要写UTF-8。不然中文会变成乱码，别问我怎么知道的……
1.3 常用标签——写页面就靠这些
HTML标签很多，但常用的就那么十几个。我整理了一份清单，都是实战中天天用的。
标题标签：h1 ~ h6
标题有6级，h1最大，h6最小。一个页面最好只有一个h1，这是SEO的基本常识。我见过有人把h1当大号字体用，结果被搜索引擎降权了。
<h1>一级标题（最重要的）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
段落标签：p
段落就是一段文字。浏览器会自动在段落前后加间距。别用多个<br>换行来模拟段落，那是新手常犯的错误。
<p>这是第一段文字。</p>
<p>这是第二段文字，自动有间距。</p>
链接标签：a
超链接是HTML的灵魂。href属性指定跳转地址，target="_blank"在新窗口打开。
<a href="https://example.com">点我访问示例网站</a>
<a href="page2.html" target="_blank">在新窗口打开</a>
避坑指南：我曾经在项目中用了target="_blank"但没加rel="noopener"，结果被安全团队通报了。新窗口打开外部链接时，记得加上rel="noopener noreferrer"。
图片标签：img
图片用img标签，src是图片路径，alt是替代文本。alt很重要，图片加载失败时显示，也方便盲人用户。
<img src="logo.png" alt="公司Logo">
<img src="photo.jpg" alt="风景照片" width="400">
为什么要有alt？我遇到过图片服务器挂了，整个页面全是裂图。幸好写了alt文本，用户至少知道图片原本是什么内容。
1.4 创建第一个HTML页面——动手吧
光看不练假把式。咱们现在动手写第一个页面。你只需要一个文本编辑器（记事本都行）和一个浏览器。
步骤很简单：
- 新建一个文本文件，命名为index.html
- 把上面的文档结构代码复制进去
- 在body里加点内容，比如你的名字和一句自我介绍
- 保存文件，双击用浏览器打开
看，页面出来了。是不是很简单？
我建议你多写几个页面练手。比如做一个个人简介页，包含标题、段落、你的照片、社交链接。写完之后用浏览器打开，看看效果。不满意就改，改到顺眼为止。
第一个页面的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
</head>
<body>
<h1>你好，我是张三</h1>
<p>一名前端开发学习者。</p>
<h2>我的技能</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript（学习中）</li>
</ul>
<h2>联系我</h2>
<p>邮箱：zhangsan@example.com</p>
<p>GitHub：<a href="https://github.com/zhangsan">我的仓库</a></p>
</body>
</html>
写完之后，你可能会发现页面很丑。别急，那是CSS的事。HTML只负责结构和内容，样式后面会讲。
嗯，第一章就到这里。记住一句话：HTML是骨架，CSS是衣服，JavaScript是灵魂。骨架先搭好，后面的事就好办了。
课后练习：试着修改上面的示例，把个人信息换成你自己的。然后加一张图片，再加一个跳转到百度首页的链接。搞定这些，HTML基础就算入门了。