什么是HTML标签？常见的HTML标签有哪些？

林译川

2026-10-31 • 👁 0人浏览过

html 标签是构建网页的基础，用于定义内容结构和显示方式。1. html标签是用尖括号包围的预定义关键词，通常成对出现，如和，也有自闭合标签如
和。2. 常见标签包括（根元素）、（元数据容器）、（页面标题）、<body>（可见内容）、<h1>-<h6>（标题）、<p>（段落）、<a>（超链接）、（图像）、<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）、<div>（块级分区）、<span>（内联样式化）、<table>（表格）、<tr>（表格行）、<td>（单元格）、<form>（表单）、<input>（输入字段）、<button>（按钮）、<script>（脚本）和<style>（样式定义）。3. 标签可包含属性，以名称/值对形式出现，如name="value"，并置于开始标签中，常用属性有class（类名）、id（唯一标识）、style（内联样式）、title（悬停提示）、href（链接地址）、src（资源路径）和alt（替代文本）。4. 正确嵌套规则为“先开后关，后开先关”，例如<p>this is a <strong>paragraph</strong> with <em>emphasis</em>.</p>是正确的，而<p>this is a <strong>paragraph with <em>emphasis</strong>.</p>是错误的，因标签交叉关闭。5. 某些标签有内容限制，如<head>仅包含元数据标签，<div>为块级元素占据整行，<span>为内联元素仅占内容空间。理解标签用途、属性用法及嵌套规则是编写有效html的关键，通过持续练习和查阅文档可不断提升熟练度。 HTML标签是构建网页的基石，它们告诉浏览器如何显示内容。简单来说，标签就像是包裹着文字、图片或其他元素的“盒子”，浏览器会根据这些“盒子”的指示来呈现网页。 HTML标签是预定义的关键词，用尖括号括起来，例如 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><html></code></div> 、 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div> 、 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><body></code></div> 、 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p></code></div> 等。它们通常成对出现，一个开始标签和一个结束标签，结束标签在开始标签的前面加上一个斜杠，例如 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p></code></div> 和 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></p></code></div> 。有些标签是自闭合的，例如 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><br></code></div> 和 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 。常见的HTML标签及其用途：立即学习 “ 前端免费学习笔记（深入） ”； <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><html></code></div> : 根元素，包含整个HTML页面。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div> : 包含文档的元数据，例如标题、字符集、样式表等。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div> : 定义浏览器工具栏中的标题。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><body></code></div> : 包含可见的页面内容。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h1></code></div>-<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h6></code></div> : 定义标题， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h1></code></div> 是最重要的标题， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h6></code></div> 是最不重要的标题。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p></code></div> : 定义段落。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><a></code></div> : 定义超链接，用于链接到其他页面或资源。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> : 定义图像。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><ul></code></div> : 定义无序列表。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><ol></code></div> : 定义有序列表。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><li></code></div> : 定义列表项。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div> : 定义文档中的一个区域或节。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><span></code></div> : 定义内联元素，用于对文本进行样式化。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><table></code></div> : 定义表格。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><tr></code></div> : 定义表格中的行。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><td></code></div> : 定义表格中的单元格。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><form></code></div> : 定义HTML表单，用于收集用户输入。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><input></code></div> : 定义输入字段，用于收集用户输入。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><button></code></div> : 定义按钮。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><script></code></div> : 定义客户端脚本，例如JavaScript。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><style></code></div> : 定义文档的样式信息。 HTML标签的属性是什么？如何使用？ HTML标签可以拥有属性，属性提供关于元素的附加信息。属性总是以名称/值对的形式出现，例如 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">name="value"</code></div> 。属性总是添加到开始标签中。举个例子， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 标签的 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div> 属性指定图像的URL： <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 这里， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div> 是属性名， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">image.jpg</code></div> 是属性值。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">alt</code></div> 属性提供图像的替代文本，当图像无法显示时，会显示这段文本。常见的属性包括： Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">class</code></div> : 指定元素的类名，用于CSS样式化。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">id</code></div> : 指定元素的唯一ID，用于CSS样式化和JavaScript操作。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">style</code></div> : 直接在元素上应用CSS样式。不推荐过度使用，因为这会使代码难以维护。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">title</code></div> : 指定元素的标题，当鼠标悬停在元素上时，会显示标题。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">href</code></div> : 用于 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><a></code></div> 标签，指定链接的目标URL。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div> : 用于 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 标签，指定图像的URL。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">alt</code></div> : 用于 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 标签，指定图像的替代文本。使用属性很简单，只需在开始标签中添加属性名和属性值即可。多个属性之间用空格分隔。如何正确嵌套HTML标签？ HTML标签的嵌套规则非常重要，错误的嵌套会导致页面显示异常甚至无法解析。简单的说，就是“先开后关，后开先关”。正确的嵌套： <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p>This is a <strong>paragraph</strong> with <em>emphasis</em>.</p></code></div> 错误的嵌套： <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p>This is a <strong>paragraph with <em>emphasis</strong>.</p></code></div> 在上面的错误示例中， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><strong></code></div> 标签在 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><em></code></div> 标签之前关闭，这是不允许的。浏览器可能会尝试纠正这种错误，但结果可能不是你想要的。需要注意的是，某些标签只能包含特定的其他标签。例如， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div> 标签只能包含元数据标签，如 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div> 、 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta></code></div> 、 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><style></code></div> 等。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><body></code></div> 标签包含可见的页面内容。此外， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div> 和 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><span></code></div> 标签通常用于组织和样式化内容，它们可以包含几乎任何其他HTML标签。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div> 是块级元素，会占据一整行，而 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><span></code></div> 是内联元素，只占据它需要的内容空间。总而言之，理解HTML标签的用途、属性和嵌套规则是编写有效HTML代码的关键。多练习，多查阅文档，你会越来越熟练。 </div>  <nav class="xjpbg-article-nav" aria-label="文章导航"> <a href="http://www.xjpbg.com/bg/33611.html" class="xjpbg-article-nav-link xjpbg-article-nav-prev"> <span>‹</span> <div> <div class="xjpbg-article-nav-label">上一篇</div> <div class="xjpbg-article-nav-title">Codeforces Round #277.5 (Div. 2) 解题报告_html/css_WEB-ITnose</div> </div> </a> <a href="http://www.xjpbg.com/bg/33645.html" class="xjpbg-article-nav-link xjpbg-article-nav-next"> <div> <div class="xjpbg-article-nav-label">下一篇</div> <div class="xjpbg-article-nav-title">CSS如何使用Sass简化边框半径定义_通过Mixin统一圆角样式</div> </div> <span>›</span> </a> </nav> </div> </article>  <section class="xjpbg-content-section" style="margin-top: 20px;"> <h2 class="xjpbg-widget-title" style="margin-bottom: 20px;">相关文章</h2> <ul class="xjpbg-article-list"> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33611.html" class="xjpbg-article-link">Codeforces Round #277.5 (Div. 2) 解题报告_html/css_WEB-ITnose</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33591.html" class="xjpbg-article-link">jquery实现ajax提交form表单的方法总结</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33550.html" class="xjpbg-article-link">为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33546.html" class="xjpbg-article-link">jQuery统计指定子元素数量的方法_jquery</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33525.html" class="xjpbg-article-link">如何利用Vue表单处理实现表单的数据筛选与过滤</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33512.html" class="xjpbg-article-link">javascript一点特殊用法_javascript技巧</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33456.html" class="xjpbg-article-link">CSS focus伪类在表单中的应用_提升输入框的视觉焦点</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33645.html" class="xjpbg-article-link">CSS如何使用Sass简化边框半径定义_通过Mixin统一圆角样式</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33646.html" class="xjpbg-article-link">Chrome开发者工具怎么调试HTML_Chrome调试HTML实战指南</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33656.html" class="xjpbg-article-link">如何正确使用 Web Storage 持久化 Vue 中的布尔状态</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> </ul> </section> </div>  <aside class="xjpbg-sidebar xjpbg-sidebar-right" aria-label="侧边栏">  <div class="xjpbg-widget"> <h3 class="xjpbg-widget-title">推荐阅读</h3> <div class="xjpbg-recommend-grid"> <a href="http://www.xjpbg.com/bg/33656.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="如何正确使用 Web Storage 持久化 Vue 中的布尔状态"> </div> <div class="xjpbg-recommend-title">如何正确使用 Web Storage 持久化 Vue 中的布尔状态</div> </a> <a href="http://www.xjpbg.com/bg/33646.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="Chrome开发者工具怎么调试HTML_Chrome调试HTML实战指南"> </div> <div class="xjpbg-recommend-title">Chrome开发者工具怎么调试HTML_Chrome调试HTML实战指南</div> </a> <a href="http://www.xjpbg.com/bg/33645.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="CSS如何使用Sass简化边框半径定义_通过Mixin统一圆角样式"> </div> <div class="xjpbg-recommend-title">CSS如何使用Sass简化边框半径定义_通过Mixin统一圆角样式</div> </a> <a href="http://www.xjpbg.com/bg/33615.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="什么是HTML标签？常见的HTML标签有哪些？"> </div> <div class="xjpbg-recommend-title">什么是HTML标签？常见的HTML标签有哪些？</div> </a> </div> </div>  <div class="xjpbg-widget"> <h3 class="xjpbg-widget-title">最新文章</h3> <ul class="xjpbg-article-list"> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33656.html" class="xjpbg-article-link">如何正确使用 Web Storage 持久化 Vue 中的布尔状态</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33646.html" class="xjpbg-article-link">Chrome开发者工具怎么调试HTML_Chrome调试HTML实战指南</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33645.html" class="xjpbg-article-link">CSS如何使用Sass简化边框半径定义_通过Mixin统一圆角样式</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33615.html" class="xjpbg-article-link">什么是HTML标签？常见的HTML标签有哪些？</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33611.html" class="xjpbg-article-link">Codeforces Round #277.5 (Div. 2) 解题报告_html/css_WEB-ITnose</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33599.html" class="xjpbg-article-link">深入CSS3 动画效果的总结详解</a> <div class="xjpbg-article-meta">2026-10-31</div> </li> </ul> </div>  <div class="xjpbg-widget"> <h3 class="xjpbg-widget-title">热门标签</h3> <div class="xjpbg-article-tag-list"> <a href="http://www.xjpbg.com/tag/7186" class="xjpbg-article-tag-item">html标签</a> <a href="http://www.xjpbg.com/tag/1698" class="xjpbg-article-tag-item">浏览器</a> <a href="http://www.xjpbg.com/tag/1668" class="xjpbg-article-tag-item">css</a> <a href="http://www.xjpbg.com/tag/1653" class="xjpbg-article-tag-item">html</a> <a href="http://www.xjpbg.com/tag/1648" class="xjpbg-article-tag-item">工具</a> </div> </div> </aside> </div> </div> </main>  <footer class="xjpbg-footer"> <div class="xjpbg-container"> <div class="xjpbg-footer-links" style="justify-content: center;"> <a href="http://www.xjpbg.com/22.html" class="xjpbg-footer-link">免责声明</a> <a href="http://www.xjpbg.com/23.html" class="xjpbg-footer-link">关于我们</a> <a href="http://www.xjpbg.com/24.html" class="xjpbg-footer-link">联系我们</a> <a href="http://www.xjpbg.com/25.html" class="xjpbg-footer-link">投诉删除</a> <a href="http://www.xjpbg.com/26.html" class="xjpbg-footer-link">投稿须知</a> </div> <div class="xjpbg-footer-copyright" style="text-align: center; margin-top: 20px;"> Copyright 2026 新派编程网版权所有 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025064387号</a> </div> <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div> </div> </footer>  <button class="xjpbg-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>  <script src="http://www.xjpbg.com/static/v6/js/common.js"></script> <div class="hide"> </div> </body> </html>