关注我们

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标签进行分组 (i)<div>标签和 (ii)<span>标签

Div 标签

这是非常重要的块级标签，在分组其他各种HTML标签并将CSS应用于元素组中发挥着重要作用，甚至现在，div标签仍可用于创建网页布局，在其中使用div标签定义页面的不同部分(左，右，顶部等)。

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

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-blocks.html

来源：LearnFk无涯教程网

Span 标签

HTML span是一个内联元素，可用于对HTML文档中的内联元素进行分组。

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>