PHP小码农

Appearance

HTML 能做什么 ​

本节将全面展示 HTML 的能力范围，从文本结构化到多媒体嵌入、从表单交互到无障碍访问。学完本节，你将对 HTML 的功能有一个清晰的全景认识，理解它为何是 Web 世界的基础语言。

前置知识

阅读本节前，建议先了解：HTML 是什么

基础概念 ​

HTML 的核心能力可以概括为五个方面：内容结构化、语义化标记、多媒体嵌入、表单交互和无障碍访问。HTML 通过不同的标签和属性实现这些功能，每种标签都有特定的用途和语义。

与很多人"HTML 只能写文字"的印象不同，HTML 的能力远超于此。它可以为图片添加描述、嵌入视频和音频、创建交互式表单、构建导航结构，甚至通过 Web Components 实现自定义元素。

内容结构化 ​

HTML 最基本也是最核心的功能是将文本内容结构化。浏览器和搜索引擎通过 HTML 标签理解页面的组织方式。

文本结构 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本结构化示例</title>
</head>
<body>
  <article>
    <h1>文章标题</h1>
    <p>这是文章的摘要段落。</p>

    <h2>第一章</h2>
    <p>正文内容，可以包含 <strong>强调</strong> 和 <em>斜体</em> 文字。</p>

    <h3>1.1 小节</h3>
    <p>更详细的内容说明。</p>

    <!-- 引用文本 -->
    <blockquote cite="https://example.com">
      <p>这是一段引用的文字，来源于外部。</p>
    </blockquote>

    <!-- 代码块 -->
    <pre><code>
function hello() {
  console.log('Hello, HTML!');
}
    </code></pre>
  </article>
</body>
</html>

结构标签一览 ​

HTML 提供了丰富的结构化标签：

标签用途说明
<h1> ~ <h6>标题从最高级到最低级，形成信息层级
<p>段落包裹一段独立的文本内容
<div>通用容器无语义的块级容器，用于分组和布局
<span>行内容器无语义的行内容器，用于标记局部文本
<blockquote>引用块表示从外部来源引用的内容
<pre>预格式文本保留空格和换行符，常用于代码展示
<hr>主题分隔表示内容主题的转换
<br>换行在文本中插入换行

语义化标记 ​

语义化是 HTML 区别于"简单文本标记"的重要特性。语义化标签让浏览器、搜索引擎和辅助技术（如屏幕阅读器）能够理解每个部分的含义，而不仅仅是外观。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>语义化 HTML 示例</title>
</head>
<body>
  <!-- 页面头部区域 -->
  <header>
    <nav>
      <a href="#home">首页</a>
      <a href="#about">关于</a>
      <a href="#contact">联系</a>
    </nav>
  </header>

  <!-- 主体内容 -->
  <main>
    <article>
      <h1>如何学习前端开发</h1>
      <p>学习前端开发需要掌握三大核心技术。</p>
      <section>
        <h2>第一步：HTML</h2>
        <p>HTML 是网页的骨架结构。</p>
      </section>
      <section>
        <h2>第二步：CSS</h2>
        <p>CSS 负责页面的视觉效果。</p>
      </section>
      <section>
        <h2>第三步：JavaScript</h2>
        <p>JavaScript 让页面具有交互能力。</p>
      </section>
    </article>

    <!-- 侧边栏 -->
    <aside>
      <h2>推荐资源</h2>
      <ul>
        <li>MDN Web 文档</li>
        <li>W3School</li>
      </ul>
    </aside>
  </main>

  <!-- 页面底部 -->
  <footer>
    <p>版权所有 2024</p>
  </footer>
</body>
</html>

语义化标签对照表 ​

语义标签含义替代方案（不推荐）
<header>页面或区块的头部<div class="header">
<nav>导航链接区域<div class="nav">
<main>页面的主体内容<div class="main">
<article>独立的内容单元<div class="article">
<section>内容的主题分组<div class="section">
<aside>侧边补充内容<div class="sidebar">
<footer>页面或区块的底部<div class="footer">

为什么语义化很重要

语义化标签不仅让代码更易读，还能显著提升 SEO（搜索引擎优化）效果，并让使用屏幕阅读器的视障用户能够快速导航页面内容。

多媒体嵌入 ​

HTML5 大幅增强了多媒体支持，无需第三方插件（如 Flash）即可直接在页面中嵌入视频、音频和图片。

图片嵌入 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片嵌入示例</title>
</head>
<body>
  <h1>图片展示</h1>

  <!-- 基础图片：src 指定路径，alt 提供替代文本 -->
  <img src="landscape.jpg" alt="美丽的山水风景" width="800">

  <!-- 带有标题的图片组合 -->
  <figure>
    <img src="architecture.jpg" alt="现代建筑外观">
    <figcaption>图 1：某城市的标志性现代建筑</figcaption>
  </figure>

  <!-- 响应式图片：根据屏幕宽度加载不同图片 -->
  <picture>
    <source media="(max-width: 600px)" srcset="photo-small.jpg">
    <source media="(min-width: 601px)" srcset="photo-large.jpg">
    <img src="photo-default.jpg" alt="响应式图片示例">
  </picture>
