📘 HTML5 教程教案（完整版）

从基础标签到 2025 年前沿新技术，老曹的课程安排（共 20 节课）

📚 一、课程概述

✅ 课程目标

本课程旨在帮助开发者系统掌握 HTML5 的核心知识体系，涵盖从基础语法、语义化标签、表单控件、多媒体支持，到 2025 年即将标准化的 HTML 新特性与 Web 组件技术。我将通过理论 + 实战结合的方式，详细讲解覆盖所有现代 Web 开发所需 HTML 技术栈。

🧑‍🏫 适合人群

  • 初学者：零基础学习 HTML5
  • 前端工程师：巩固 HTML 核心能力
  • 移动端开发人员：理解响应式网页结构
  • Web 应用开发者：构建可扩展的 HTML 架构
  • 想要了解未来 HTML 发展趋势的开发者

⏱️ 总课时：20 节课（每节约60分钟）

🗂️ 二、课程大纲（共 20 节）

课次 主题 内容概要
第1节 HTML5 简介与环境搭建 HTML 发展历程、HTML5 新特性、第一个 HTML 页面
第2节 HTML 基础语法 元素、属性、文档结构、注释、字符编码
第3节 文本内容与排版 标题、段落、列表、引用、代码块、换行与空格处理
第4节 链接与导航 a 标签、锚点跳转、外部链接、邮件链接
第5节 图像与媒体嵌入 img、figure、figcaption、video、audio、iframe
第6节 表单基础 input、label、button、form、action、method
第7节 表单进阶 表单验证、input 类型（email、date、range）、required 属性
第8节 表格与数据展示 table、thead、tbody、tfoot、tr、th、td
第9节 语义化标签与 SEO header、footer、nav、article、section、aside、main
第10节 Canvas 与 SVG 基础 Canvas API、SVG 基本图形绘制、响应式设计
第11节 地理定位 API navigator.geolocation 使用方法、权限管理
第12节 本地存储 API localStorage、sessionStorage、IndexedDB 基础
第13节 拖放 API drag & drop 事件、拖拽交互实现
第14节 Web Workers 多线程 Worker 创建、通信、错误处理
第15节 Web Components 入门 Custom Elements、Shadow DOM、Templates
第16节 HTML5 新增 API（Web Sockets / Fetch） WebSocket、fetch 请求、Headers、Response
第17节 HTML5 与响应式布局 meta viewport、flex、grid、media queries
第18节 HTML5 与无障碍访问 ARIA 属性、屏幕阅读器适配、语义化结构优化
第19节 HTML5 与 PWA 渐进式 Web 应用 Service Workers、Manifest、离线缓存
第20节 2025 年 HTML 前沿技术展望 WebGPU、Declarative Shadow DOM、Container Queries、HTML Modules

🧭 三、每节课详细内容

第1节：HTML5 简介与环境搭建

学习目标：

了解 HTML5 的发展背景、安装方式、基本目录结构。

内容简介：
  • HTML5 与 HTML4 的区别
  • 使用 VSCode 编写第一个 HTML 页面
  • HTML5 文档结构（DOCTYPE、html、head、body）
  • 在浏览器中运行和调试 HTML 页面
课程示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的第一个 HTML5 页面</title>
</head>
<body>
    <h1>Hello, HTML5!</h1>
</body>
</html>

第2节：HTML 基础语法

学习目标：

掌握 HTML 的基本语法、元素结构与书写规范。

内容简介：
  • HTML 元素分类：块级、行内、自闭合标签
  • 属性写法：布尔属性、引号使用
  • 注释语法 <!-- -->
  • 字符编码设置 <meta charset="utf-8">
  • W3C 验证工具介绍
课程示例代码：
<p class="intro" id="para1">这是一个段落。</p>
<img src="image.jpg" alt="图片描述" />
<input type="text" required>

第3节：文本内容与排版

学习目标：

掌握 HTML 中各种文本结构的使用方式。

