html_examples

HTML 示例展示

本节提供各种 HTML 功能和技术的示例快速链接。浏览这些示例以查看 HTML 的实际应用。

HTML 基础

基本的 HTML 文档结构 HTML 标题 (h1-h6) HTML 段落 (<p>) HTML 链接 (<a>) HTML 图像 (<img>)

涵盖基本 HTML 元素的核心示例。

HTML 属性 (Attributes)

title 属性（工具提示） href 属性（链接目标） width 和 height 属性（图像尺寸 - 考虑使用 CSS） alt 属性（图像替代文本 - 对可访问性至关重要）布尔属性（例如 disabled, checked）

展示属性如何修改 HTML 元素的示例。注意：虽然布尔属性可以不带值书写（例如 <input disabled>），但引用属性值（例如 href="..."）是标准做法。

文档结构

HTML 标题（<h1> 到 <h6>）水平分割线（<hr>） <head> 元素（元数据、标题、CSS/JS 链接）

在 HTML 文档中逻辑地组织内容。

文本格式化

段落（<p>）换行（<br>）预格式化文本（<pre>）控制空白

管理文本流和呈现。

HTML 样式设置（CSS 简介）

内联样式（使用 style 属性 - 谨慎使用）内部 CSS（在 <head> 中使用 <style> 标签）外部 CSS（链接 .css 文件 - 推荐）样式：背景颜色、文本颜色、字体、文本大小、文本对齐方式

演示应用 CSS 进行样式设置的不同方式。为了可维护性，外部 CSS 是最佳实践。

语义化文本格式化

粗体文本：**（非语义） vs **（语义重要性）斜体文本：<i>（非语义） vs <em>（语义强调）小文本（<small>）标记/高亮文本（<mark>）删除文本（<del>）插入文本（<ins>）下标（<sub>）上标（<sup>）

使用传达含义（语义）而不是仅作视觉样式设置的标签。

引用、引文和定义

短内联引用（<q>）长块引用（<blockquote>）联系信息（<address>）缩写和首字母缩略词（<abbr> 带 title 属性）作品标题（<cite>）双向覆盖（<bdo>）

标记特定类型的文本内容。

计算机代码元素

键盘输入（<kbd>）示例输出（<samp>）代码片段（<code> - 常与 <pre> 一起使用）变量（<var>）

语义化地表示与计算机相关的文本。

HTML 注释

添加注释（）用于解释或调试。

有效使用注释。注意：用于 IE 的条件注释已弃用。

HTML 与 CSS 集成

