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> 元素表示。
示例代码：
<ul><li>Item 1</li><li>Item 2</li>
</ul><ol><li>Step 1</li><li>Step 2</li>
</ol>
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块级元素有所帮助。
| 作者信息 作者 ： 繁依Fanyi CSDN： https://techfanyi.blog.csdn.net 掘金：https://juejin.cn/user/4154386571867191 |
