标签的两种属性block和inline
发布时间：2010年3月29日 文章分类：xhtml学习篇 文章作者：Hitomi 浏览次数：次
在xhtml标签中按照布局的样式属性可以分成block和inline两种。
- block：直译是块状的，被这种标签包含的内容会独立成为一行，就像被一个方块包着一样。
- inline：直译是连级的，和block相反，这类标签的内容不会换行而是都连在一起
block标签有：<div></div>、<p></p>、所有标题<h1></h1>到<h6></h6>、<blockquote></blockquote>等
inline标签有：<span></span>、<a></a>、<img />、<strong></strong>、<em></em>等
举例子，看看block和inline的实际效果，将以下代码保存为index.htm打开看效果。
XML/HTML代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>看看block和inline的效果</title>
- </head>
- <body>
- <div>我是一个block标签</div>
- <div>我是另一个block标签，我和上面的block标签分成两行了。</div>
- <span>我是一个inline标签</span>
- <span>我是另一个inline标签，我和上面的inline标签连在一起了。</span>
- </body>
- </html>
通过这个例子，我们又认识了两个标签<div></div>和<span></span>，这两个标签有一定的特殊意义，他们的共同点是都是没有样式的标签，唯一的区别就是<div>是block的，<span>是inline的，除了这个属性，他们没有任何其他属性，在xhtml里面这两个标签也不表示任何内容，他们是无意义标签，在实际制作网页的时候，这两个无意义的标签用于布局，尤其是div，因为是block块状的，所以它被用来划分网页块状区域，通过css样式控制div的宽、高、位置、背景颜色、背景图片、边距、边框等样式最终组合成我们看到的漂亮的网页。
了解了div的作用，下节课我们可以学习css样式的基础了，在div+css锻炼的同时慢慢渗透其他重要的xhtml标签
