HTML基础01：元素分类与常见标签详解

本文链接：https://blog.csdn.net/m0_56423815/article/details/145711570

HTML基础：元素分类与常见标签详解

作为HTML小白，理解元素分类和常见标签是入门的关键。HTML元素主要分为块级元素、行块级元素（也叫行内块元素）和行级元素（也叫行内元素），它们各自有着独特的显示和属性设置特点。

一、块级元素

块级元素在页面中独占一行，并且可以自由设置宽度和高度，还能包含其他块级元素或行内元素，是构建网页结构的基础。

`<div>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Div Example</title>
    <style>
        .my-div {
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="my-div">
        这是一个div容器。
    </div>
</body>

</html>

上述代码中，<div> 作为布局容器，通过 CSS 设置了宽度、高度和背景颜色。
div标签运行结果

`<h1>` - `<h6>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Heading Example</title>
</head>

<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>

</html>

这里展示了不同级别的标题标签，从 <h1> 到 <h6> 字体逐渐变小。
标题标签运行结果

`<p>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Paragraph Example</title>
    <style>
        p {
            width: 400px;
            height: auto;
            background-color: lightyellow;
        }
    </style>
</head>

<body>
    <p>这是一个段落。不管这里加多少空格    或者换行
        始终显示一个空格。</p>
    <!-- 以下嵌套 p 标签是错误示范 -->
    <!-- <p>外层段落<p>内层段落</p></p> -->
</body>

</html>

代码中展示了 <p> 标签的使用以及空白折叠现象，同时注释部分给出了错误的嵌套示例。
段落标签运行结果

`<table>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Table Example</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </table>
</body>

</html>

此代码创建了一个简单的表格，包含表头和数据行。
表格标签运行结果

`<form>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Form Example</title>
</head>

<body>
    <form action="#">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>

</html>

该代码展示了一个简单的登录表单，包含用户名和密码输入框以及提交按钮。
form标签运行结果

`<ul> <li>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Unordered List Example</title>
</head>

<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
</body>

</html>

这是一个无序列表，每个列表项前有默认的圆点。
无序列表运行结果

`<ol> <li>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ordered List Example</title>
</head>

<body>
    <ol>
        <li>第一步：打开电脑</li>
        <li>第二步：启动程序</li>
        <li>第三步：开始工作</li>
    </ol>
</body>

</html>

这是一个有序列表，列表项前有数字序号。
有序标签运行结果

`<dl> <dt> <dd>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Definition List Example</title>
</head>

<body>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，用于创建网页结构。</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，用于美化网页。</dd>
    </dl>
</body>

</html>

此代码展示了自定义列表，用于解释术语。
自定义列表标签运行结果

`<hr>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Horizontal Rule Example</title>
</head>

<body>
    <p>这是一段文本。</p>
    <hr align="left" width="50%" size="3" color="red">
    <p>这是另一段文本。</p>
</body>

</html>

代码中使用 <hr> 标签插入了一条左对齐、宽度为 50%、高度为 3px、颜色为红色的水平线。
hr标签运行结果

二、行块级元素（行内块元素）

`<img>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Image Example</title>
</head>

<body>
    <!-- 本地图片示例 -->
    <img src="D:/BaiduNetdiskDownload/python.png" alt="本地图片未找到" title="本地图片" width="200" height="150">
    <!-- 网络图片示例 -->
    <img src="https://img95.699pic.com/element/40253/2702.png_860.png" alt="网络图片未找到" title="网络图片" width="200" height="150">
</body>


</html>

这里展示了插入本地图片和网络图片的方法，同时设置了 alt 和 title 属性。
图片标签运行结果

`<input>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Input Example</title>
    <style>
        input[type="text"] {
            width: 200px;
            height: 30px;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入文本">
</body>

</html>

代码中设置了文本输入框的宽度和高度。
文本输入框标签运行结果

三、行级元素（行内元素）

`<a>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Anchor Example</title>
</head>

<body>
    <a href="https://www.example.com" target="_blank">点击访问示例网站</a>
    <a href="#">这是一个无实际链接的测试</a>
</body>

</html>

此代码展示了超链接的使用，包括跳转到外部网站和无实际链接的情况。
超链接标签运行结果

`<span>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Span Example</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>

<body>
    <p>这是一段包含 <span class="highlight">特殊文本</span> 的段落。</p>
</body>

</html>

这里使用 <span> 标签为段落中的部分文本设置了颜色。
span标签运行结果

`<sub>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Subscript Example</title>
</head>

<body>
    <p>H<sub>2</sub>O 表示水。</p>
</body>

</html>

代码中使用 <sub> 标签设置了下标。
下标标签运行结果

`<sup>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Superscript Example</title>
</head>

<body>
    <p>2<sup>3</sup> 等于 8。</p>
</body>

</html>

这里使用 <sup> 标签设置了上标。
上标标签运行结果

`<label>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Label Example</title>
</head>

<body>
    <form action="#">
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </form>
</body>

</html>

此代码展示了 <label> 标签与表单元素的配合使用。
label标签运行结果

`<strong>` 或 `<b>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Bold Text Example</title>
</head>

<body>
    <p>这是 <strong>强调</strong> 的文本。</p>
    <p>这是 <b>加粗</b> 的文本。</p>
</body>

</html>

代码中分别使用 <strong> 和 <b> 标签实现了文本加粗效果。
加粗标签运行结果

`<em>` 或 `<i>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Italic Text Example</title>
</head>

<body>
    <p>这是 <em>强调</em> 的斜体文本。</p>
    <p>这是 <i>普通</i> 的斜体文本。</p>
</body>

</html>

这里分别使用 <em> 和 <i> 标签实现了文本倾斜效果。
斜体标签运行结果

`<ins>` 或 `<u>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Underline Text Example</title>
</head>

<body>
    <p>这是 <ins>插入</ins> 的带下划线文本。</p>
    <p>这是 <u>普通</u> 的带下划线文本。</p>
</body>

</html>

代码中分别使用 <ins> 和 <u> 标签实现了下划线效果。
下划线标签运行结果

`<del>` 或 `<s>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Strikethrough Text Example</title>
</head>

<body>
    <p>这是 <del>删除</del> 的带删除线文本。</p>
    <p>这是 <s>普通</s> 的带删除线文本。</p>
</body>

</html>