srcmini上一章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>
评论前必须登录！
注册