携程前端训练营-HTML

基于 Trip.com Group (携程集团) 前端训练营资料整理，适用对象：前端初学者、需要巩固 HTML5 基础的开发者

HTML（超文本标记语言）往往被认为是 Web 开发中最简单的部分，很多人认为“两三天就能学会”。但正如冰山理论所示，入门虽易，精通却难。HTML 涉及 Web 交互、SEO（搜索引擎优化）、安全、无障碍访问（A11y)等多个领域。

本文将梳理 HTML 的核心演进、关键元素、语义化结构以及表单交互，帮助你建立正确且专业的 HTML 认知体系。

01. Web 技术三大基石

在深入 HTML 之前，我们需要明确它在 Web 技术栈中的定位：

技术	角色	比喻
HTML	结构骨架	人的骨骼，支撑起整个身体
CSS	视觉表现	人的皮肤和衣服，决定外观是否美观
JavaScript	行为交互	人的肌肉和神经，赋予页面动作和生命力

虽然 HTML 运行门槛低（改个后缀名就能跑），但要写出健壮、可维护、对机器（搜索引擎/屏幕阅读器）友好的代码，需要深厚的功底。

02. HTML 的演进：从 4.01 到 HTML5

HTML5 不仅仅是一个版本的更新，它是 Web 标准的现代化革命。

HTML4 vs HTML5 核心对比

比较维度	HTML4	HTML5
文档声明	复杂的 SGML 声明	简洁的 `<!DOCTYPE html>`
语义化	依赖 `<div id="header">` 等	原生标签 `<header>`, `<article>`, `<nav>`
多媒体	需 Flash 等插件	原生支持 `<audio>`, `<video>`
图形	依赖插件	原生支持 `<canvas>`, SVG
存储	Cookie (容量小)	LocalStorage, SessionStorage (大容量)
通信	传统的 XHR	WebSocket, Server-Sent Events
移动端	支持有限	原生视口控制 `<meta name="viewport">`

03. HTML 基础与常见元素

3.1 元素分类

理解元素的默认表现是布局的基础：

块级元素 (Block-level)

1
2
3

特点：独占一行，宽度默认撑满父容器。
常见：`<div>`, `<p>`, `<h1>`~`<h6>`, `<ul>`, `<table>`
HTML5 新增：`<header>`, `<footer>`, `<section>`,` <article> `

<!-- 块级元素示例：每个元素都会另起一行 -->
<div style="border: 1px solid blue;">
    <h1>我是标题，独占一行</h1>
    <p>我是段落，我也独占一行，并且上下有默认间距。</p>
    <div>我是通用的块级容器。</div>
</div>

行内元素 (Inline-level)

1 2	特点：不换行，宽度随内容变化，不可设置宽高（除非转为 inline-block）。常见：`<span>`,` <a>`,` <em>`, `<strong>`, `<img>`

<!-- 行内元素示例：元素会在同一行显示 -->
<p>
    这是一段文本，其中包含 <span style="color: red;">span元素</span>，
    以及一个 <a href="#">链接</a>。它们都在同一行内。
</p>

3.2 避坑指南：已废弃或不建议使用的元素

为了保持代码的语义化和样式分离，以下标签不要再使用了。
不推荐样式类（请用 CSS 代替）

: 字体样式
<center>: 居中
<big>, <basefont>

<!-- [不推荐] 旧式写法 -->

<center><font color="red">警告信息</font></center>

<!-- [推荐] 新式写法 -->

<div style="text-align: center; color: red;">警告信息</div>

不推荐交互/特效类（请用 CSS / JS 代替）

<marquee>: 滚动字幕（性能杀手）

<!-- [不推荐] 旧式写法 -->
<marquee>滚动消息</marquee>

<!-- [推荐] 使用 CSS 动画代替 (需配合 @keyframes) -->
<div class="scrolling-text">滚动消息</div>

需注意表现类, : 纯粹的加粗和斜体。推荐使用 （强调重要性）和 （强调语气），因为后者具有语义。

<!-- [普通] 仅视觉加粗，无语义 -->
<b>关键词</b>

<!-- [推荐] 语义强调，屏幕阅读器会重读 -->
<strong>重要警告</strong>

3.3 图片与路径

