HTML块级元素和内联元素

原创

admin 4个月前 (08-07) 阅读数 21 #HTML

HTML块级元素和内联元素

HTML块级元素用于创建网页的逻辑和语义布局。它们帮助将内容组织成有意义的部分，使浏览器、搜索引擎和网站访问者更容易理解网页不同部分的结构和含义。内联元素用于增强块级元素的功能，例如添加锚链接。

您可以使用各种标签来创建块级元素，如<div>、<p>、<table>等。

所有HTML元素可以分为两类：

块级元素
内联元素

HTML块级元素

块级元素从新的一行开始，任何跟随它们的内容也会出现在下一行。这些元素可以包含边距，在前后添加一些空间。默认情况下，这些元素占据其父元素的完整宽度；您可以使用CSS width属性设置它们的宽度。

HTML块级元素列表

下表列出了所有块级元素：

HTML块级元素
`<address>`	`<article>`	`<aside>`	`<blockquote>`	`<canvas>`
`<dd>`	`<div>`	`<dl>`	`<dt>`	`<fieldset>`
`<figcaption>`	`<figure>`	`<footer>`	`<form>`	`<h1>-<h6>`
`<header>`	`<hr>`	`<li>`	`<main>`	`<nav>`
`<noscript>`	`<ol>`	`<p>`	`<pre>`	`<section>`
`<table>`	`<tfoot>`	`<ul>`	`<video>`

块级元素示例

以下示例演示了块级元素的使用。这里我们使用一个标题和两个由水平线分隔的段落。

<!DOCTYPE html>
<html>
<head>
    <title>HTML块级元素</title>
</head>
<body>
   <h3>HTML块级元素</h3>
   <p>
      这一行将出现在标题后的下一行。
   </p>
   <hr />
   <p>
      这一行将出现在水平线之后。
   </p>
</body>
</html>

HTML内联元素

内联元素可以出现在同一行，不会自动开始新的一行。

HTML内联元素列表

下表列出了所有内联元素：

HTML内联元素
`<a>`	`<abbr>`	`<acronym>`	`<b>`	`<bdo>`
`<big>`	`<br>`	`<button>`	`<cite>`	`<code>`
`<dfn>`	`<em>`	`<i>`	`<img>`	`<input>`
`<kbd>`	`<label>`	`<map>`	`<object>`	`<output>`
`<q>`	`<samp>`	`<script>`	`<select>`	`<small>`
`<span>`	`<strong>`	`<sub>`	`<sup>`	`<textarea>`
`<time>`	`<tt>`	`<var>`

内联元素示例

以下示例演示了内联元素的使用。这里我们使用内联元素<b>和<i>使段落文本变为粗体和斜体：

<!DOCTYPE html>
<html>
<head>
    <title>HTML内联元素</title>
</head>
<body>
    <h3>HTML中的内联元素</h3>
    <!-- 使用内联元素<b> -->
    <p>这个<b>段落</b>是粗体的。</p>
    <!-- 使用内联元素<i> -->
    <p>这是一个<i>斜体</i>段落。</p>
</body>
</html>

分组块级和内联元素

可以使用<div>标签对块级和内联元素进行分组。<div>是一个块级元素，在分组各种其他HTML标签和对元素组应用CSS方面起着重要作用。

示例

以下示例演示了使用<div>标签对元素进行分组：

<!DOCTYPE html>
<html>
<head>
   <title>HTML div标签</title>
</head>
<body>
   <!-- 第一组标签 -->
   <div style="background-color:yellow">
      <h4>这是第一组</h4>
      <p>以下是蔬菜列表</p>
      <ul>
         <li>甜菜根</li>
         <li>生姜</li>
         <li>土豆</li>
         <li>萝卜</li>
      </ul>
   </div>
   <!-- 第二组标签 -->
   <div style="background-color:cyan">
      <h4>这是第二组</h4>
      <p>以下是水果列表</p>
      <ul>
         <li>苹果</li>
         <li>香蕉</li>
         <li>芒果</li>
         <li>草莓</li>
      </ul>
   </div>
</body>
</html>