内容简介：
  • 标题标签 h1~h6
  • 段落 p
  • 列表 ul、ol、dl
  • 引用 blockquote、q
  • 代码标记 code、pre、samp
  • 换行 br、水平线 hr
课程示例代码：
<h1>标题</h1>
<p>这是一个段落。</p>
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>
<blockquote cite="https://example.com">
  这是一个引用。
</blockquote>

第4节：链接与导航

学习目标：

掌握超链接的创建、内部/外部链接跳转、邮件与下载链接。

内容简介：
  • a 标签使用
  • target=“_blank” 与 rel=“noopener”
  • 锚点跳转 #top
  • mailto: 邮件链接
  • download 属性控制下载
课程示例代码：
<a href="https://www.example.com" target="_blank" rel="noopener">打开新窗口</a>
<a href="#section1">跳转到页面某部分</a>
<a href="mailto:support@example.com">发送邮件</a>
<a href="/download.pdf" download>下载 PDF</a>

第5节：图像与媒体嵌入

学习目标：

掌握图像、视频、音频等多媒体资源的插入方式。

内容简介：
  • img 标签与 alt 属性
  • figure 与 figcaption 语义化图片容器
  • video 与 audio 控件、格式兼容性
  • iframe 嵌入第三方内容
  • srcset 与 sizes 支持响应式图片
课程示例代码：
<img src="logo.png" alt="网站 Logo" width="200" height="100">
<figure>
  <img src="photo.jpg" alt="风景照">
  <figcaption>美丽的风景</figcaption>
</figure>

<video controls width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

第6节：表单基础

学习目标：

掌握 HTML5 表单的基本构成与提交机制。

内容简介：
  • form 标签与 action、method 属性
  • input 不同类型（text、radio、checkbox、submit）
  • label 与 for 关联
  • select 与 option 下拉选择框
  • button 按钮类型（submit/reset/button）
课程示例代码：
<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <br><br>
  <input type="submit" value="提交">
</form>

第7节：表单进阶

学习目标：

掌握 HTML5 表单验证机制与高级控件。

内容简介：
  • input 类型：email、url、number、range、color、date
  • required、placeholder、pattern、min/max 属性
  • datalist 自动补全输入
  • fieldset 与 legend 分组表单
  • 使用 JavaScript 进行自定义验证逻辑
课程示例代码：
<input type="email" placeholder="请输入邮箱" required pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$">
<input type="range" min="0" max="100" oninput="output.value = value">
<output id="output">50</output>

第8节：表格与数据展示

学习目标：

掌握 HTML 表格的构建与样式优化。

内容简介：
  • table、tr、th、td、thead、tbody、tfoot
  • colgroup 与 span 合并列
  • caption 表格标题
  • 表格样式建议
  • 响应式表格解决方案
课程示例代码：
<table border="1">
  <caption>用户信息表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

第9节：语义化标签与 SEO

学习目标：

掌握 HTML5 提供的语义化标签，提升 SEO 和可访问性。

内容简介：
  • header、footer、nav、main、article、section、aside
  • 使用语义标签替代 div
  • 对搜索引擎友好结构
  • ARIA 角色与辅助功能（Accessibility）
课程示例代码：
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章正文</p>
  </article>
</main>

第10节：Canvas 与 SVG 基础

学习目标：

掌握 HTML5 提供的绘图能力，用于图表或动画。

内容简介：
  • canvas 元素与 getContext API
  • 使用 JavaScript 绘制矩形、圆形、文字
  • SVG 语法与 viewBox
  • SVG 与 CSS 动画结合
  • Canvas vs SVG 对比
课程示例代码：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 200, 100);
</script>

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

第11节：地理定位 API

学习目标：

掌握 HTML5 获取用户地理位置的方法。

内容简介：
  • navigator.geolocation API
  • getCurrentPosition 方法
  • watchPosition 监听位置变化
  • 权限请求与安全策略
  • Google Maps 集成示例
