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

春天没来 2014-04-05

展开全文

第六节段落标签

“春天没来”欢迎您

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

段落标签的表达方式为：要放置的内容。

段落标签的首标签中可以添加属性属值。常见的属性有：宽度（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 边框线样式为实心线；”>

“复制”上面的红色内容，“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”“发表”，看看其显示效果，是不是给这段文字添加边框了。

八、设置了背景图片的段落标签：

<p style="BORDER-BOTTOM: red 5px solid; BORDER-LEFT: red 5px solid; BACKGROUND: url(http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg); BORDER-TOP: red 5px solid; BORDER-RIGHT: red 5px solid">这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。

首标签解析：<段落标签 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样式添加，还需进行测试，因为有些属性之间，可能会发生冲突，还可能有个先后的顺序问题。只有经过测试，才能够知道添加的这些属性是否有效，是否能够正常显示。

现举例如下：

<P style="BORDER-BOTTOM: rgb(153,253,255) 4px solid; FILTER: glow(color=yelow, strength=0); BORDER-LEFT: rgb(153,253,255) 4px solid; LINE-HEIGHT: 150%; TEXT-INDENT: 2em; WIDTH: 99%; LETTER-SPACING: 10px; FONT-FAMILY: 黑体; COLOR: rgb(0,200,0); FONT-SIZE: 26pt; BORDER-TOP: rgb(153,253,255) 4px solid; BORDER-RIGHT: rgb(153,253,255) 4px solid"> 这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。

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

上面的段落标签，设置了四条边框线的颜色、宽度、样式，光晕滤镜的颜色、强度，行高，首行缩进，宽度，字距，字体，颜色，字号等属性。

“春天没来”欢迎您