代码学习群简易教程（7）

春天没来 2014-04-08

展开全文

第七节块区标签与行内块区标签

上一节讲了段落标签，这一节讲解块区标签<div>与行内块区标签<span>。

<div>标签与<span>标签，在“百度”中也查不出它们的标签名称。为了学习与使用的方便，我就把它们叫做“块区标签”与“行内块区标签”。

如果它们有规范的标签名称的话，就把“块区标签”与“行内块区标签”当作它们的别名吧。

一、块区标签<div>：

块区标签也是制作网页常用的一种标签。块区标签是一套标签，需要用首标签与尾标签配套使用，也就是说，不能只用首标签，而没有尾标签。

块区标签的表达方式为：<div>要放置的内容</div>。

块区标签的首标签中可以添加属性属值。大约段落标签可以添加的属性数值都可以应用到块区标签中。为什么说“大约”呢？因为标签可以添加的属性属值太多了，我不可能一个一个地都去测试。

块区标签中常见的属性有：对齐方式（align=left是居左对齐、align=center是居中对齐、align=right是居右对齐）、宽度（WIDTH）、高度（HEIGHT）、背景颜色（例如：BACKGROUND-COLOR: #ff66aa）、外边距（MARGIN）、首行缩进（TEXT-INDENT）等属性。

制作文字网页时，常常把块区标签与文字标签组合起来应用:

1、制作“居左对齐”的文字，应使用：

2、制作“居中对齐”的文字，应使用：

3、制作“居右对齐”的文字，应使用：

制作图片网页时，则只用块区标签就可以了。

这是“居左对齐”的图片代码：

这是“居中对齐”的图片代码：

</div>

这是“居右对齐”的图片代码：

行内块区标签也是一套标签，你用了其首标签，必须用尾标签收尾。否则的话，网页就不能正常显示。

行内块区标签<span>的用法，与段落标签<p>、块区标签<div>的用法基本相同，我就不再赘述了。只要把标签名称替换一下就行了。

块区标签与行内块区标签，在一般情况下我也不建议大家设置其宽度与高度。

不设置宽度与高度（也就是采用系统“默认”的宽度与高度）有什么优点呢？不设置宽度与高度，系统就可以按照你放入网页内容的多少自行调节其宽度与高度。

段落标签、块区标签与行内块区标签在应用中有什么区别呢？它们之间又有什么关系呢？

首先，我要讲的是：这三种标签，都是块级标签，都是放置网页材料的容器。也就是我在前面已经讲过的，你可以把它们理解为放置东西的瓶瓶罐罐或者是口袋。

应用这三种标签，都会形成一个“块”，也就是一个方框。在这个“块”（即方框）中可以放置你要放入的网页内容。

它们的区别有下列几点：

1、几个段落标签连用，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。举例如下：

<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是段落标签，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。你观察一下，我们之间的空白区域是否是两行呢？</P>
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是段落标签，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。你观察一下，我们之间的空白区域是否是两行呢？</P>
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是段落标签，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。你观察一下，我们之间的空白区域是否是两行呢？</P>

2、几个块区标签连用，各段文字自成一段，浏览器会在各段之间留出一行的空白区域。举例如下：

<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000"> 这些文字使用的都是块区标签，各段文字自成一段，浏览器会在各段文字之间留出一行的空白区域。你观察一下，我们之间的空白区域是否是一行呢？ </DIV>
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是块区标签，各段文字自成一段，浏览器会在各段文字之间留出一行的空白区域。你观察一下，我们之间的空白区域是否是一行呢？</DIV>
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是块区标签，各段文字自成一段，浏览器会在各段文字之间留出一行的空白区域。你观察一下，我们之间的空白区域是否是一行呢？</DIV>

3、几个行内块区标签连用，浏览器只会分行，不能分段，各个行内块区之间没有空行。举例如下：

<SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是行内块区标签，浏览器不给我们分段了。你观察一下，我们都跑到一个段落中了。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是行内块区标签，浏览器不给我们分段了。你观察一下，我们都跑到一个段落中了。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是行内块区标签，浏览器不给我们分段了。你观察一下，我们都跑到一个段落中了。</SPAN>

把上面的三段红色内容“粘贴”到你的图书馆首页撰写文章处的“代码编辑”页面“发表”观察其空格情况。

在制作网页时，段落标签中可以包裹块区标签与行内块区标签。举例如下：

<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">代码学习群公告：
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">我发表《代码学习群简易教程》的进度与大家学习《代码学习群简易教程》的进度并不是一回事。因为群友们的代码知识水平不同，每天可以上网的时间也不同，所以，学习《教程》的进度是因人而异的。<SPAN style="TEXT-INDENT: 2em; COLOR: rgb(0,200,0); FONT-SIZE: 22px"><B>每个群友可以根据自己的实践情况决定自己学习《教程》的进度。</B></SPAN>代码知识基础比较好每天上网时间比较长的群友，可以学得快一点；代码知识基础比较好每天上网时间比较长的群友，可以学得快一点。</DIV></P>

“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果。

不同的标签组合应用，一定要注意各种标签的应用顺序。首标签越在前面的，其尾标签越在后面。

上面的红色内容中，标签的应用顺序是：段落首标签→块区首标签→行内块区首标签→行内块区尾标签→块区尾标签→段落尾标签。各种标签的首标签与尾标签之间的内容，就是这种标签所控制的内容。

在制作网页时，块区标签中可以包裹段落标签与行内块区标签。举例如下：（这种方法最好）

