HTML 块元素和内联元素
时间：2019-06-08 23:19:23 来源:igfitidea点击:
所有的HTML元素可以分为两类:
- 块级元素
- 内联元素
块元素
块元素出现在屏幕上，好像它们前后都有一个换行符。
例如，<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元素进行分组
我们经常使用两个重要的标记来分组其他各种HTML标记
<div>标记<span>标记
<div>标签
这是非常重要的块级标记，它在分组其他各种HTML标记以及在一组元素上应用CSS起着很大的作用。
即使现在<div>标记也可以用来创建网页布局，我们可以使用<div>标记定义页面的不同部分(左、右、顶等)。
此标记不提供块上的任何视觉更改，但当它与CSS一起使用时，它的意义更大。
<div>标记示例
下面是的一个简单示例。我们将在另一章中学习级联样式表(CSS)，但我们在这里使用它来展示
tag-
<!DOCTYPE html>
<html>
<head>
<title>HTML div标签</title>
</head>
<body>
<!-- 第一组标签 -->
<div style = "color:red">
<h4>第一组</h4>
<p>下面是动物列表</p>
<ul>
<li>狗</li>
<li>猫</li>
<li>猪</li>
<li>牛</li>
</ul>
</div>
<!-- 第二组标签 -->
<div style = "color:green">
<h4>第二组</h4>
<p>下面是水果列表</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>荔枝</li>
</ul>
</div>
</body>
</html>
<span>标签
HTML中的<span>是一个内联元素，可用于将HTML文档中的内联元素分组。
这个标记也不提供块上的任何视觉变化，但是当它与CSS一起使用时有更多的意义。
<span>标记和<div>标记的区别在于<span>标记用于内联元素，而<div>标记用于块级元素。
<span>标签示例
<!DOCTYPE html>
<html>
<head>
<title>HTML span 标签</title>
</head>
<body>
<p>这是<span style = "color:red">红色字体</span> 而这是
<span style = "color:green">绿色字体</span></p>
</body>
</html>
