html5标签大全_HTML5标签速查手册完整版

Q: html5有多少个标签？

HTML Living Standard的官方索引收录了100多个元素（据W3C HTML Living Standard索引），MDN Web Docs元素参考也列出超过100个元素；日常开发真正高频使用的约80-100个，先掌握本文第11节的高频TOP30即可覆盖大部分场景。

Q: 标签和元素有什么区别？

标签是用尖括号书写的标记，分开始标签与结束标签；元素则是开始标签、内容与结束标签组成的完整单元（据MDN Web Docs）。例如 是标签， 这是一段文字 才是一个完整的段落元素。

Q: div和span有什么区别？

div是块级无语义容器，默认独占一行；span是行内无语义容器，不会换行。两者都只是CSS样式挂载点，语义化实践中应优先使用header、nav、article等语义标签，把div和span留作最后手段。

Q: 怎么快速查标签用法？

最快捷的办法是把本页加入浏览器收藏夹随查随用；更权威的渠道是MDN Web Docs元素参考（含完整语法与浏览器兼容性）和w3school HTML标签参考手册。

Q: video标签怎么用？

用 即可播放；为兼容不同浏览器格式可用source子标签提供MP4、WebM多个来源；注意多数浏览器要求同时设置muted属性才允许自动播放（据MDN Web Docs）。

Q: main标签一个页面能用几次？

main标签表示文档的主体内容，每个页面只应使用一次（据MDN Web Docs），且不应嵌套在article、aside、footer、header或nav内部。

摘要：HTML标签是网页的构建砖块，HTML Living Standard官方索引收录了100多个元素（据W3C官方索引）。本文把html5标签大全按文档结构、语义化结构、文本内容、列表链接、多媒体、表格、表单、全局属性等13大类整理成速查手册，每个标签附作用说明与语法示例，并给出废弃标签提醒、高频TOP30清单与站长实战经验，写代码时随查随用。

一、html5标签大全——概述

任何网页，无论看起来多么复杂，最终都是由一层层标签搭建起来的。标签是HTML的核心语法单元：用尖括号包裹的标记名（如<p>、<div>），告诉浏览器"这里的内容是什么"。据W3C HTML Living Standard索引，当前HTML规范官方索引收录的元素数量已超过100个，覆盖了从文档骨架到表单交互的方方面面。

标签的写法只有三种形态：成对标签（开始标签+结束标签，如<p>内容</p>）、自闭合标签（如<br>、<hr>）、带属性的标签（如<a href="https://example.com">链接</a>）。属性以名="值"的形式写在开始标签内，为标签提供额外信息，这一规则对所有标签通用。

面对100多个标签，很多初学者第一反应是"背"。本文给出一条更省力的路径：按功能分类速查。同一个功能场景下的标签往往成群出现（比如做列表用ul/ol/li，做表格用table/tr/td），按类别记忆远比逐条硬背高效。下文按13大类逐一展开，每类都给出作用说明与最小可用示例。

二、文档结构标签

文档结构标签构成HTML页面的"骨架"，负责定义页面的整体框架、元信息与资源引入方式。这一组标签几乎出现在每一个网页中，是html5标签大全的基石（据MDN Web Docs元素参考）。

<!DOCTYPE html>：文档类型声明，必须写在第一行，告诉浏览器按HTML5标准解析页面。
<html>：根元素，包裹整个文档；其lang属性声明页面语言（如lang="zh-CN"），利于搜索引擎与翻译工具识别。
<head>：元数据容器，存放不被页面直接显示但影响解析的信息。
<body>：页面可见内容的唯一容器。
<title>：定义浏览器标签页标题，也是搜索引擎结果中显示的标题，SEO权重高。
<meta>：元信息，常用charset="UTF-8"声明字符编码、name="description"写描述、name="viewport"适配移动端。
<link>：引入外部资源，最常用rel="stylesheet"引入CSS文件。
<style>：在页面内嵌CSS样式。
<script>：引入或书写JavaScript代码。

一个最小的HTML5文档结构如下，这也是所有网页的通用模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档标题</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>这里是页面可见内容</p>
  <script src="app.js"></script>
</body>
</html>

注意script标签的放置位置：传统写法放在body末尾，避免阻塞页面渲染；现代写法可放在head中并加defer或async属性实现异步加载（据MDN Web Docs）。

三、语义化结构标签（HTML5核心）

