现代Web开发基础笔记·开篇：从HTML网页骨架说起

现代网页早已不是纯文本的堆砌，三剑客各司其职： 🦴 HTML：定义页面的内容结构（骨架）
🎨 CSS：控制页面的视觉表现（皮肤）
🎮 JavaScript：实现页面的交互逻辑（肌肉）

1. 先搞懂：什么是 HTML？

HTML（HyperText Markup Language，超文本标记语言）是构建 Web 页面的唯一标准标记语言——注意，它不是编程语言，没有变量、循环这些逻辑功能，只负责用「标签」来「标记」内容的身份。

比如用 <h1> 告诉浏览器“这是一级标题，要加粗放大显示”，用 <p> 标记“这是一段普通文本”。

当前最新的版本是 HTML5，所有现代浏览器（Chrome、Firefox、Safari、Edge 最新版）都已完全支持。HTML5 带来了语义化标签、内置多媒体支持、表单增强等实用特性，彻底告别了 HTML4 时代用 <div> 堆砌结构、全靠类名区分的混乱局面。

2. 你的第一个 HTML5 网页：基本文档结构

话不多说，先看一段完整的、可直接运行的代码👇

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元信息区（告诉浏览器怎么处理这个页面） -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML5网页</title>
</head>
<body>
    <!-- 页面可见内容区（用户能看到的所有内容都放这里） -->
    <h1>🎉欢迎来到我的Web开发世界！</h1>
    <p>这是一段普通的段落文本～</p>
</body>
</html>

把上面的代码复制下来，保存为 index.html（浏览器默认会优先打开名为 index 的首页文件），双击打开，你就拥有了自己的第一个网页！

逐行解释一下这段代码的核心要点：

<!DOCTYPE html>：文档类型声明，告诉浏览器“这是 HTML5 文档，请用 HTML5 规则解析”。必须放在第一行，否则浏览器可能进入“怪异模式”（Quirks Mode），导致页面显示异常。
<html lang="zh-CN">：HTML 文档的根标签，所有内容都要放在它里面；lang="zh-CN" 表示文档语言为简体中文，方便搜索引擎识别、屏幕阅读器朗读。
<head>：页面的元信息区，用户在浏览器里看不到，但对页面显示、SEO、设备适配至关重要，常见的内容包括编码设置、视口设置、页面标题、外部资源引用等。
<meta charset="UTF-8">：字符编码声明，一定要加！ 否则中文字符、特殊符号很容易变成乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：响应式视口设置，是移动端适配的第一步，告诉浏览器“页面宽度等于设备屏幕宽度，初始缩放比例为 1.0”。
<title>：页面标题，会显示在浏览器的标签页上，对 SEO（搜索引擎优化）也非常重要。
<body>：页面的可见内容区，所有用户能看到的文字、图片、视频、导航、按钮等，都必须放在这里。

3. HTML5 的核心特性（入门必学）

相比旧版本，HTML5 最大的进步在于语义化和原生能力增强。下面挑入门阶段最常用的几点来讲。

3.1 语义化标签：用标签说明内容身份

在 HTML4 时代，无论是页眉、导航、正文还是页脚，大家都用通用的 <div> 标签，再搭配类似 header、footer 的类名来区分。这样写浏览器虽然能解析，但搜索引擎、屏幕阅读器完全读不懂内容的结构，SEO 效果差，也不利于无障碍访问。

HTML5 新增了一组语义化标签，直接用标签名字就能表达内容的功能：

<!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>
    <!-- 页面顶部的页眉：通常放logo、标题、登录入口 -->
    <header>
        <h1>我的技术博客</h1>
    </header>

    <!-- 导航栏：放网站的导航链接 -->
    <nav>
        <a href="#">首页</a> | <a href="#">文章</a> | <a href="#">关于我</a>
    </nav>

    <!-- 页面的主要内容：一个页面只能有一个<main>标签 -->
    <main>
        <!-- 独立的、可完整阅读的内容块：比如一篇文章、一条新闻 -->
        <article>
            <h2>HTML5语义化标签的好处</h2>
            <p>好处太多啦：SEO好、无障碍、代码可读性高...</p>
            
            <!-- 内容的分区：比如文章的引言、正文、总结 -->
            <section>
                <h3>总结</h3>
                <p>入门就尽量用语义化标签，少用通用div！</p>
            </section>
        </article>
    </main>

    <!-- 页面的侧边栏：放相关链接、广告、搜索框 -->
    <aside>
        <h3>相关文章</h3>
        <a href="#">HTML基本标签</a>
    </aside>

    <!-- 页面底部的页脚：放版权信息、联系方式 -->
    <footer>
        <p>© 202X 我的技术博客</p>
    </footer>