<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">代码学习群公告：
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">我发表《代码学习群简易教程》的进度与大家学习《代码学习群简易教程》的进度并不是一回事。因为群友们的代码知识水平不同，每天可以上网的时间也不同，所以，学习《教程》的进度是因人而异的。<SPAN style="COLOR: rgb(0,200,0); FONT-SIZE: 22px"><B>每个群友可以根据自己的实践情况决定自己学习《教程》的进度。</B></SPAN>代码知识基础比较好每天上网时间比较长的群友，可以学得快一点；代码知识基础比较好每天上网时间比较长的群友，可以学得快一点。</P></DIV>

“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果。

上面的红色内容中，标签的应用顺序是：块区首标签→段落首标签→行内块区首标签→行内块区尾标签→段落尾标签→块区尾标签。各种标签的首标签与尾标签之间的内容，就是这种标签所控制的内容。

在制作网页时，行内块区标签中不能够包裹段落标签与块区标签。

应用代码制作网页是一件非常细致的事情。如果稍有疏忽，网页就不能正常显示了。

制作网页容易出现的错误，有下列几种类型：

1、丢失了半个尖括号：

在《代码学习群简易教程（3）》中我已经讲过了，什么是标签呢？标签是由一个尖括号和它里面的内容组成的统一体。如果一个尖括号丢失了半个，还是一个标签吗？已经不是了。浏览器无非识别了，因此，网页内容无法正常显示了。

举例如下：

<DIV align=center><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 20px">我是居中显示的文字</FONT></DIV>

在上面的内容中，你任意“删除”半个尖括号，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，还会正常显示吗？

2、丢失了标签名称中的字母：

这个图片能正常显示吗？你试试看。为什么不能显示了？图片标签丢失一个字母了，所以图片无法显示了。

这个图片正确的标签应是：

3、修改错了某个字母：举例如下：

<DIV style="TEXT-INDENT: 2em; COLOR: #ff0000; FONT-SlZE: 25px">这些文字使用的都是块区标签，各段文字自成一段，浏览器会在各段文字之间留出一行的空白区域。你观察一下，我们之间的空白区域是否是一行呢？</DIV>

你看看这段文字的效果吧。哦？真是奇怪了！25px的文字怎么这么小？欧！原来是字号的代码错了。应该是：FONT-SIZE；输入为：FONT-SlZE了。哦？这两个代码是一样的啊？不一样！前面的“FONT-SIZE”中的“I”，是大写的“衣”，而后面的“FONT-SlZE”中的“l”，是小写的“爱勒”。像这种错误，即使是代码高手，也难以查找到其错误的原因。因此，在制作网页的时候，你想用哪种标签，想用哪种属性，最好常用复制粘贴的方法。一般情况下，不要用输入代码的方法制作网页。

4、内容跑到了尾标签的外面：举例如下：

<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" ><FONT color=#0000ff>不设置宽度与高度（也就是采用系统“默认”的宽度与高度）有什么优点呢？不设置宽度与高度，系统就可以按照你放入网页内容的多少自行调节其宽度与高度。</FONT>你试试吧！</DIV>

哦？我设置的是蓝色的文字呀？怎么最后面的几个字变成黑色的啦？

错误原因：“你试试吧！”这一句跑到“文字尾标签”的后面啦！文字标签管辖不了它们啦！

制作网页时，容易发生错误的地方还有很多。例如：标签应该有空格的地方，你没有留出空格；在输入汉字的界面输入各种符号（例如：等号），丢失了一个小圆点、短横线等等，都可能使网页无法正常显示。

网页不能正常显示的原因还有很多很多。例如：你使用的浏览器不合适，无法识别网页中的某些代码；你的电脑有了某些故障，网页也不能正常显示；360图书馆服务器的设置，不支持你制作的某些网页效果；……

假如你制作网页不能正常显示，究竟是属于哪种原因呢？在制作网页的过程中，你慢慢地去体会去探讨吧。

说到360图书馆的服务器，有时候真是让人无所适从了！由于360图书馆一再改版，技术人员对服务器修改了某些设置，使我以前制作的几百幅顶图都不能正常显示了；收藏的动画图片，非得在透明窗口显示；制作表格，一旦设置了背景图片，表格的间距就显示不出来了；设置边框线样式，也不能进行综合设置，非得分别设置四条边框线的样式不可。……

有些朋友习惯于在“文字图片编辑”页面制作网页，从来也不切换到“代码编辑页面”查看其代码。这样制作的网页，往往会出现一些问题。例如：网页中的某些内容，有时很难修改；或者是你的一个操作动作，系统会给你生出许多的废码，致使网页变形。

为了使你制作的网页，尽可能地不出现问题，我建议朋友们不妨试试下面的制作方法：

1、制作文字网页，你可以在“代码编辑”页面中设置好你要用的标签，然后“点击”页面左下角的“代码编辑”按钮，切换到“文字图片编辑”页面查看其显示效果。如果你认为合适了，就在“代码编辑”页面中，“粘贴”上若干次，然后再“切换”到“文字图片编辑”页面“撰写你”的文章。例如：

我想制作文字网页。我设置的标签代码如下：

在代码编辑页面，我把这一小段代码“粘贴”了若干次，每一小段代码所控制的文字内容，只是一个数字“2”（你也可以改用任意的数字、字母或者文字），然后，切换到“文字图片编辑”页面中，“删除”掉这个数字“2”，输入你的文章内容。

如果你想制作“居中对齐”的文字段落时，你就把style="TEXT-INDENT: 2em"替换为：align="center"

如果你想制作“居右对齐”的文字段落时，你就把style="TEXT-INDENT: 2em"替换为：align="right"

用这种方法制作的文字网页，显示效果正常，并且没有多余的废码。

要放入图片的地方，使用下面的代码即可（只需替换图片标签）：