语义化标签是HTML5最核心的升级。在HTML4时代，网页结构全靠div堆叠，机器读不懂页面各区域的含义；HTML5新增的一组语义标签，让页面结构"自报家门"。据MDN Web Docs元素参考，HTML5引入的语义化结构标签包括：

header

页眉/区块头部，放LOGO、标题、导航等引导性内容。

nav

导航区块，页面内主要链接的容器，语义优于div。

main

文档主体内容，一个页面只应出现一次（MDN明确要求）。

article

独立成篇的内容单元，如一篇博客、一条新闻、一条评论。

section

章节分组，用于把长内容切成有主题的区块。

aside

侧边栏/附加内容，与主内容相关但可独立存在。

footer

页脚/区块底部，放版权、联系信息、相关链接。

figure / figcaption

图表及其说明文字的组合，说明可放在图表前或后。

此外，HTML5还带来了三个实用的轻量级语义标签：details与summary实现原生折叠面板，无需JavaScript即可展开收起（据MDN Web Docs）；mark用于高亮标记文本；time用datetime属性标注机器可读的时间；address表示联系信息。

语义化对SEO的意义：搜索引擎爬虫与HTML4时代一样无法"看图"，但它们可以读标签。清晰的语义结构让搜索引擎更准确地理解"哪个区块是导航、哪段是正文、哪块是补充信息"，从而更合理地分配抓取权重、更准确地建立内容索引（据MDN Web Docs语义化指南）。对无障碍用户（屏幕阅读器）而言，语义标签还提供跳转导航能力。语义化典型骨架如下：

<header><nav>站点导航</nav></header>
<main>
  <article>
    <h1>文章标题</h1>
    <section>第一章</section>
    <section>第二章</section>
  </article>
  <aside>相关推荐</aside>
</main>
<footer>页脚信息</footer>

四、文本内容标签

文本是网页最基础的内容形态，HTML为此提供了完整的文本排版标签体系（据MDN Web Docs元素参考）：

标题：h1-h6六级标题，h1最重要、每页建议只用一个，层级从大到小递减。
段落与分隔：p段落；br强制换行；hr水平分隔线。
引用与代码：blockquote块级引用（可用cite属性注明出处URL）；pre保留空格与换行的预格式化文本；code行内代码。
强调与样式：strong表示重要（语义级加粗）、b仅视觉加粗；em表示强调、i仅斜体（如外来词、术语）；u下划线、s删除线、small小号字（如免责声明）、sub下标、sup上标。
无语义容器：span行内容器、div块级容器，专为CSS与JavaScript挂载服务。

div与span的对比是初学者最容易搞混的一组：div是块级元素，默认独占一行，宽度占满父容器；span是行内元素，不换行，只占内容所需宽度。两者的共同点是都不携带任何语义——所以语义化实践中应先问"有没有语义标签可用"，把div和span留作最后手段（据w3school标签参考手册）。

<h1>一级标题</h1>
<p>这是一个段落，包含<strong>重要文字</strong>
   和<em>强调文字</em>，还有<code>行内代码</code>。</p>
<blockquote cite="https://example.com/source">
  引用他人观点的大段文字。
</blockquote>
<pre>保留    空格    与换行</pre>
<p>化学式 H<sub>2</sub>O 与平方 x<sup>2</sup></p>
<div>块级容器</div><span>行内容器</span>

五、列表与链接标签

列表与链接是网页导航和信息组织的基础设施（据MDN Web Docs元素参考）：

ul无序列表 + li列表项：项目符号为圆点，用于菜单、特性清单。
ol有序列表 + li：自动编号，可用type属性切换数字（1）、字母（a/A）、罗马数字（i/I）样式。
dl描述列表 + dt术语 + dd描述：术语与解释的配对结构，如产品参数表。
a超链接：核心属性href（跳转地址）、target（_blank新窗口/标签页、_self当前页）、rel（nofollow不传递权重、noopener noreferrer安全隔离）。
nav导航容器：包裹站点主导航链接组。

关于a标签有一个重要的安全细节：据MDN Web Docs，当使用target="_blank"打开新页面时，建议同时添加rel="noopener noreferrer"，防止新页面通过window.opener反向操控原页面。这也是外链加rel="nofollow"之外的另一种常见安全写法。

<nav>
  <ul>
    <li><a href="shouye.html">首页</a></li>
    <li><a href="rumen-jiaocheng.html">入门教程</a></li>
  </ul>
