## 二.文本内容元素

### 标题元素

# 标题级别 1 (h1)

## 标题级别 2 (h2)

### 标题级别 3 (h3)

#### 标题级别 4 (h4)

##### 标题级别 5 (h5)

###### 标题级别 6 (h6)

### 段落与文本

这是一个段落 (p)

上面是一条水平线 (hr)

上面是一个换行 (br)

    预格式化文本 (pre)
    保留空格和换行
        like this

> 这是一个块引用 (blockquote)，用于引用较长内容 引用来源 (cite)

行内引用: 这是一个短引用 (q)

### 文本修饰元素

粗体文本 (b)</b</p>

重要文本 (strong)

斜体文本 (i)

强调文本 (em)

下划线文本 (u)

标记文本 (mark)

较小文本 (small)

删除文本 (del)

插入文本 (ins)

下标文本 (sub)

上标文本 (sup)

缩写 (abbr)

定义术语 (dfn)

`键盘输入 (kbd)`

`示例输出 (samp)`

变量 (var)

`代码片段 (code)`

时间元素 (time)

数据元素 (data)

注音zhù yīn (ruby)

### 列表元素

#### 无序列表 (ul)

- 列表项 (li) 1
- 列表项 (li) 2
- 列表项 (li) 3

#### 有序列表 (ol)

1. 第一项
2. 第二项
3. 第三项

#### 描述列表 (dl)

术语 (dt)
  描述 (dd)
HTML
  超文本标记语言
CSS
  层叠样式表

## （三）内容分区元素

### 文章元素 (article)

文章内容，独立的自包含内容

### 章节元素 (section)

文档中的一个章节

### 侧边栏元素 (aside)

与周围内容相关但不是主要内容的部分

### 通用容器 (div)

没有语义含义的通用容器元素

### 主要内容 (main)

文档的主要内容区域

## （四）媒体元素

### 图片元素 (img)

### 图形元素 (figure 和 figcaption)

图形的标题 (figcaption)

### 音频元素 (audio)

您的浏览器不支持 audio 元素。

### 视频元素 (video)

您的浏览器不支持 video 元素。

### 画布元素 (canvas)

### 矢量图形 (svg)

### 嵌入内容 (embed, iframe, object)

#### 嵌入元素 (embed)

#### 内联框架 (iframe)

#### 对象元素 (object)

#### 图片映射 (map 和 area)

#### 轨道路径 (track)

track 元素通常与 video 或 audio 元素一起使用，用于字幕等

#### 图片源 (picture 和 source)

## （五）表格元素

表格标题 (caption)
表头单元格 (th) | 表头单元格 (th) | 表头单元格 (th)
--- | --- | ---
表格数据 (td) | 表格数据 (td) | 表格数据 (td)
表格数据 (td) | 表格数据 (td) | 表格数据 (td)
表格页脚 (tfoot)

## （六）表单元素

表单标题 (legend) 文本输入 (input type="text"):
密码输入 (input type="password"):
邮箱输入 (input type="email"):
URL输入 (input type="url"):
数字输入 (input type="number"):
范围输入 (input type="range"):
日期输入 (input type="date"):
时间输入 (input type="time"):
颜色选择 (input type="color"):
文件上传 (input type="file"):
单选按钮 (input type="radio"):
选项 1
选项 2
复选框 (input type="checkbox"):
复选框 1
复选框 2
下拉选择 (select 和 option):
数据列表 (datalist):
文本区域 (textarea):
默认文本
输出元素 (output): 计算结果
进度条 (progress): 70%
度量衡 (meter): 60%

## （七）交互元素

### 详情和摘要 (details 和 summary)

点击查看详情 (summary)

这是隐藏的详情内容 (details)

### 对话框 (dialog)

这是一个对话框 (dialog)

### 菜单 (menu)

## （八）语义元素

我们已经展示了大部分语义元素，这里补充一些：

### 导航区域 (nav)

已经在页面顶部使用了 nav 元素

### 页眉页脚 (header, footer)

已经在页面中使用了 header 和 footer 元素

### 时间元素 (time)

会议时间：2023年10月1日 09:00

### 标记元素 (mark)

搜索关键词：HTML5 是网页标准

### 旁注元素 (aside)

已经在内容分区中展示

## （九）其他元素

### 模板元素 (template)

### 脚本相关 (noscript)

### 标题组 (hgroup)

### 主标题

#### 副标题

### 方向性文本 (bdi 和 bdo)

隔离文本方向 (bdi)

从右到左的文本 (bdo)

### 换行机会 (wbr)

这是一个非常长的单词：supercalifragilisticexpialidocious

### 嵌入对象参数 (param)

param 元素与 object 元素一起使用

### 脚本元素 (script)

虽然本页面不使用 JavaScript，但 script 元素是 HTML 的一部分

### 样式元素 (style)

虽然本页面不使用 CSS，但 style 元素是 HTML 的一部分

### 标题元素 (title)

在 head 部分使用，定义页面标题

### 元数据元素 (meta, link, base)

在 head 部分使用，提供文档元数据