HTML 标签大合集：一文入门

最新推荐文章于 2024-11-02 23:32:29 发布

彼方᭄゛ঞ

最新推荐文章于 2024-11-02 23:32:29 发布

阅读量1k

点赞数 12

分类专栏： HTML基础文章标签： html 前端

本文链接：https://blog.csdn.net/H_Hyyy/article/details/141501582

版权

HTML基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

导语

欢迎来到我们关于 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 提供了无限的可能。随着你技能的提升，你将能够构建更加复杂和动态的网页。以下是一些额外的资源和提示，帮助你继续你的学习之旅：