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

幻夢星雲

发布时间：2025-08-12 18:57:01

830人浏览过

来源于php中文网

原创

html标签是用于标记元素的符号，如<p>、<h1>等，分为开始标签和结束标签，而html元素是由开始标签、内容和结束标签组成的完整结构单元，如<p>这是一段文字。</p>即为一个段落元素；2. 某些元素为空元素，如<img>，仅有开始标签，通过属性携带信息，无需结束标签；3. html元素在网页中承担语义化、布局基础、可访问性和内容层级组织的作用，语义化标签如<header>、<nav>、<main>等提升了代码可读性、seo和无障碍访问；4. 正确使用html元素需坚持语义化原则，减少<div>滥用，合理使用标题层级，优化图片alt属性和懒加载，提供媒体controls，增强表单label关联，并避免过度嵌套，以提升页面性能与可访问性。

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

HTML元素是构成网页内容的基本单位，而HTML标签则是用来标记这些元素的符号。理解它们是构建任何网页的基石。常见的HTML标签非常多，比如用于段落的

<p>

，标题的

<h1>

到

<h6>

，链接的

<a>

，以及插入图片的

<img>

等。

HTML元素可以被看作是网页内容的“积木”。一个完整的HTML元素通常由一个开始标签、一些内容以及一个结束标签组成。比如，

<p>这是一段文字。</p>

，其中

<p>

是开始标签，

</p>

是结束标签，“这是一段文字。”是内容，整个结构就是一个

（段落）元素。有些元素是“空元素”，它们没有内容，也就不需要结束标签，例如

<img src="image.jpg" alt="描述">

，它只有开始标签，但仍然是一个完整的

img

元素，因为它通过属性（

src

和

alt

）携带了所有必要的信息。

在实际开发中，我们使用的HTML标签种类繁多，它们各自承担着不同的职责：

立即学习“前端免费学习笔记（深入）”；

结构性标签: 像
```
<html>
```
定义了整个文档，
```
<head>
```
包含了元数据，
```
<body>
```
则承载了所有可见内容。
```
<div>
```
和
```
<span>
```
是通用的容器，前者是块级元素，后者是行内元素，它们常用于布局和样式化，但应尽量配合语义化标签使用。
文本内容标签:
```
<h1>
```
到
```
<h6>
```
用于不同层级的标题，
```
<p>
```
用于段落，
```
<strong>
```
表示重要文本，
```
<em>
```
表示强调，
```
<br>
```
用于换行，
```
<hr />
```
用于水平线。
链接与图像标签:
```
<a>
```
用于创建超链接，
```
<img>
```
用于嵌入图片。
列表标签:
```
<ul>
```
用于无序列表，
```
<ol>
```
用于有序列表，
```
<li>
```
是列表项。还有
```
<dl>
```
、
```
<dt>
```
、
```
<dd>
```
用于定义列表。
表单标签:
```
<form>
```
用于创建表单，
```
<input>
```
用于各种输入控件（文本框、按钮、复选框等），
```
<textarea>
```
用于多行文本输入，
```
<button>
```
用于按钮，
```
<select>
```
和
```
<option>
```
用于下拉菜单，
```
<label>
```
用于关联表单控件。
媒体标签:
```
<audio>
```
和
```
<video>
```
分别用于嵌入音频和视频内容，
```
<source>
```
用于指定媒体源。
语义化标签 (HTML5新增): 这些标签的出现极大地提升了网页的可读性和可维护性，也对搜索引擎优化和无障碍访问有巨大帮助。例如
```
<header>
```
（页眉），
```
<nav>
```
（导航），
```
<main>
```
（页面主要内容），
```
<article>
```
（独立文章内容），
```
<section>
```
（文档中的独立区块），
```
<aside>
```
（侧边栏内容），
```
<footer>
```
（页脚），
```
<figure>
```
和
```
<figcaption>
```
（图片或代码块及其标题），
```
<time>
```
（时间）。

