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

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

1. 先搞懂：什么是HTML？

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

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

当前最新的版本是HTML5，也是所有现代浏览器（Chrome、Firefox、Safari、Edge最新版）都完全支持的版本，新增了语义化标签、内置多媒体支持、表单增强等实用功能，彻底告别了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的首页文件），双击打开就是你的第一个网页啦！

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

  1. <!DOCTYPE html>：文档类型声明，告诉浏览器“这是HTML5文档，请用HTML5的规则解析”，必须放在第一行，否则会触发浏览器的“怪异模式”（Quirks Mode），导致页面显示异常。
  2. <html lang="zh-CN">：整个HTML文档的根标签，所有内容都要放在里面；lang="zh-CN"指定文档为简体中文，方便搜索引擎识别、屏幕阅读器朗读。
  3. <head>：页面的元信息区，用户在浏览器里看不到，但对页面的显示、SEO、设备适配至关重要，常见的有编码设置、视口设置、页面标题、外部资源引用等。
  4. <meta charset="UTF-8">：字符编码声明，一定要加！否则中文字符、特殊符号会显示成乱码。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">：响应式视口设置，是做移动端适配的第一步，告诉浏览器“页面宽度等于设备屏幕宽度，初始缩放比例为1.0”。
  6. <title>：页面标题，会显示在浏览器的标签页上，对SEO（搜索引擎优化）也很重要。
  7. <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入门学习资源推荐

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

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

6. 入门总结与预告

今天我们讲了：

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

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