HTML元素指南

以下是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命名空间中的容器元素,用于定义矢量图形

注意事项

  1. HTML5已经废弃了一些元素,这些元素仍可能在旧网站中出现,但不应在新网站中使用
  2. 某些元素(如<option><li>)通常需要在特定的父元素中使用才有效
  3. 语义化标签(如<article><section><nav>)有助于提高可访问性和SEO
  4. 不同的HTML版本可能会有略微不同的元素支持,上述列表主要基于HTML5

HTML元素的正确使用

为了创建结构良好的HTML文档:

  1. 使用语义化元素来描述内容的结构和意义
  2. 确保元素的嵌套符合规范
  3. 使用适当的属性来增强元素的功能
  4. 避免过度使用<div><span>等无语义元素
  5. 避免使用已废弃的元素和属性

HTML元素是网页的基础构建块,正确理解和使用这些元素可以创建结构良好、可访问性强、对搜索引擎友好的网页。随着Web标准的发展,某些元素可能会被废弃,新元素可能会被引入,因此定期了解最新的HTML规范非常重要。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容