HTML元素与标签有何区别？

在前端开发里，"HTML标签"和"HTML元素"这两个词经常被混用，但这其实是个小小的误区，它们代表着不同的概念。我个人觉得，理解这个区别就像理解一个乐谱上的音符和整个乐句的关系。标签是那些用来标记内容的“音符符号”，而元素则是那些被演奏出来的、有意义的“旋律片段”，包含了符号本身、它们所包裹的内容以及所有附加的属性。

具体来说，HTML标签指的是尖括号

<>

包围起来的关键词，比如

<p>

、

<img>

、

</a>

。它们是语法上的标记，用于指示浏览器如何解析和渲染内容。我们通常会遇到开始标签（如

<p>

）和结束标签（如

</p>

）。而像

<img>

这样的空元素，它只有开始标签，没有对应的结束标签。

HTML元素则是一个更宽泛的概念，它代表着从开始标签到结束标签之间的所有内容，包括开始标签本身、所有的属性、标签之间的文本内容，以及嵌套在其中的其他元素。例如，

<h1>我的标题</h1>

中，

<h1>

是开始标签，

</h1>

是结束标签，“我的标题”是内容，整个结构就是一个

h1

元素。再比如，

<a href="https://example.com">访问示例网站</a>

，

<a href="https://example.com">

和

</a>

是标签，

href

是

元素的属性，“访问示例网站”是内容，整个就是一个

元素。简单来说，元素是标签所定义的一个完整、有意义的结构单元。

HTML元素在网页结构中扮演什么角色？

HTML元素在网页结构中扮演的角色，远不止是简单地显示文字和图片那么简单。在我看来，写HTML就像搭乐高。每一块砖（元素）都有它的形状和颜色，关键在于你如何组合它们，让最终的结构既稳固又富有意义。如果只用

div

，那就像用一堆灰色方块搭房子，虽然能搭起来，但谁知道哪里是门哪里是窗呢？

核心来说，HTML元素主要在以下几个方面构建网页的“骨架”：

语义化: 这是HTML5时代一个非常重要的概念。过去我们可能大量使用
```
<div>
```
来构建页面布局，然后通过CSS来赋予它们样式和意义。但现在，有了
```
<header>
```
、
```
<nav>
```
、
```
<main>
```
、
```
<article>
```
、
```
<section>
```
、
```
<footer>
```
等语义化标签，我们就可以更清晰地告诉浏览器、搜索引擎和辅助技术（如屏幕阅读器）每个区块内容的实际含义。例如，
```
nav
```
元素明确表示这是一段导航链接，而不是一个普通的
```
div
```
。这种语义上的清晰性对于搜索引擎优化（SEO）和提升网页的可访问性至关重要。
文档流与布局: 每个HTML元素都有其默认的显示类型，比如块级元素（
```
display: block;
```
，如
```
p
```
,
```
div
```
,
```
h1
```
）会独占一行，而行内元素（
```
display: inline;
```
，如
```
span
```
,
```
a
```
,
```
img
```
）则会与相邻内容在同一行显示。这种默认行为构成了网页的“文档流”，决定了元素在页面上的排列顺序和占据的空间。虽然我们最终会用CSS来精细控制布局，但HTML元素的天然属性是布局的基础。

ChatDOC
ChatDOC是一款基于chatgpt的文件阅读助手，可以快速从pdf中提取、定位和总结信息

下载
可访问性（Accessibility）: 正确使用HTML元素是构建无障碍网页的关键。屏幕阅读器等辅助技术会解析HTML结构来理解页面内容，并将其传达给视障用户。例如，
```
<img>
```
标签的
```
alt
```
属性提供了图片的文字描述，
```
<label>
```
标签与
```
<input>
```
元素关联可以帮助用户更好地理解表单字段。语义化标签也让屏幕阅读器能够更有效地导航页面，比如直接跳到
```
main
```
内容区或
```
nav
```
导航区。
内容组织与层级: 通过
```
<h1>
```
到
```
<h6>
```
定义标题层级，
```
<ol>
```
和
```
<ul>
```
组织列表，
```
<table>
```
组织表格数据，HTML元素自然地构建了内容的层级结构。这种结构不仅让内容在视觉上更易读，也帮助搜索引擎理解页面的主题和重点。

