html块级元素和内联元素 – HTML教程 _html块级元素

【html块级元素和内联元素 – HTML教程】上一章HTML教程请查看：html iframe用法
所有的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元素我们经常使用两个重要的标记来对其他各种HTML标记(i) < div> 标记和(ii) < span> 标记进行分组
< div> 标记这是非常重要的块级标签，它在对其他各种HTML标签进行分组和对元素组应用CSS时起着很大的作用。即使现在< div> 标签可以用来创建网页布局，我们定义不同的部分(左，右，顶部等)的页面使用< div> 标签。这个标签不提供任何视觉上的改变块，但这有更多的意义，当它与CSS一起使用。
例子
下面是一个< div> 标记的简单示例。我们将在一个单独的章节中学习层叠样式表(CSS)，但是我们在这里使用它来展示< div> tag?的用法：

< !DOCTYPE html> < html>< head> < title>HTML div Tag< /title> < /head>< body> < !-- 第一组tags --> < div style = "color:red"> < h4>第一组< /h4> < p>下面是列表内容< /p>< ul> < li>AAA< /li> < li>BBB< /li> < li>CCC< /li> < li>DDD< /li> < /ul> < /div>< !-- 第二组tags --> < div style = "color:green"> < h4>第二组< /h4> < p>下面是列表内容< /p>< ul> < li>PPP< /li> < li>YYY< /li> < li>HHH< /li> < li>VVV< /li> < /ul> < /div> < /body>< /html>

< span> 标签HTML < span> 是一个内联元素，它可以用来对HTML文档中的内联元素进行分组。这个标签也不提供任何视觉上的改变块，但有更多的意义，当它与CSS一起使用。
< span> 标记和< div> 标记的区别在于< span> 标记用于内联元素，而< div> 标记用于块级元素。
例子
下面是< span> 标记的一个简单示例。我们将在单独的章节中学习层叠样式表(CSS)，但是我们在这里使用它来展示< span> tag?的用法

< !DOCTYPE html> < html>< head> < title>HTML span Tag< /title> < /head>< body> < p>这是< span style = "color:red">红色< /span>, 这是 < span style = "color:green">绿色< /span>< /p> < /body>< /html>