一文速通HTML：常见的 HTML 元素及其属性详解

最新推荐文章于 2025-08-18 10:34:20 发布

原创最新推荐文章于 2025-08-18 10:34:20 发布 · 3.2k 阅读

49 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端 #javascript

HTML 专栏收录该内容

1 篇文章

订阅专栏

该文章已生成可运行项目，

常见的 HTML 元素及其属性详解

在 Web 开发中，HTML（HyperText Markup Language）是构建网页的基础语言。了解常见的 HTML 元素及其属性，对于创建结构良好、语义清晰、可访问性高的网页至关重要。本文将详细介绍常见的 HTML 元素及其属性。

一、基础文本元素

1. `<html>` 元素

定义

<html> 元素是所有 HTML 文档的根元素，包含了整个页面的内容。

示例

<!DOCTYPE html>
<html lang="en">
  <!-- 文档内容 -->
</html>

常见属性

lang：指定文档的语言。

2. `<head>` 元素

定义

<head> 元素包含了关于文档的信息（元数据），如标题、样式表、脚本等。

示例

<head>
  <title>网页标题</title>
  <meta charset="UTF-8">
</head>

常见属性

profile（已废弃）：指定元数据的 URL。

3. `<title>` 元素

定义

<title> 元素用于定义文档的标题，显示在浏览器的标签栏或标题栏中。

示例

<title>我的网页</title>

注意事项

每个文档只能有一个 <title> 元素，且必须是 <head> 的子元素。

4. `<body>` 元素

定义

<body> 元素包含了文档的可见内容，即用户在浏览器中看到的部分。

示例

<body>
  <!-- 页面内容 -->
</body>

常见属性

bgcolor（已废弃）：设置背景颜色。
background（已废弃）：设置背景图像。

二、段落和文本格式化元素

1. `<p>` 段落元素

定义

<p> 元素表示一个段落，用于组织和显示文本内容。

示例

<p>这是一个段落。</p>

常见属性

align（已废弃）：设置文本对齐方式（left、right、center、justify）。

2. `<h1>` - `<h6>` 标题元素

定义

<h1> 到 <h6> 表示不同级别的标题，<h1> 为最高级别，<h6> 为最低级别。

示例

<h1>一级标题</h1>
<h2>二级标题</h2>

常见属性

align（已废弃）：设置标题的对齐方式。

3. `<strong>` 和 `<b>` 粗体文本

定义

<strong> 表示语义上的重要性，内容会加粗显示。
<b> 仅用于视觉上的加粗，无语义强调。

示例

<p>这是一个 <strong>重要</strong> 的提示。</p>
<p>这是一个 <b>加粗</b> 的文本。</p>

4. `<em>` 和 `<i>` 斜体文本

定义

<em> 表示强调，内容会以斜体显示。
<i> 仅用于视觉上的斜体，无语义强调。

示例

<p>请 <em>注意</em> 下面的事项。</p>
<p>这是一个 <i>斜体</i> 文本。</p>

5. `<u>` 下划线文本

定义

<u> 元素用于表示下划线文本，一般用于表示非文本注释，如拼写错误。

示例

<p>这是一个 <u>下划线</u> 文本。</p>

6. `<del>` 和 `<ins>` 删除和插入文本

定义

<del> 表示被删除的文本，通常显示为删除线。
<ins> 表示插入的文本，通常显示为下划线。

示例

<p>这是一个 <del>旧的</del> 文本。</p>
<p>这是一个 <ins>新的</ins> 文本。</p>

三、列表元素

1. 无序列表 `<ul>` 和 `<li>`

定义

<ul> 表示一个无序列表，列表项使用 <li> 定义。

示例

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

常见属性

type（已废弃）：设置列表项的项目符号类型。

2. 有序列表 `<ol>` 和 `<li>`

定义

<ol> 表示一个有序列表，列表项使用 <li> 定义。

示例

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

常见属性