内联、内部、外部 CSS 回顾 CSS 选择器：id (#myId) 和 class (.myClass) CSS 盒模型：边框、内边距、外边距完整的 CSS 演示

更深入地探讨 HTML 结构如何与 CSS 选择器和盒模型协同工作。

HTML 链接（`<a>`）

绝对 URL vs. 相对 URL 链接样式设置（颜色、文本装饰）链接目标（target="_blank" 在新标签页打开）图像链接书签链接（使用 ID 在同一页面内链接） Mailto 链接（`href=“mailto:…”)

创建超链接以在页面或资源之间导航。

HTML 图像（`<img>`, `<picture>`)

基本图像嵌入（src, alt）图像尺寸（width, height - 推荐使用 CSS 实现响应式）文件夹中的图像处理损坏的链接（alt 文本的重要性）链接到外部图像图像映射（客户端 <map> - 现在较少使用）使用 <picture> 和 srcset 属性实现响应式图像。

嵌入和管理图像，包括现代响应式技术。

HTML 表格（`<table>`）

基本表格结构（<table>, <tr>, <td>, <th>）表格边框（CSS）单元格内边距与间距（CSS padding, border-spacing）表格头部（<thead>, <th>, scope 属性）表格主体（<tbody>）表格底部（<tfoot>）标题（<caption>）跨列（colspan）和跨行（rowspan）使用 CSS 设置表格样式（类、ID）

组织和显示表格数据。请仅将表格用于数据，而非页面布局。

HTML 列表

无序列表（<ul>, <li>, CSS list-style-type）有序列表（<ol>, <li>, type, start 属性）描述列表（<dl>, <dt>, <dd>）嵌套列表列表样式设置（例如，使用 CSS 创建水平导航菜单）

将内容组织成列表。

块级元素 (Block) 与内联元素 (Inline)

理解块级元素（例如 <div>, <p>, <h1>）理解内联元素（例如 <span>, <a>, <img>）使用 <div> 对块级内容进行分组使用 <span> 对内联内容进行样式设置

区分元素的显示类型。

HTML 类 (Classes) 和 ID (IDs)

使用 class 属性（用于多个元素）使用 id 属性（用于唯一元素）在 CSS 中使用类和 ID 进行样式设置使用类和 ID 作为 JavaScript 钩子

应用标识符进行样式设置和脚本编写。

HTML 布局技术

使用语义化元素进行布局（<header>, <nav>, <main>, <aside>, <footer>） CSS Flexbox 用于一维布局（例如，导航、对齐项目） CSS Grid 用于二维布局（例如，页面结构、复杂网格）使用 <table> 进行布局（不推荐 - 仅用于表格数据）

使用现代 CSS (Flexbox, Grid) 和语义化 HTML 构建网页布局。

HTML Iframes（`<iframe>`）

在当前页面内嵌入另一个 HTML 页面。

使用内嵌框架。

HTML Head 元素（`<head>`)

<title> 元素 <style> 元素（内部 CSS） <link> 元素（外部 CSS, 网站图标 favicons） <meta> 元素（字符集 charset, 视口 viewport, 描述 description） <script> 元素（JavaScript） <base> 元素（设置基础 URL）

理解 <head> 中元素的作用。

HTML 脚本（`<script>`)

嵌入 JavaScript（内联 vs. 外部 .js 文件 - 推荐外部） <noscript> 标签（备用内容）

将 JavaScript 集成到 HTML 中。

HTML 表单（`<form>`)

创建表单（<form>, action, method）文本输入（<input type="text">, <label>）密码输入（<input type="password">）单选按钮（<input type="radio">, name 属性）复选框（<input type="checkbox">）提交按钮（<input type="submit">, <button type="submit">）分组表单数据（<fieldset>, <legend>）关联标签（<label for="..."> 和匹配的 id）

构建用于用户输入的交互式表单。

HTML 输入类型 (Input Types)

text, password, radio, checkbox, button, submit 现代类型：number, date, color, range, month, week, time, datetime-local, email, search, tel, url, file

利用专门的输入类型改善 UI 和验证。

HTML 输入属性 (Input Attributes)

验证：required, pattern, min, max, step, minlength, maxlength UI/行为：placeholder, readonly, disabled, autofocus, multiple（用于 email, file）表单关联：form, formaction, formenctype, formmethod, formnovalidate, formtarget 其他：list（用于 <datalist>），autocomplete

使用属性增强输入字段的功能，用于验证和用户体验。在 <form> 上使用 novalidate 可禁用浏览器验证。

HTML 图形（`<canvas>`, `<svg>`）

Canvas：使用 JavaScript API 绘制形状、文本、渐变、图像。 SVG：使用 XML 标记定义矢量图形（圆形、矩形、路径）。

直接在 HTML 中创建图形。

HTML 多媒体（`<audio>`, `<video>`）

嵌入音频（<audio>, <source>, controls, autoplay, loop, muted）嵌入视频（<video>, <source>, controls, autoplay, loop, muted, poster）提供字幕/标题（<track>）

集成音频和视频内容。

高级 HTML5 API

地理定位 API（获取用户位置） Web Storage（本地存储 Local Storage 和会话存储 Session Storage） Web Workers（后台 JavaScript 执行） Server-Sent Events (SSE - 服务器推送）拖放 API (Drag and Drop API)

与 HTML 交互的强大浏览器 API 示例。注意：Application Cache 已弃用；请改用 Service Workers。