课程示例代码：
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log("纬度：" + position.coords.latitude);
    console.log("经度：" + position.coords.longitude);
  });
}

第12节：本地存储 API

学习目标：

掌握 HTML5 提供的客户端存储方案。

内容简介：
  • localStorage 与 sessionStorage 区别
  • setItem、getItem、removeItem、clear
  • IndexedDB 基本操作
  • 数据持久化与安全性考虑
课程示例代码：
localStorage.setItem('theme', 'dark');
let theme = localStorage.getItem('theme');
console.log(theme); // dark

第13节：拖放 API

学习目标：

掌握 HTML5 拖放功能，实现文件上传、卡片排序等功能。

内容简介：
  • dragstart、dragover、drop 事件
  • DataTransfer 对象
  • 文件拖放上传
  • 拖放排序组件实现
课程示例代码：
<div draggable="true" @dragstart="onDragStart">拖我</div>
<div @dragover.prevent @drop="onDrop">释放区域</div>

<script>
function onDragStart(event) {
  event.dataTransfer.setData("text/plain", "Hello");
}

function onDrop(event) {
  let data = event.dataTransfer.getData("text/plain");
  alert(data);
}
</script>

第14节：Web Workers 多线程

学习目标：

掌握在 HTML5 中使用多线程执行复杂任务。

内容简介：
  • Worker 创建与通信（postMessage）
  • Worker 加载 JS 文件
  • 错误处理
  • SharedWorker 与 Service Worker 区别
课程示例代码：
// main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello from main');

worker.onmessage = function(e) {
  console.log('Worker said:', e.data);
}

// worker.js
onmessage = function(e) {
  postMessage('Worker received: ' + e.data);
}

第15节：Web Components 入门

学习目标：

掌握 HTML5 中原生组件开发方式。

内容简介：
  • Custom Elements v1 规范
  • Shadow DOM 封装样式与结构
  • Templates 与 slots
  • 生命周期回调（connectedCallback、disconnectedCallback）
  • 与 Vue/React 的集成方式
课程示例代码：
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.createElement('template');
    template.innerHTML = `<style>p { color: red; }</style><p>Hello Web Component</p>`;
    shadow.appendChild(template.content.cloneNode(true));
  }
}
customElements.define('my-element', MyElement);

<my-element></my-element>

第16节：HTML5 新增 API（WebSocket / Fetch）

学习目标：

掌握 HTML5 提供的网络交互 API。

内容简介：
  • WebSocket 协议与实时通信
  • fetch API 替代 XMLHttpRequest
  • Headers、Request、Response 接口
  • 使用 async/await 处理异步请求
  • 跨域问题与 CORS 解决方案
课程示例代码：
// WebSocket
const socket = new WebSocket('wss://echo.websocket.org');
socket.addEventListener('open', () => {
  socket.send('Hello Server');
});
socket.addEventListener('message', event => {
  console.log('收到消息：', event.data);
});

// Fetch
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

第17节：HTML5 与响应式布局

学习目标：

掌握 HTML5 结合 CSS 实现响应式布局。

内容简介：
  • viewport 设置移动端适配
  • flex 布局与 grid 布局
  • 媒体查询 media queries
  • 响应式图片 srcset 与 sizes
  • 使用 Bootstrap / TailwindCSS 快速开发
课程示例代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.container {
  display: flex;
  justify-content: space-between;
}
</style>

<div class="container">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

第18节：HTML5 与无障碍访问

学习目标：

掌握 HTML5 如何构建无障碍网页。

内容简介：
  • screen reader 读取规则
  • aria-label、aria-describedby、role 属性
  • heading 结构优化
  • 表单无障碍标注
  • 使用 axe DevTools 插件检测无障碍问题
课程示例代码：
<button aria-label="关闭按钮" onclick="closeModal()">X</button>
<label for="search">搜索：</label>
<input type="text" id="search" aria-describedby="search-desc">
<p id="search-desc">请输入关键词进行搜索</p>

