HTML 概览

这一课你将能做到

1. 说清楚 HTML 在 Web 中的位置和作用
2. 写出第一个完整的 HTML 页面并在浏览器打开
3. 理解标签、元素、属性三者的关系

为什么要学

HTML 是网页的「骨架」。你打开的任何网站——新闻、视频、购物——底层都是 HTML。不会 HTML，CSS 和 JavaScript 都没地方落地。

人话：HTML 就像盖房子的钢筋水泥框架，决定房子里有什么房间、门在哪、窗在哪；CSS 是装修风格，JavaScript 是电器开关。

先建立图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个页面</title>
</head>
<body>
    <h1>你好，世界</h1>
    <p>这是第一段文字。</p>
</body>
</html>

浏览器渲染后：

你好，世界           ← 大字号标题
这是第一段文字。     ← 普通段落

跟着做

步骤 1：创建第一个 HTML 文件

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>我正在学习 HTML。</p>
</body>
</html>

保存后双击文件，浏览器就会打开它。

步骤 2：理解每个部分

<!DOCTYPE html>           <!-- 告诉浏览器这是 HTML5 文档 -->
<html lang="zh-CN">       <!-- 根元素，lang 告诉搜索引擎语言 -->
<head>                    <!-- 头部：不直接显示在页面 -->
    <meta charset="UTF-8"> <!-- 字符编码，必须有，否则中文乱码 -->
    <title>我的主页</title> <!-- 浏览器标签页标题 -->
</head>
<body>                    <!-- 主体：所有可见内容放这里 -->
    <h1>欢迎来到我的网站</h1>
    <p>我正在学习 HTML。</p>
</body>
</html>

步骤 3：标签、元素、属性

<a href="https://example.com" target="_blank">点击访问</a>

• 标签（Tag）：<a> 是开始标签，</a> 是结束标签
• 元素（Element）：整个从开始到结束，包括中间的内容
• 属性（Attribute）：href="..." 和 target="_blank"，给元素附加信息

步骤 4：块级元素 vs 行内元素

<!-- 块级元素：独占一行，可以设置宽高 -->
<div>我是 div</div>
<p>我是段落</p>
<h1>标题</h1>

<!-- 行内元素：不独占一行，宽度由内容决定 -->
<span>我是 span</span>
<a href="#">链接</a>
<strong>加粗</strong>

打开浏览器开发者工具（F12）→ Elements 面板，可以看到每个元素占据的矩形区域。

步骤 5：HTML 注释

<!-- 这是注释，浏览器不显示 -->
<!-- 多行注释
     可以跨越多行 -->
<p>可见内容</p>

注释用来给代码加说明，或临时禁用某段代码。

讲清楚要点