HTML - 区块介绍 首页HTMLHTML - 区块

所有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>

这将产生以下输出-

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>

这将产生以下输出-

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 如果觉得对您有帮助,请分享给您的朋友。

祝学习愉快! (您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记