“EDK”并不是一个标准的HTML教程缩写，我猜测您可能指的是 Easy、Detailed、Knowledge（简单、详细、知识）或者是一些特定平台的缩写，无论如何，我会为您构建一个从零到一的、系统化的HTML视频学习方案，无论您是初学者还是希望巩固基础,都能找到适合自己的内容。
（图片来源网络，侵删）
HTML 学习路线图 (Roadmap)
在学习任何视频教程之前，了解学习的整体脉络非常重要,这能让你知道每个阶段的目标是什么。
第一阶段：HTML 基础入门
- 目标： 理解网页的基本构成，写出第一个HTML页面,掌握常用标签。
- 核心概念：
- 什么是HTML？ (超文本标记语言,网页的骨架)
- 开发环境搭建： 只需一个浏览器（如Chrome）和一个文本编辑器（如 VS Code、Sublime Text）。
- HTML基本结构：
<!DOCTYPE html>,<html>,<head>,<body>。 - 常用标签：
-
<h1>-<h6>(标题),<p>(段落),<strong>/<b>(粗体),<em>/<i>(斜体)。 - 列表：
<ul>(无序列表),<ol>(有序列表),<li>(列表项)。 - 链接与图片：
<a>(超链接),<img>(图片)。 - 结构化标签：
<div>(块级容器),<span>(行内容器)。
-
- 视频教程关键词：
HTML入门教程,HTML基础,HTML first page。
第二阶段：HTML 表单与语义化
- 目标： 创建用户交互的表单,并写出更易于搜索引擎和屏幕阅读器理解的HTML。
- 核心概念：
- HTML表单：
<form>- 表单元素：
<input>(文本、密码、单选、复选等),<textarea>(文本域),<select>(下拉列表),<button>(按钮)。- 表单属性：
action,method,name,placeholder,required。- HTML5 语义化标签：
<header>,<nav>,<main>,<article>,<section>,<footer>,为什么它们很重要？ - 表单元素：
- HTML表单：
- 视频教程关键词：
HTML form教程,HTML5语义化标签。
第三阶段：HTML5 新特性与多媒体
- 目标： 掌握HTML5带来的新功能,特别是音视频处理能力。
- 核心概念：
- HTML5 多媒体标签：
<video>(视频),<audio>(音频)。 <video>标签常用属性：src,controls,width,height,autoplay,loop,muted。<audio>标签常用属性：src,controls,autoplay,loop。- 其他HTML5新特性：
<canvas>(画布),<svg>(矢量图简介)。
- HTML5 多媒体标签：
- 视频教程关键词：
HTML5 video教程,HTML5 audio教程,HTML5新特性。
推荐视频教程平台与资源
以下是根据不同学习风格和语言推荐的优质视频教程。
中文资源
Bilibili (B站) - 国内首选，资源丰富
B站是学习编程的宝库,有大量免费且高质量的UP主教程。
-
UP主推荐：
（图片来源网络，侵删）- 【狂神说Java】：虽然名字是Java，但他早期的HTML/CSS/JavaScript基础系列教程非常经典，讲解通俗易懂，适合零基础小白，搜索“狂神说HTML”即可找到。
- 【尚硅谷】：以“尚硅谷HTML+CSS+前端基础”为关键词，可以找到他们非常系统和全面的免费教程，课程质量高,逻辑清晰。
- 【黑马程序员】：与尚硅谷类似，提供系统化的免费前端入门课程，内容详实,适合跟练。
- 【程序员鱼皮】：他的教程更偏向于项目驱动，在讲解HTML时，会结合实际项目需求，让你明白“为什么这么用”。
-
搜索技巧：
HTML入门教程(获取最基础的讲解)HTML5 video标签详解(针对特定知识点深入)HTML语义化实战(结合案例学习)
慕课网 / 菜鸟教程
- 慕课网： 提供大量的免费和付费视频课程，有专门针对“HTML入门”、“HTML5新特性”的系列视频，课程体系化，配有在线编码环境,可以边学边练。
- 菜鸟教程： 主要是图文教程，但每个章节下方都有配套的“视频”链接，通常会嵌入B站的视频,适合图文和视频结合学习。
中国大学MOOC (爱课程)
- 可以搜索国内知名大学的《Web前端开发基础》、《HTML与CSS》等课程，这些课程由大学教授主讲，理论性更强，更系统化,适合希望打下坚实理论基础的学习者。
英文资源 (如果你想接触原汁原味的内容)
freeCodeCamp
- YouTube频道 & 官网： freeCodeCamp 提供完全免费的、高质量的编程课程，他们的 "HTML & CSS" 课程在YouTube上有完整的播放列表，由 Shawn Wang (Sean) 等讲师主讲，内容非常扎实,并且有大量的实战项目。
- 优点： 免费、项目驱动、社区强大。
Traversy Media (Brad Traversy)
- YouTube频道： Brad Traversy 是一位非常受欢迎的前端讲师，他的课程节奏快，信息密度大，非常实用，搜索 "Brad Traversy HTML Crash Course" 可以找到他的速成课程,非常适合快速回顾和入门。
The Net Ninja
- YouTube频道 & 官网： The Net Ninja 的教程系列化做得非常好，每个技术点都有独立的短视频，非常易于学习和查找，他的 "HTML Crash Course" 和 "HTML5 Tutorial" 系列都广受好评。
如何高效学习HTML视频教程？
- 不要只看不练： 看视频时，一定要跟着敲代码！把老师的每一行代码都自己敲一遍,理解其作用。
- 勤做笔记： 用笔记或思维导图记录每个标签的名称、作用和常用属性，记录
<a>标签的href和target属性分别是什么意思。 - 主动思考，多问“为什么”： 为什么要用
<header>而不是<div id="header">？为什么<video>标签需要controls属性？理解背后的原因比死记硬背更重要。 - 学会使用开发者工具： 在浏览器中按
F12打开开发者工具，当你写完一个页面后，用它来检查你的HTML结构，看看浏览器是如何解析你的代码的,这是前端开发的核心技能之一。 - 做小项目： 学完基础后，尝试用HTML做一个简单的个人主页、一个产品介绍页面或者一个静态的博客文章页面,项目是最好的老师。
| 学习阶段 | 核心目标 | 推荐视频关键词 |
|---|---|---|
| 第一阶段 | 掌握基本结构和常用标签 | HTML入门教程, HTML基础 |
| 第二阶段 | 学会表单和语义化 | HTML form教程, HTML5语义化 |
| 第三阶段 | 熟悉HTML5新特性与多媒体 | HTML5 video教程, HTML5新特性 |
建议路径：
从 B站 的 【狂神说Java】 或 【尚硅谷】 的免费系统课开始，跟着做笔记和敲代码，遇到特定问题（比如视频标签不会用），直接在B站或YouTube搜索 HTML5 video标签详解 这样的关键词,观看针对性的短小精悍的视频来攻克。
祝你学习愉快,顺利开启前端开发的大门！
（图片来源网络，侵删）
