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 的诞生背景:

HTML5 全面学习教程（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 联合制定。
核心特性：
语义化标签（如
,
,
）
多媒体支持（
图形绘制（
本地存储（LocalStorage、SessionStorage）
增强的表单功能（日期选择、邮箱验证等）

1.2 HTML5 与 HTML/XHTML 的区别

特性	HTML	XHTML	HTML5
语法严格性	宽松	严格（XML 语法）	兼容宽松，支持混合大小写
标签闭合	允许省略	必须闭合	允许部分标签省略闭合
DOCTYPE	复杂声明（如 HTML4）	复杂声明	简单声明：
新特性	无	无	语义标签、API 等
制定机构	W3C	W3C	W3C & WHATWG 联合制定
向后兼容	部分兼容	不完全兼容	良好，基本向后兼容

HTML5 的优势：

语义化更强： HTML5 引入了更多语义化标签，例如
、
、
、
等，使得 HTML 结构更加清晰，易于理解和维护，也更有利于搜索引擎优化（SEO）。
增强的多媒体支持： HTML5 原生支持
强大的 Web 应用功能： HTML5 提供了丰富的 API，例如 Canvas 绘图、Web Storage 本地存储、Geolocation 定位、Web Workers 多线程、WebSockets 实时通信等，使得开发复杂的 Web 应用程序成为可能。
跨平台兼容性： HTML5 标准旨在提高跨平台兼容性，使得 Web 应用在不同浏览器和设备上能够更好地运行。
简化代码： HTML5 简化了文档结构，例如使用声明文档类型，使得代码更加简洁易读。

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 基本结构



  
    
    页面标题

2.2 核心标签解析

：声明为 HTML5 文档，告知浏览器以 HTML5 标准解析页面。
：根元素，包含整个 HTML 页面，lang 属性定义页面主要语言，例如 lang="zh-CN" 表示中文。
：文档的头部，包含元数据（metadata），例如页面标题、字符编码、外部样式表和 JavaScript 脚本的链接等，这些信息不会直接显示在网页内容中，但对浏览器、搜索引擎和可访问性至关重要。

重要性:

