• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

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

作者：

贺及楼

成为作者

更新日期：2025-02-27 11:45:26

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

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

块级元素的特点

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

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

常见块级元素介绍

1. <div> 元素

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

演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Div Example</title>
  7.     <style>
  8.        .container {
  9.             background-color: lightblue;
  10.             padding: 20px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="container">
  16.         <p>This is a paragraph inside a div element.</p>
  17.     </div>
  18.     <p>This is a paragraph outside the div element.</p>
  19. </body>
  20. </html>

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

2. <p> 元素

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

演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Paragraph Example</title>
  7. </head>
  8. <body>
  9.     <p>This is the first paragraph.</p>
  10.     <p>This is the second paragraph.</p>
  11. </body>
  12. </html>

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

3. <h1> - <h6> 元素

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

演示代码：

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

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

4. <ul> 和 <ol> 元素

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

演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>List Example</title>
  7. </head>
  8. <body>
  9.     <h2>Unordered List</h2>
  10.     <ul>
  11.         <li>Item 1</li>
  12.         <li>Item 2</li>
  13.         <li>Item 3</li>
  14.     </ul>
  15.     <h2>Ordered List</h2>
  16.     <ol>
  17.         <li>First item</li>
  18.         <li>Second item</li>
  19.         <li>Third item</li>
  20.     </ol>
  21. </body>
  22. </html>

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

5. <form> 元素

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

演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Form Example</title>
  7. </head>
  8. <body>
  9.     <form action="#">
  10.         <label for="username">Username:</label>
  11.         <input type="text" id="username" name="username"><br>
  12.         <label for="password">Password:</label>
  13.         <input type="password" id="password" name="password"><br>
  14.         <input type="submit" value="Submit">
  15.     </form>
  16. </body>
  17. </html>

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

常见块级元素总结

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

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