type：设置列表项的编号类型（1、a、A、i、I）。
start：设置列表的起始编号。
reversed：布尔属性，表示列表逆序。

3. 定义列表 `<dl>`、`<dt>`、`<dd>`

定义

<dl>：定义列表容器。
<dt>：定义术语名称。
<dd>：定义术语描述。

示例

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

四、链接和图像

1. 超链接 `<a>`

定义

<a> 元素用于创建超链接，可以链接到其他页面、文件、电子邮件地址等。

示例

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

常见属性

href：指定链接目标的 URL。
target：指定链接打开的方式（_self、_blank、_parent、_top）。
title：提供链接的额外信息，当鼠标悬停时显示。
rel：定义当前文档与链接目标之间的关系。

2. 图像 `<img>`

定义

<img> 元素用于在页面中嵌入图像。

示例

<img src="image.jpg" alt="示例图片">

常见属性

src：指定图像文件的路径或 URL。
alt：为图像提供替代文本，用于图像无法加载或屏幕阅读器。
width 和 height：设置图像的宽度和高度（可使用像素或百分比）。
title：提供图像的额外信息。

五、表格元素

1. 表格 `<table>`

定义

<table> 元素用于创建表格结构。

示例

<table>
  <!-- 表格内容 -->
</table>

2. 表格行 `<tr>`

定义

<tr> 元素表示表格中的一行。

示例

<tr>
  <!-- 表格单元格 -->
</tr>

3. 表格头 `<th>` 和表格数据 `<td>`

定义

<th>：定义表格的表头单元格，通常以粗体显示，居中对齐。
<td>：定义表格的标准单元格。

示例

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>

常见属性

colspan：设置单元格横向跨越的列数。
rowspan：设置单元格纵向跨越的行数.
headers：关联单元格与表头.

4. 表格标题 `<caption>`

定义

<caption> 元素用于为表格提供标题，通常显示在表格的顶部。

示例

<table>
  <caption>用户信息表</caption>
  <!-- 表格内容 -->
</table>

六、表单元素

1. 表单 `<form>`

定义

<form> 元素用于创建交互式表单，允许用户提交数据。

示例

<form action="/submit" method="post">
  <!-- 表单控件 -->
</form>

常见属性

action：指定表单提交的目标 URL。
method：指定 HTTP 方法（get 或 post）。
enctype：指定表单数据的编码类型。

2. 输入 `<input>`

定义

<input> 元素用于创建多种类型的表单控件，如文本框、复选框、单选按钮等。

示例

<input type="text" name="username" placeholder="请输入用户名">

常见属性

type：指定输入控件的类型（text、password、email、number、checkbox、radio、submit 等）。
name：指定控件的名称，用于表单数据的键。
value：指定控件的默认值。
placeholder：提供提示信息。
required：布尔属性，指定控件为必填项。
disabled：布尔属性，指定控件为禁用状态。
readonly：布尔属性，指定控件为只读。

3. 标签 `<label>`

定义

<label> 元素用于为表单控件定义标注，提高可访问性。

示例

<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

常见属性

for：指定关联的控件的 id。

4. 选择列表 `<select>` 和 `<option>`

定义

<select>：定义一个下拉列表。
<option>：定义下拉列表中的选项。

示例

<select name="country">
  <option value="cn">中国</option>
  <option value="us">美国</option>
  <option value="uk">英国</option>
</select>

常见属性

multiple（<select>）：布尔属性，允许多选。
selected（<option>）：布尔属性，指定选项为默认选中。
disabled：布尔属性，指定控件或选项为禁用状态。

5. 文本区域 `<textarea>`

定义

<textarea> 元素用于多行文本输入。

示例

<textarea name="message" rows="5" cols="30" placeholder="请输入留言"></textarea>

常见属性

rows：指定可见的行数。
cols：指定可见的列数。
placeholder：提供提示信息。
maxlength：限制输入的最大字符数。

6. 按钮 `<button>`

定义

