以下是HTML元素的完整列表,按类别组织并附带每个元素的用途说明。
根元素
| 元素 |
描述 |
<!DOCTYPE> |
定义文档类型,告诉浏览器使用哪个HTML版本进行解析 |
<html> |
HTML文档的根(顶级)元素,所有其他元素必须是这个元素的后代 |
文档元数据
| 元素 |
描述 |
<base> |
指定用于一个文档中包含的所有相对URL的基本URL |
<head> |
包含文档的元数据(如标题、样式、脚本等),不显示在页面上 |
<link> |
定义当前文档与外部资源的关系,最常用于链接CSS文件 |
<meta> |
提供关于HTML文档的元数据,如字符编码、视口设置、描述等 |
<style> |
包含文档的样式信息或CSS声明 |
<title> |
定义文档的标题,显示在浏览器标签页上 |
分区根元素
| 元素 |
描述 |
<body> |
包含文档的全部内容,是用户可见的部分 |
内容分区
| 元素 |
描述 |
<address> |
提供文档或文章作者/所有者的联系信息 |
<article> |
表示文档、页面、应用或网站中的独立结构,如论坛帖子、杂志文章等 |
<aside> |
表示与页面内容几乎无关的部分,通常作为侧边栏 |
<footer> |
定义文档或节的页脚部分 |
<header> |
定义文档或节的介绍部分或导航链接组 |
<h1> - <h6>
|
定义六个不同级别的标题,<h1>最重要,<h6>最不重要 |
<hgroup> |
用于对一组标题(<h1>-<h6>)进行分组 |
<main> |
定义文档的主要内容,每个文档应只有一个 |
<nav> |
定义导航链接的部分 |
<section> |
定义文档的一个独立部分(如章节) |
文本内容
| 元素 |
描述 |
<blockquote> |
表示引用自另一个来源的内容块 |
<dd> |
用在<dl>中,提供对前面术语的描述或定义 |
<div> |
通用流内容容器,无特殊语义 |
<dl> |
定义描述列表,包含术语及其描述 |
<dt> |
用在<dl>中,指定术语或名称 |
<figcaption> |
为<figure>元素提供标题或解释 |
<figure> |
代表独立的内容,通常带有标题 |
<hr> |
表示段落级元素之间的主题转换,显示为水平线 |
<li> |
表示列表中的项目 |
<menu> |
表示命令的列表或菜单 |
<ol> |
定义有序列表 |
<p> |
定义段落 |
<pre> |
表示预格式化文本,保留空格和换行 |
<ul> |
定义无序列表 |
内联文本语义
| 元素 |
描述 |
<a> |
创建超链接,链接到其他页面、文件、位置或URL |
<abbr> |
表示缩写或首字母缩略词 |
<b> |
表示需要引起注意的文本,无特殊强调 |
<bdi> |
隔离可能以不同方向格式化的文本段落 |
<bdo> |
覆盖当前文本方向 |
<br> |
生成一个换行符 |
<cite> |
表示引用的作品标题,如书籍、诗歌、歌曲等 |
<code> |
表示计算机代码片段 |
<data> |
将内容与机器可读的译文链接起来 |
<dfn> |
表示定义术语 |
<em> |
表示强调文本,通常显示为斜体 |
<i> |
表示区分于普通文本的文本,如技术术语、外语短语等 |
<kbd> |
表示用户输入,通常显示为等宽字体 |
<mark> |
表示标记或高亮的文本 |
<q> |
表示短的行内引用 |
<rb> |
用在注音标示中定义基本文本 |
<rp> |
用于在不支持注音符的浏览器中显示括号 |
<rt> |
定义字符的注音或发音 |
<rtc> |
定义注音文字的语义注解 |
<ruby> |
表示东亚文字的注音标记 |
<s> |
表示不再相关或不再准确的内容,显示为删除线 |
<samp> |
表示计算机程序输出的示例文本 |
<small> |
表示旁注或小字印刷,如版权或法律文本 |
<span> |
通用内联容器,无特殊语义 |
<strong> |
表示重要的文本,通常显示为粗体 |
<sub> |
定义下标文本 |
<sup> |
定义上标文本 |
<time> |
表示特定的时间或日期 |
<u> |
表示需要以非文本方式标明的文本,如拼写错误 |
<var> |
表示变量名或数学表达式 |
<wbr> |
表示可能的换行机会 |
图片和多媒体
| 元素 |
描述 |
<area> |
定义图像映射内部的区域 |
<audio> |
在文档中嵌入音频内容 |
<img> |
在文档中嵌入图像 |
<map> |
与<area>元素一起定义图像映射 |
<track> |
为<audio>和<video>元素指定文本轨道 |
<video> |
在文档中嵌入视频内容 |
<source> |
为<picture>, <audio>或<video>元素指定多媒体资源 |
<picture> |
为不同设备和屏幕尺寸提供响应式图像容器 |
<figcaption> |
为<figure>元素提供说明文字 |
<figure> |
表示独立的内容,通常带有说明文字 |
嵌入内容
| 元素 |
描述 |
<embed> |
嵌入外部应用或交互内容 |
<iframe> |
表示嵌套的浏览上下文,即嵌入其他HTML页面 |
<object> |
表示外部资源,可以作为图像、嵌入浏览器上下文或资源 |
<param> |
为<object>元素定义参数 |
<picture> |
为不同尺寸的设备提供灵活的图像资源 |
<portal> |
嵌入另一个HTML页面,使用户可以与之交互 |
脚本
| 元素 |
描述 |
<canvas> |
通过JavaScript绘制图形和动画的容器 |
<noscript> |
当浏览器不支持脚本或禁用脚本时显示替代内容 |
<script> |
嵌入或引用可执行脚本,如JavaScript |
表格内容
| 元素 |
描述 |
<caption> |
表示表格的标题 |
<col> |
定义表格列的属性 |
<colgroup> |
定义表格列的分组 |
<table> |
表示表格数据 |
<tbody> |
分组表格中的主体行 |
<td> |
定义表格中的数据单元格 |
<tfoot> |
分组表格中的页脚行 |
<th> |
定义表格中的标题单元格 |
<thead> |
分组表格中的标题行 |
<tr> |
定义表格中的行 |
表单
| 元素 |
描述 |
<button> |
定义可点击的按钮 |
<datalist> |
为<input>提供预定义选项列表 |
<fieldset> |
用于分组表单中的相关控件和标签 |
<form> |
表示用户可以提交信息的表单 |
<input> |
创建交互式控件,接收用户数据 |
<label> |
为表单控件提供标签 |
<legend> |
为<fieldset>提供标题 |
<meter> |
表示已知范围内的标量值或小数值 |
<optgroup> |
在<select>元素中创建选项分组 |
<option> |
在<select>、<optgroup>或<datalist>元素中定义选项 |
<output> |
表示计算结果 |
<progress> |
表示任务完成的进度 |
<select> |
表示选项菜单的控件 |
<textarea> |
表示多行纯文本编辑控件 |
交互元素
| 元素 |
描述 |
<details> |
创建一个可切换的小部件,用户可以获取额外信息 |
<dialog> |
定义对话框或窗口 |
<summary> |
为<details>元素指定可见的标题 |
Web组件
| 元素 |
描述 |
<slot> |
Web组件技术的一部分,充当占位符 |
<template> |
保存客户端内容,在页面加载时不渲染,但可以在运行时使用JavaScript实例化 |
过时和不推荐使用的元素
| 元素 |
描述 |
<acronym> |
定义首字母缩略词(已废弃,使用<abbr>代替) |
<applet> |
嵌入Java applet(已废弃,使用<object>代替) |
<basefont> |
设置文档默认字体(已废弃,使用CSS代替) |
<big> |
使文本字体变大(已废弃,使用CSS代替) |
<blink> |
使文本闪烁(已废弃,使用CSS代替) |
<center> |
居中对齐内容(已废弃,使用CSS代替) |
<dir> |
定义目录列表(已废弃,使用<ul>代替) |
<font> |
定义文本的字体、大小和颜色(已废弃,使用CSS代替) |
<frame> |
定义frameset中的框架(已废弃) |
<frameset> |
定义框架集(已废弃) |
<isindex> |
定义单行输入字段(已废弃) |
<keygen> |
生成加密密钥对(已废弃) |
<marquee> |
创建滚动文本(已废弃,使用CSS代替) |
<menuitem> |
命令/菜单项,用户可以从弹出菜单调用(已废弃) |
<noframes> |
为不支持框架的浏览器提供替代内容(已废弃) |
<plaintext> |
显示纯文本(已废弃,使用<pre>或CSS代替) |
<strike> |
定义删除线文本(已废弃,使用<s>或<del>代替) |
<tt> |
定义打字机文本(已废弃,使用CSS代替) |
<xmp> |
显示预格式化文本(已废弃,使用<pre>代替) |
特定用途元素
| 元素 |
描述 |
<math> |
MathML命名空间中的顶级元素,用于表示数学公式 |
<svg> |
SVG命名空间中的容器元素,用于定义矢量图形 |
注意事项
- HTML5已经废弃了一些元素,这些元素仍可能在旧网站中出现,但不应在新网站中使用
- 某些元素(如
<option>、<li>)通常需要在特定的父元素中使用才有效
- 语义化标签(如
<article>、<section>、<nav>)有助于提高可访问性和SEO
- 不同的HTML版本可能会有略微不同的元素支持,上述列表主要基于HTML5
HTML元素的正确使用
为了创建结构良好的HTML文档:
- 使用语义化元素来描述内容的结构和意义
- 确保元素的嵌套符合规范
- 使用适当的属性来增强元素的功能
- 避免过度使用
<div>和<span>等无语义元素
- 避免使用已废弃的元素和属性
HTML元素是网页的基础构建块,正确理解和使用这些元素可以创建结构良好、可访问性强、对搜索引擎友好的网页。随着Web标准的发展,某些元素可能会被废弃,新元素可能会被引入,因此定期了解最新的HTML规范非常重要。