第六节段落标签
标签，是段落标签。段落标签也是制作网页常用的一种标签。段落标签是一套标签，需要用首标签与尾标签配套使用，也就是说，不能只用首标签，而没有尾标签。
段落标签的表达方式为： 要放置的内容 。
段落标签的首标签中可以添加属性属值。常见的属性有：宽度（WIDTH）、高度（HEIGHT）、对齐方式（例如：align="center"）、背景颜色（例如：BACKGROUND-COLOR:#ffffaa）等属性。段落标签的属性，一般用css样式设置。用css样式给段落标签添加更多的属性，可以使你制作的网页样式更加丰富多彩。
段落标签中“要放置的内容”，可以是文字，也可以是图片。“要放置的内容”，必须放置在与 之间。
两个段落标签之间，浏览器会自动地空出两行的空白区域。
一、设置了对齐方式的段落标签：
1、设置了“居左对齐”的段落标签：
这一段的文字是居左对齐
2、设置了“居中对齐”的段落标签：
我是居中对齐
3、设置了“居右对齐”的段落标签：
我是居右对齐
“居左对齐”的段落标签，适用于普通文章的段落；“居中对齐”的段落标签，适用于文章的标题，也适用于诗词类文章；“居右对齐”的段落标签，适用于文章中末尾的作者署名与写作日期。
二、设置了宽度与高度的段落标签：
“居左对齐”的段落标签，适用于普通文章的段落；“居中对齐”的段落标签，适用于文章的标题，也适用于诗词类文章；“居右对齐”的段落标签，适用于文章中末尾的作者署名与写作日期。
“居左对齐”的段落标签，适用于普通文章的段落；“居中对齐”的段落标签，适用于文章的标题，也适用于诗词类文章；“居右对齐”的段落标签，适用于文章中末尾的作者署名与写作日期。
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果：
两段文字的宽度是相同的。第一段文字能够全部显示出来，文字的下方，还有空白区域；而第二段文字呢，则没有全部显示出来。
是何原因导致此显示效果呢？答案是：两个段落标签中设置的高度不相同。第一个段落标签的高度是：100px，第二个段落标签的高度是：30px。
如果我们把“段落标签”比喻为放东西的“容器”：瓶瓶、罐罐。那么，第一个段落标签就是比较大一点的瓶瓶、罐罐；第二个段落标签就是比较小一点的瓶瓶、罐罐。第一个“瓶瓶、罐罐”，装进“东西”（就是那一段文字）以后还不满，所以有空白区域了；第二个“瓶瓶、罐罐”呢？放不下这些“东西”了，所以，有一部分文字无法显示了。
其实，“段落标签”就是放网页材料的“容器”。这一点，在下一节教程中我再作详细讲解。
既然我们懂得了在段落标签中设置高度会出现“有空白”区域与“装不下”的两种情形，那么，怎样设置才能够使我们要装入的“东西”刚好装满呢（因为上面所出现的两种情形的网页都不美观）？
其方法是：采用默认值。也就是“缺省”段落的高度。换句话来说，就是“不设置”段落的高度。
应用这种方法制作的网页，网页的规格是360图书馆系统设置的规格。其宽度大约是680px左右，高度是随你放入的网页材料自动调整的。因此，在段落标签中，我们一般不必设置其宽度与高度，除非必须设置的时候，我们再设置其宽度与高度（例如：在网页中应用定位代码插入内容的时候。这一点，在以后的相关教程中我再作讲解。）。
三、设置了背景颜色的段落标签：
我有米黄色的背景颜色了。
首标签解析：<段落标签css样式＝“背景颜色：米黄色”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，是不是有了米黄色的背景颜色了。
四、设置了背景颜色和外边距的段落标签：
我有米黄色背景颜色和30px的外边距
首标签解析：<段落标签css样式＝“背景颜色：米黄色；外边距：30px”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，是不是有了米黄色的背景颜色了，并且在米黄色方框的四周都有了一定的空白区域了。这些空白区域就是段落的外边距。
五、设置了首行缩进的段落标签：
这是一段文字，首行文字空了两格。为什么空了两格呢？因为设置了首行缩进的样式。你看看这段代码：TEXT-INDENT:2em就知道了，这就是首行空两格的代码。
首标签解析：<段落标签css样式＝“文字首行缩进：2em”>这里的2em，可以理解为：两个文字的宽度。
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，第一行文字是不是空了两格。这就是首行缩进。
六、设置了滚动条的段落标签：
对群友们所做作业的批改建议:我认为，在网络中的教学，不同于学校的教学工作。网络中的朋友们，都是成年人了。对自己所做的作业，应该基本上知道对与错，自己无法判断的可以让老师或者群友们批改。如果所有的作业都让老师批改，那肯定是批改不过来的。何况，我每天的上网时间是有限的。我每天都得接送小孙孙上幼儿园，家里也还有许多零星事情需要处理，也得出去锻炼锻炼，还有许多教程需要编写。如果一点儿作业都不批改，那也不行的，就不成为老师了。所以，我的职责只能是解疑答难了。这一段文字有点儿长，因此出现滚动条了。
首标签解析：<段落标签css样式＝“宽度：400px；高度：100px；OVERFLOW:auto代码即为：设置滚动条”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，这段文字的右边是不是出现了竖向的滚动条了。
七、设置了边框线的段落标签：
这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。
首标签解析：<段落标签css样式＝“下边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px边框线样式为实心线；左边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px边框线样式为实心线；上边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px边框线样式为实心线；右边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px边框线样式为实心线；”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，是不是给这段文字添加边框了。
八、设置了背景图片的段落标签：
这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。
首标签解析：<段落标签css样式＝“下边框：红色5px实心线；左边框：红色5px实心线；背景图片：地址（http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg）；上边框：红色5px实心线；右边框：红色5px实心线；下边框：红色5px实心线；左边框：红色5px实心线；”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，是不是给这段文字添加背景图片了。
九、设置了竖排版样式的段落标签：
这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。
首标签解析：<段落标签css样式＝“排版样式：竖排版；宽度：200px；高度：350px”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，这段文字是不是竖排版啊？
十、设置了绝对定位样式与背景颜色的段落标签：
这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。
首标签解析：<段落标签css样式＝“定位方式：绝对定位；背景颜色：十进制颜色（红色值10，绿色值255，蓝色值0）；居上：100px；居左：0px”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，这段文字是不是有了草绿色的背景颜色？放置文字的方框上面是不是有了一段空白区域？这段空白区域，就是因为段落标签中设置了绝对定位样式：居上100px（TOP:100px）的缘故。
十一、设置了诸多文字属性的段落标签：
这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。
首标签解析：<段落标签css样式＝“宽度：99％；文字颜色：十进制颜色（绿色）；行高：150％；字距：10px；字体：黑体；字号：26pt；滤镜：光晕滤镜（颜色＝黄色，强度＝5）；”>
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，这段文字的效果多么漂亮呀！其原因是段落标签中设置了光晕滤镜的样式。（css的滤镜，有的浏览器不支持，也就是不能正常显示。有关滤镜的内容，我将在后面的教程中专题讲解。）
学习了段落标签以后，我们在制作网页时，就应该把段落标签与文字标签联合起来应用。
在制作文字网页的时候，我们可以选择应用下面的联合标签：
1、制作“居左对齐”的文字，应使用：文字内容
2、制作“居中对齐”的文字，应使用：文字内容
3、制作“居右对齐”的文字，应使用：文字内容
上面的联合标签，其顺序是：段落首标签，文字首标签，文字内容，文字尾标签，段落尾标签。
要修改文字的颜色，你可以修改括号内的三个数值：第一个数值是红色，第二个数值是绿色，第三个数值是蓝色。
要修改文字的字体，你可以把“黑体”修改为：宋体、隶书、微软雅黑等字体。
要修改文字的大小，你可以修改字号的值，也就是文字标签中的那个20。
在制作图片网页的时候，我们只需使用段落标签即可（一般是使用“居中对齐”的段落标签）。把图片标签放到段落标签的首标签与尾标签之间即可。
举例如下：
你想应用段落标签的哪些属性，都可以把它们添加到段落标签的首标签中；你想应用文字标签的哪些属性，都可以把它们添加到文字标签的首标签中。添加的方法，要用css样式添加，还需进行测试，因为有些属性之间，可能会发生冲突，还可能有个先后的顺序问题。只有经过测试，才能够知道添加的这些属性是否有效，是否能够正常显示。
现举例如下：
这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。
“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果。
上面的段落标签，设置了四条边框线的颜色、宽度、样式，光晕滤镜的颜色、强度，行高，首行缩进，宽度，字距，字体，颜色，字号等属性。
作业：
一、认识段落标签。懂得段落标签是一套标签，首标签 与尾标签 必须配合使用。段落中的内容要放置在首标签与尾标签之间，即：内容 。这里的内容，可以是文字，也可以是图片。
二、填空：
这是居（）对齐的段落标签。
这是居（）对齐的段落标签。
这是居（）对齐的段落标签。
三、解析下面的各个标签：（解析标签是学习代码，认识代码的一种好方法。代码知识基础差的朋友要经常进行这种练习。举例：解析：<段落标签对齐方式＝居左对齐>）
1、
2、
3、
4、
5、
6、
7、
8、
9、
10、
11、
四、把本节教程中讲解的11种段落标签连同标题都复制下来，保存在你的一个文件夹中，文件夹的名称命名为：段落标签。
五、把制作文字网页的三种联合标签和制作图片网页的一种标签复制下来，保存在你的另一个文件夹中，文件夹的名称命名为：制作网页常用标签。
六、标签中的各个字母，可以大写，也可以小写。把文字标签、图片标签、段落标签以及它们常用的属性、属值，用大写的方法与小写的方法都写一写，尽快地认识它们。
|