<button> 元素用于创建按钮。

示例

<button type="submit">提交</button>

常见属性

type：指定按钮类型（button、submit、reset）。
disabled：布尔属性，指定按钮为禁用状态。

七、多媒体元素

1. 图像 `<img>`

（已在第四部分介绍，此处略）

2. 音频 `<audio>`

定义

<audio> 元素用于在网页中嵌入音频内容。

示例

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放。
</audio>

常见属性

src：指定音频文件的 URL。
controls：布尔属性，显示音频控件。
autoplay：布尔属性，音频自动播放。
loop：布尔属性，音频循环播放。
muted：布尔属性，音频静音。

3. 视频 `<video>`

定义

<video> 元素用于在网页中嵌入视频内容。

示例

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

常见属性

src：指定视频文件的 URL。
controls：布尔属性，显示视频控件。
autoplay：布尔属性，视频自动播放。
loop：布尔属性，视频循环播放。
muted：布尔属性，视频静音。
poster：指定视频未播放时显示的图片。

八、语义化元素

1. `<header>` 页眉

定义

<header> 元素表示文档或节的页眉，通常包含标题、导航链接、Logo 等。

示例

<header>
  <h1>网站标题</h1>
  <nav>
    <!-- 导航链接 -->
  </nav>
</header>

2. `<nav>` 导航

定义

<nav> 元素用于定义导航链接的区域。

示例

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

3. `<main>` 主要内容

定义

<main> 元素表示文档的主要内容部分，应该是文档中唯一的。

示例

<main>
  <!-- 主要内容 -->
</main>

4. `<section>` 区块

定义

<section> 元素表示文档中的一个独立区段，通常带有标题。

示例

<section>
  <h2>我们的服务</h2>
  <!-- 服务内容 -->
</section>

5. `<article>` 文章

定义

<article> 元素表示一篇独立的内容，如博客文章、新闻报道。

示例

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>

6. `<aside>` 侧边栏

定义

<aside> 元素表示与主要内容相关的辅助内容，如侧边栏、广告。

示例

<aside>
  <h3>热门文章</h3>
  <!-- 列表 -->
</aside>

7. `<footer>` 页脚

定义

<footer> 元素表示文档或节的页脚，通常包含版权信息、联系信息等。

示例

<footer>
  <p>&copy; 2023 公司名称</p>
</footer>

九、元数据元素

1. 元数据 `<meta>`

定义

<meta> 元素用于提供关于 HTML 文档的元数据，不会显示在页面上。

示例

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

常见属性

charset：指定文档的字符编码。
name：指定元数据名称，如 description、keywords、author。
content：指定元数据的内容。
http-equiv：用于设置 HTTP 头信息。

2. 外部资源 `<link>`

定义

<link> 元素用于在文档与外部资源之间建立链接，如样式表、图标。

示例

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

常见属性

rel：指定链接关系类型，如 stylesheet、icon。
href：指定外部资源的 URL。
type：指定资源的 MIME 类型。

3. 脚本 `<script>`

定义

<script> 元素用于嵌入或引用 JavaScript 脚本。

示例

<script src="app.js"></script>
<script>
  console.log('Hello, World!');
</script>

常见属性

src：指定外部脚本文件的 URL。
type：指定脚本的 MIME 类型，默认是 text/javascript。
async：布尔属性，异步加载脚本。
defer：布尔属性，延迟执行脚本。

十、其他常用元素

1. `<br>` 换行

定义

<br> 元素用于在文本中插入换行符。

示例

<p>第一行<br>第二行</p>

2. `<hr>` 水平线

定义

<hr> 元素表示主题的分隔线，用于视觉上的分割。

示例

<p>上半部分内容</p>
<hr>
<p>下半部分内容</p>

3. `<span>` 行内元素

定义

<span> 元素是一个通用的行内容器，没有特定的语义，用于对部分文本进行分组。

示例

<p>这是一个<span class="highlight">高亮</span>的文本。</p>

