HTML - 块

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

块元素

块元素出现在屏幕上,就好像它们之前和之后有换行符一样.例如,< p>,< h1>,< h2>,< h3>,< h4>,< h5>,< h6>,< ul>,< ol>,&lt ; 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) &LT; DIV&GT;标签和(ii)< span>标签

< div> tag

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

示例

以下是一个简单的< div>的示例标签.我们将在单独的章节中学习层叠样式表(CSS),但我们在此处使用它来显示< div>的用法. tag :

<!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>

这将产生以下结果 :

The <span> tag

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>