HTML - 块

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

块元素

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

内联元素

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

对 HTML 元素进行分组

我们经常使用两个重要的标签来对各种其他 HTML 标签进行分组 (i) <div> 标签和 (ii) <span> 标签

<div> 标签

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

例子

以下是 <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> 标记用于块级元素。

例子

以下是 <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>

这将产生以下结果 -