HTML5 全面学习教程_IT分享知识网

大家好，欢迎来到IT知识分享网。

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>O

3.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:)，点击后打开用户的默认邮件客户端。
可以是电话链接 (例如 tel:+)，在移动设备上点击后可以拨打电话。
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:?subject=咨询&body=你好，我想咨询一些问题。">发送邮件给我们</a>

mailto:: 电子邮件链接协议。
subject: 邮件主题。
body: 邮件正文内容。

电话链接 (移动设备):

<a href="tel:+0">拨打电话 +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 的核心知识，并能够独立开发符合现代标准的网页！

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/184934.html

HTML5 全面学习教程

网页与网站的关系

一、HTML5 基础概念

1.1 什么是 HTML5？

1.2 HTML5 与 HTML/XHTML 的区别

二、HTML5 文档结构

2.1 基本结构

2.2 核心标签解析

三、HTML5 常用标签

3.1 文本与段落

3.2 列表

3.3 多媒体

3.4 表单增强

3.5 语义化标签

3.6 链接标签

四、HTML5 新特性详解

4.1 Canvas 绘图

4.2 Web Storage

4.3 Geolocation 定位

4.4 Web Workers 多线程

4.5 WebSockets 实时通信

4.6 Drag and Drop API 拖放 API

4.7 Application Cache (已废弃)

五、开发工具与环境

5.1 推荐工具

5.2 环境搭建

六、常见问题与解决方案

6.1 <base> 标签路径问题

6.2 跨浏览器兼容性

七、实战案例：个人博客页面

八、面试技巧与资源

8.1 常见面试题

8.2 学习资源

相关推荐

发表回复