4. `<div>` 块级元素

定义

<div> 元素是一个通用的块级容器，没有特定的语义，用于对内容进行分组。

示例

<div class="container">
  <!-- 内容 -->
</div>

十一、全局属性

以下属性可用于所有 HTML 元素：

id：唯一标识元素的全局属性。
class：用于指定元素的一个或多个类名，便于样式和脚本的应用。
style：用于直接在元素内定义 CSS 样式。
title：提供元素的额外信息，当鼠标悬停时显示。
data-*：用于存储页面或应用程序的私有自定义数据。

十二、ARIA 属性（可访问性）

为了提高网页的可访问性，可以使用 ARIA 属性来增强语义。

role：定义元素的语义角色，如 button、navigation、main。
aria-label：为元素提供可访问的名称。
aria-hidden：指定元素对屏幕阅读器是否可见。

示例：

<button aria-label="关闭窗口" aria-hidden="false">×</button>

参考资料

本文章已经生成可运行项目

一文速通HTML：常见的 HTML 元素及其属性详解

常见的 HTML 元素及其属性详解

一、基础文本元素

1. <html> 元素

定义

示例

常见属性

2. <head> 元素

定义

示例

常见属性

3. <title> 元素

定义

示例

注意事项

4. <body> 元素

定义

示例

常见属性

二、段落和文本格式化元素

1. <p> 段落元素

定义

示例

常见属性

2. <h1> - <h6> 标题元素

定义

示例

常见属性

3. <strong> 和 <b> 粗体文本

定义

示例

4. <em> 和 <i> 斜体文本

定义

示例

5. <u> 下划线文本

定义

示例

6. <del> 和 <ins> 删除和插入文本

定义

示例

三、列表元素

1. 无序列表 <ul> 和 <li>

定义

示例

常见属性

2. 有序列表 <ol> 和 <li>

定义

示例

常见属性

3. 定义列表 <dl>、<dt>、<dd>

定义

示例

四、链接和图像

1. 超链接 <a>

定义

示例

常见属性

2. 图像 <img>

定义

示例

常见属性

五、表格元素

1. 表格 <table>

定义

示例

2. 表格行 <tr>

定义

示例

3. 表格头 <th> 和表格数据 <td>

定义

示例

常见属性

4. 表格标题 <caption>

定义

示例

六、表单元素

1. 表单 <form>

定义

示例

常见属性

1. `<html>` 元素

2. `<head>` 元素

3. `<title>` 元素

4. `<body>` 元素

1. `<p>` 段落元素

2. `<h1>` - `<h6>` 标题元素

3. `<strong>` 和 `<b>` 粗体文本

4. `<em>` 和 `<i>` 斜体文本

5. `<u>` 下划线文本

6. `<del>` 和 `<ins>` 删除和插入文本

1. 无序列表 `<ul>` 和 `<li>`

2. 有序列表 `<ol>` 和 `<li>`

3. 定义列表 `<dl>`、`<dt>`、`<dd>`

1. 超链接 `<a>`

2. 图像 `<img>`

1. 表格 `<table>`

2. 表格行 `<tr>`

3. 表格头 `<th>` 和表格数据 `<td>`

4. 表格标题 `<caption>`

1. 表单 `<form>`

2. 输入 `<input>`

3. 标签 `<label>`

4. 选择列表 `<select>` 和 `<option>`

5. 文本区域 `<textarea>`

6. 按钮 `<button>`

1. 图像 `<img>`

2. 音频 `<audio>`

3. 视频 `<video>`

1. `<header>` 页眉

2. `<nav>` 导航

3. `<main>` 主要内容

4. `<section>` 区块

5. `<article>` 文章

6. `<aside>` 侧边栏

7. `<footer>` 页脚

1. 元数据 `<meta>`

2. 外部资源 `<link>`

3. 脚本 `<script>`

1. `<br>` 换行

2. `<hr>` 水平线