HTML：从 0 写出完整页面

这一课你将能做到

1. 从零写出一个结构完整、可直接在浏览器打开的 HTML 页面
2. 正确使用表单（input/select/textarea）和表格（table）展示和收集数据
3. 用语义化标签（header/nav/main/article/footer）搭建清晰的页面结构

为什么要学

HTML 是网页的骨架。你刷的任何网站——新闻、视频、购物——底层都是 HTML。CSS 负责好不好看，JavaScript 负责能不能动，但内容本身是 HTML 给的。不会 HTML，后面学的所有东西都没地方落地。

人话：HTML 就像盖房子时的户型图和承重结构，决定有几个房间、门在哪、窗在哪。CSS 是装修，JavaScript 是水电和电器。户型不对，装修再豪华也白搭。

对初学者来说，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>我的页面</title>
</head>
<body>
    <h1>欢迎</h1>
    <p>这是一段文字。</p>
</body>
</html>

结构对应关系：

<!DOCTYPE html>     → 声明：这是 HTML5 文档
<html>              → 根元素，整个页面的容器
  <head>            → 头部：放元信息，不直接显示
  <body>            → 主体：所有可见内容

浏览器拿到这个文件后，会把它解析成一棵 DOM 树（Document Object Model），每个标签变成树上的一个节点，后面的 CSS 和 JS 都是在这棵树上做操作。

跟着做

步骤 1：创建第一个页面

新建文件夹 my-site，在里面新建 index.html，用 VS Code 打开，输入：

<!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>这是我的第一个网页。</p>
</body>
</html>

保存后双击文件，浏览器打开就能看到内容。几个关键点：

• <meta charset="UTF-8"> 必须放在 <head> 最前面，否则中文乱码
• <meta name="viewport" ...> 让页面在手机上正常缩放，现代页面标配
• <title> 显示在浏览器标签页上

步骤 2：常用文本标签

<h1>一级标题（一页只用一个）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<p>这是一个段落。段落会自动换行，前后有间距。</p>

<p>行内可以<strong>加粗</strong>、<em>斜体强调</em>、
<a href="https://developer.mozilla.org" target="_blank">放链接</a>。</p>

<ul>
    <li>无序列表项 1</li>
    <li>无序列表项 2</li>
</ul>

<ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
</ol>

<img src="photo.jpg" alt="一张示例照片" width="300">

注意 <img> 的 alt 属性必须写：图片加载失败时显示，屏幕阅读器靠它给视障用户描述图片，搜索引擎也靠它理解图片内容。

步骤 3：语义化布局标签

把步骤 1 的 body 换成真实页面结构：