</body>
</html>

视频与音频 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多媒体嵌入示例</title>
</head>
<body>
  <h1>视频播放器</h1>

  <!-- 视频嵌入：支持多种格式，提供控件 -->
  <video width="640" controls poster="cover.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <p>你的浏览器不支持视频播放。</p>
  </video>

  <h1>音频播放器</h1>

  <!-- 音频嵌入 -->
  <audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    <p>你的浏览器不支持音频播放。</p>
  </audio>

  <!-- 外部视频嵌入（如 YouTube） -->
  <h1>外部视频</h1>
  <iframe width="640" height="360"
          src="https://www.youtube.com/embed/dQw4w9WgXcQ"
          title="示例视频"
          allowfullscreen>
  </iframe>
</body>
</html>

内联框架 ​

<iframe> 可以在页面中嵌入另一个完整的 HTML 页面：

html
<!-- 在页面中嵌入地图 -->
<iframe
  src="https://maps.example.com/embed?location=beijing"
  width="600"
  height="450"
  loading="lazy"
  title="北京地图">
</iframe>

安全提示

使用 <iframe> 嵌入外部内容时，务必设置 sandbox 属性限制权限，防止恶意代码注入：

html
<!-- 安全的 iframe 使用方式 -->
<iframe
  src="https://trusted-site.com/widget"
  sandbox="allow-scripts"
  title="可信站点的小组件">
</iframe>

表单交互 ​

HTML 表单是用户与网站交互的核心方式。通过表单，用户可以输入数据、做出选择、提交信息。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单交互示例</title>
</head>
<body>
  <h1>用户注册表单</h1>

  <form action="/register" method="post">
    <!-- 文本输入 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"
           required minlength="3" maxlength="20"
           placeholder="请输入用户名">

    <br><br>

    <!-- 邮箱输入（HTML5 内置验证） -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email"
           required placeholder="example@mail.com">

    <br><br>

    <!-- 密码输入 -->
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"
           required minlength="8">

    <br><br>

    <!-- 单选按钮 -->
    <fieldset>
      <legend>性别：</legend>
      <label><input type="radio" name="gender" value="male"> 男</label>
      <label><input type="radio" name="gender" value="female"> 女</label>
      <label><input type="radio" name="gender" value="other"> 其他</label>
    </fieldset>

    <br>

    <!-- 复选框 -->
    <fieldset>
      <legend>兴趣爱好：</legend>
      <label><input type="checkbox" name="hobby" value="coding"> 编程</label>
      <label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
      <label><input type="checkbox" name="hobby" value="gaming"> 游戏</label>
    </fieldset>

    <br>

    <!-- 下拉选择 -->
    <label for="city">城市：</label>
    <select id="city" name="city">
      <option value="">请选择</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
    </select>

    <br><br>

    <!-- 多行文本 -->
    <label for="bio">个人简介：</label>
    <textarea id="bio" name="bio" rows="4" cols="40"
              placeholder="介绍一下你自己..."></textarea>

    <br><br>

    <!-- 文件上传 -->
    <label for="avatar">头像：</label>
    <input type="file" id="avatar" name="avatar" accept="image/*">

    <br><br>

    <!-- 提交按钮 -->
    <button type="submit">注册</button>
    <button type="reset">重置</button>
  </form>
</body>
</html>

HTML5 新增表单控件 ​

HTML5 引入了许多新的输入类型，带来了内置的验证和更好的移动端支持：

输入类型用途内置验证
type="email"邮箱地址自动验证邮箱格式
type="url"网址自动验证 URL 格式
type="tel"电话号码移动端弹出数字键盘
type="number"数字支持步进器、范围限制
type="date"日期弹出日期选择器
type="color"颜色弹出颜色选择器
type="range"滑块提供滑块控件
type="search"搜索移动端优化键盘
html
<!-- HTML5 新控件示例 -->
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday">

<br><br>

<label for="satisfaction">满意度：</label>
<input type="range" id="satisfaction" name="satisfaction"
       min="0" max="100" value="50">

<br><br>

<label for="favcolor">喜欢的颜色：</label>
<input type="color" id="favcolor" name="favcolor" value="#ff6600">

无障碍访问 ​

HTML 的无障碍（Accessibility，简称 a11y）特性确保所有用户——包括使用屏幕阅读器的视障用户、运动障碍用户和认知障碍用户——都能正常使用网页。

