Blocks

优质

小牛编辑

126浏览

2023-12-01

所有HTML元素都可以分为两类(a)块级元素(b)内联元素。

块元素

块元素出现在屏幕上，就好像它们之前和之后有换行符一样。例如，<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> 元素都是块级元素。它们都是从他们自己的新线开始的，并且跟随它们的任何东西都出现在它自己的新线上。

内联元素

另一方面，行内元素可以出现在句子中，而不必出现在它们自己的新行中. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> 元素都是内联元素.

分组HTML元素

我们经常使用两个重要的标签来组合各种其他HTML标签（i）div标签和（ii）span标签

div标签

这是非常重要的块级标记，它在分组各种其他HTML标记和在元素组上应用CSS方面发挥着重要作用。即使现在，div标签也可用于创建网页布局，我们使用div标签定义页面的不同部分（左，右，顶部等）。此标记不会对块提供任何可视更改，但在与CSS一起使用时具有更多含义。

例子 (Example)

以下是div标签的一个简单示例。

我们将在单独的章节中学习层叠样式表（CSS），但我们在此处使用它来显示div标签的用法 -

<!DOCTYPE html>
<html>
   <head>
      <title>HTML div Tag</title>
   </head>
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>
      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
</html>

span标签

HTML span是一个内联元素，可用于对HTML文档中的内联元素进行分组。此标记也不会对块提供任何视觉更改，但在与CSS一起使用时具有更多含义。

span标记和div标记之间的区别在于span标记与内联元素一起使用，而div标记与块级元素一起使用。

例子 (Example)

以下是span标记的简单示例。我们将在单独的章节中学习级联样式表（CSS），但我们在此处使用它来显示span标签的用法 -

<!DOCTYPE html>
<html>
   <head>
      <title>HTML span Tag</title>
   </head>
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
</html>