HTML 的发展历程简述:
- 1990年: 蒂姆·伯纳斯-李 (Tim Berners-Lee) 发明了 World Wide Web (万维网)，并提出了 HTML (HyperText Markup Language) 的概念，HTML 的第一个公开描述文件名为 “HTML Tags”。
- 1993年: IETF (Internet Engineering Task Force) 发布了 HTML 规范草案 (HTML Internet Draft)，标志着 HTML 的标准化进程开始。
- HTML 1.0: 第一个正式发布的 HTML 标准，定义了基本的 HTML 标签和文档结构，主要用于展示静态文本和简单的超链接。
- HTML 2.0: 在 HTML 1.0 的基础上进行了扩展，增加了表单 (Forms)、图像 (Images) 等功能，使得网页可以实现用户交互和更丰富的内容展示。
- HTML 3.2: W3C (World Wide Web Consortium) 发布的第一个正式 HTML 标准，增加了表格 (Tables)、CSS (Cascading Style Sheets) 的初步支持，以及更丰富的文本格式化功能。
- HTML 4.01: HTML 4.01 是 HTML4 的修订版本，也是 HTML4 系列中最稳定的版本，被广泛使用。HTML4 更加注重结构和内容与表现的分离，提倡使用 CSS 进行样式控制。
- XHTML 1.0: 基于 XML (Extensible Markup Language) 的 HTML 版本，语法更加严格，旨在提高 HTML 的规范性和可扩展性。但 XHTML 1.0 的严格语法与当时 Web 开发者习惯的宽松 HTML 语法存在较大差异，推广受阻。
- HTML5: 由 WHATWG (Web Hypertext Application Technology Working Group) 主导制定，并与 W3C 合作发布的最新 HTML 标准。HTML5 综合了 HTML、XHTML 和 DOM (Document Object Model) 等 Web 技术的优点，并引入了大量新特性，例如语义化标签、多媒体支持、Canvas 绘图、Web Storage、Web Workers、WebSockets 等，目标是构建更强劲、更现代、更开放的 Web 平台。
HTML5 的诞生背景:
- Web 应用的兴起: 随着互联网技术的发展，Web 应用的需求日益增长，传统的 HTML 已经无法满足构建复杂 Web 应用的需求。
- 浏览器兼容性问题: 不同浏览器对 HTML 标准的实现存在差异，导致 Web 开发中需要处理大量的浏览器兼容性问题。
- 移动互联网的普及: 移动设备的普及对 Web 技术的跨平台、响应式设计提出了新的挑战。
HTML5 的目标:
- 提升 Web 能力: 增强 HTML 的功能，使其能够支持更丰富的 Web 应用场景，例如多媒体、图形、本地存储、离线应用、实时通信等。
- 提高互操作性: 制定更清晰、更规范的 HTML 标准，减少浏览器兼容性问题，实现 “一次编写，到处运行” 的目标。
- 增强用户体验: 通过语义化标签、多媒体支持等新特性，提升 Web 内容的可访问性、可理解性和用户体验。
- 推动 Web 开放性: HTML5 是一项开放标准，鼓励创新和技术发展，推动 Web 技术的进步。
网页与网站的关系
网页 (Web Page)
- 定义: 网页是互联网上的单个文档，一般以 HTML (超文本标记语言) 编写。
- 特点:
- 独立性: 网页可以独立存在和被访问，拥有唯一的网址 (URL)。
- 静态或动态: 网页内容可以是静态的 (固定不变)，也可以是动态的 (根据用户交互或服务器数据变化)。
- 组成网站的基本单元: 如同书籍中的每一页。
网站 (Website)
- 定义: 网站是一组通过互联网访问的相关网页的集合，为了共同的目的组织在一起。
- 特点:
- 组织性: 网站由多个网页组成，这些网页一般围绕一个主题或目标组织。
- 结构性: 网站一般具有层级结构和导航系统，方便用户浏览和查找信息。
- 功能性: 网站可能包含各种功能，例如信息展示、用户交互、电子商务、社交互动等。
- 后台系统: 许多网站拥有后台管理系统 (CMS – 内容管理系统)，用于更新、维护和管理网站内容和功能。
- 如同书籍: 网站如同完整的书籍，由多个网页 (页面) 组成。
网页与网站的关系:
- 组成关系: 网站由一个或多个网页组成，网页是构成网站的基本元素。
- 整体与部分: 网站是整体，网页是构成整体的各个部分。
- 功能侧重: 网页侧重于内容的展示和用户的直接访问，网站侧重于组织内容、提供完整的功能和服务。
简单比喻:
- 网页: 像一篇文章或一页纸。
- 网站: 像一本书或一本杂志，由多篇文章或多页纸组成。
理解网页与网站的关系，有助于我们更好地理解 Web 开发和互联网的运作方式。在学习 HTML5 的过程中，我们主要关注如何创建和设计网页，而网站的构建则是在网页的基础上，进一步思考组织结构、功能实现和用户体验。
一、HTML5 基础概念
1.1 什么是 HTML5？
- 定义：HTML5 是构建 Web 内容的最新标准，是 HTML 的第五次重大修订，由 W3C 和 WHATWG 联合制定。
- 核心特性：
- 语义化标签（如 <header>, <nav>, <section>）
- 多媒体支持（<audio>, <video>）
- 图形绘制（<canvas>）
- 本地存储（LocalStorage、SessionStorage）
- 增强的表单功能（日期选择、邮箱验证等）
1.2 HTML5 与 HTML/XHTML 的区别
|
特性 |
HTML |
XHTML |
HTML5 |
|
语法严格性 |
宽松 |
严格（XML 语法） |
兼容宽松，支持混合大小写 |
|
标签闭合 |
允许省略 |
必须闭合 |
允许部分标签省略闭合 |
|
DOCTYPE |
复杂声明（如 HTML4） |
复杂声明 |
简单声明：<!DOCTYPE html> |
|
新特性 |
无 |
无 |
语义标签、API 等 |
|
制定机构 |
W3C |
W3C |
W3C & WHATWG 联合制定 |
|
向后兼容 |
部分兼容 |
不完全兼容 |
良好，基本向后兼容 |
HTML5 的优势：
- 语义化更强： HTML5 引入了更多语义化标签，例如 <header>、<nav>、<article>、<footer> 等，使得 HTML 结构更加清晰，易于理解和维护，也更有利于搜索引擎优化（SEO）。
- 增强的多媒体支持： HTML5 原生支持 <audio> 和 <video> 标签，使得在网页中嵌入音频和视频内容更加方便，无需依赖 Flash 等插件。
- 强劲的 Web 应用功能： HTML5 提供了丰富的 API，例如 Canvas 绘图、Web Storage 本地存储、Geolocation 定位、Web Workers 多线程、WebSockets 实时通信等，使得开发复杂的 Web 应用程序成为可能。
- 跨平台兼容性： HTML5 标准旨在提高跨平台兼容性，使得 Web 应用在不同浏览器和设备上能够更好地运行。
- 简化代码： HTML5 简化了文档结构，例如使用 <!DOCTYPE html> 声明文档类型，使得代码更加简洁易读。
W3C 与 WHATWG：
- W3C (World Wide Web Consortium)： 万维网联盟，是一个国际标准化组织，负责制定 Web 标准。W3C 在 HTML5 的早期版本中起主导作用。
- WHATWG (Web Hypertext Application Technology Working Group)： 网页超文本应用技术工作组，由浏览器厂商（如 Apple、Mozilla、Google）主导成立，致力于 HTML 和 DOM 的长期演进。HTML5 标准的制定后期由 WHATWG 主导，并与 W3C 合作发布。
二、HTML5 文档结构
2.1 基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>页面标题</title>
<!-- 其他元数据、CSS、JS 引入 -->
</head>
<body>
<!-- 页面内容 -->
</body>
</html>2.2 核心标签解析
- <!DOCTYPE html>：声明为 HTML5 文档，告知浏览器以 HTML5 标准解析页面。
- <html>：根元素，包含整个 HTML 页面，lang 属性定义页面主要语言，例如 lang=”zh-CN” 表明中文。
- <head>：文档的头部，包含元数据（metadata），例如页面标题、字符编码、外部样式表和 JavaScript 脚本的链接等，这些信息不会直接显示在网页内容中，但对浏览器、搜索引擎和可访问性至关重大。
- 重大性:
- 浏览器: <head> 中的元数据告知浏览器如何正确解析和渲染页面，例如字符编码、viewport 设置、页面标题等。
- 搜索引擎 (SEO): 搜索引擎通过 <head> 中的元数据 (例如 <title>, <meta description>, <link rel=”canonical”>) 来理解页面内容、关键词和页面之间的关系，从而进行网页索引和排名。
- 可访问性 (Accessibility): <title> 标签为屏幕阅读器提供页面标题，<link rel=”stylesheet”> 链接 CSS 样式表可以改善页面的视觉呈现，<meta> 标签可以提供文档语言等信息，这些都有助于提升网页的可访问性。
- <title>: 定义浏览器工具栏或标签页上显示的标题，对 SEO 超级重大，也用于搜索引擎结果页面的标题 (SERP Title)。
- <meta>: 提供关于 HTML 文档的元数据。
- charset=”UTF-8″: 指定文档字符编码为 UTF-8，支持全球多种字符，推荐使用 UTF-8 编码，避免中文乱码等问题。
- name=”viewport”: 用于设置移动设备上的viewport，实现响应式布局的关键，控制页面的缩放和显示。content=”width=device-width, initial-scale=1.0″: 常用的 viewport 设置，表明视口宽度等于设备宽度，初始缩放比例为 1.0，确保页面在移动设备上正常显示。
- name=”description”: 提供页面的简短描述，用于搜索引擎结果页面的摘要 (SERP Description)，对点击率有影响。
- name=”keywords”: 为搜索引擎提供关键词，协助搜索引擎索引页面内容 (但现代搜索引擎对 keywords 的权重已降低，不必过度关注)。
- name=”author”: 定义文档作者。<meta name=”author” content=”Your Name”>
- name=”robots”: 控制搜索引擎 robots 如何索引和抓取页面，常用的值：content=”index,follow”: 允许索引和跟踪链接 (默认值)。content=”noindex,nofollow”: 禁止索引和跟踪链接。content=”index,nofollow”: 允许索引，禁止跟踪链接。content=”noindex,follow”: 禁止索引，允许跟踪链接 (不常用)。<meta name=”robots” content=”index,follow”>
- http-equiv=”X-UA-Compatible”: 设置 IE 浏览器兼容模式，content=”IE=edge” 一般用于强制 IE 使用最新的渲染引擎。<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
- <link>: 链接外部资源，例如 CSS 样式表、网站图标 (favicon) 等。
- <link rel=”stylesheet” href=”style.css”>: 链接名为 style.css 的 CSS 样式表，用于控制页面样式。
- <link rel=”icon” href=”favicon.ico” type=”image/x-icon”>: 定义网站图标 (favicon)，显示在浏览器标签页和地址栏，提升网站品牌形象。
- <style>: 在 HTML 文档中嵌入 CSS 样式，适用于少量、页面特定的样式，但不推荐大量使用，不利于样式复用和维护。
- <script>: 引入 JavaScript 脚本或嵌入 JavaScript 代码，实现网页动态交互功能。
- <script src=”script.js”></script>: 引入外部 JavaScript 文件 script.js。
- <script>console.log(“Hello from inline script!”);</script>: 嵌入 JavaScript 代码。
- <base>: 定义页面中所有相对 URL 的基准 URL，用于简化相对路径的书写，尤其在单页应用 (SPA) 中常用。
- <base href=”/”>: 设置基准 URL 为网站根目录。
- <body>：页面主体，包含所有将在浏览器窗口中显示的内容，例如文本、图片、链接、列表、表格、表单、多媒体等。
三、HTML5 常用标签
3.1 文本与段落
标题标签 (Heading Tags):
- <h1> – <h6>: 定义 1 到 6 级标题，<h1> 是最高级标题，<h6> 是最低级。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>- <p>: 定义段落 (Paragraph)。
<p>这是一个段落。段落用于组织和分隔文本内容。</p>- <span>: 行内文本容器，用于对文本进行样式化或脚本操作，本身没有语义。
<p>这是一段 <span style="color:red;">红色</span> 的文本。</p>- <br>: 换行 (Break)，在文本中插入一个换行符。
<p>这是第一行。<br>这是第二行。</p>- <hr>: 水平线 (Horizontal Rule)，在页面中创建一条水平分割线，用于分隔内容。
<hr>- <pre>: 预格式化文本 (Preformatted Text)，保留文本中的空格和换行符，一般用于显示代码。
<pre>
function helloWorld() {
console.log("Hello, World!");
}
</pre>- <a>: 锚点 (Anchor)，创建超链接，用于链接到其他页面、文件或同一页面的不同位置 (后面会详细介绍)。
文本格式化标签:
- <b>: 加粗文本 (Bold)。 (HTML5 中提议使用 <strong> 标签) html
<b>这段文本是加粗的。</b>- <strong>: 强调文本 (Strong emphasis)，语义上表明重大性，一般浏览器会以加粗显示。 html
<strong>这段文本表明强调。</strong>- <i>: 斜体文本 (Italic)。 (HTML5 中提议使用 <em> 标签) html
<i>这段文本是斜体的。</i>- <em>: 强调文本 (Emphasis)，语义上表明强调，一般浏览器会以斜体显示。 html
<em>这段文本表明强调。</em>- <u>: 下划线文本 (Underline)。 (HTML5 中不推荐使用，提议使用 CSS 实现下划线效果) html
<u>这段文本带有下划线。</u>- <del>: 删除线文本 (Deleted text)，表明文本已被删除。 html
<del>这段文本被删除了。</del>- <ins>: 插入文本 (Inserted text)，表明文本已被插入。 html
<ins>这段文本被插入了。</ins>- <code>: 代码文本 (Code)，表明一段代码。 html
<code>let message = "Hello";</code>- <kbd>: 键盘输入文本 (Keyboard Input)，表明用户键盘输入，常用于技术文档或教程中，指示用户需要输入的内容。 html
<p>在终端中输入 <kbd>git commit -m "提交信息"</kbd> 并按回车键执行提交。</p>- <samp>: 程序输出文本 (Sample Output)，表明程序或系统的输出，用于展示代码或命令的运行结果。 html
<pre><code class="language-bash">
$ ls -l
<samp>
total 12
-rw-r--r-- 1 user staff 1024 Jan 1 00:00 index.html
-rw-r--r-- 1 user staff 512 Jan 1 00:00 style.css
</samp>
</code></pre>- <var>: 变量文本 (Variable)，表明变量名，用于代码或数学公式中，突出显示变量。 html
<p>在 JavaScript 中，使用 <var>let</var> 关键字声明变量，例如： <var>let</var> <var>count</var> = 0;</p>- <cite>: 引用 (Citation)，表明作品的标题 (例如书籍、文章、电影等)，用于标记引用的来源。 html
<p>根据 <cite>《HTML5 权威指南》</cite> 的描述，HTML5 引入了许多新的语义化标签。</p>- <sup>: 上标文本 (Superscript)。 html
X<sup>2</sup>- <sub>: 下标文本 (Subscript)。 html
H<sub>2</sub>O3.2 列表
无序列表 (Unordered List):
- <ul>: 定义无序列表，列表项之间没有顺序关系，默认使用项目符号 (bullet points) 标记。
- <li>: 定义列表项 (List Item)，必须作为 <ul> 或 <ol> 的子元素。
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>有序列表 (Ordered List):
- <ol>: 定义有序列表，列表项之间有顺序关系，默认使用数字编号标记。
- <li>: 定义列表项 (List Item)，必须作为 <ul> 或 <ol> 的子元素。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>- ol 标签的属性:
- type: 指定列表项的编号类型。
- type=”1″: 数字 (默认) – 1, 2, 3, …
- type=”a”: 小写字母 – a, b, c, …
- type=”A”: 大写字母 – A, B, C, …
- type=”i”: 小写罗马数字 – i, ii, iii, …
- type=”I”: 大写罗马数字 – I, II, III, …
- start: 指定有序列表的起始值。
<ol type="A" start="3">
<li>第三项 (C)</li>
<li>第四项 (D)</li>
</ol>定义列表 (Description List):
- <dl>: 定义定义列表 (Description List)，用于术语及其解释的列表。
- <dt>: 定义术语 (Description Term)。
- <dd>: 定义术语的解释 (Description Details)。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言 (HyperText Markup Language)，用于创建网页结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表 (Cascading Style Sheets)，用于控制网页样式和布局。</dd>
</dl>3.3 多媒体
图像 (Images):
- <img>: 插入图像 (Image)。
<img src="image.jpg" alt="图片描述" width="500" height="300">- img 标签的常用属性:
- src: 图像源文件路径 (Source)。
- alt: 图像的替代文本 (Alternative text)，当图像无法显示时显示，也有利于 SEO 和无障碍访问。
- width: 图像宽度 (像素)。
- height: 图像高度 (像素)。
- title: 鼠标悬停在图像上时显示的提示文本。
音频 (Audio):
<audio>: 插入音频 (Audio)。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>- audio 标签的常用属性:
- src: 音频源文件路径 (Source) (不常用，一般使用 <source> 标签)。
- controls: 显示浏览器默认的音频控制条 (播放/暂停, 音量, 进度条等)。
- autoplay: 自动播放 (不提议过度使用，可能影响用户体验)。
- loop: 循环播放。
- muted: 静音。
- <source>: 为 <audio> 或 <video> 元素指定多个媒体资源。浏览器会选择它能解码的第一个资源。
- source 标签的常用属性:
- src: 媒体资源文件路径。
- type: 媒体资源的 MIME 类型 (例如 audio/mpeg, audio/ogg, video/mp4, video/webm 等)。
视频 (Video):
- <video>: 插入视频 (Video)。
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>- video 标签的常用属性:
- src: 视频源文件路径 (Source) (不常用，一般使用 <source> 标签)。
- controls: 显示浏览器默认的视频控制条 (播放/暂停, 音量, 进度条, 全屏等)。
- autoplay: 自动播放 (不提议过度使用，可能影响用户体验)。
- loop: 循环播放。
- muted: 静音。
- poster: 视频封面图像，在视频加载前或暂停时显示。
- width: 视频宽度 (像素)。
- height: 视频高度 (像素)。
track 标签 (字幕):
- <track>: 为 <audio> 或 <video> 元素添加字幕、章节或其他时间相关的文本轨道。
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
您的浏览器不支持视频播放。
</video>- track 标签的常用属性:
- src: 文本轨道文件路径 (一般是 .vtt 格式)。
- kind: 文本轨道的类型。
- subtitles: 字幕。
- captions: 为听力障碍人士提供的字幕。
- descriptions: 视频内容的文字描述，用于视觉障碍人士。
- chapters: 章节标题。
- metadata: 脚本使用的元数据。
- srclang: 文本轨道语言 (例如 zh, en, fr 等)。
- label: 文本轨道的标签，在浏览器中显示给用户选择。
- default: 指定默认选中的文本轨道。
3.4 表单增强
<form> 标签:
- <form>: 定义 HTML 表单，用于收集用户输入的信息并提交到服务器。
<form action="/submit-form" method="post">
<!-- 表单元素 -->
<input type="submit" value="提交">
</form>- <form> 标签的常用属性:
- action: 表单提交的服务器端处理程序的 URL。
- method: HTTP 请求方法，常用的有 get 和 post。
- get: 表单数据附加在 URL 后面，适合少量数据，不安全。
- post: 表单数据放在 HTTP 请求体中，适合大量数据，相对安全。
表单元素 (Form Elements):
- <input>: 最常用的表单元素，根据 type 属性的不同，可以创建各种类型的输入字段。
- 文本输入:
- type=”text”: 单行文本输入框 (默认类型)。
- type=”password”: 密码输入框，输入内容会被遮盖。
- type=”email”: 邮箱输入框，会自动验证邮箱格式。
- type=”url”: URL 输入框，会自动验证 URL 格式。
- type=”search”: 搜索输入框，一般带有清除按钮。
- type=”tel”: 电话号码输入框 (移动设备上会弹出数字键盘)。
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<input type="email" placeholder="请输入邮箱" required>- 数字输入:
- type=”number”: 数字输入框，可以限制数字范围。
- type=”range”: 范围选择器，允许用户在必定范围内拖动滑块选择数值。
<input type="number" min="0" max="100" value="50">
<input type="range" min="0" max="100" step="10" value="30">- 日期和时间输入:
- type=”date”: 日期选择器 (年月日)。
- type=”month”: 月份选择器 (年月)。
- type=”week”: 周选择器 (年周)。
- type=”time”: 时间选择器 (时分)。
- type=”datetime-local”: 本地日期和时间选择器 (年月日时分)。
<input type="date">
<input type="datetime-local">- 择框:
- type=”checkbox”: 复选框，允许用户选择多个选项。
- type=”radio”: 单选框，允许用户选择一个选项 (同一组 radio 按钮 name 属性必须一样)。
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">我同意协议</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>- 文件选择:
- type=”file”: 文件选择框，允许用户上传文件。
<input type="file" multiple> <!- - multiple 属性允许选择多个文件 -->- 隐藏输入:
- type=”hidden”: 隐藏输入字段，用户不可见，用于在表单中传递一些不需要用户看到的数据。
<input type="hidden" name="user_id" value="12345">- 按钮:
- type=”submit”: 提交按钮，点击后提交表单。
- type=”reset”: 重置按钮，点击后重置表单到初始状态。
- type=”button”: 普通按钮，可以自定义 JavaScript 行为。
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="自定义按钮" onclick="alert('Hello!')">- <textarea> 标签:
- <textarea>: 多行文本输入框 (Textarea)。
<textarea rows="5" cols="30" placeholder="请输入留言"></textarea>- <textarea> 标签的常用属性:
- rows: 文本框的行数。
- cols: 文本框的列数 (字符宽度)。
- placeholder: 提示文本，在用户输入前显示。
<select> 和 <option> 标签:
- <select>: 下拉列表 (Select Box)。
- <option>: 下拉列表中的选项 (Option)。
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>- <option> 标签的常用属性:
- value: 选项的值，提交表单时传递给服务器。
- selected: 默认选中的选项。
<datalist> 标签:
- <datalist>: 为 <input> 元素提供预定义选项列表，实现输入提示和自动完成功能。
<input type="text" list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist><label> 标签:
- <label>: 为表单元素定义标签，提高可访问性，点击 label 标签可以聚焦到关联的表单元素。
<label for="username">用户名:</label>
<input type="text" id="username" name="username">- <label> 标签的 for 属性:
- for: 指定 label 关联的表单元素的 id 属性值。
表单验证属性 (HTML5 新增):
- required: 必填字段，提交表单前会检查是否已填写。
- pattern: 使用正则表达式验证输入内容格式。
- min, max, step: 用于 number 和 range 类型输入，限制数值范围和步长。
- minlength, maxlength: 限制文本输入框的最小和最大字符长度。
3.5 语义化标签
HTML5 引入了许多语义化标签，旨在更清晰地描述文档结构，提高可读性和可维护性，并有利于搜索引擎优化 (SEO) 和无障碍访问。
常用的语义化标签:
- <header>: 页眉，一般包含网站的 Logo、导航、搜索框等，表明页面的头部或区块的头部。
- <nav>: 导航栏，用于放置页面的导航链接，例如主菜单、侧边栏导航等。
- <main>: 页面的主要内容区域，每个页面一般只有一个 <main> 元素，表明页面的核心内容。
- <article>: 独立的、完整的、可独立分发的内容单元，例如博客文章、新闻报道、论坛帖子等。
- <section>: 文档中的一个区块或区域，用于组织内容，一般具有主题性的内容分组，例如章节、主题分组、标签页等。
- <aside>: 与页面主要内容相关的辅助信息，例如侧边栏、广告、相关链接、引用、注释等。
- <footer>: 页脚，一般包含版权信息、联系方式、备案信息、友情链接等，表明页面的底部或区块的底部。
其他语义化标签:
- <address>: 表明文档或 <article> 元素的联系信息 (例如作者、所有者的地址、邮箱、电话等)。
- <time>: 表明日期或时间。
- <mark>: 标记或突出显示文本，表明与上下文相关的重大或需要注意的文本。
- <figure> 和 <figcaption>: 用于包含独立的图片、图表、插图等内容，<figcaption> 用于为 <figure> 元素添加标题或描述。
语义化标签的优势:
- 提高可读性: 语义化标签使 HTML 结构更清晰，开发者更容易理解和维护代码。
- 利于 SEO: 搜索引擎更容易理解页面内容，提高网页在搜索结果中的排名。
- 增强可访问性: 屏幕阅读器等辅助技术可以更好地解析语义化标签，协助残障人士理解网页内容。
- 更好的浏览器支持: 现代浏览器对语义化标签提供更好的支持。
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化 HTML5 示例</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
<section>
<h3>小节标题</h3>
<p>小节内容...</p>
</section>
</article>
<aside>
<h3>侧边栏</h3>
<p>一些侧边栏信息...</p>
</aside>
</main>
<footer>© 2023 版权所有</footer>
</body>
</html>
3.6 链接标签
<a> 标签 (Anchor):
- <a>: 创建超链接，用于从当前页面链接到其他页面、文件或同一页面的不同位置。
<a href="https://www.baidu.com" target="_blank">打开百度，你就知道！</a>- <a> 标签的常用属性:
- href (Hypertext Reference): 链接目标 URL 或 URL 片段。
- 可以是绝对 URL (例如 https://www.baidu.com)，指向外部网站。
- 可以是相对 URL (例如 subpage.html, images/logo.png)，指向同一网站内的其他资源。
- 可以是 URL 片段 (例如 #section1)，指向同一页面内的特定 section (通过 id 属性标记)。
- 可以是电子邮件链接 (例如 mailto:info@example.com)，点击后打开用户的默认邮件客户端。
- 可以是电话链接 (例如 tel:+1234567890)，在移动设备上点击后可以拨打电话。
- target: 指定链接在何处打开。
- _blank: 在新窗口或标签页中打开链接。
- _self: 在当前窗口或标签页中打开链接 (默认值)。
- _parent: 在父框架聚焦打开链接。
- _top: 在顶层框架聚焦打开链接。
- download: 指示浏览器下载链接目标资源，而不是导航到该资源。可以指定下载文件的文件名。
<a href="document.pdf" download="my_document.pdf">下载 PDF 文件</a>- rel (Relationship): 描述当前文档与链接目标资源之间的关系。
- noopener: 与 target=”_blank” 一起使用，防止新窗口通过 window.opener 访问当前页面，增强安全性。
- noreferrer: 阻止浏览器在 HTTP 请求头中发送 Referer 信息，保护用户隐私。
- nofollow: 告知搜索引擎不要追踪此链接，用于不信任的链接或广告链接，避免权重传递。
- type: 指定链接目标的 MIME 类型，协助浏览器更好地处理链接资源。
- hreflang: 指定链接目标资源的语言。
链接到同一页面内的不同位置 (锚点链接):
- 定义目标位置: 在页面中要链接到的元素上添加 id 属性。
<section id="section1">
<h2>第一节内容</h2>
<p>...</p>
</section>- 创建链接: 在 <a> 标签的 href 属性中使用 # 加上目标元素的 id 值。
<a href="#section1">跳转到第一节</a>电子邮件链接:
<a href="mailto:info@example.com?subject=咨询&body=你好，我想咨询一些问题。">发送邮件给我们</a>- mailto:: 电子邮件链接协议。
- subject: 邮件主题。
- body: 邮件正文内容。
电话链接 (移动设备):
<a href="tel:+861234567890">拨打电话 +86 12345 67890</a>- tel:: 电话链接协议。
四、HTML5 新特性详解
4.1 Canvas 绘图
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<script>
const ctx = document.getElementById("myCanvas").getContext("2d");
// 绘制矩形
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50); // (x, y, width, height)
// 绘制圆形
ctx.beginPath();
ctx.arc(100, 50, 30, 0, 2 * Math.PI); // (x, y, radius, startAngle, endAngle)
ctx.fillStyle = "blue";
ctx.fill();
// 绘制文本
ctx.font = "20px Arial";
ctx.fillStyle = "green";
ctx.fillText("Canvas Text", 10, 90); // (text, x, y)
</script>Canvas 基础绘图示例:
- 获取 Canvas 上下文: const ctx = document.getElementById(“myCanvas”).getContext(“2d”); 获取 2D 渲染上下文，用于进行 2D 图形绘制。
- 绘制矩形: ctx.fillRect(x, y, width, height); 绘制填充矩形。
- 绘制圆形:
- ctx.beginPath(); 开始一个新的路径。
- ctx.arc(x, y, radius, startAngle, endAngle); 创建圆形路径。
- ctx.fillStyle = “color”; 设置填充颜色。
- ctx.fill(); 填充路径。
- 绘制文本:
- ctx.font = “font-style”; 设置字体样式。
- ctx.fillStyle = “color”; 设置文本颜色。
- ctx.fillText(text, x, y); 绘制填充文本。
Canvas 应用场景:
- 数据可视化: 绘制图表 (折线图、柱状图、饼图等)、图形、动画等。
- 游戏开发: 创建 2D 游戏界面、动画效果、游戏元素等。
- 图像处理: 进行图像编辑、滤镜处理、图像合成等。
- 在线绘图工具: 实现画笔、图形绘制、图像编辑等功能。
- 广告和动画: 创建动态广告、网页动画、视觉特效等。
4.2 Web Storage
// 存储数据
localStorage.setItem("username", "John");
sessionStorage.setItem("theme", "dark");
// 读取数据
const user = localStorage.getItem("username");
const theme = sessionStorage.getItem("theme");
// 删除数据
localStorage.removeItem("username");
sessionStorage.removeItem("theme");
// 清空所有数据
localStorage.clear();
sessionStorage.clear();Web Storage 应用场景:
- 记住用户状态: 使用 localStorage 存储用户登录状态、用户名等信息，实现记住密码、自动登录等功能。
- 存储用户偏好设置: 使用 localStorage 存储用户的个性化设置，例如主题颜色、字体大小、语言选择等，提升用户体验。
- 离线应用数据缓存: 使用 localStorage 或 sessionStorage 缓存不敏感的应用数据，例如文章内容、商品列表等，实现离线访问或加速数据加载。
- 单页应用 (SPA) 状态管理: 在 SPA 中，可以使用 sessionStorage 存储会话级别的组件状态或页面数据。
Web Storage 安全性思考:
- 避免存储敏感信息: Web Storage 存储在客户端浏览器，不适合存储敏感信息，例如用户密码、银行卡号、身份证号等，这些信息应该存储在服务器端数据库中。
- 注意数据大小限制: 不同浏览器对 Web Storage 的存储容量有限制 (一般为 5MB 或 10MB)，不适合存储大量数据。
- 防范 XSS 攻击: 如果 Web Storage 中存储的数据被 XSS 攻击者获取，可能导致安全风险，需要对存储和读取的数据进行适当的安全处理，例如 HTML 转义。
4.3 Geolocation 定位
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log("纬度:", position.coords.latitude);
console.log("经度:", position.coords.longitude);
},
(error) => {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("用户拒绝了地理定位请求。");
break;
case error.POSITION_UNAVAILABLE:
alert("位置信息不可用。");
break;
case error.TIMEOUT:
alert("地理定位请求超时。");
break;
case error.UNKNOWN_ERROR:
alert("发生未知错误。");
break;
}
console.error("地理定位错误:", error);
}
);
} else {
alert("您的浏览器不支持地理定位。");
}Geolocation API 使用注意事项:
- 用户权限: Geolocation API 需要用户授权才能获取位置信息，浏览器会弹出权限请求提示框，用户可以选择允许或拒绝。
- 隐私保护: 获取用户地理位置信息涉及用户隐私，必须谨慎使用，只在必要时请求位置信息，并在用户知情同意的情况下使用。
- 错误处理: 地理定位可能失败，例如用户拒绝授权、位置信息不可用、定位超时等，需要进行错误处理，并向用户提供友善的提示。
- 定位精度: Geolocation API 的定位精度可能受到多种因素影响 (例如 GPS 信号、Wi-Fi、基站等)，精度可能不高，需要根据应用场景选择合适的定位方式和精度要求。
- 耗电量: 持续使用地理定位功能可能会增加设备耗电量，需要注意优化定位策略，避免过度消耗电量。
Geolocation 应用场景:
- 地图应用: 在地图上显示用户当前位置、导航、附近地点搜索等。
- LBS 服务 (Location-Based Services): 基于位置的服务，例如附近商家推荐、地理围栏、签到打卡等。
- 社交应用: 基于位置的社交互动、附近的人、位置分享等。
- 广告投放: 基于用户地理位置投放本地化广告。
- 物联网 (IoT): 设备位置监控、资产追踪等。
4.4 Web Workers 多线程
概念:
- Web Workers 允许 JavaScript 在后台线程中运行脚本，而不会阻塞主线程，从而提高 Web 应用的性能和响应速度。
- 主线程负责处理用户界面和用户交互，Worker 线程负责执行计算密集型或耗时的任务。
- Worker 线程与主线程并行运行，通过消息传递机制进行通信。
使用场景:
- 图像处理、视频处理、音频处理等计算密集型任务。
- 大数据分析、复杂算法计算。
- 后台数据同步、预加载资源。
创建和使用 Web Worker:
- 创建 Worker 脚本文件 (例如 worker.js):
// worker.js
// 监听主线程发送的消息
onmessage = function(event) {
const data = event.data;
console.log("Worker 接收到消息:", data);
// 执行耗时任务 (例如计算斐波那契数列)
function fibonacci(n) {
if (n <= 1) return 1;
return fibonacci(n - 1) + fibonacci(n - 2);
}
const result = fibonacci(data);
// 向主线程发送消息
postMessage(result);
}- 在主线程中创建和使用 Worker:
// main.js
// 创建 Worker 实例
const myWorker = new Worker("worker.js");
// 监听 Worker 发送的消息
myWorker.onmessage = function(event) {
const result = event.data;
console.log("Worker 返回结果:", result);
}
// 向 Worker 发送消息，开始执行任务
myWorker.postMessage(40); // 计算斐波那契数列第 40 项Web Worker 的限制:
- Worker 线程不能直接访问 DOM 元素和 window 对象 (出于安全和线程隔离思考)。
- Worker 线程与主线程之间的通信是异步的，通过消息传递机制。
- Worker 脚本文件必须与 HTML 文件在同源下，或者使用 CORS 允许跨域访问。
4.5 WebSockets 实时通信
概念:
- WebSocket 是一种在客户端和服务器之间建立持久双向连接的协议，实现实时的、全双工的通信。
- 传统的 HTTP 协议是请求-响应模式，客户端发送请求，服务器响应请求，通信是单向的、短连接的。
- WebSocket 协议在客户端和服务器之间建立一个长连接，双方可以随时相互发送消息，实现实时通信。
使用场景:
- 在线聊天应用、实时游戏、股票行情、在线协作工具、实时监控系统等需要实时双向通信的应用。
WebSocket API:
- 客户端创建 WebSocket 连接:
- const websocket = new WebSocket(“ws://example.com/socketserver”); // ws 或 wss (安全 WebSocket)
- WebSocket 事件处理:
- websocket.onopen: 连接建立时触发。
- websocket.onmessage: 接收到服务器消息时触发。
- websocket.onerror: 发生错误时触发。
- websocket.onclose: 连接关闭时触发。
websocket.onopen = function(event) {
console.log("WebSocket 连接已建立");
websocket.send("客户端发送消息: Hello Server!"); // 发送消息给服务器
};
websocket.onmessage = function(event) {
const message = event.data;
console.log("接收到服务器消息:", message);
};
websocket.onerror = function(event) {
console.error("WebSocket 发生错误:", event);
};
websocket.onclose = function(event) {
console.log("WebSocket 连接已关闭");
};- 客户端发送消息:
websocket.send("要发送的消息内容");- 关闭 WebSocket 连接:
websocket.close();WebSocket 协议的优势:
- 实时性: 实现客户端和服务器之间的实时双向通信。
- 持久连接: 建立持久连接，减少了 HTTP 协议中频繁建立和断开连接的开销。
- 全双工通信: 客户端和服务器可以同时发送和接收消息。
- 更少的延迟和开销: 相比 HTTP 轮询 (Polling) 和长轮询 (Long Polling) 等技术，WebSocket 具有更低的延迟和更小的开销。
4.6 Drag and Drop API 拖放 API
概念:
- HTML5 Drag and Drop API 允许用户使用鼠标或触摸设备拖拽 HTML 元素。
- 可以实现元素在页面内的拖拽，也可以实现元素从页面拖拽到浏览器外部 (例如桌面) 或从浏览器外部拖拽到页面。
Drag and Drop API 事件:
- 拖拽源元素 (被拖拽的元素) 相关的事件:
- dragstart: 开始拖拽时触发。
- drag: 拖拽过程中持续触发。
- dragend: 拖拽结束时触发 (无论是否成功放置)。
- 目标元素 (放置目标元素) 相关的事件:
- dragenter: 拖拽元素进入目标元素区域时触发。
- dragover: 拖拽元素在目标元素区域上方移动时持续触发 (必须在此事件中调用 event.preventDefault() 才能允许放置)。
- dragleave: 拖拽元素离开目标元素区域时触发。
- drop: 拖拽元素在目标元素区域内释放鼠标/触摸时触发 (放置操作)。
使用 Drag and Drop API:
- 设置元素为可拖拽: 为要拖拽的元素添加 draggable=”true” 属性。
<div draggable="true" id="drag-source">
可拖拽元素
</div>- 监听拖拽事件 (在 JavaScript 中):
const dragSource = document.getElementById("drag-source");
const dropTarget = document.getElementById("drop-target");
// 拖拽源元素事件
dragSource.addEventListener("dragstart", function(event) {
console.log("dragstart");
event.dataTransfer.setData("text/plain", event.target.id); // 存储拖拽数据
});
dragSource.addEventListener("dragend", function(event) {
console.log("dragend");
});
// 目标元素事件
dropTarget.addEventListener("dragenter", function(event) {
console.log("dragenter");
});
dropTarget.addEventListener("dragover", function(event) {
console.log("dragover");
event.preventDefault(); // 必须阻止默认行为，才能触发 drop 事件
});
dropTarget.addEventListener("dragleave", function(event) {
console.log("dragleave");
});
dropTarget.addEventListener("drop", function(event) {
console.log("drop");
event.preventDefault(); // 阻止默认行为 (例如浏览器打开拖拽的文件)
const data = event.dataTransfer.getData("text/plain"); // 获取拖拽数据
const dragElement = document.getElementById(data);
dropTarget.appendChild(dragElement); // 将拖拽元素添加到目标元素
});- DataTransfer 对象: event.dataTransfer 对象用于在拖拽过程中传递数据。
- setData(format, data): 设置拖拽数据，format 是数据类型 (例如 text/plain, text/html, URL)，data 是数据值。
- getData(format): 获取拖拽数据。
- effectAllowed: 设置拖拽效果 (例如 copy, move, link, none)。
- dropEffect: 设置放置效果 (一般在 dragover 或 drop 事件中设置)。
4.7 Application Cache (已废弃)
概念 (简要了解，已废弃):
- Application Cache (AppCache) 是 HTML5 中用于离线 Web 应用的缓存机制。
- 允许开发者指定需要缓存的资源 (HTML, CSS, JavaScript, 图片等)，使 Web 应用在离线状态下也能访问。
缺点和废弃缘由:
- AppCache 的设计存在一些缺陷，例如缓存更新机制复杂、容易出错、不够灵活等。
- 现代 Web 开发中，Service Workers 提供了更强劲、更灵活的离线缓存和网络代理功能，AppCache 已被废弃，不提议使用。
替代方案:
- Service Workers: 推荐使用 Service Workers 实现离线缓存和 PWA (Progressive Web App) 功能。
五、开发工具与环境
5.1 推荐工具
- 编辑器：VS Code、WebStorm、Sublime Text
- 调试工具：Chrome DevTools
- 构建工具：Webpack、Parcel
- 浏览器兼容性测试工具:
- BrowserStack: https://www.browserstack.com/ (商业，提供多种浏览器和设备在线测试)
- CrossBrowserTesting: https://crossbrowsertesting.com/ (商业，功能类似 BrowserStack)
- LambdaTest: https://www.lambdatest.com/ (商业，功能类似 BrowserStack)
- Responsively: https://responsively.app/ (免费开源，本地多设备响应式测试工具)
5.2 环境搭建
- 安装编辑器（如 VS Code）。
- 创建 HTML 文件并编写代码。
- 使用浏览器直接打开文件预览效果。
六、常见问题与解决方案
6.1 <base> 标签路径问题
- 问题：<base href=”http://example.com/”> 未生效。
- 缘由：相对路径以 / 开头会忽略 <base> 的基准 URL。
- 解决：base 标签的 url 必须末尾有”/”
- 页面 body 中所有的链接第一个字符不能是”/”
<base href="http://example.com/root/" />
<a href="subpage.html">跳转至 http://example.com/root/subpage.html</a>6.2 跨浏览器兼容性
- 方案：使用 Polyfill（如 html5shiv）。
- 检测浏览器支持情况：
if (!("geolocation" in navigator)) {
alert("您的浏览器不支持定位功能！");
}七、实战案例：个人博客页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的技术博客 - HTML5 入门指南</title>
<meta name="description" content="本博客分享 HTML5 学习心得和技术文章，带你快速入门 HTML5 开发。">
<meta name="keywords" content="HTML5, 前端开发, Web 开发, 教程, 博客">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header, footer, nav, article, aside {
display: block;
}
header {
background: #333;
color: white;
padding: 1em 0;
text-align: center;
}
nav {
background-color: #ddd;
padding: 0.5em 0;
text-align: center;
}
nav a {
color: #333;
margin: 0 1em;
text-decoration: none;
}
main {
display: flex;
max-width: 960px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
article {
flex: 3;
padding-right: 20px;
border-right: 1px solid #ccc;
}
aside {
flex: 1;
padding-left: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>我的技术博客</h1>
</header>
<nav>
<a href="#home">首页</a>
<a href="#articles">文章</a>
<a href="#about">关于我</a>
<a href="#contact">联系</a>
</nav>
<main>
<article>
<h2>HTML5 入门指南</h2>
<p>本文将带你入门 HTML5，介绍 HTML5 的核心特性和常用标签...</p>
<section>
<h3>HTML5 基础</h3>
<p>HTML5 是构建现代 Web 应用的基石...</p>
</section>
<section>
<h3>HTML5 语义化标签</h3>
<p>HTML5 引入了丰富的语义化标签，提升了网页的可读性和可访问性...</p>
</section>
</article>
<aside>
<h3>文章分类</h3>
<ul>
<li><a href="#">HTML5 基础</a></li>
<li><a href="#">CSS3 样式</a></li>
<li><a href="#">JavaScript 编程</a></li>
<li><a href="#">前端框架</a></li>
</ul>
<h3>最新文章</h3>
<ul>
<li><a href="#">HTML5 新特性详解</a></li>
<li><a href="#">CSS Flexbox 布局</a></li>
<li><a href="#">JavaScript ES6 语法</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 我的技术博客 版权所有</p>
</footer>
</body>
</html>八、面试技巧与资源
8.1 常见面试题
- HTML5 的语义化标签有哪些？请列举并说明其应用场景。
<header>, <nav>, <section>, <article>, <footer>, <aside>, <main>, <figure>, <figcaption> 等。重点掌握语义化标签的含义和在页面结构中的作用，能够根据设计稿或需求选择合适的语义化标签。 - LocalStorage 和 SessionStorage 的区别？以及应用场景和安全性思考。
LocalStorage 数据永久存储，SessionStorage 会话结束后清除。需要理解它们的生命周期、存储容量、API 用法，以及在实际项目中的应用场景和安全性注意事项。 - HTML5 有哪些新特性？请至少列举 5 个并简要说明。
语义化标签、Canvas 绘图、Web Storage、Geolocation 定位、Web Workers、WebSockets、Drag and Drop API、Web Components 等。需要了解 HTML5 新特性解决的痛点和带来的优势，以及基本的使用方法。 - 如何实现 HTML5 响应式布局？
Viewport 设置 (<meta name=”viewport”>)、CSS Media Queries、Flexbox 布局、Grid 布局、流式布局、响应式图片等。需要掌握响应式布局的基本原理和常用技术，能够根据不同设备屏幕尺寸适配网页布局。 - HTML5 表单有哪些增强功能？
新的 input 类型 (email, url, date, time, number, range, search, tel, color 等)、表单验证属性 (required, pattern, min, max, step, minlength, maxlength 等)、<datalist>, <output> 等。需要熟悉 HTML5 表单的新增功能，能够利用这些功能提升用户体验和表单验证效率。 - Canvas 和 SVG 的区别和应用场景？
Canvas 是基于像素的位图，SVG 是基于矢量的矢量图。需要理解 Canvas 和 SVG 的本质区别，以及在不同场景下的选择，例如 Canvas 适合绘制复杂图形和动画，SVG 适合绘制图标和可缩放矢量图形。 - Web Workers 的作用和使用场景？
Web Workers 允许 JavaScript 在后台线程运行，不阻塞主线程。需要理解 Web Workers 的原理和优势，以及在计算密集型任务、后台数据处理等场景的应用。 - WebSocket 是什么？与 HTTP 有什么区别？应用场景？
WebSocket 是双向实时通信协议，HTTP 是请求-响应协议。需要理解 WebSocket 的特点和优势，以及在实时聊天、在线游戏、实时数据推送等场景的应用。
面试准备提议:
- 系统学习 HTML5 知识: 通读 HTML5 教程、官方文档、技术书籍，建立完整的知识体系。
- 实践项目: 通过实际项目练习 HTML5 技术，加深理解和掌握程度。
- 关注 HTML5 最新发展: 关注 HTML5 和 Web 前端技术的最新动态，了解最新的技术趋势和最佳实践。
- 准备常见面试题: 针对 HTML5 常见面试题进行准备，梳理知识点，准备清晰的答案。
- 展示项目经验: 在面试中突出自己的 HTML5 项目经验，展示实际应用能力。
8.2 学习资源
- MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web/HTML
- 在线互动学习平台:
- freeCodeCamp: https://www.freecodecamp.org/ (免费，互动式 Web 开发课程)
- Codecademy: https://www.codecademy.com/ (部分免费，互动式编程课程)
- Coursera 和 edX: https://www.coursera.org/, https://www.edx.org/ (知名在线教育平台，提供大学课程，部分免费)
- MDN Web Docs 学习区: https://developer.mozilla.org/zh-CN/docs/Learn (MDN 提供的 Web 开发学习教程)
通过本教程，您将掌握 HTML5 的核心知识，并能够独立开发符合现代标准的网页！
© 版权声明
文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!
THE END
暂无评论内容