HTML - 块元素

HTML - 块元素 首页 / HTML入门教程 / 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>

这将产生以下输出-

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>

这将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

左耳听风 -〔陈皓〕

数据分析实战45讲 -〔陈旸〕

Swift核心技术与实战 -〔张杰〕

Kafka核心源码解读 -〔胡夕〕

Go 语言项目开发实战 -〔孔令飞〕

如何落地业务建模 -〔徐昊〕

程序员的个人财富课 -〔王喆〕

搞定音频技术 -〔冯建元 〕

快速上手C++数据结构与算法 -〔王健伟〕

好记忆不如烂笔头。留下您的足迹吧 :)