</body>
</html>

3.2 原生多媒体支持：再也不用 Flash 插件

HTML5 之前，想在网页里嵌入视频或音频，必须依赖 Flash、Silverlight 等第三方插件——这些插件安全漏洞多、加载慢、移动端支持差，如今已被主流浏览器彻底淘汰。

HTML5 新增了 <video> 和 <audio> 标签，一行代码就能嵌入多媒体，还自带播放、暂停、音量调节等控件：

<!-- 嵌入视频 -->
<video controls width="600">
    <!-- 支持多个格式，浏览器会自动选择能播放的第一个 -->
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <!-- 备用文字：如果浏览器完全不支持HTML5视频 -->
    您的浏览器不支持HTML5视频，请升级浏览器～
</video>

<!-- 嵌入音频 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持HTML5音频，请升级浏览器～
</audio>

3.3 表单增强：轻松减少 JavaScript 的简单验证

HTML5 新增了丰富的原生表单控件和属性，能够轻松实现邮箱验证、必填校验、日期选择等功能。以前可能要写几十行 JavaScript，现在一行代码就能搞定：

<form>
    <!-- 邮箱输入框：自动验证格式，必填 -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" required placeholder="请输入您的邮箱">
    <br><br>

    <!-- 日期选择器：自带日历控件 -->
    <label for="birthday">生日：</label>
    <input type="date" id="birthday">
    <br><br>

    <!-- 滑块输入框：用于选择数值范围 -->
    <label for="age">年龄（0-100）：</label>
    <input type="range" id="age" min="0" max="100" value="18">
    <span id="ageValue">18</span>
    <br><br>

    <button type="submit">提交</button>
</form>

4. 快速认识：三剑客的分工与协作

虽然本文的重点是 HTML，但现代 Web 页面不可能只用 HTML 搞定，这里快速梳理一下三剑客的关注点分离原则（入门必须建立的核心认知！）：

🦴 HTML：只负责结构——比如“这里有一级标题”、“这里有段落”、“这里有导航”。不要在 HTML 里直接写样式（style 属性）或行为（onclick 属性）。
🎨 CSS：只负责表现——比如“一级标题用红色、字号 28px、居中显示”。CSS 有三种引入方式，推荐使用外部样式表（单独写在 .css 文件里）。
🎮 JavaScript：只负责行为——比如“点击按钮显示弹窗”、“滑动滑块同步更新数值”。同样推荐使用外部脚本（单独写在 .js 文件里）。

5. HTML 入门学习资源推荐

入门阶段最忌讳看太杂的资料，这里推荐几个最权威、最实用的：

📚 MDN Web Docs：Web 技术的“官方圣经”，内容由浏览器厂商和 Web 标准组织共同维护，中文文档也很完善。
地址：https://developer.mozilla.org/zh-CN/docs/Web/HTML
🎮 freeCodeCamp：免费的互动式学习平台，边学边练，学完一个模块还能拿证书。
地址：https://www.freecodecamp.org/learn/2022/responsive-web-design/
📖 HTML5 语义化标签速查表：遇到想不起来的标签查一下，非常方便，网上随便搜就能找到。

6. 入门总结与预告

今天我们讲了：

HTML 的定义：超文本标记语言，是 Web 页面的骨架。
HTML5 的基本文档结构：DOCTYPE + html + head + body。
HTML5 的三个核心特性：语义化标签、原生多媒体、表单增强。
三剑客的关注点分离原则。
入门学习资源推荐。

下一篇我们会详细讲解 CSS 的基本语法和常用选择器，给你的 HTML 骨架穿上漂亮的“皮肤”～

#现代Web开发基础笔记·开篇：从HTML网页骨架说起

#1. 先搞懂：什么是 HTML？

#2. 你的第一个 HTML5 网页：基本文档结构

#3. HTML5 的核心特性（入门必学）

#3.1 语义化标签：用标签说明内容身份

#3.2 原生多媒体支持：再也不用 Flash 插件

#3.3 表单增强：轻松减少 JavaScript 的简单验证

#4. 快速认识：三剑客的分工与协作

#5. HTML 入门学习资源推荐

#6. 入门总结与预告