【Java 进阶篇】HTML块级元素详解

超、凢脫俗 2023-10-16 18:17 134阅读 0赞

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png]

HTML（Hypertext Markup Language）是用于创建网页的标记语言。在HTML中，元素被分为块级元素和内联元素两种主要类型。块级元素通常用于构建网页的结构，而内联元素则嵌套在块级元素内，用于添加文本和其他内容。本文将重点介绍HTML的块级元素，包括其定义、常见块级元素和示例代码。

### 1. 什么是块级元素？ ###

块级元素是HTML中的元素类型，它们通常用于创建网页的结构和布局。块级元素以新行开始，占据其父元素（通常是一个块级元素）的整个可用宽度，因此会导致元素在页面上显示为一个独立的块。块级元素可以包含其他块级元素或内联元素。

### 2. 常见的HTML块级元素 ###

#### 2.1. `<div>` 元素 ####

`<div>` 元素是HTML中最常见的块级容器元素之一。它通常用于组织和布局网页的内容，不会自动添加任何样式。`<div>` 元素通常与CSS一起使用，以定义样式和布局。

**示例代码：**

<div>
      <p>This is a paragraph inside a div.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>

#### 2.2. `<p>` 元素 ####

`<p>` 元素用于定义段落文本，通常在文本块之间创建间距。浏览器会自动在`<p>`元素前后添加一些间距。

**示例代码：**

<p>This is a paragraph of text. It will be displayed with some spacing above and below.</p>

#### 2.3. `<h1>` 到 `<h6>` 元素 ####

`<h1>` 到 `<h6>` 元素用于表示标题，其中`<h1>` 是最高级别的标题，`<h6>` 是最低级别的标题。这些元素通常用于创建页面的标题和副标题。

**示例代码：**

<h1>Main Title</h1>
    <h2>Subheading 1</h2>
    <h3>Subheading 2</h3>

#### 2.4. `<ul>` 元素和 `<ol>` 元素 ####

`<ul>` 元素用于创建无序列表，其中的每个列表项使用`<li>` 元素表示。`<ol>` 元素用于创建有序列表，其中的每个列表项也使用`<li>` 元素表示。

**示例代码：**

#### 2.5. `<table>` 元素 ####

`<table>` 元素用于创建表格，通常包含`<tr>`（表格行）、`<th>`（表头单元格）和`<td>`（表格数据单元格）等子元素，以定义表格的结构。

**示例代码：**

<table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
      </tr>
    </table>

#### 2.6. `<form>` 元素 ####

`<form>` 元素用于创建表单，包括输入字段、按钮和其他表单元素。它通常用于接收用户的输入数据，并将其提交给服务器进行处理。

**示例代码：**

<form action="/submit" method="post">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <br>
      <input type="submit" value="Submit">
    </form>

#### 2.7. `<blockquote>` 元素 ####

`<blockquote>` 元素用于引用长段落或文本的部分，通常在引用内容周围创建缩进。浏览器通常会自动添加引用样式。

**示例代码：**

<blockquote>
      This is a blockquote. It is often used to quote longer passages of text.
    </blockquote>

#### 2.8. `<div>` 元素 ####

`<div>` 元素是一个通用的块级容器，通常用于组织和布局网页的内容。它不会自动添加任何样式。

**示例代码：**

<div>
      <p>This is a paragraph inside a div.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>

### 3. HTML块级元素的特点 ###

HTML块级元素具有以下特点：

*  以新行开始，占据整行的宽度。
 *  可以包含其他块级元素和内联元素。
 *  可以用于创建网页的结构和布局。
 *  常见的块级元素包括`<div>`、`<p>`、`<h1>`到`<h6>`、`<ul>`、`<ol>`、`<table>`、`<form>`等。

### 4. 总结 ###

块级元素是HTML中的一种重要元素类型，用于创建网页的结构和布局。本文介绍了常见的HTML块级元素，包括其定义、示例代码以及特点。通过合理使用块级元素，您可以更好地组织和呈现网页内容，提升用户体验。希望本文对您理解HTML块级元素有所帮助。

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://img-blog.csdnimg.cn/ee6246a97e76456ea2a96231b3fde401.png