当前位置：首页 > news >正文

HTML 标签大合集：一文入门

news 2025/11/24 8:11:55

导语

欢迎来到我们关于 HTML 标签的全面指南！如果你是网页设计的新手，或者只是想快速回顾一下 HTML 的基础知识，那么你来对地方了。HTML（超文本标记语言）是构建网页的基石，它定义了网页的结构和内容。在本文中，我们将通过一系列示例来探索 HTML 的核心元素，帮助你理解如何使用它们来创建引人注目的网页。

块级元素与内联元素

块级元素

块级元素通常用于创建页面结构的“块”，它们在页面中占据整行显示。

<div>：块级元素，用于组织内容，可以包含其他元素。
<p>：段落标签，每个 <p> 元素前后有默认的行距。

标题标签

<h1> 到 <h6>：定义标题，数字越小，标题级别越高，字体也越大。

内联元素

内联元素不会创建新的块，它们通常用于文本格式化。

<span>：内联元素，用于包裹文本，通常用于样式或脚本应用。

其他块级元素

<hr>：创建水平分割线。
<br>：强制换行。

文本格式化

加粗和斜体

<b> 和 <strong>：文本加粗，<strong> 表示重要性。
<i> 和 <em>：文本斜体，<em> 表示强调。

下划线和删除线

<u>：下划线，较少使用，通常用 CSS 实现。
<del>：表示文本已被删除。

上标和下标

<sup>：上标。
<sub>：下标。

列表标签

列表项

<li>：列表项，独占一行，不单独存在。

有序与无序列表

<ol>：有序列表，带有序号。
<ul>：无序列表，使用项目符号。

描述列表

<dl>：定义描述列表，包含 <dt>（项目）和 <dd>（项目说明）。

表格

基本结构

<table>：定义表格。
<tr>：定义表格行。
<th>：定义表头单元格，加粗且居中。
<td>：定义普通单元格。

表格属性

border：边框大小。
cellpadding：单元格内边距。
cellspacing：单元格间距。
align：内容对齐方式，如 center。
width：表格宽度。
rowspan：合并行。
colspan：合并列。

多媒体

图像、音频和视频

<img>：嵌入图像，src 属性指定图像路径，alt 提供替代文本。
<audio> 和 <video>：嵌入音频和视频内容，可以包含 controls 属性以显示控件。

超链接

<a>：定义超链接，href 属性指定链接目标。
- 链接到其他网站或页面。
- 使用锚点链接到页面内特定部分，如 href="#section1"。

内联框架

<iframe>：嵌入另一个 HTML 页面，src 属性指定页面 URL。

综合案例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>HTML 标签示例</title>
</head>
<body><!-- 块级元素 --><div>这是一个块级元素，它将独占一行。</div><p>这是一个段落。段落之间有上下行距。</p><!-- 标题标签 --><h1>这是最大的标题</h1><h6>这是最小的标题</h6><!-- 内联元素 --><span>这是一个内联元素，没有样式。</span><!-- 其他块级元素 --><hr><p>这是一段文本。<br>这是同一段落内的强制换行。</p><!-- 文本格式化 --><b>这段文本将加粗显示。</b><strong>这段文本表示重要性，也会加粗。</strong><i>这段文本将斜体显示。</i><em>这段文本表示强调，也会斜体。</em><u>这段文本将有下划线。</u><del>这段文本表示已删除。</del><sup>这是上标文本。</sup><sub>这是下标文本。</sub><!-- 列表标签 --><ul><li>无序列表项 1</li><li>无序列表项 2</li></ul><ol><li>有序列表项 1</li><li>有序列表项 2</li></ol><dl><dt>项目名称</dt><dd>项目说明，有缩进。</dd></dl><!-- 表格 --><table border="1" cellpadding="10" cellspacing="0" align="center" width="80%"><tr><th>表头 1</th><th>表头 2</th></tr><tr><td>行 1, 单元格 1</td><td>行 1, 单元格 2</td></tr><tr><td rowspan="2">合并两行的单元格</td><td>行 2, 单元格 2</td></tr><tr><td colspan="2">合并两列的单元格</td></tr></table><!-- 多媒体 --><img src="img/k.jpg" alt="替代文本" width="100%"><audio controls><source src="audio/1.mp3" type="audio/mpeg"></audio><video controls><source src="video/周深-只为真相 (《真相》网剧片尾主题曲)(蓝光).mp4" type="video/mp4" ></video><!-- 超链接 --><a href="https://www.example.com">访问示例网站</a><a href="#section1">跳转到页面内的 Section 1</a><h2 id="section1">Section 1</h2><p>这是页面内的一个部分。</p><!-- 内联框架 --><iframe src="embedded_page.html" title="Embedded Page"></iframe>
</body>
</html>

总结

经过本文的学习，你现在应该对 HTML 有了基本的了解，包括它的结构、不同类型的标签以及如何使用它们来创建内容。HTML 是一个不断进化的语言，随着 HTML5 的出现，我们有了更多的语义化标签和功能来增强我们的网页。记住，实践是学习 HTML 的关键。不要害怕尝试新事物，打破常规，看看你的代码如何响应。

创建网页是一个创造性的过程，HTML 提供了无限的可能。随着你技能的提升，你将能够构建更加复杂和动态的网页。以下是一些额外的资源和提示，帮助你继续你的学习之旅：