如何正确使用HTML元素以优化页面性能和可访问性？

在我看来，性能和可访问性不是什么高深莫测的魔法，更多的是一种习惯和责任。你写的每一行HTML，都可能影响到用户能否顺畅地访问你的内容，甚至决定了你的网站在搜索引擎眼中的“地位”。这就像盖房子，地基打得好，房子才结实，而且要考虑到所有住户的需求，包括那些行动不便的。

要正确使用HTML元素来优化页面性能和可访问性，我们可以从几个方面入手：

坚持语义化HTML:
- 减少
  div
  滥用: 尽可能使用HTML5引入的语义化标签，如
```
<header>
```
  、
```
<nav>
```
  、
```
<main>
```
  、
```
<article>
```
  、
```
<section>
```
  、
```
<aside>
```
  、
```
<footer>
```
  等，而不是一味地使用
```
<div>
```
  。这不仅让代码更清晰易懂，也为搜索引擎和辅助技术提供了更丰富的上下文信息。
- 正确使用标题标签:
```
<h1>
```
  到
```
<h6>
```
  应该按照内容的逻辑层级来使用，而不是仅仅为了改变字体大小。一个页面通常只有一个
```
<h1>
```
  ，代表页面最主要的主题。
优化图片和媒体元素:
- alt
  属性必不可少:
```
<img>
```
  标签的
```
alt
```
  属性是提升可访问性的基石。它为图片提供了替代文本，当图片无法加载或用户使用屏幕阅读器时，这段文本能描述图片内容。对于装饰性图片，
```
alt=""
```
  （空字符串）可以告诉屏幕阅读器忽略它。
- loading="lazy"
  : 对于非首屏的图片和
```
<iframe>
```
  ，使用
```
loading="lazy"
```
  属性可以延迟加载这些资源，直到它们进入视口附近，从而显著提高页面首次加载速度。
- 响应式图片: 使用
```
<picture>
```
  元素和
```
<img>
```
  标签的
```
srcset
```
  属性，可以根据用户的设备屏幕大小和分辨率提供不同尺寸或格式的图片，减少不必要的带宽消耗。
- controls
  属性:
```
<video>
```
  和
```
<audio>
```
  标签应包含
```
controls
```
  属性，为用户提供播放、暂停、音量控制等标准媒体播放器控件，提升用户体验和可访问性。
增强表单可访问性:
- label
  与
  input
  关联: 始终使用
```
<label>
```
  标签来关联表单控件，并通过
```
for
```
  属性与
```
input
```
  的
```
id
```
  匹配。这样，点击标签文本就能激活对应的输入框，对鼠标用户和使用屏幕阅读器的用户都非常友好。
```
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
```
- 提供反馈信息: 使用
```
<fieldset>
```
  和
```
<legend>
```
  来组织相关的表单控件组，使用
```
<p>
```
  或
```
<span>
```
  提供错误信息，并确保这些信息是可访问的。
注意链接和按钮的语义:
- <a>
  用于导航，
  <button>
  用于操作: 如果是跳转到另一个页面或资源，用
```
<a>
```
  标签。如果是触发某个JavaScript函数或提交表单，用
```
<button>
```
  标签。避免滥用
```
div
```
  或
```
span
```
  模拟按钮或链接，因为它们缺乏原生的键盘交互和语义。
减少不必要的嵌套和DOM深度:
- 虽然现代浏览器渲染能力很强，但过于深层的DOM结构（即元素嵌套层级过多）仍然可能对性能造成轻微影响，尤其是在进行CSS样式计算和JavaScript DOM操作时。尽量保持HTML结构扁平化，减少不必要的
```
div
```
  嵌套。