文档与脚本（共11个）
DOCTYPE
文档类型声明
<!doctype html>
HTML
HTML根标签
<html lang="zh-cn"><head><title>示例页面</title></head><body><h1>欢迎</h1></body></html>
HEAD
文档头部标签
<head><meta charset="utf-8"><title>示例标题</title><link rel="stylesheet" href="style.css"></head>
BODY
文档主体标签
<body><h1>主标题</h1><p>这是一个示例段落。</p></body>
TITLE
页面标题标签
<title>我的网页标题</title>
META
元数据标签
<meta charset="utf-8" name="description" content="网页描述"><meta name="viewport" content="width=device-width, initial-scale=1.0">
LINK
外部资源链接标签
<link rel="stylesheet" href="style.css"><link rel="shortcut icon" href="favicon.ico">
SCRIPT
脚本标签（嵌入或引用JS）
<script src="script.js"></script> <script> function showAlert() { alert('hello, world!'); } </script>
NOSCRIPT
脚本不可用时显示内容
<noscript> <p>请启用javascript以获得完整的网页体验。</p> </noscript>
STYLE
嵌入样式表标签
<style> body { font-family: arial, sans-serif; background-color: lightgray; } </style>
BASE
基准URL标签（统一设置链接基准路径）
<base href="https://example.com/">
结构与布局（共15个）
HEADER
页眉区域标签
<header><h1>网站标题</h1><nav><a href="#">首页</a></nav></header>
NAV
导航链接区域标签
<nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li></ul></nav>
SECTION
独立内容区块标签
<section><h2>内容区块</h2><p>这是区块内的内容。</p></section>
ARTICLE
独立文章内容标签
<article><h2>文章标题</h2><p>文章内容...</p></article>
ASIDE
侧边栏/补充内容标签
<aside><h3>相关链接</h3><a href="#">链接1</a></aside>
MAIN
文档主体内容标签
<main><article><h2>主要文章</h2><p>文章内容...</p></article></main>
FOOTER
页脚区域标签
<footer><p>版权所有 © 2024</p></footer>
DIV
通用容器标签
<div style="background-color: lightgray;"><p>容器内的内容</p></div>
FIGURE
图片/图表容器标签
<figure><img src="image.jpg" alt="示例图片"><figcaption>图片说明</figcaption></figure>
FIGCAPTION
图片/图表标题标签
<figure><img src="image.jpg" alt="示例图片"><figcaption>这是一张示例图片</figcaption></figure>
HR
水平分割线标签
<hr>
BR
换行标签
第一行文本<br>第二行文本
CENTER
段落居中标签
<center><p>居中显示的文本</p></center>
NOFRAMES
不支持框架提示标签
<noframes><p>您的浏览器不支持框架，请升级浏览器。</p></noframes>
FRAMESET
框架集标签
<frameset cols="20%,80%"><frame src="left.html"><frame src="right.html"></frameset>
文本语义（共34个）
H1~H6
分级标题标签
<h1>这是一级标题</h1> <h3>这是三级标题</h3> <h6>这是六级标题</h6>
P
段落标签
<p>这是一个段落，包含一些文本内容。</p>
SPAN
行内容器标签
<p>这是一段文本，<span style="color: red;">这里是红色文本</span>。</p>
STRONG
加粗文本（语义强调）
<p>这是<strong>重要</strong>的信息。</p>
EM
斜体文本（语义强调）
<p>这是<em>需要强调</em>的内容。</p>
B
加粗文本（无语义）
<p>这是<b>加粗</b>的文本。</p>
I
斜体文本（无语义）
<p>这是<i>斜体</i>的文本。</p>
MARK
标记/高亮文本
<p>这是<mark>高亮</mark>显示的文本。</p>
CODE
定义计算机代码片段
<p>使用 <code>document.getElementById('id')</code> 获取元素。</p>
PRE
预格式化文本
<pre> function example() { console.log('hello, world!'); } </pre>
BLOCKQUOTE
定义长引用内容，通常会有缩进样式。
<blockquote cite="https://example.com"> 这是一段来自外部的长引用内容，可能包含多行文本。 </blockquote>
DATA
将人类可读的文本与机器可读的形式关联
<data value="1001">产品编号：1001</data>
DFN
定义术语第一个实例，通常与ABBR一起用。
<p><dfn><abbr title="超文本标记语言">html</abbr></dfn> 是网页的基础。</p>
ABBR
定义缩写词，通过title属性提供全称。
<p><abbr title="世界卫生组织">who</abbr> 成立于1948年。</p>
KBD
定义用户输入，通常显示为键盘样式。
<p>按 <kbd>ctrl+c</kbd> 复制文本。</p>
SAMP
定义计算机程序的输出示例
<p>程序输出：<samp>操作成功完成</samp></p>
VAR
定义变量或占位符，通常显示为斜体
<p>公式：<var>x</var> = <var>a</var> + <var>b</var></p>
Q
行内短引用标签
<p>他说：<q>我会回来的</q>。</p>
CITE
引用来源标签
<p>阅读 <cite>html5权威指南</cite> 了解更多。</p>
ADDRESS
定义文档作者或所有者的联系信息
<address>作者：张三<br>邮箱：zhangsan@example.com</address>
ACRONYM
首字母缩写标签（已过时，建议使用ABBR）
<acronym title="世界卫生组织">who</acronym>
S
删除线文本（非语义）
<p><s>这是已删除的文本</s></p>
DEL
删除文本（语义化）
<p><del>旧的价格：100元</del></p>
INS
插入文本（语义化）
<p>新的价格：<ins>80元</ins></p>
SUB
下标文本标签
<p>h<sub>2</sub>o 是水的化学式。</p>
SUP
上标文本标签
<p>x<sup>2</sup> 表示x的平方。</p>
BDI
双向文本隔离标签
<p>阿拉伯语文本：<bdi dir="rtl">مرحبًا بالعالم</bdi></p>
WBR
换行可选标签
<p>这是一个很长很长的单词：supercalifragilisticexpialidocious<wbr>word</p>
TIME
定义日期或时间标签
<time datetime="2024-07-20">2024年7月20日</time>
列表体系（共8个）
UL
无序列表标签
<ul><li>项目1</li><li>项目2</li></ul>
OL
有序列表标签
<ol><li>第一项</li><li>第二项</li></ol>
LI
列表项标签
<ul><li>列表项内容</li></ul>
DL
定义列表标签
<dl><dt>术语</dt><dd>术语的定义</dd></dl>
DT
定义列表标题
<dl><dt>html</dt><dd>超文本标记语言</dd></dl>
DD
定义列表描述
<dl><dt>css</dt><dd>层叠样式表，用于网页样式设计</dd></dl>
MENU
菜单列表标签（现代用法）
<menu><li><button>选项1</button></li><li><button>选项2</button></li></menu>
DIR
目录列表标签（已过时）
<dir><li>文件1</li><li>文件2</li></dir>
媒体与图形（共15个）
IMG
图片标签
<img src="image.jpg" alt="一张美丽的风景图" width="300" height="200">
VIDEO
视频标签
<video src="video.mp4" controls width="320" height="240">您的浏览器不支持视频播放。</video>
AUDIO
音频标签
<audio src="audio.mp3" controls>您的浏览器不支持音频播放。</audio>
CANVAS
画布标签（用于图形渲染）
<canvas id="mycanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#ff0000'; ctx.fillRect(0, 0, 150, 75); </script>
SVG
矢量图形容器
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg>
PATH
SVG路径标签
<svg width="100" height="100"><path d="m10 10 l90 10 l50 90 z" fill="red"></path></svg>
CIRCLE
SVG圆形标签
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"></circle></svg>
RECT
SVG矩形标签
<svg width="100" height="100"><rect x="10" y="10" width="80" height="80" fill="green"></rect></svg>
IFRAME
嵌入框架标签
<iframe src="https://example.com" width="300" height="200" frameborder="0"></iframe>
EMBED
嵌入外部资源标签
<embed src="file.swf" type="application/x-shockwave-flash" width="300" height="200">
OBJECT
嵌入对象标签
<object data="file.pdf" type="application/pdf" width="300" height="200">您的浏览器不支持查看pdf文件。</object>
MAP
图片映射标签
<img src="image.jpg" alt="示例图片" usemap="#image-map"> <map name="image-map"> <area shape="rect" coords="0,0,100,100" href="#" alt="区域1"> </map>
AREA
图片映射区域标签
<img src="image.jpg" usemap="#image-map"> <map name="image-map"> <area shape="rect" coords="0,0,100,100" href="page.html" alt="点击这里"> </map>
TRACK
媒体资源字幕标签
<video src="video.mp4" controls> <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文"> </video>
SOURCE
为媒体元素指定多个媒体资源标签
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> 您的浏览器不支持视频播放。 </video>
表单与交互（共15个）
FORM
表单容器标签
<form action="process.php" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <input type="submit" value="提交"> </form>
INPUT
输入框标签（支持text/password/email等17种类型）
<input type="text" name="username" placeholder="请输入用户名"><input type="password" name="password" placeholder="请输入密码">
SELECT
下拉选择框标签
<select name="color"> <option value="red">红色</option> <option value="blue">蓝色</option> </select>
OPTION
下拉选项标签
<select name="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> </select>
OPTGROUP
选项分组标签
<select name="animal"> <optgroup label="哺乳动物"> <option value="dog">狗</option> <option value="cat">猫</option> </optgroup> <optgroup label="鸟类"> <option value="bird">鸟</option> </optgroup> </select>
TEXTAREA
多行文本框标签
<textarea name="comment" rows="5" cols="30" placeholder="请输入您的评论">
BUTTON
按钮标签
<button type="submit">提交表单</button><button type="reset">重置表单</button>
LABEL
表单标签关联标签
<label for="email">邮箱：</label><input type="email" id="email" name="email">
FIELDSET
表单分组标签
<fieldset class="绿色边框"> <legend>用户信息</legend> <label for="name">姓名：</label> <input type="text" id="name" name="name"> </fieldset>
LEGEND
表单分组标题标签
<fieldset> <legend>联系方式</legend> <label for="phone">电话：</label> <input type="tel" id="phone" name="phone"> </fieldset>
OUTPUT
表单输出结果标签
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="result" for="a b"></output> </form>
PROGRESS
进度条标签
<progress value="70" max="100"></progress>
METER
度量衡标签
<meter value="0.6" min="0" max="1"></meter>
KEYGEN
密钥对生成器标签（过时，现代浏览器支持差）
<form method="post"> <keygen name="key" challenge="secure-string"> <input type="submit"> </form>
DATALIST
输入框自动完成数据源
<input list="colors" name="color"> <datalist id="colors"> <option value="红色"> <option value="蓝色"> </datalist>
表格与数据（共12个）
TABLE
表格容器标签
<table border="1"> <caption>示例表格</caption> <thead><tr><th>表头1</th><th>表头2</th></tr></thead> <tbody><tr><td>数据1</td><td>数据2</td></tr></tbody> </table>
TR
表格行标签
<table border="1"> <tr><td>第一行第一列</td><td>第一行第二列</td></tr> </table>
TD
表格数据单元格
<table border="1"> <tr><td>单元格内容</td></tr> </table>
TH
表格标题单元格
<table border="1"> <tr><th>标题单元格</th></tr> </table>
CAPTION
表格标题标签
<table border="1"> <caption>销售数据表格</caption> <tr><th>产品</th><th>销量</th></tr> </table>
THEAD
表格头部分组
<table border="1"> <thead><tr><th>编号</th><th>名称</th></tr></thead> <tbody><tr><td>1</td><td>商品1</td></tr></tbody> </table>
TBODY
表格主体分组
<table border="1"> <thead><tr><th>项目</th></tr></thead> <tbody><tr><td>内容1</td></tr></tbody> </table>
TFOOT
表格底部分组
<table border="1"> <thead><tr><th>列1</th></tr></thead> <tbody><tr><td>数据</td></tr></tbody> <tfoot><tr><td>总计</td></tr></tfoot> </table>
COL
表格列属性标签
<table border="1"> <colgroup><col width="100"><col width="200"></colgroup> <tr><td>列1</td><td>列2</td></tr> </table>
COLGROUP
表格列分组标签
<table border="1"> <colgroup span="2" style="background-color: lightgray;"></colgroup> <tr><td>列1</td><td>列2</td></tr> </table>
SPAN（表格用）
单元格跨列/行标签
<table border="1"> <tr><td colspan="2">跨两列</td></tr> </table>
CELLSPACING
表格单元格间距属性（过时，改用CSS控制）
<table cellspacing="2"> <tr><td>内容</td></tr> </table>
小众与过时（共20个）
TIME
日期时间标签
<time datetime="2025-06-08">2025年6月8日</time>
DETAILS
可折叠内容容器
<details> <summary>点击展开详细信息</summary> <p>这是详细信息内容。</p> </details>
SUMMARY
折叠内容标题
<details> <summary>查看更多</summary> <p>隐藏的内容...</p> </details>
RUBY
中日文注音/注释容器
<ruby>漢字<rt>かんじ</rt></ruby>
RT
注音/注释文本
<ruby>北京<rt>ペキン</rt></ruby>
RP
浏览器不支持 RUBY 时显示内容
<ruby>漢<rp>[</rp><rt>かん</rt><rp>]</rp></ruby>
BDO
双向文本方向标签
<p>从右向左显示的文本：<bdo dir="rtl">مرحبًا بالعالم</bdo></p>
BASEFONT
基础字体标签（过时，用 CSS 替代）
<basefont face="宋体" size="3">基础字体示例</basefont>
FONT
字体样式标签（过时，用 CSS 替代）
<font color="red" size="4">红色大字体文本</font>
STRIKE
删除线标签（过时，用 s 或 CSS 替代）
<strike>这是已过时的信息</strike>
U
下划线标签（过时，用 CSS 替代）
<u>带下划线的文本</u>
BIG
大字体标签（过时，用 CSS 替代）
<big>大号文本示例</big>
SMALL
小字体标签（过时，用 CSS 替代）
<small>小号文本示例</small>
TT
等宽字体标签（过时，用 CODE 或 CSS 替代）
<tt>等宽文本示例</tt>
FRAME
框架标签（过时，用 IFRAM 替代）
<frameset cols="20%,80%"> <frame src="left.html"> <frame src="right.html"> </frameset>
IFRAME
嵌入式框架标签
<iframe src="https://example.com" width="300" height="200"></iframe>
NOEMBED
非嵌入式内容标签（过时，现代浏览器不支持）
<embed src="file.swf"> <noembed>请安装flash插件以查看内容。</noembed> </embed>
APPLET
Java小程序标签（过时，用 JS 或插件替代）
<applet code="applet.class" width="100" height="100"> 您的浏览器不支持java小程序。 </applet>
ISINDEX
单字段搜索标签（过时，用 INPUT TYPE="SEARCH" 替代）
<isindex prompt="搜索网站...">
PARAM
OBJECT / EMBED 参数标签
<object data="file.swf" type="application/x-shockwave-flash"> <param name="quality" value="high"> </object>
蜀ICP备2025139212号-1
|
川公网安备51090402000058号