《【网页设计】【html+css】【第4章 文字布局】》由会员分享，可在线阅读，更多相关《【网页设计】【html+css】【第4章 文字布局】（17页珍藏版）》请在金锄头文库上搜索。
1、 39第 4 章 文字布局 文字布局指对文字进行处理、设置样式。文字布局在网页中的用途是必不可少的，主 要涉及到文章的段落、列表等，一篇文章在网页中的美观与文字的布局有很大关系。本章 主要从 HTML 的布局标签作讲解，学完本章的内容，将会掌握以下内容： ? 行的控制 ? 文字对齐 ? 段落设置 ? 列表 ? 文字布局手把手 4.1 行的控制 有时在页面中要对文字的行进行控制或处理，如设置其在某个位置换行、文本对齐等， 对这行的文本设置不同的样式，那么学习行的控制是很重要的。行的控制主要分为：换行 控制和不换行控制。 4.1.1 换行控制 仔细想想，在前面学习标记是否与行有联系呢？比如空一行出
2、来。是的，就是前面学 习过的标记对。在这里告诉读者，也可以单独使用，语法代码如下： 文字一文字二 意思是文字一后面有一对，简写，从网页上看，两行文字中间空出一行， 也就是的作用。代码 4.1 说明了行的控制。 代码 4.1 源代码第 4 章p 的用法.htm 的用法 文字一文字二 代码 4.1 说明在文字中间插入标记，使文本到此处中断本行，再起新的段落，效果40如图 4.1 所示。 在前面也学过一个标记，强制换行符。标准的写法是： 当然，很多人喜欢写成，在语法上没有错，但最好是用标准写法。如果存在多个 ，会出现多行空行。请读者思考为什么？代码 4.2 是表示的用法。 代码 4.2 源代码第 4
3、 章br 的用法.htm 的用法 文字一 文字二 在代码 4.2 中，两行文字中间加了 4 个换行符，即出现 3 个空行（其中第 1 个换行标记 表示在第 1 行中换行，其他的在空行中换行），下面来看上面代码强制换行后的效果，如 图 4.2 所示。 图 4.1 的用法 图 4.2 强制换行 4.1.2 不换行控制 有读者可能会问，能不能不换行一直显示下去，有的。如需要不换行控制，用标记对 表示，标记对中的内容在页面中一直都不会换行。本标记对并不会经常用到， 下面列出不换行控制的完整语法： 41只要在标签里面的，不管有多长，都在一行里面，在状态栏上会出现左右移动的框， 说明在标签里显示超过了正常
4、宽度。代码 4.3 表示不换行符的用法。 代码 4.3 源代码第 4 章不换行.htm 不换换行 HTML+CSS 完成自学手册 HTML+CSS 完成自学手册 HTML+CSS 完成自学手册 HTML+CSS 完成自学手册 HTML+CSS 完成自学手册 HTML+CSS 完成自学手册 HTML+CSS 完成自学手册 HTML+CSS 完成自学手册 代码 4.3 中，在多个“HTML+CSS 完成自学手册”的文本中，被标记对 包围着，尽管在代码中，有 4 行文本，但在网页中出现的效果会不会像代码中的那样呢？ 看看代码 4.3 中的效果就知道了，效果如图 4.3 所示。 图 4.3 用一直没换
5、行 从代码中可以看到，这与代码中有没有换行和长度大小都没关系。所以， 想对行进行控制，可以使用、等标签符。 注意：就是的简写，只不过里面没有内容，所以出现空格。请读 者注意，如果想空两行是不是就用两个呢？不是的。后面输入再多也是空一行。 这与不同。 424.2 文字对齐 文字对齐也很重要，当在一个段落或层里面的文字作对齐布局时，就会用到 align 标签 了。对齐标签不会单独使用，往往通过某些标记配合使用，如在标记、标记都会 用到，对齐的语法如下： align=“#“ 其中#代码表示方位，可选择的有：left 向左，right 向右，center 居中。align 可以放在 和以后再学的里，表
6、示文字在标记中向哪个方面偏向，可以包括文字与 图片，也可以全是文字。代码 4.4 表示文字向右对齐。 代码 4.4 源代码第 4 章文字对齐.htm 文字对齐 HTML+CSS 完全自学手册 在标记对中有一行文字，文字在里面设置的是向右偏移的，即 align=right，请看效果，如图 4.4 所示。 图 4.4 文字偏向右边 同理，可以在 align 中设置其他对齐方式，如向右用 align=right，居中用 align=center， 对于位置的引号，可有可无，为了表示真正的意思，最好是用引号包围关键字，其他的属 性设置也一样。 有一点比较有意思，居中显示也可以不用设置 align 为
7、center，可以换个方面来居中， 其语法为： 居中 很明显，在标签里面放入的文字是居中的，现在在图 4.4 的代码中基本上加入下面居中43代码，表示居中文本，在结束标记前加入以下代码： HTML+CSS 完全自学手册 -居中 加入的代码在页面体最后面，故显示在代码 4.4 中的文本后，向右对齐后面的文本是用 修饰，处于居中状态，效果如图 4.5 所示。 图 4.5 center 居中 注意：对本节的内容如果读者还不清楚的话，在下一章的文字与图片对齐中也会讲到， 包括垂直对齐。 4.3 段落设置 段落设置其实很容易，就是在一张网页上，用到段落的地方，会对其布局或字体进行 设置，网页中的文章都会
8、有多个段落，所以在段落上要注意。 多个段落有多个段落标记，如下表示两个段落： 段落一 段落二 多少个段落有多少个代码，然后对每个段落进行必要的设置。现在用以前学过的知 识来练习一下段落设置，如代码 4.5 所示。 代码 4.5 源代码第 5 章段落设置.htm 段落设置 段落一:HTML+CSS 完全自学手册 段落二:HTML+CSS 完全自学手册 段落三:HTML+CSS 完全自学手册 段落四:HTML+CSS 完全自学手册 44上面代码中有 4 个段落，每个段落都设置不同的样式，如段落一颜色为红色，段落二 设置为粗体，段落三为删除线，段落四调协的文本为标题样式，比较这 4 个段落效果，如
9、图 4.6 所示。 图 4.6 段落设置 4.4 列表 列表分为有序列表和无序列表，在什么情况下用到这两个列表呢？读者在门户网站上 浏览新闻时，在网站的新闻列表中，新闻标题前会出现一个小圆点，而有的是有序号的数 字，前者表示的是无序列表，后者表示的是有序列表。本小节来学习列表的表示，通过代 码可以表现出列表是有序列表还是无序列表。 4.4.1 无序列表 所谓无序列表是指在列表中没有顺序可言，表里的每项都是相同的。列表的语法分两 部分： 表项一 表项二 表项 分析上面代码，决定无序的是，而只是里面的一列表项。如果想列出更多的表 项，那么就在里加表项就可以。代码 4.6 表示无序列表用法。 45代
10、码 4.6 源代码第 6 章无序列表.htm 无序列表 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 在无序列表符中间加了 4 行带有列表项的文字，默认状态下的无序列表所显示的效果 在文本前用圆点表示，即有多少项，会在项前面显示多少个小圆点。所显示的效果如图 4.7 所示。 图 4.7 无序列表 4.4.2 有序列表 与无序列表对应的是有序列表，表项里不用设置就可以自动按顺序排列，初学者乍一 看很神奇，现在来揭开神秘面纱。 有序列表用表示有顺序，里面表项符与无序列表一样的，只代表一个表项而 已，在多个表项中，系统
11、自动按顺序排列，语法代码如下： 表项一 表项二 表项 46与无序列表相差只是在上。 下面示例的内容与无序列表是一样的 （表项都是一样） ， 不同的是用标记对取代了标记对，请看代码 4.7 表示有序列表用法。 代码 4.7 源代码第 4 章有序列表.htm 无序列表 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 与无序列表效果不相同的是，有序列表在项前面用数字序号表示，即从第 1 项开始， 然后每加一项一直到总项的数量，如图 4.8 所示。 图 4.8 有序列表 注意：有序与无序只相差一个字母，但在区别上是明显不同
12、。请读者在合适的位置上 用。在有序列表中还可以用其他有序符取代数字，#可以有：A、a、I、I、 1 等。 4.5 其他方式修饰文本 本小节对文本有欲格式化、计算机输出，块引用，闪烁等进行讲解。这几种在网页中 很少用到，但学会了也是一种很好的效果和技能。换言之，在必要的时候会用到。 474.5.1 欲格式化文本 欲格式化文本在网页中输出的是在代码中的样式，因为代码没有欲格式化的话，是会 去掉里面的空格。其语法如下： 文字 这样，在网页中就会输入文字里面的格式。里面有空格就会输出空格，有换行也会输 出换行。请看代码 4.8 说明欲格式化文本。 代码 4.8 源代码第 4 章欲格式化文本.htm 欲
13、格式化文本 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 按正常的格式，在网页中不会出现多个空格的，但有标记对所表示的效果 就不一样了。即在一行文字里空了很长的空格，然后再出现文本内容，这样的效果是怎么 样呢？如图 4.9 所示。 图 4.9 欲格式化 pre 另外一个与 pre 的效果很相似，语法形式也是双标签的，标签里面放文本或代码，语法 形式如下： 文本 48xmp 与 pre 的重要区别是前者对 HTML 代码看作是文本，而后者会解释 HTML 代码， 现在比较二者的区别， 代码 4.9 表示在 pre 的代码中加入 HTML 标签分别输入到二者标记对 内。 代码 4
14、.9 源代码第 4 章欲格式化文本.htm 欲格式化文本 下面是 pre 代码： HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 下面是 xmp 代码： HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 上面代码中比较 pre 与 xmp 里面文本的区别，从效果中来比较与 的用法，效果如图 4.10 所示。 49图 4.10 pre 与 xmp 比较 4.5.2 计算机输出格式 现在 IT 技术网站越来越多，所要在网页中显示计算机代码的需
15、求也多了。对初学者学 习计算机输出格式很有必要。那么什么样才是计算机的格式呢？请看下面语法格式代码： 代码样式小型固定宽度字体显示的文本 代码样式固定宽度字体渲染 代码样式固定宽度字体渲染文本 代码样式斜体字渲染 下面用上面的语法来看看效果。是不是里面所说的样式呢？代码 4.10 表示计算机输出 格式。 50代码 4.10 源代码第 4 章计算机输出格式.htm 计算机输出格式 中 网页标题 正文-这是用 html 标签表示的效果 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 每个代码放在一行， 但在中， 放置了
16、基本的 HTML 结构， 在 内所显示的效果是该网页体的在范围中所显示的，比较出来的效果如图 4.11 所示。 图 4.11 计算机输出格式 514.6 文字布局手把手 在前面小节中看到很多实例，讲述了文字布局的知识，接下来对上面所讲解的知识用 实例表现出来。通过一个完整的实例演示，使读者对 HTML 中文字布局标记更有印象，看 完后能举出更多例子。 4.6.1 设置文字换行与不换行 输入文章并设置文字换行与不换行，代码 4.11 设置了文字换行与不换行，其中换行标 记为 br，而不换行的标记用 nobr 表示。 代码 4.11 源代码第 4 章文字布局手把手.htm 文字布局手把手 HTML+CSS 完全自学手册 HTML+CSS 完全自