</nav>
<ol type="a">
  <li>第一步</li>
  <li>第二步</li>
</ol>
<dl>
  <dt>html5</dt>
  <dd>超文本标记语言第五次重大修订</dd>
</dl>
<a href="https://www.huolieniao.cc/" target="_blank" rel="noopener noreferrer">火烈鸟站长知识库</a>

六、多媒体标签（HTML5新增）

多媒体能力是HTML5相对旧版的最大飞跃之一：旧版网页播放视频音频必须依赖Flash插件，HTML5让浏览器原生支持媒体播放（据MDN Web Docs媒体元素）。这一组标签是html5标签大全中"含金量"最高的部分：

img：图片。必写src（地址）与alt（替代文本）——alt不仅用于图片加载失败时的降级展示，也是搜索引擎理解图片内容、屏幕阅读器朗读图片的重要依据（据MDN Web Docs）；可选loading="lazy"实现懒加载。
video：视频播放。常用属性controls（显示控制条）、autoplay（自动播放）、muted（静音）、loop（循环）、poster（封面图）。注意浏览器自动播放策略：据MDN Web Docs，多数浏览器要求autoplay与muted同时设置才允许自动播放。
audio：音频播放，属性与video类似（controls、preload等）。
source：为video/audio提供多个格式来源（如MP4+WebM），浏览器自动选择第一个能播放的。
track：为视频添加字幕/说明轨道，如<track kind="subtitles" src="subs.vtt" srclang="zh">。
canvas：JavaScript驱动的2D绘图画布，图表、游戏、图像处理的基础。
svg：矢量图形，放大不失真，可直接内联在HTML中。
iframe：内嵌另一个页面，常用于地图、视频站外播放器。
picture：响应式图片容器，配合多个source按媒体条件（屏幕宽度等）选择最合适的图片（据MDN Web Docs）。

<video controls muted loop width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频标签。
</video>
<audio controls src="music.mp3"></audio>
<picture>
  <source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
  <source srcset="small.webp" type="image/webp">
  <img src="fallback.jpg" alt="示例图片">
</picture>

七、表格标签

表格用于展示二维结构化数据（据MDN Web Docs元素参考）。完整的表格由以下标签协作完成：

table：表格容器。
caption：表格标题，显示在表格上方。
thead：表头区，放列标题。
tbody：主体区，放数据行。
tfoot：表尾区，放合计等汇总行。
tr：行；th：表头单元格（默认加粗居中）；td：数据单元格。
colgroup + col：按列统一设置宽度等样式。

无障碍细节：表头单元格th应使用scope="col"或scope="row"声明作用范围，帮助屏幕阅读器把表头与数据正确关联（据MDN Web Docs）。

<table>
  <caption>2026年季度流量统计</caption>
  <colgroup>
    <col style="width:30%">
    <col style="width:35%">
    <col style="width:35%">
  </colgroup>
  <thead>
    <tr><th scope="col">季度</th><th scope="col">访问量</th><th scope="col">环比</th></tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>12000</td><td>+12%</td></tr>
    <tr><td>Q2</td><td>15000</td><td>+25%</td></tr>
  </tbody>
  <tfoot>
    <tr><td>合计</td><td>27000</td><td>-</td></tr>
  </tfoot>
</table>

八、表单标签

表单是与用户交互的核心通道：注册、登录、搜索、留言都靠它完成。据MDN Web Docs元素参考与w3school标签参考手册，HTML5表单体系的组成如下：

form：表单容器，action指定提交地址，method指定提交方式（GET/POST）。
input：最灵活的输入控件，HTML5新增了大量类型，总计20余种，常用的包括：text（单行文本）、email（邮箱）、password（密码）、number（数字，带步进）、date（日期选择）、color（取色器）、range（滑块）、file（文件）、radio（单选）、checkbox（多选）、tel（电话）、url（网址）、search（搜索框）、submit（提交按钮）、hidden（隐藏值）等。
label：为控件提供可点击的说明文字，for属性关联控件id，点击文字即可聚焦控件，提升易用性（据MDN Web Docs）。
select + option：下拉选择框。
textarea：多行文本域。
button：按钮，type分为submit/reset/button。
fieldset + legend：把相关控件分组并加组标题。
output：展示计算结果或脚本输出。
datalist：为输入框提供候选建议列表，配合input的list属性使用（据MDN Web Docs）。