浏览器: 中的元数据告诉浏览器如何正确解析和渲染页面，例如字符编码、viewport 设置、页面标题等。
搜索引擎 (SEO): 搜索引擎通过中的元数据 (例如
, <meta description>, <link rel='canonical'>) 来理解页面内容、关键词和页面之间的关系，从而进行网页索引和排名。</li><li data-track='59'>可访问性 (Accessibility): <title> 标签为屏幕阅读器提供页面标题，<link rel='stylesheet'> 链接 CSS 样式表可以改善页面的视觉呈现，<meta> 标签可以提供文档语言等信息，这些都有助于提升网页的可访问性。</li></ul><li data-track='60'><title>: 定义浏览器工具栏或标签页上显示的标题，对 SEO 非常重要，也用于搜索引擎结果页面的标题 (SERP Title)。</li><li data-track='61'><meta>: 提供关于 HTML 文档的元数据。</li><ul><li data-track='62'>charset="UTF-8": 指定文档字符编码为 UTF-8，支持全球多种字符，推荐使用 UTF-8 编码，避免中文乱码等问题。</li><li data-track='63'>name="viewport": 用于设置移动设备上的viewport，实现响应式布局的关键，控制页面的缩放和显示。content="width=device-width, initial-scale=1.0": 常用的 viewport 设置，表示视口宽度等于设备宽度，初始缩放比例为 1.0，确保页面在移动设备上正常显示。</li><li data-track='64'>name="description": 提供页面的简短描述，用于搜索引擎结果页面的摘要 (SERP Description)，对点击率有影响。</li><li data-track='65'>name="keywords": 为搜索引擎提供关键词，帮助搜索引擎索引页面内容 (但现代搜索引擎对 keywords 的权重已降低，不必过度关注)。</li><li data-track='66'>name="author": 定义文档作者。<meta name='author'></li><li data-track='67'>name="robots": 控制搜索引擎 robots 如何索引和抓取页面，常用的值：content="index,follow": 允许索引和跟踪链接 (默认值)。content="noindex,nofollow": 禁止索引和跟踪链接。content="index,nofollow": 允许索引，禁止跟踪链接。content="noindex,follow": 禁止索引，允许跟踪链接 (不常用)。<meta name='robots'></li><li data-track='68'>http-equiv="X-UA-Compatible": 设置 IE 浏览器兼容模式，content="IE=edge" 通常用于强制 IE 使用最新的渲染引擎。<meta http-equiv='X-UA-Compatible'></li></ul><li data-track='69'><link>: 链接外部资源，例如 CSS 样式表、网站图标 (favicon) 等。</li><ul><li data-track='70'><link rel='stylesheet' href='style.css'>: 链接名为 style.css 的 CSS 样式表，用于控制页面样式。</li><li data-track='71'><link rel='icon' href='favicon.ico' type='image/x-icon'>: 定义网站图标 (favicon)，显示在浏览器标签页和地址栏，提升网站品牌形象。</li></ul><li data-track='72'><style>: 在 HTML 文档中嵌入 CSS 样式，适用于少量、页面特定的样式，但不推荐大量使用，不利于样式复用和维护。</li><li data-track='73'><script>: 引入 JavaScript 脚本或嵌入 JavaScript 代码，实现网页动态交互功能。</li><ul><li data-track='74'><script src="script.js"></script>: 引入外部 JavaScript 文件 script.js。</li><li data-track='75'><script>console.log("Hello from inline script!");</script>: 嵌入 JavaScript 代码。</li></ul><li data-track='76'><base>: 定义页面中所有相对 URL 的基准 URL，用于简化相对路径的书写，尤其在单页应用 (SPA) 中常用。</li><ul><li data-track='77'><base href="/">: 设置基准 URL 为网站根目录。</li></ul></ul><li data-track='78'><body>：页面主体，包含所有将在浏览器窗口中显示的内容，例如文本、图片、链接、列表、表格、表单、多媒体等。</li></ul><h1 class='pgc-h-arrow-right'>三、HTML5 常用标签</h1><h1 class='pgc-h-arrow-right'>3.1 文本与段落</h1>标题标签 (Heading Tags):<ul><li data-track='92'><h1> - <h6>: 定义 1 到 6 级标题，<h1> 是最高级标题，<h6> 是最低级。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3></code></pre><ul><li data-track='86'>: 定义段落 (Paragraph)。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这是一个段落。段落用于组织和分隔文本内容。</code></pre><ul><li data-track='87'>: 行内文本容器，用于对文本进行样式化或脚本操作，本身没有语义。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这是一段 红色 的文本。</code></pre><ul><li data-track='88'> : 换行 (Break)，在文本中插入一个换行符。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这是第一行。 这是第二行。</code></pre><ul><li data-track='89'><hr>: 水平线 (Horizontal Rule)，在页面中创建一条水平分割线，用于分隔内容。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><hr></code></pre><ul><li data-track='90'><pre class="prism-highlight prism-language-bash">: 预格式化文本 (Preformatted Text)，保留文本中的空格和换行符，通常用于显示代码。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><pre class="prism-highlight prism-language-bash"> function helloWorld() { console.log("Hello, World!"); } </pre></code></pre><ul><li data-track='91'><a>: 锚点 (Anchor)，创建超链接，用于链接到其他页面、文件或同一页面的不同位置 (后面会详细介绍)。</li></ul>文本格式化标签:<ul><li data-track='108'>: 加粗文本 (Bold)。 (HTML5 中建议使用 标签) html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这段文本是加粗的。</code></pre><ul><li data-track='110'>: 强调文本 (Strong emphasis)，语义上表示重要性，通常浏览器会以加粗显示。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这段文本表示强调。</code></pre><ul><li data-track='112'>: 斜体文本 (Italic)。 (HTML5 中建议使用 标签) html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这段文本是斜体的。</code></pre><ul><li data-track='114'>: 强调文本 (Emphasis)，语义上表示强调，通常浏览器会以斜体显示。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这段文本表示强调。</code></pre><ul><li data-track='116'>: 下划线文本 (Underline)。 (HTML5 中不推荐使用，建议使用 CSS 实现下划线效果) html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>这段文本带有下划线。</code></pre><ul><li data-track='118'><del>: 删除线文本 (Deleted text)，表示文本已被删除。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><del>这段文本被删除了。</del></code></pre><ul><li data-track='120'><ins>: 插入文本 (Inserted text)，表示文本已被插入。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><ins>这段文本被插入了。</ins></code></pre><ul><li data-track='122'><code>: 代码文本 (Code)，表示一段代码。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><code>let message = "Hello";</code></code></pre><ul><li data-track='124'><kbd>: 键盘输入文本 (Keyboard Input)，表示用户键盘输入，常用于技术文档或教程中，指示用户需要输入的内容。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>在终端中输入 <kbd>git commit -m "提交信息"</kbd> 并按回车键执行提交。</code></pre><ul><li data-track='126'><samp>: 程序输出文本 (Sample Output)，表示程序或系统的输出，用于展示代码或命令的运行结果。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><pre class="prism-highlight prism-language-bash"><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></code></pre><ul><li data-track='128'><var>: 变量文本 (Variable)，表示变量名，用于代码或数学公式中，突出显示变量。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>在 JavaScript 中，使用 <var>let</var> 关键字声明变量，例如： <var>let</var> <var>count</var> = 0;</code></pre><ul><li data-track='130'><cite>: 引用 (Citation)，表示作品的标题 (例如书籍、文章、电影等)，用于标记引用的来源。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>根据 <cite>《HTML5 权威指南》</cite> 的描述，HTML5 引入了许多新的语义化标签。</code></pre><ul><li data-track='132'>: 上标文本 (Superscript)。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>X2</code></pre><ul><li data-track='134'>: 下标文本 (Subscript)。 html </li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>H2O</code></pre><h1 class='pgc-h-arrow-right'>3.2 列表</h1>无序列表 (Unordered List):<ul><li><ul>: 定义无序列表，列表项之间没有顺序关系，默认使用项目符号 (bullet points) 标记。</li><li><li>: 定义列表项 (List Item)，必须作为 <ul> 或 <ol> 的子元素。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul></code></pre>有序列表 (Ordered List):<ul><li><ol>: 定义有序列表，列表项之间有顺序关系，默认使用数字编号标记。</li><li><li>: 定义列表项 (List Item)，必须作为 <ul> 或 <ol> 的子元素。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol></code></pre><ul><li>ol 标签的属性:</li><ul><li data-track='137'>type: 指定列表项的编号类型。</li><li data-track='141'>type="1": 数字 (默认) - 1, 2, 3, ...</li><li data-track='142'>type="a": 小写字母 - a, b, c, ...</li><li data-track='143'>type="A": 大写字母 - A, B, C, ...</li><li data-track='144'>type="i": 小写罗马数字 - i, ii, iii, ...</li><li data-track='145'>type="I": 大写罗马数字 - I, II, III, ...</li></ul><li data-track='138'>start: 指定有序列表的起始值。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><ol type='A' start='3'> <li>第三项 (C)</li> <li>第四项 (D)</li> </ol></code></pre>定义列表 (Description List):<ul><li><dl>: 定义定义列表 (Description List)，用于术语及其解释的列表。</li><li><dt>: 定义术语 (Description Term)。</li><li><dd>: 定义术语的解释 (Description Details)。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><dl> <dt>HTML</dt> <dd>超文本标记语言 (HyperText Markup Language)，用于创建网页结构。</dd> <dt>CSS</dt> <dd>层叠样式表 (Cascading Style Sheets)，用于控制网页样式和布局。</dd> </dl></code></pre><h1 class='pgc-h-arrow-right'>3.3 多媒体</h1>图像 (Images):<ul><li><img>: 插入图像 (Image)。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code></code></pre><ul><li data-track='146'>img 标签的常用属性:</li><li data-track='147'>src: 图像源文件路径 (Source)。</li><li data-track='148'>alt: 图像的替代文本 (Alternative text)，当图像无法显示时显示，也有利于 SEO 和无障碍访问。</li><li data-track='149'>width: 图像宽度 (像素)。</li><li data-track='150'>height: 图像高度 (像素)。</li><li data-track='151'>title: 鼠标悬停在图像上时显示的提示文本。</li></ul>音频 (Audio):<pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><audio>: 插入音频 (Audio)。 <audio controls> <source src='audio.mp3' type='audio/mpeg'> <source src='audio.ogg' type='audio/ogg'> 您的浏览器不支持音频播放。 </audio></code></pre><ul><li data-track='152'>audio 标签的常用属性:</li><li data-track='153'>src: 音频源文件路径 (Source) (不常用，通常使用 <source> 标签)。</li><li data-track='154'>controls: 显示浏览器默认的音频控制条 (播放/暂停, 音量, 进度条等)。</li><li data-track='155'>autoplay: 自动播放 (不建议过度使用，可能影响用户体验)。</li><li data-track='156'>loop: 循环播放。</li><li data-track='157'>muted: 静音。</li><li><source>: 为 <audio> 或 <video> 元素指定多个媒体资源。浏览器会选择它能解码的第一个资源。</li><li data-track='158'>source 标签的常用属性:</li><li data-track='159'>src: 媒体资源文件路径。</li><li data-track='160'>type: 媒体资源的 MIME 类型 (例如 audio/mpeg, audio/ogg, video/mp4, video/webm 等)。</li></ul>视频 (Video):<ul><li><video>: 插入视频 (Video)。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><video width='640' height='360' controls> <source src='video.mp4' type='video/mp4'> <source src='video.webm' type='video/webm'> 您的浏览器不支持视频播放。 </video></code></pre><ul><li data-track='161'>video 标签的常用属性:</li><li data-track='162'>src: 视频源文件路径 (Source) (不常用，通常使用 <source> 标签)。</li><li data-track='163'>controls: 显示浏览器默认的视频控制条 (播放/暂停, 音量, 进度条, 全屏等)。</li><li data-track='164'>autoplay: 自动播放 (不建议过度使用，可能影响用户体验)。</li><li data-track='165'>loop: 循环播放。</li><li data-track='166'>muted: 静音。</li><li data-track='167'>poster: 视频封面图像，在视频加载前或暂停时显示。</li><li data-track='168'>width: 视频宽度 (像素)。</li><li data-track='169'>height: 视频高度 (像素)。</li></ul>track 标签 (字幕):<ul><li><track>: 为 <audio> 或 <video> 元素添加字幕、章节或其他时间相关的文本轨道。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><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></code></pre><ul><li data-track='170'>track 标签的常用属性:</li><li data-track='171'>src: 文本轨道文件路径 (通常是 .vtt 格式)。</li><li data-track='173'>kind: 文本轨道的类型。</li><li data-track='177'>subtitles: 字幕。</li><li data-track='178'>captions: 为听力障碍人士提供的字幕。</li><li data-track='179'>descriptions: 视频内容的文字描述，用于视觉障碍人士。</li><li data-track='180'>chapters: 章节标题。</li><li data-track='181'>metadata: 脚本使用的元数据。</li><li data-track='174'>srclang: 文本轨道语言 (例如 zh, en, fr 等)。</li><li data-track='175'>label: 文本轨道的标签，在浏览器中显示给用户选择。</li><li data-track='176'>default: 指定默认选中的文本轨道。</li></ul><h1 class='pgc-h-arrow-right'>3.4 表单增强</h1><form> 标签:<ul><li><form>: 定义 HTML 表单，用于收集用户输入的信息并提交到服务器。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><form action='/submit-form' method='post'> <input type='submit' value='提交'> </form></code></pre><ul><li data-track='182'><form> 标签的常用属性:</li><li data-track='183'>action: 表单提交的服务器端处理程序的 URL。</li><li data-track='184'>method: HTTP 请求方法，常用的有 get 和 post。</li><li data-track='185'>get: 表单数据附加在 URL 后面，适合少量数据，不安全。</li><li data-track='186'>post: 表单数据放在 HTTP 请求体中，适合大量数据，相对安全。</li></ul>表单元素 (Form Elements):<ul><li data-track='187'><input>: 最常用的表单元素，根据 type 属性的不同，可以创建各种类型的输入字段。</li><li data-track='188'>文本输入:</li><ul><li data-track='189'>type="text": 单行文本输入框 (默认类型)。</li><li data-track='190'>type="password": 密码输入框，输入内容会被遮盖。</li><li data-track='191'>type="email": 邮箱输入框，会自动验证邮箱格式。</li><li data-track='192'>type="url": URL 输入框，会自动验证 URL 格式。</li><li data-track='193'>type="search": 搜索输入框，通常带有清除按钮。</li><li data-track='194'>type="tel": 电话号码输入框 (移动设备上会弹出数字键盘)。</li></ul></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='text' placeholder='请输入用户名'> <input type='password' placeholder='请输入密码'> <input type='email' placeholder='请输入邮箱' required></code></pre><ul><ul><li data-track='195'>数字输入:</li><li data-track='197'>type="number": 数字输入框，可以限制数字范围。</li><li data-track='198'>type="range": 范围选择器，允许用户在一定范围内拖动滑块选择数值。</li></ul></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='number' min='0' max='100' value='50'> <input type='range' min='0' max='100' step='10' value='30'></code></pre><ul><ul><li data-track='200'>日期和时间输入:</li><ul><li data-track='202'>type="date": 日期选择器 (年月日)。</li><li data-track='203'>type="month": 月份选择器 (年月)。</li><li data-track='204'>type="week": 周选择器 (年周)。</li><li data-track='205'>type="time": 时间选择器 (时分)。</li><li data-track='206'>type="datetime-local": 本地日期和时间选择器 (年月日时分)。</li></ul></ul></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='date'> <input type='datetime-local'></code></pre><ul><ul><li data-track='201'>择框:</li><li data-track='208'>type="checkbox": 复选框，允许用户选择多个选项。</li><li data-track='209'>type="radio": 单选框，允许用户选择一个选项 (同一组 radio 按钮 name 属性必须相同)。</li></ul></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='checkbox' id='agree' name='agree' value='yes'> <label for='agree'>我同意协议</label> <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></code></pre><ul><ul><li data-track='211'>文件选择:</li><li data-track='212'>type="file": 文件选择框，允许用户上传文件。</li></ul></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='file' multiple> <!- - multiple --></code></pre><ul><ul><li data-track='214'>隐藏输入:</li><li data-track='215'>type="hidden": 隐藏输入字段，用户不可见，用于在表单中传递一些不需要用户看到的数据。</li></ul></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='hidden' name='user_id' value='12345'></code></pre><ul><ul><li data-track='217'>按钮:</li><li data-track='218'>type="submit": 提交按钮，点击后提交表单。</li><li data-track='219'>type="reset": 重置按钮，点击后重置表单到初始状态。</li><li data-track='220'>type="button": 普通按钮，可以自定义 JavaScript 行为。</li></ul></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='submit' value='提交'> <input type='reset' value='重置'> <input type='button' value='自定义按钮'></code></pre><ul><li><textarea> 标签:</li><li data-track='222'><textarea>: 多行文本输入框 (Textarea)。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><textarea rows='5' cols='30' placeholder='请输入留言'></textarea></code></pre><ul><li data-track='1517'><textarea> 标签的常用属性:</li><li data-track='1518'>rows: 文本框的行数。</li><li data-track='1519'>cols: 文本框的列数 (字符宽度)。</li><li data-track='1520'>placeholder: 提示文本，在用户输入前显示。</li></ul><select> 和 <option> 标签:<ul><li><select>: 下拉列表 (Select Box)。</li><li data-track='1522'><option>: 下拉列表中的选项 (Option)。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><select name='city'> <option value='beijing'>北京</option> <option value='shanghai'>上海</option> <option value='guangzhou'>广州</option> </select></code></pre><ul><li data-track='1521'><option> 标签的常用属性:</li><li data-track='1523'>value: 选项的值，提交表单时传递给服务器。</li><li data-track='1524'>selected: 默认选中的选项。</li></ul><datalist> 标签:<ul><li><datalist>: 为 <input> 元素提供预定义选项列表，实现输入提示和自动完成功能。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><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></code></pre><label> 标签:<ul><li><label>: 为表单元素定义标签，提高可访问性，点击 label 标签可以聚焦到关联的表单元素。</li></ul><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><label for='username'>用户名:</label> <input type='text' id='username' name='username'></code></pre><ul><li data-track='1525'><label> 标签的 for 属性:</li><li data-track='1526'>for: 指定 label 关联的表单元素的 id 属性值。</li></ul>表单验证属性 (HTML5 新增):<ul><li>required: 必填字段，提交表单前会检查是否已填写。</li><li>pattern: 使用正则表达式验证输入内容格式。</li><li>min, max, step: 用于 number 和 range 类型输入，限制数值范围和步长。</li><li>minlength, maxlength: 限制文本输入框的最小和最大字符长度。</li></ul><h1 class='pgc-h-arrow-right'>3.5 语义化标签</h1>HTML5 引入了许多语义化标签，旨在更清晰地描述文档结构，提高可读性和可维护性，并有利于搜索引擎优化 (SEO) 和无障碍访问。常用的语义化标签:<ul><li><header>: 页眉，通常包含网站的 Logo、导航、搜索框等，表示页面的头部或区块的头部。</li><li><nav>: 导航栏，用于放置页面的导航链接，例如主菜单、侧边栏导航等。</li><li><main>: 页面的主要内容区域，每个页面通常只有一个 <main> 元素，表示页面的核心内容。</li><li><article>: 独立的、完整的、可独立分发的内容单元，例如博客文章、新闻报道、论坛帖子等。</li><li><section>: 文档中的一个区块或区域，用于组织内容，通常具有主题性的内容分组，例如章节、主题分组、标签页等。</li><li><aside>: 与页面主要内容相关的辅助信息，例如侧边栏、广告、相关链接、引用、注释等。</li><li><footer>: 页脚，通常包含版权信息、联系方式、备案信息、友情链接等，表示页面的底部或区块的底部。</li></ul>其他语义化标签:<ul><li><address>: 表示文档或 <article> 元素的联系信息 (例如作者、所有者的地址、邮箱、电话等)。</li><li><time>: 表示日期或时间。</li><li>: 标记或突出显示文本，表示与上下文相关的重要或需要注意的文本。</li><li><figure> 和 <figcaption>: 用于包含独立的图片、图表、插图等内容，<figcaption> 用于为 <figure> 元素添加标题或描述。</li></ul>语义化标签的优势:<ul><li>提高可读性: 语义化标签使 HTML 结构更清晰，开发者更容易理解和维护代码。</li><li>利于 SEO: 搜索引擎更容易理解页面内容，提高网页在搜索结果中的排名。</li><li>增强可访问性: 屏幕阅读器等辅助技术可以更好地解析语义化标签，帮助残障人士理解网页内容。</li><li>更好的浏览器支持: 现代浏览器对语义化标签提供更好的支持。</li></ul>示例:<pre class="prism-highlight prism-language-bash" class='syl-page-code'><code> <!doctype html> <html lang='zh-CN'> <head> <meta> <title>语义化 HTML5 示例
网站标题
首页

文章

关于
文章标题

文章内容...

小节标题

小节内容...

Tags：videocontrols

网站首页 > 基础教程正文

HTML5 全面学习教程（html5基础）

网页与网站的关系

一、HTML5 基础概念

1.1 什么是 HTML5？

1.2 HTML5 与 HTML/XHTML 的区别

二、HTML5 文档结构

2.1 基本结构

2.2 核心标签解析

网站标题

文章标题

小节标题

猜你喜欢

网站首页 > 基础教程 正文

HTML5 全面学习教程（html5基础）

网页与网站的关系

一、HTML5 基础概念

1.1 什么是 HTML5？

1.2 HTML5 与 HTML/XHTML 的区别

二、HTML5 文档结构

2.1 基本结构

2.2 核心标签解析

文章标题

小节标题

猜你喜欢

网站首页 > 基础教程正文