元素分类 - 块级元素 - 常见块级元素介绍

在 HTML5 中，元素可以分为不同的类型，其中块级元素是一类非常重要的元素。本文将详细介绍块级元素的特点以及一些常见的块级元素，并通过演示代码帮助大家更好地理解和使用它们。

块级元素的特点

块级元素具有以下显著特点：

独占一行：块级元素会在页面中独占一行，无论其内容多少，后面的元素都会被挤到下一行显示。
可设置宽度和高度：可以通过 CSS 为块级元素设置宽度和高度，默认情况下，块级元素的宽度会占据其父元素的整个宽度。
可包含其他元素：块级元素通常可以包含其他块级元素或内联元素。

常见块级元素介绍

1. `<div>` 元素

<div> 元素是最常用的块级元素之一，它本身没有任何语义，主要用于对页面进行布局和分组。通过为 <div> 元素添加 CSS 样式，可以实现各种复杂的页面布局。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Example</title>
    <style>
       .container {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>This is a paragraph inside a div element.</p>
    </div>
    <p>This is a paragraph outside the div element.</p>
</body>
</html>

在上述代码中，<div> 元素将内部的 <p> 元素包裹起来，并通过 CSS 样式设置了背景颜色和内边距。可以看到，<div> 元素独占一行，后面的 <p> 元素被挤到了下一行。

2. `<p>` 元素

<p> 元素用于定义段落，它会在段落前后自动添加一定的空白，以区分不同的段落。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraph Example</title>
</head>
<body>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
</body>
</html>

在这个例子中，两个 <p> 元素分别表示两个段落，它们在页面中独占一行，并且段落之间有一定的空白。

3. `<h1>` - `<h6>` 元素

<h1> - <h6> 元素用于定义标题，其中 <h1> 表示最高级别的标题，<h6> 表示最低级别的标题。这些标题元素在页面中也会独占一行，并且字体大小和粗细会根据标题级别逐渐减小。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heading Example</title>
</head>
<body>
    <h1>This is a level 1 heading</h1>
    <h2>This is a level 2 heading</h2>
    <h3>This is a level 3 heading</h3>
    <h4>This is a level 4 heading</h4>
    <h5>This is a level 5 heading</h5>
    <h6>This is a level 6 heading</h6>
</body>
</html>

在上述代码中，不同级别的标题元素依次显示，每个标题都独占一行，并且字体大小和粗细逐渐减小。

4. `<ul>` 和 `<ol>` 元素

<ul> 元素用于定义无序列表，<ol> 元素用于定义有序列表。它们通常包含多个 <li> 元素，每个 <li> 元素表示列表中的一个项目。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Example</title>
</head>
<body>
    <h2>Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h2>Ordered List</h2>
    <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>
</body>
</html>

在这个例子中，<ul> 和 <ol> 元素分别创建了无序列表和有序列表，每个列表项都独占一行。

5. `<form>` 元素

<form> 元素用于创建 HTML 表单，用户可以在表单中输入数据并提交到服务器。表单可以包含各种表单元素，如文本框、下拉框、按钮等。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Example</title>
</head>
<body>
    <form action="#">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

在上述代码中，<form> 元素创建了一个简单的登录表单，包含用户名和密码输入框以及一个提交按钮。表单元素也会独占一行，方便用户输入数据。

常见块级元素总结

元素名称	描述
`<div>`	用于布局和分组，无语义
`<p>`	定义段落
`<h1>` - `<h6>`	定义不同级别的标题
`<ul>`	定义无序列表
`<ol>`	定义有序列表
`<form>`	定义 HTML 表单

通过以上介绍，相信大家对 HTML5 中的块级元素有了更深入的了解。在实际开发中，合理使用块级元素可以帮助我们构建出结构清晰、布局合理的网页。

元素分类 - 块级元素 - 常见块级元素介绍