<form action="/search" method="get">
  <fieldset>
    <legend>用户信息</legend>
    <p><label for="name">姓名：</label>
       <input type="text" id="name" name="name"></p>
    <p><label for="email">邮箱：</label>
       <input type="email" id="email" name="email" required></p>
    <p><label for="age">年龄：</label>
       <input type="number" id="age" name="age" min="1" max="120"></p>
    <p><label for="color">主题色：</label>
       <input type="color" id="color" name="color"></p>
    <p><label for="site">网站：</label>
       <input type="url" id="site" name="site" list="sites">
       <datalist id="sites">
         <option value="https://www.huolieniao.cc/">火烈鸟站长知识库</option>
       </datalist></p>
    <p>性别：<label><input type="radio" name="gender" value="m"> 男</label>
       <label><input type="radio" name="gender" value="f"> 女</label></p>
    <p><button type="submit">提交</button></p>
  </fieldset>
</form>

九、全局属性与常用属性

全局属性是"所有标签都能用"的属性，掌握它们等于给所有标签解锁了通用能力（据MDN Web Docs全局属性）：

id：元素的唯一标识，一个页面中必须唯一（据MDN Web Docs），用于CSS选择器、锚点跳转与JavaScript定位。
class：样式类名，可重复、可多个（空格分隔），配合CSS批量应用样式。
style：行内样式，优先级高但不利于维护，慎用。
title：悬停提示文字。
data-*：自定义数据属性（如data-id="3"），用于在HTML中存放业务数据供JavaScript读取（据MDN Web Docs）。
lang：声明元素语言，利于翻译工具与搜索引擎。
dir：文字方向，ltr（从左到右）/rtl（从右到左），阿拉伯语等语言需要。

HTML5还新增了三个全局属性：contenteditable（元素内容可编辑，true/false）、hidden（隐藏元素，相当于display:none）、draggable（元素可否拖拽，true/false）——三者都是纯属性写法，无需配合JavaScript即可产生基础效果（据MDN Web Docs）。

<div id="app" class="box card" data-user="10001" lang="zh-CN">
  可编辑区域：<span contenteditable="true">点我编辑</span>
</div>
<p hidden>这段被隐藏</p>
<p draggable="true">这段可拖拽</p>

十、已废弃标签提醒

注意：center、font、marquee、big、tt、strike、frame、frameset等HTML4时代的标签在HTML5中已被废弃（obsolete），新页面不应再使用——据w3school标签参考手册废弃标签列表与MDN Web Docs废弃元素列表，这些标签的功能已全部由CSS与新的HTML5标签替代。

center居中 → 用CSS的text-align:center或flex/grid布局。
font设置字体/颜色/字号 → 用CSS的font-family、color、font-size。
marquee跑马灯滚动 → 用CSS动画@keyframes实现。
big放大文字 → 用CSSfont-size。
strike/s删除线 → 保留s，用text-decoration:line-through。
frame/frameset框架页 → 用iframe或现代布局。
applet、acronym、basefont、dir等同样已废弃。

标签嵌套规则要点（据MDN Web Docs元素嵌套规范）：块级元素默认独占一行、可包含行内元素与其他块级元素；行内元素不能包含块级元素；p内不能嵌套div等块级标签；ul/ol的直接子元素只能是li；dl的直接子元素只能是dt/dd；table的结构需按thead→tbody→tfoot的顺序组织。此外，HTML5放宽了一条老规则：a标签内部现在可以包含块级元素（如<a><div>卡片</div></a>，据MDN Web Docs）。

十一、标签使用实战建议

100多个标签不必全记。根据日常开发场景统计，真正高频使用的标签集中在30个左右。下表是高频标签TOP30清单，覆盖了文档骨架、结构、文本、列表、媒体、表格与表单七大类，先吃透这30个，就能覆盖绝大多数页面开发需求：

类别	高频标签	用途
文档骨架	html / head / body / title / meta / link / script	页面框架与元信息
语义结构	header / nav / main / article / section / aside / footer	页面区域语义化
文本内容	h1-h6 / p / br / strong / em / span / div	标题、段落与强调
列表链接	ul / ol / li / a	列表与超链接
多媒体	img / video / audio / svg / iframe	图片、音视频与嵌入
表格	table / thead / tbody / tr / th / td	二维数据展示
表单	form / input / label / select / option / textarea / button	用户交互输入

