将 HTML 元素按功能进行分组。先简单会汇总下，熟悉的放前面。
根元素:<html> 文档元数据:<link>、<meta>、<style>、<style> 内容分区:<header>、<nav>、 <section>、<aside> 、<footer> 、<h1>~<h6> 、<article> 、<address>、<hgroup> 文本内容:<main>、<p>、<p>、<pre class="brush:php;toolbar:false">、<ol>、 <ul>、<li>、<dl> 、<dt>、<dd>、<figure> 、<figcaption>、<blockquote> 、<hr> 内联文本语义:<span>、<a>、<strong>、<em>、<q>、<br>、<mark>、<code>、<abbr>、<b>、<bdi>、<bdo>、<sub>、<sup>、<time>、<i>、<u>、<cite>、<data>、<kbd>、<nobr>、<s>、<samp>、<tt>、<var>、<wbr>、<rp>、<rt>、<rtc>、<ruby> 图片和多媒体:<img><audio> <video><track><map><area> 内嵌内容:<iframe>、<embed>、<object> 、<param>、<picture>、<source> 脚本:<canvas>、<noscript>、<script> 编辑标识:<del>、<ins> 表格内容:<table>、<caption>、<thead>、<tbody>、<tfoot>、<tr>、、<col><colgroup>、<th>、<td> 表单:<form> 、<input>、<textarea> 、<label>、<button>、<datalist>、<fieldset>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select> 交互元素<details>、<summary>、<dialog>、<menu>Web 组件:<slot>、<template> 过时的和弃用的元素:<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>
1. 根元素
<html> HTML文档的根
2. 文档元数据
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎， 浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
<link> 链接<meta> 元数据信息，(<base>, <link>, <script>, <style> 或 <title>不能表示的元数据信息) <style> 样式信息 <style> 文档标题
3. 内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
<header> 表示一组引导性的帮助 <nav> 导航 <section> 表示文档中的一个区域（或节），通过是否含一个标题作为子节点来辨识<section> <aside> 表示与其余页面无关的内容部分 <footer> 表示最近一个章节内容或者根节点元素的页脚<h1>~<h6> 标题 <article> 表示文档、页面、应用或网站中的独立结构 <address> 地址信息 <hgroup> 代表一个段的标题
4. 文本内容
使用 HTML 文本内容元素来组织在开标签 和闭标签 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。
<main> 文档<body>或应用的主体部分 <div> 文档分区元素， 通用型流内容容器 <p> 段落 <pre class="brush:php;toolbar:false"> 预定义格式文本 <ol> 有序列表 <ul> 无序列表 <li> 列表条目元素 <dl> 描述列表元素 <dt>术语定义元素 <dd> 描述元素，描述列表 (<dl>) 的子元素，<dd>与 <dt> 一起用。 <figure> 代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用<figcaption>图片说明/标题，于描述其父节点 <figure> 元素里的其他数据 <blockquote> HTML 块级引用元素<hr>表示段落级元素之间的主题转换，视觉上看是水平线
5. 内联文本语义
使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。
<kbd> 表示用户输入 <span> 通用行内容器 <a> 超链接 <strong> 粗体显示 <em> 标记出需要用户着重阅读的内容，可通过嵌套加深着重程度 <q> 短的引用文本 <br> 换行 <mark> 代表突出显示的文字，可以用来显示搜索引擎搜索后关键词。 <code> 呈现一段计算机代码 <abbr> 缩写，并可选择提供一个完整的描述 <b>提醒注意，样式和粗体类似（不要用于显示粗体，用css font-weight来创建粗体） <bdi> 双向隔离元素 <bdo> 双向覆盖元素 <sub> 排低文本 <sup> 排高文本 <time> 时间 <i> 区分普通文本的一系列文本，内容通常以斜体显示 <u> 使文本在其内容的基线下的一行呈现下划线 <cite> 表示一个作品的引用 <data> 将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的，一定要使用 <time>。 <dfn> 表示术语的一个定义 <kbd> 表示用户输入 <nobr> 阻止文本自动拆分成新行，不应该使用，应该使用css属性 <s> 删除线，提倡使用 <del> 和 <ins> 元素 <samp> 标识计算机程序输出 <tt> 电报文本元素 <var> 表示变量的名称，或者由用户提供的值 <wbr> 一个文本中的位置，其中浏览器可以选择来换行<rp><rt><rtc><ruby>
6. 图片和多媒体
HTML 支持各种多媒体资源，例如图像，音频和视频。 <img> 图片 <audio> 音频内容 <video> 视频内容 <track> 被当作媒体元素— <audio> 和 <video>的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕。 <map> 与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域). <area> 在图片上定义一个热点区域，可以关联一个超链接。 <area>元素仅在<map>元素内部使用。
7. 内嵌内容
除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。
<iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。 <embed> 将外部内容嵌入文档中的指定位置 <object> 表示引入一个外部资源 <param> 定义了 <object>的参数<picture> 容器，用来为其内部特定的 <img> 元素提供多样的 <source> 元素。<source> 资源
8. 脚本
为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素支持此功能。
<canvas> 通过脚本（通常是JavaScript）绘制图形<noscript> 替代未执行脚本<script> 用于嵌入或引用可执行脚本
9. 编辑标识
这些元素能标示出某个文本被更改过的部分。
<del> 表示一些被从文档中删除的文字内容<ins> 定义已经被插入文档中的文本
10. 表格内容
这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。
<table> 表格 <caption> 表格的标题，通常作为 <table> 的第一个子元素出现 <thead> 表格页眉 <tbody> 表格主体 <tfoot> 表格页脚<tr> 行<col> 列， 通常位于<colgroup>元素内 <colgroup> 表格列组 <th> 表头<td> 表格单元
11. 表单
HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。
<form> 表单 <input> 输入域 <textarea> 多行文本域 <label> 标题 <button> 按钮 <datalist> 包含了一组<option>元素,这些元素表示其它表单控件可选值<fieldset> 一组相关的表单元素，并使用外框包含起<legend> 表示它的父元素<fieldset>的内容的标题 <meter> 显示已知范围的标量值或者分数值 <optgroup> 一个 <select> 元素中的一组选项 <option> 用于定义在<select>, <optgroup> 或<datalist> 元素中包含的项 <output> 表示计算或用户操作的结果 <progress> 进度条 <select> 选项菜单
12. 交互元素
HTML 提供了一系列有助于创建交互式用户界面对象的元素。
<details><summary> 用作 一个<details>元素的一个内容的摘要，标题或图例。<dialog> 对话框<menu> 菜单
13. Web 组件
Web 组件是种近似 HTML（HTML-related） 的技术，这使得它能够，从本质上讲，创建和使用自定义元素，就好像它是普通的 HTML。此外，你甚至可以创建自定义版本的标准 HTML 元素。（注意：规范还没有确定）
<slot> web组件技术的一部分，slot是web组件的一个占位符<template> 用于保存客户端内容的机制
14. 过时的和弃用的元素
<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>
15. 参考链接
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
php中文网在线手册 http://www.php.cn/course/27.html
以上是html标签分类的详细内容。更多信息请关注PHP中文网其他相关文章！
为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AMhtmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能
Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AMalt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。
HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AMHTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。
如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。
HTML属性的目的是什么？May 07, 2025 am 12:01 AMhtmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment
您如何在HTML中创建列表？May 06, 2025 am 12:01 AMtoCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。
HTML行动：网站结构的示例May 05, 2025 am 12:03 AMHTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。
您如何将图像插入HTML页面？May 04, 2025 am 12:02 AMtoinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
WebStorm Mac版
好用的JavaScript开发工具
SublimeText3汉化版
中文版，非常好用
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