关键无障碍特性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无障碍访问示例</title>
</head>
<body>
  <!-- 图片必须有 alt 文本，描述图片内容 -->
  <img src="chart.png" alt="2024年各季度销售额柱状图，Q3 最高达 500 万">

  <!-- 为表单控件绑定 label，确保可被正确识别 -->
  <form>
    <label for="search">搜索：</label>
    <input type="search" id="search" name="q"
           aria-label="搜索网站内容">

    <button type="submit" aria-label="开始搜索">
      <!-- 使用 aria-label 为没有文字的按钮提供描述 -->
    </button>
  </form>

  <!-- 跳过导航链接：让键盘用户跳过重复的导航区域 -->
  <a href="#main-content" class="skip-link">跳到主要内容</a>

  <nav aria-label="主导航">
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
  </nav>

  <!-- main 区域设置 tabindex，方便键盘导航 -->
  <main id="main-content">
    <article>
      <h1>无障碍网页设计</h1>
      <p>良好的无障碍设计让每个人都能平等地访问网络内容。</p>
    </article>
  </main>

  <!-- 使用 role 和 aria-* 属性增强语义 -->
  <div role="alert" aria-live="assertive">
    操作成功！
  </div>
</body>
</html>

无障碍核心要素 ​

要素说明示例
alt 文本为图片提供替代描述<img alt="描述文字">
label 绑定将标签与表单控件关联<label for="id">
aria-label为元素提供可读名称aria-label="关闭菜单"
lang 属性声明页面语言<html lang="zh-CN">
语义标签使用正确的语义化元素<nav>、<main>、<button>
键盘可达所有交互元素可通过 Tab 键访问避免使用 tabindex > 0
对比度文本与背景色有足够对比遵循 WCAG 标准

关于无障碍

无障碍不仅是一项道德责任，在很多国家和地区（如美国、欧盟）也是法律要求。好的无障碍实践同时也改善了 SEO 和整体用户体验。

其他 HTML 能力 ​

HTML 还具备一些其他重要能力：

元数据与 SEO ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题 - 对 SEO 至关重要</title>

  <!-- 页面描述：搜索引擎结果中显示的摘要 -->
  <meta name="description" content="这是一个关于 HTML 能力的详细教程">

  <!-- 关键词（现代 SEO 中作用有限，但仍可使用） -->
  <meta name="keywords" content="HTML, 教程, Web 开发">

  <!-- 作者信息 -->
  <meta name="author" content="作者名">

  <!-- 视口设置：响应式设计必备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Open Graph：社交媒体分享时显示的信息 -->
  <meta property="og:title" content="HTML 能力教程">
  <meta property="og:description" content="全面了解 HTML 的功能">
  <meta property="og:image" content="cover.jpg">
</head>
<body>
  <p>元数据虽然用户看不到，但对搜索引擎和社交媒体平台非常重要。</p>
</body>
</html>

可折叠内容与细节 ​

html
<!-- HTML5 原生的可折叠组件 -->
<details>
  <summary>点击展开详细信息</summary>
  <p>这里是隐藏的详细内容，点击 summary 即可展开或收起。</p>
  <p>无需任何 JavaScript 即可实现折叠/展开效果。</p>
</details>

<details open>
  <summary>这个默认展开</summary>
  <p>添加 open 属性后，内容默认显示。</p>
</details>

进度与度量 ​

html
<!-- 进度条：表示任务完成进度 -->
<label for="progress">下载进度：</label>
<progress id="progress" value="70" max="100">70%</progress>

<br><br>

<!-- 度量条：表示某个值在范围内的位置 -->
<label for="disk">磁盘使用量：</label>
<meter id="disk" value="0.7" min="0" max="1"
       low="0.3" high="0.8" optimum="0.4">70%</meter>

注意事项 ​

  • HTML 的职责是结构和语义，不要用 HTML 来控制样式（那是 CSS 的工作）
  • <video> 和 <audio> 标签需要提供多种格式的 <source> 以兼容不同浏览器
  • <iframe> 嵌入外部内容时要考虑安全性，使用 sandbox 属性限制权限
  • 表单验证的 required、pattern 等属性只是前端提示，后端必须进行二次验证
  • alt 属性不是可选的——每张图片都应该有有意义的替代文本
  • 不要滥用 <div> 和 <span>，优先使用语义化标签

最佳实践 ​

  • 为所有非装饰性图片提供描述性的 alt 文本
  • 使用 <figure> 和 <figcaption> 为图片添加标题说明
  • 表单始终使用 <label> 与控件关联，提升可用性和无障碍性
  • 使用 HTML5 语义标签（<header>、<nav>、<main> 等）替代无语义的 <div>
  • 多媒体内容提供降级方案（fallback），确保在不支持的浏览器中仍有可用体验
  • 编写无障碍友好的 HTML 是一种习惯，应该在项目初期就融入开发流程

下一节

继续学习：发展历史与版本

参考链接 ​