语义化最佳实践：写结构时养成"先语义后样式"的习惯——导航用nav不用div，文章用article不用div，页脚用footer不用div。判断标准很简单：如果某个div承担了明确的"角色"（头部、导航、主内容、页脚），它就应该换成对应的语义标签。这不是教条：换上的每一个语义标签，都在降低搜索引擎与无障碍设备理解页面的成本。

另一个实战技巧是善用浏览器开发者工具：F12打开控制台，Elements面板中可以直接查看任意网站的标签结构，看到优秀的页面就"解剖"它——这是学习标签用法成本最低、见效最快的方式之一。

十二、站长实战经验与独特观点

独特观点一：html5标签大全不是背出来的，是查出来的。 即使是从业十年的前端工程师，也没人能把100多个标签的全部属性默写下来。正确姿势是：把本页加入浏览器收藏夹，写代码时随查随用，用得多了自然就记住了。查得越勤，记得越快——把"背诵负担"转化为"查阅习惯"，才是站长效率最高的学习方式。

独特观点二：HTML5标签"语义优先"原则。 选标签前先问自己："这个标签表达什么含义？"——nav表达"这里是导航"，article表达"这是一篇独立文章"，time表达"这是一个时间"。只有当没有任何语义标签匹配时，才退而使用div和span这两个"万能兜底"。坚持这个原则写出来的页面，搜索引擎理解成本低、维护者阅读成本也低，是真正的"一次编写、长期受益"。

结合本站8页内容体系来看，html5标签大全（本页）解决"页面有哪些零件"的问题，CSS3基础解决"零件怎么打扮"的问题，项目案例解决"零件怎么组装成完整作品"的问题——三者环环相扣。建议站长们学完本页高频TOP30后，立刻打开一个真实项目练手，遇到不认识的标签再回到本页查询，形成"查询—使用—记忆"的闭环。

最后提醒一个容易被忽略的检查环节：写完页面后用W3C官方验证器（validator.w3.org）跑一遍标记校验，它会自动指出标签未闭合、属性写错、废弃标签残留等低级错误——这是保证HTML质量、避免后续SEO与兼容性隐患的免费体检工具。

十三、html5标签常见问题FAQ

Q1：html5有多少个标签？

HTML Living Standard官方索引收录了100多个元素（据W3C HTML Living Standard索引），MDN Web Docs元素参考列出的元素数量同样超过100个；日常开发真正高频使用的约80-100个，先掌握本文高频标签TOP30即可覆盖大部分场景。

Q2：标签和元素有什么区别？

标签是尖括号书写的标记，分开始标签与结束标签；元素是开始标签、内容与结束标签组成的完整单元（据MDN Web Docs）。例如<p>是标签，<p>这是一段文字</p>才是完整的段落元素。

Q3：div和span有什么区别？

div是块级无语义容器，默认独占一行；span是行内无语义容器，不换行。两者都只是CSS与JavaScript的挂载点，语义化实践中应优先使用语义标签，把div和span留作最后手段。

Q4：HTML5废弃了哪些标签？

center、font、marquee、big、tt、strike、frame、frameset等HTML4标签在HTML5中已废弃（据w3school标签参考手册废弃标签列表），功能由CSS的text-align、font-family、动画及video等新标签替代，新页面不应再使用。

Q5：怎么快速查标签用法？

最快捷的办法是把本页加入收藏夹随查随用；更权威的渠道是MDN Web Docs元素参考（含完整语法、示例与浏览器兼容性）与w3school标签参考手册（中文速查）。

Q6：语义化标签对SEO有帮助吗？

有帮助。header、nav、main、article、section等语义化标签帮助搜索引擎与无障碍设备理解页面结构（据MDN Web Docs）；它虽不是直接的排名因素，但清晰的结构利于内容被正确理解、索引与展示，是SEO的基础工程之一。

Q7：video标签怎么用？

最简写法是<video src="movie.mp4" controls></video>；为兼容不同浏览器格式，可用source子标签提供MP4、WebM多个来源；注意多数浏览器要求同时设置muted属性才允许自动播放（据MDN Web Docs）。

Q8：main标签一个页面能用几次？

main标签表示文档的主体内容，每个页面只应使用一次（据MDN Web Docs），且不应嵌套在article、aside、footer、header或nav内部。本文这个页面从<main>开始的正文结构，就是标准示范。