HTML - Blocks
所有HTML元素都可以分为两类(a)块级元素(b)内联元素。
块元素
块元素出现在屏幕上，就好像它们之前和之后有换行符一样。 例如，<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> 元素都是块级元素。 它们都是从他们自己的新线开始的，并且跟随它们的任何东西都出现在它自己的新线上。
内联元素
另一方面，行内元素可以出现在句子中，而不必出现在它们自己的新行中. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> 元素都是内联元素.
分组HTML元素
我们经常使用两个重要的标签来组合各种其他HTML标签（i）div标签和（ii）span标签
div标签
这是非常重要的块级标记，它在分组各种其他HTML标记和在元素组上应用CSS方面发挥着重要作用。 即使现在，div标签也可用于创建网页布局，我们使用div标签定义页面的不同部分（左，右，顶部等）。 此标记不会对块提供任何可视更改，但在与CSS一起使用时具有更多含义。
例子 (Example)
以下是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标记与块级元素一起使用。
例子 (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>
这将产生以下结果 -
新页面打开