第19节：HTML5 与 PWA 渐进式 Web 应用

学习目标：

掌握 HTML5 支持的 PWA 功能，打造类 App 体验。

内容简介：
  • Manifest.json 配置
  • Service Worker 缓存策略
  • 离线访问与推送通知
  • 添加到主屏提示
  • Lighthouse 审计 PWA 指标
课程示例代码：
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "description": "一个渐进式 Web 应用",
  "icons": []
}

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(() => console.log('Service Worker 注册成功'))
      .catch(err => console.log('注册失败：', err));
  });
}

第20节：2025 年 HTML 前沿技术展望

学习目标：

了解 HTML5 之后的发展方向，提前掌握前沿特性。

内容简介：
  • WebGPU API（GPU 加速渲染）
  • Declarative Shadow DOM（服务端渲染支持）
  • Container Queries（容器级响应式）
  • HTML Modules（模块化 HTML 片段）
  • CSS Houdini（自定义 CSS 属性）
  • WebAssembly 与 HTML5 集成
课程示例代码（WebGPU）：
if ("gpu" in navigator) {
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
  // 使用 device 进行 GPU 渲染
}
课程示例代码（Declarative Shadow DOM）：
<template shadowroot="open">
  <style>span { color: blue; }</style>
  <span>Shadow DOM 内容</span>
</template>
<div id="host"></div>

<script>
const host = document.getElementById('host');
const template = document.querySelector('template[shadowroot]');
host.attachShadow({ mode: 'open' }).append(template.content.cloneNode(true));
</script>

📌 附录推荐

工具 地址
MDN HTML 文档 https://developer.mozilla.org/zh-CN/docs/Web/HTML
WHATWG HTML Living Standard https://html.spec.whatwg.org/multipage/
Web Components 文档 https://www.webcomponents.org/
WebGPU 文档 https://www.w3.org/TR/webgpu/
Declarative Shadow DOM 规范 https://github.com/WICG/webcomponents/blob/gh-pages/specs/declarative-shadow-dom/declarative-shadow-dom.md
HTML Modules https://github.com/joewasm/html-modules

✅ 总结

本课程为老曹准备的 HTML5 的完整学习路径图，覆盖从基础标签到 2025 年前沿特性的全部知识点，适用于任何想成为现代前端工程师的开发者。

📌 下一阶段计划：

  • 使用 HTML5 + CSS3 + JS 实现一个响应式博客系统
  • 使用 Web Components 开发可复用 UI 组件库
  • 使用 PWA 技术发布可安装的 Web 应用
  • 关注 W3C 与 WHATWG，跟进 HTML 最新草案
# html5 # 前端 # html # javascript
Logo
广州城市开发者社区

欢迎加入我们的广州开发者社区，与优秀的开发者共同成长！

更多推荐

agent-browser OpenClaw 的最佳搭档

agent-browser 是专为 AI Agent 设计的浏览器自动化工具，目前被公认为 OpenClaw 的最佳配套方案。这份技术文档完整记录了其架构、协议、性能调优与常见问题处理，非常适合想让OpenClaw 真正“上手”互联网的开发者与老用户。

avatar 广州城市开发者社区
cover

收藏 |小白也能看懂！AI大模型如何赋能企业降本增效，特斯拉蚂蚁集团案例深度解析

avatar 广州城市开发者社区

多智能体系统实现全方位风险评估

在当今复杂多变的社会和经济环境中，风险评估变得至关重要。传统的风险评估方法往往难以应对大规模、复杂且动态变化的风险场景。多智能体系统（Multi - Agent System，MAS）作为一种分布式人工智能技术，具有自主性、交互性和适应性等特点，能够为全方位风险评估提供新的解决方案。本文的目的在于深入探讨如何利用多智能体系统实现全方位风险评估，涵盖了从核心概念、算法原理到实际应用的各个方面。范围包

avatar 广州城市开发者社区