被摘下的星星
2026-10-12 18:33:24点赞：0阅读：0
关注
一、HTML 全部元素（按功能分类）
1. 主根元素
| 元素 | 说明 |
|---|
<html> | HTML 文档的根元素，所有其他元素必须是其后代 |
2. 文档元数据
| 元素 | 说明 |
|---|
<base> | 指定文档中所有相对 URL 的基础 URL，一个文档只能有一个 |
<head> | 包含文档的机器可读信息（元数据），如标题、脚本、样式表 |
<link> | 指定当前文档与外部资源的关系，最常用于链接 CSS 和站点图标 |
<meta> | 表示不能被其他元数据元素表示的元数据，如字符集、视口设置 |
<style> | 包含文档或部分内容的 CSS 样式信息 |
<title> | 定义文档标题，显示在浏览器标题栏或标签页上 |
3. 分区根元素
4. 内容分区
| 元素 | 说明 |
|---|
<address> | 表示某人、某些人或组织的联系信息 |
<article> | 代表文档中一个自包含的组成部分，旨在独立分发或重复使用 |
<aside> | 表示与文档主要内容间接相关的部分，通常呈现为侧边栏 |
<footer> | 表示最近父分段内容或分区根元素的页脚 |
<header> | 表示介绍性内容，通常包含标题、徽标、搜索表单等 |
<h1>~<h6> | 六个级别的章节标题，<h1> 级别最高 |
<hgroup> | 表示与次要内容（如副标题、标语）组合的标题 |
<main> | 呈现文档正文的主体部分 |
<nav> | 表示提供导航链接的页面部分 |
<section> | 表示文档中通用的独立部分，通常应带有标题 |
<search> | 表示包含与执行搜索或过滤操作相关的表单控件集合 |
5. 文本内容
| 元素 | 说明 |
|---|
<blockquote> | 表示引用内容，通常会有缩进 |
<dd> | 描述列表（<dl>）中先前术语的描述或定义 |
<div> | 通用块级容器，无语义 |
<dl> | 定义列表 |
<dt> | 定义列表中的术语 |
<figcaption> | 图文块（<figure>）的说明 |
<figure> | 图文块，通常包含图片、代码示例等自包含内容 |
<hr> | 水平分割线（主题转换） |
<li> | 列表项 |
<menu> | 表示一组命令的列表 |
<ol> | 有序列表 |
<p> | 段落 |
<pre> | 预格式化文本 |
<ul> | 无序列表 |
6. 行内文本语义
| 元素 | 说明 |
|---|
<a> | 超链接，链接到其他页面、文件或位置 |
<abbr> | 缩写或首字母缩略词 |
<b> | 引起注意的文本（粗体显示） |
<bdi> | 双向隔离元素 |
<bdo> | 双向文本覆盖 |
<br> | 换行 |
<cite> | 引用作品的标题 |
<code> | 计算机代码片段 |
<data> | 机器可读的数据值 |
<del> | 已删除的文本 |
<dfn> | 术语的定义实例 |
<em> | 强调文本 |
<i> | 斜体文本，表示不同于周围内容的文本 |
<ins> | 已插入的文本 |
<kbd> | 键盘输入 |
<mark> | 因参考目的而高亮标记的文本 |
<q> | 内联短引用 |
<rp> | 注音文字（ruby）的括号 |
<rt> | 注音文字（ruby）的解释 |
<ruby> | 东亚注音符号 |
<s> | 删除线文本（不再准确或相关） |
<samp> | 程序输出示例 |
<small> | 小号文本（旁注、小字） |
<span> | 通用行内容器 |
<strong> | 重要文本 |
<sub> | 下标 |
<sup> | 上标 |
<time> | 日期/时间 |
<u> | 下划线（非强调，如拼写错误标记） |
<var> | 变量 |
<wbr> | 可换行机会 |
7. 图片与多媒体
| 元素 | 说明 |
|---|
<area> | 图像映射中的热点区域 |
<audio> | 音频内容 |
<img> | 图片 |
<map> | 图像映射 |
<track> | 媒体元素（<audio>、<video>）的文本轨道 |
<video> | 视频内容 |
8. 内嵌内容
| 元素 | 说明 |
|---|
<embed> | 嵌入外部内容 |
<iframe> | 内嵌浏览上下文（框架） |
<object> | 嵌入外部资源 |
<picture> | 响应式图片容器 |
<source> | 媒体元素或 <picture> 的资源来源 |
9. SVG 与 MathML
| 元素 | 说明 |
|---|
<svg> | 定义 SVG 文档或嵌入 SVG 片段的容器 |
<math> | MathML 的顶级元素 |
10. 脚本
| 元素 | 说明 |
|---|
<canvas> | 用于 Canvas 或 WebGL 绘制图形和动画的容器 |
<noscript> | 脚本不支持或禁用时显示的内容 |
<script> | 嵌入或引用可执行代码（通常是 JavaScript） |
11. 编辑标记
| 元素 | 说明 |
|---|
<del> | 表示从文档中删除的文本范围 |
<ins> | 表示添加到文档中的文本范围 |
12. 表格
| 元素 | 说明 |
|---|
<caption> | 表格标题 |
<col> | 列组中的一列 |
<colgroup> | 表格中的列组 |
<table> | 表格数据 |
<tbody> | 表格主体行组 |
<td> | 表格数据单元格 |
<tfoot> | 表格页脚行组 |
<th> | 表头单元格 |
<thead> | 表头行组 |
<tr> | 表格行 |
13. 表单
| 元素 | 说明 |
|---|
<button> | 可交互按钮 |
<datalist> | 预定义选项列表，供其他控件选择 |
<fieldset> | 表单控件分组 |
<form> | 包含交互控件的文档部分，用于提交信息 |
<input> | 交互式表单控件 |
<label> | 用户界面项目的标题 |
<legend> | <fieldset> 的标题 |
<meter> | 已知范围内的标量值 |
<optgroup> | 选项分组 |
<option> | 下拉选项 |
<output> | 计算结果输出 |
<progress> | 任务进度指示 |
<select> | 下拉选择控件 |
<textarea> | 多行文本输入 |
14. 交互元素
| 元素 | 说明 |
|---|
<details> | 可展开/折叠的详情小部件 |
<dialog> | 对话框 |
<summary> | <details> 的标题/摘要 |
15. Web Components
| 元素 | 说明 |
|---|
<slot> | Web Components 插槽 |
<template> | 可复用的 HTML 模板 |
二、HTML 全部属性
1. 全局属性（所有元素可用）
| 属性 | 作用说明 |
|---|
accesskey | 激活或聚焦元素的键盘快捷键 |
autocapitalize | 用户输入时是否自动大写 |
autofocus | 页面加载后自动获得焦点 |
class | 类名，通常与 CSS 配合使用 |
contenteditable | 指定元素内容是否可编辑 |
dir | 定义文字方向，允许值为 ltr（从左到右）或 rtl（从右到左） |
draggable | 定义元素是否可被拖拽 |
enterkeyhint | 提示虚拟键盘回车键的显示样式 |
hidden | 隐藏元素，使其不显示在页面上 |
id | 定义元素的唯一标识符 |
inert | 使元素变为惰性，不可交互且不被辅助技术识别 |
inputmode | 提示输入 modality，如 text、tel、email、numeric 等 |
is | 创建自定义内置元素 |
lang | 定义元素内容的语言 |
nonce | 用于 CSP 的加密随机数 |
popover | 定义元素为弹出框 |
spellcheck | 是否对元素内容进行拼写和语法检查 |
style | 行内 CSS 样式 |
tabindex | 定义键盘导航顺序 |
title | 定义元素的提示信息 |
translate | 指定元素内容是否应被翻译 |
data-* | 允许附加自定义属性到 HTML 元素，用于存储私有数据 |
2. 元素专属属性
<a> / <area>
| 属性 | 作用说明 |
|---|
href | 指定链接的目标 URL |
target | 指定在何处打开链接 |
rel | 定义当前文档与目标资源之间的关系 |
hreflang | 指定目标 URL 的语言 |
type | 指定目标资源的 MIME 类型 |
ping | 指定在点击链接时发送 ping 的 URL 列表 |
download | 指示超链接用于下载资源 |
referrerpolicy | 指定发送 referrer 的策略 |
<img>
| 属性 | 作用说明 |
|---|
src | 指定图片的 URL |
alt | 提供图片的替代文本描述 |
srcset | 提供多个图片候选，用于响应式图片 |
sizes | 指定不同视口条件下图片的显示尺寸 |
width / height | 指定图片的宽度和高度 |
loading | 指定加载方式：lazy（懒加载）或 eager |
decoding | 提示解码方式 |
crossorigin | 控制跨域请求的处理方式 |
usemap | 关联到图像映射 <map> |
ismap | 指示图片为服务器端图像映射 |
<form>
| 属性 | 作用说明 |
|---|
action | 指定提交表单的 URL |
method | 指定提交表单的 HTTP 方法（GET 或 POST） |
enctype | 指定 POST 提交时表单数据的编码类型 |
accept-charset | 指定表单提交时使用的字符编码 |
autocomplete | 控制表单的自动填充行为 |
novalidate | 提交表单时不进行验证 |
target | 指定提交结果在何处打开 |
<input>
| 属性 | 作用说明 |
|---|
type | 控制输入控件的数据类型（如 text、email、date 等） |
name | 指定控件名称，用于表单提交 |
value | 指定控件的初始值 |
placeholder | 在表单控件中放置用户可见的标签/提示 |
required | 指定控件是否为表单提交所必需 |
readonly | 指定控件值是否允许用户编辑 |
disabled | 指示用户是否可以与该元素交互 |
checked | 指定复选框或单选按钮是否默认选中 |
maxlength | 指定允许输入的最大字符数 |
minlength | 指定允许输入的最小字符数 |
pattern | 指定用于验证的正则表达式 |
min / max | 指定允许的最小/最大值 |
step | 指定值的步长 |
multiple | 允许输入多个值 |
accept | 指定文件上传时接受的文件类型 |
autocomplete | 控制自动填充 |
list | 关联到 <datalist> 以提供自动完成选项 |
form | 关联到所属的表单 |
formaction / formmethod / formenctype / formnovalidate / formtarget | 覆盖表单的对应属性 |
<button>
| 属性 | 作用说明 |
|---|
type | 指定按钮类型：submit、reset 或 button |
name / value | 用于表单提交时传递键值对 |
disabled | 指示用户是否可以与该元素交互 |
form | 关联到所属的表单 |
formaction 等 | 覆盖表单属性 |
<audio> / <video>
| 属性 | 作用说明 |
|---|
src | 指定媒体资源的 URL |
controls | 指示浏览器是否应向用户显示播放控件 |
autoplay | 页面加载后自动播放 |
loop | 指示媒体播放结束后是否重新开始 |
muted | 初始是否静音 |
preload | 指定预加载策略 |
poster | 指定视频播放前显示的海报帧 |
playsinline | 指定在 iOS 上是否内联播放 |
crossorigin | 控制跨域请求 |
<source>
| 属性 | 作用说明 |
|---|
src | 指定资源 URL |
type | 指定资源的 MIME 类型 |
media | 指定媒体查询条件 |
srcset / sizes | 用于响应式图片 |
表格相关属性
| 属性 | 所属元素 | 作用说明 |
|---|
colspan | <td> / <th> | 指定单元格跨越的列数 |
rowspan | <td> / <th> | 指定单元格跨越的行数 |
headers | <td> / <th> | 关联到表头单元格 |
scope | <th> | 指定表头单元格适用的范围（row/col/rowgroup/colgroup） |
span | <col> / <colgroup> | 指定跨越的列数 |
<meta>
| 属性 | 作用说明 |
|---|
name | 指定元数据的名称 |
content | 指定元数据的值 |
http-equiv | 模拟 HTTP 响应头 |
charset | 指定文档的字符编码 |
<link>
| 属性 | 作用说明 |
|---|
rel | 指定当前文档与链接资源的关系 |
href | 指定链接资源的 URL |
type | 指定资源的 MIME 类型 |
media | 指定资源适用的媒体 |
sizes | 指定图标尺寸（当 rel="icon" 时） |
crossorigin | 控制跨域请求 |
integrity | 用于子资源完整性检查 |
<script>
| 属性 | 作用说明 |
|---|
src | 指定外部脚本的 URL |
type | 指定脚本的 MIME 类型 |
async | 异步加载并执行脚本 |
defer | 指示脚本在页面解析完成后执行 |
crossorigin | 控制跨域请求 |
integrity | 用于子资源完整性检查 |
nomodule | 指示脚本不应在不支持 ES 模块的浏览器中执行 |
<textarea>
| 属性 | 作用说明 |
|---|
name | 控件名称 |
rows / cols | 指定显示的行数和列数 |
placeholder | 用户可见的提示标签 |
required | 是否为提交所必需 |
readonly | 是否允许编辑 |
disabled | 是否可交互 |
maxlength / minlength | 最大/最小字符数 |
wrap | 指定换行方式 |
<select>
| 属性 | 作用说明 |
|---|
name | 控件名称 |
multiple | 允许选择多个选项 |
required | 是否为提交所必需 |
size | 指定显示的选项数量 |
disabled | 是否可交互 |
<option>
| 属性 | 作用说明 |
|---|
value | 指定提交值 |
selected | 是否默认选中 |
disabled | 是否可交互 |
label | 用户可见的标签 |
<iframe>
| 属性 | 作用说明 |
|---|
src | 内嵌内容的 URL |
srcdoc | 直接指定内嵌 HTML 内容 |
name | 浏览上下文的名称 |
sandbox | 指定嵌套内容的安全规则 |
allow | 指定权限策略 |
allowfullscreen | 允许全屏 |
width / height | 指定尺寸 |
loading | 加载方式（lazy/eager） |
referrerpolicy | referrer 策略 |
<details>
| 属性 | 作用说明 |
|---|
open | 布尔属性。指定详情内容是否默认展开。存在该属性时，<details> 的内容在页面加载后即显示；省略该属性时，内容默认折叠，仅显示 <summary>。 |
示例：
<details open>
<summary>点击查看详情</summary>
<p>这里是默认展开的详情内容。</p>
</details>
<details>
<summary>点击查看详情</summary>
<p>这里是默认折叠的详情内容。</p>
</details>
<meter>
| 属性 | 作用说明 |
|---|
value | 必需。指定当前测量的实际数值。必须位于 min 和 max 之间。 |
min | 指定测量范围的下限。默认为 0。 |
max | 指定测量范围的上限。默认为 1。 |
low | 指定“低值”区域的上限。当 value 小于等于 low 时，浏览器通常用特殊样式表示低值。必须大于等于 min，小于等于 high。 |
high | 指定“高值”区域的下限。当 value 大于等于 high 时，浏览器通常用特殊样式表示高值。必须大于等于 low，小于等于 max。 |
optimum | 指定最佳值。浏览器根据 value 与 optimum 的关系决定显示颜色：接近最佳值为绿色，次之为黄色，远离为红色。 |
示例：
<!-- 磁盘使用量：已用 6GB，总范围 0-10GB，最佳值是低占用 -->
<meter value="6" min="0" max="10" low="3" high="8" optimum="1">6GB / 10GB</meter>
<!-- 考试分数：85 分，满分 100，60 以下为低，90 以上为高，最佳是满分 -->
<meter value="85" min="0" max="100" low="60" high="90" optimum="100">85 分</meter>
说明：
<progress>
| 属性 | 作用说明 |
|---|
value | 指定当前已完成的进度值。必须大于等于 0，小于等于 max。如果省略 value，则显示为“不确定进度”的动画状态（表示任务正在进行但不知道具体进度）。 |
max | 指定任务总共需要完成的工作量。默认为 1。必须大于 0。 |
示例：
<!-- 确定进度：已完成 70，总共 100 -->
<progress value="70" max="100">70%</progress>
<!-- 不确定进度：任务正在进行，但不知道具体进度 -->
<progress></progress>
<time>
| 属性 | 作用说明 |
|---|
datetime | 指定机器可读的日期/时间值，格式必须符合 HTML 日期时间格式。元素内的文本可以是人类友好的格式，而 datetime 提供机器可解析的标准格式。 |
datetime 的合法格式包括：
| 格式 | 示例 | 说明 |
|---|
| 有效日期字符串 | 2025-10-06 | 年-月-日 |
| 有效月份字符串 | 2025-10 | 年-月 |
| 有效周字符串 | 2025-W40 | 年-第几周 |
| 有效时间字符串 | 14:30 或 14:30:00 | 时:分 或 时:分:秒 |
| 本地日期时间字符串 | 2025-10-06T14:30 | 日期 + T + 时间 |
| 全局日期时间字符串 | 2025-10-06T14:30Z | 带时区（Z 表示 UTC） |
| 带时区偏移的日期时间 | 2025-10-06T14:30+08:00 | 带具体时区偏移 |
| 有效持续时间字符串 | PT2H30M | 持续时间：2 小时 30 分 |
示例：
<!-- 人类可读文本 + 机器可读标准格式 -->
<p>会议时间：<time datetime="2025-10-06T14:30">2025年10月6日下午2:30</time></p>
<!-- 只表示日期 -->
<p>发布日期：<time datetime="2025-10-06">2025年10月6日</time></p>
<!-- 只表示时间 -->
<p>开始时间：<time datetime="14:30">下午2:30</time></p>
<!-- 持续时间 -->
<p>视频时长：<time datetime="PT2H30M">2小时30分钟</time></p>
<blockquote> / <q> / <del> / <ins> 的 cite 与 datetime
cite 属性
| 元素 | cite 属性的作用 |
|---|
<blockquote> | 指定块级引用内容的来源 URL。浏览器通常不会显示该 URL，但对搜索引擎和辅助技术有意义。 |
<q> | 指定行内短引用的来源 URL。 |
<del> | 指定被删除内容的来源 URL，说明删除依据或相关文档。 |
<ins> | 指定被插入内容的来源 URL，说明插入依据或相关文档。 |
示例：
<!-- 块引用：注明来源 -->
<blockquote cite="https://example.com/article">
<p>这是一段引用内容。</p>
</blockquote>
<!-- 行内引用：注明来源 -->
<p>正如某人所说：<q cite="https://example.com/quote">这是一句短引用。</q></p>
<!-- 删除内容：注明来源 -->
<p><del cite="https://example.com/old">这段内容已被删除。</del></p>
<!-- 插入内容：注明来源 -->
<p><ins cite="https://example.com/new">这段内容是新增的。</ins></p>
说明：
datetime 属性
| 元素 | datetime 属性的作用 |
|---|
<del> | 指定内容被删除的日期/时间。 |
<ins> | 指定内容被插入的日期/时间。 |
示例：
<!-- 删除内容，并注明删除时间 -->
<p>
<del datetime="2025-10-01T10:00">原价：￥199</del>
<ins datetime="2025-10-01T10:00">现价：￥99</ins>
</p>
<!-- 只注明日期 -->
<p>
<del datetime="2025-10-01">旧版本内容</del>
</p>
三、HTML 全部事件
1. 事件处理器属性（HTML 属性形式）
| 事件属性 | 触发时机 |
|---|
onclick | 鼠标单击 |
ondblclick | 鼠标双击 |
onmousedown | 鼠标按钮按下 |
onmouseup | 鼠标按钮释放 |
onmouseover | 鼠标移入元素或子元素 |
onmouseout | 鼠标移出元素或子元素 |
onmouseenter | 鼠标移入元素（不冒泡） |
onmouseleave | 鼠标移出元素（不冒泡） |
onmousemove | 鼠标在元素上移动 |
oncontextmenu | 右键菜单触发 |
onwheel | 滚轮滚动 |
onkeydown | 键盘按键按下 |
onkeyup | 键盘按键释放 |
onkeypress | 按键按下并产生字符（已弃用） |
onfocus | 元素获得焦点 |
onblur | 元素失去焦点 |
oninput | 输入框内容变化 |
onchange | 表单值改变并确认 |
onsubmit | 表单提交 |
onreset | 表单重置 |
onselect | 文本被选中 |
oninvalid | 表单验证失败 |
onload | 资源加载完成 |
onerror | 资源加载错误 |
onresize | 窗口大小改变 |
onscroll | 元素滚动 |
onabort | 加载中止 |
onplay / onpause / onended | 媒体播放/暂停/结束 |
ontimeupdate | 媒体播放位置更新 |
onvolumechange | 媒体音量改变 |
onprogress | 加载进度更新 |
ondrag / ondrop / ondragstart / ondragend / ondragenter / ondragleave / ondragover | 拖放操作 |
ontoggle | <details> 展开/折叠切换 |
onclose | <dialog> 关闭 |
2. 主要事件类型分类
| 事件类别 | 主要事件 | 说明 |
|---|
| 鼠标事件 | click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、contextmenu | 鼠标交互 |
| 键盘事件 | keydown、keyup、keypress | 键盘交互 |
| 焦点事件 | focus、blur、focusin、focusout | 元素获得/失去焦点 |
| 表单事件 | submit、reset、change、input、invalid、select | 表单构建、提交、重置 |
| 输入事件 | input、beforeinput | 输入内容变化 |
| 拖放事件 | drag、dragstart、dragend、dragenter、dragleave、dragover、drop | HTML 拖放 API |
| 滚轮事件 | wheel | 滚轮滚动 |
| 媒体事件 | play、pause、ended、timeupdate、volumechange、durationchange、loadeddata、loadedmetadata、canplay、canplaythrough、waiting、seeking、seeked、progress | 音视频播放控制 |
| 动画事件 | animationstart、animationend、animationiteration、animationcancel | Web Animations API |
| 过渡事件 | transitionstart、transitionend、transitionrun、transitioncancel | CSS 过渡 |
| 剪贴板事件 | copy、cut、paste | 剪切板 API |
| 加载/卸载 | load、unload、beforeunload、DOMContentLoaded、readystatechange | 文档加载周期 |
| 网络事件 | online、offline | 网络连接状态变化 |
| 指针事件 | pointerdown、pointerup、pointermove、pointerover、pointerout、pointerenter、pointerleave、pointercancel、gotpointercapture、lostpointercapture | 硬件无关的指针输入（鼠标/触摸/笔） |
| 触摸事件 | touchstart、touchend、touchmove、touchcancel | 触摸屏交互 |
| 全屏事件 | fullscreenchange、fullscreenerror | 全屏 API |
| 历史事件 | popstate、hashchange | History API |
| 消息事件 | message、messageerror | 跨窗口/Worker 通信 |
| 对话框事件 | close、cancel | <dialog> 元素 |
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/2403_86957103/article/details/167178470