alt 属性：必填！当图片无法加载时显示文本，且对屏幕阅读器和 SEO 至关重要。

<!-- 相对路径示例 -->
<img src="./images/logo.png" alt="公司 Logo - 首页跳转" />

<!-- 绝对路径示例 -->
<img src="[https://www.ctrip.com/header-logo.png](https://www.ctrip.com/header-logo.png)" alt="携程旅行网" />

<!-- 错误示范：缺少 alt 属性 -->
<!-- <img src="logo.png" /> -->

04. HTML5 结构与语义化

为什么要语义化？

可读性：代码结构清晰，开发者一眼能看懂布局。
SEO：搜索引擎能区分什么是“正文”，什么是“导航”，权重不同。
无障碍性 (A11y)：屏幕阅读器通过 AOM (Accessibility Object Model) 解析语义，帮助视障用户快速跳转到主要内容。

语义化布局示例

错误示范：无语义代码 (Div Soup)

<div class="header">标题</div>
<div class="nav">导航</div>
<div class="main">
    <div class="article">内容</div>
</div>
<div class="footer">底部</div>

推荐做法：语义化代码

<header>
    <h1>携程技术博客</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h2>HTML5 深度解析</h2>
            <p>发布日期：2025-10-01</p>
        </header>
        <section>
            <h3>第一章：语义化的意义</h3>
            <p>语义化让代码更易读...</p>
        </section>
    </article>

    <aside>
        <h3>相关推荐</h3>
        <ul>
            <li><a href="#">CSS3 新特性</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2025 Trip.com Group. All rights reserved.</p>
</footer>

05. 表单交互 (Forms)

表单是用户与后端交互的核心入口，使用正确的 type 可以唤起移动端特定的键盘，提升体验。

<form action="/api/submit" method="POST" enctype="multipart/form-data">
    
    <!-- 文本输入：使用 placeholder 提示 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" required>
    <br><br>

    <!-- 邮箱输入：移动端唤起带 @ 的键盘，自动校验格式 -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    <br><br>

    <!-- 数字输入：唤起数字键盘，限制范围 -->
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="18" max="100">
    <br><br>

    <!-- 正则校验：必须包含3个字母 -->
    <label for="code">邀请码 (3位字母)：</label>
    <input type="text" id="code" name="code" pattern="[A-Za-z]{3}" title="请输入3个字母">
    <br><br>

    <!-- 原生日期选择 -->
    <label for="birthdate">生日：</label>
    <input type="date" id="birthdate" name="birthdate">
    <br><br>

    <!-- 只读与禁用 -->
    <label>只读字段 (会提交)：</label>
    <input type="text" value="不可修的数据" readonly name="readonly_data">
    <br>
    <label>禁用字段 (不会提交)：</label>
    <input type="text" value="未启用" disabled name="disabled_data">
    <br><br>

    <!-- 提交按钮 -->
    <button type="submit">注册</button>
</form>

使用 <label>：上面代码中 for="username" 与 input 的 id="username" 具有对应关系。这使得点击“用户名：”文字时，光标会自动聚焦到输入框内。
回车提交：在 <form> 标签内，只要有一个 type="submit" 的按钮，用户在输入框内按回车键即可自动提交表单，这是原生 HTML 的优势。

06. 其他重要特性

6.1 SVG (可缩放矢量图形)

特点：基于 XML，无限放大不失真，文件体积小。

代码实现：(直接在 HTML 中绘制一个红色的圆)

1
2
3

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

6.2 LocalStorage (本地存储)

相比 Cookie，LocalStorage 是更现代的客户端存储方案（容量约 5MB，永久保存直到手动清除）。

<button onclick="saveData()">保存数据</button>
<button onclick="readData()">读取数据</button>
<div id="output"></div>

<script>
  function saveData() {
    // 存入数据
    localStorage.setItem("username", "CtripUser");
    alert("数据已保存！");
  }

  function readData() {
    // 读取数据
    const user = localStorage.getItem("username");
    const outputDiv = document.getElementById("output");
    
    if (user) {
      outputDiv.innerText = "当前用户: " + user;
    } else {
      outputDiv.innerText = "没有找到数据。";
    }
  }

  // 删除数据的语法
  // localStorage.removeItem("username");
</script>