Download presentation
Presentation is loading. Please wait.
1
W3C标准网页制作 主讲教师：张 涛
2
第6讲、文字与段落 6.1.文字内容 6.2.标题字标记 6.3.文字的修饰标记 6.4.字体标记 6.5.段落标记 6.6.水平线标记<HR>
3
6.1.文字内容 文字是网页设计最基础的部分，一个标准的文字页面可以起到传达信息的作用。对文字的格式化，通常可以使用以下两种方式:
第一种方式是直接使用HTML标记，例如，可以使用标题1标记<h1>来将一行文本设置为标题1格式，或是使用粗体标记<b>来将选中的文本字符设置为加粗格式。 第二种方式是使用CSS，即层叠样式表。CSS是一种对文本进行格式化操作的高级技术，它从一个较高的级别上对文本进行控制。其特点是可以对文本的格式进行精确控制，而且可以在文档中实现格式的自动更新。利用CSS，可以对现有的标记格式进行重新定义，也可以自行将某些格式组合定义为新的样式，甚至可以将格式信息定义于文档之外。 本章介绍的是第一种方式对文字格式化的方法。
4
6.1.文字内容 向网页中插入文字内容是再简单不过的事情了，我们只需要在<body></body>之间插入相应的文字即可。 空格和一些特殊的符号是凭借特殊的符号码来表现的。通常由前缀“&”，加上字符对应的名称，再加上后缀“；”而组成。 特 殊 符 号 符 号 码 空格 “ " & & < > × × € € TM ™
5
6.2.标题字标记 在浏览器的正文部分，可以显示标题文字。 所谓标题文字就是以某几种固定的字号显示文字。
标题字标记共有6种，每一种的标题在字号上有明显的区别。一般用标题来强调段落要表现的内容，在HTML中，定义了六级标题，从一～六级，每级标题的字体大小依次递减。一级标题使用最大的字号表现，六级标题使用最小的字号表现。 <h1>…</h1> 程序实现 <HTML> <HEAD> <TITLE>页面的标题文字</TITLE> </HEAD> <BODY> <H1>这是一本专业详尽的HTML书籍</H1> <H2>这是一本专业详尽的HTML书籍</H2> <H3>这是一本专业详尽的HTML书籍</H3> <H4 align=left>这是一本专业详尽的HTML书籍</H4> <H5 align=right>这是一本专业详尽的HTML书籍</H5> <H6 align=center>这是一本专业详尽的HTML书籍</H6> </BODY> </HTML> 标题字可以在页面中实现水平方向左、中、右的对齐，便于文字在页面中的编排。在标题标记中，最主要的属性是ALIGN（对齐）属性，用于定义标题段落的对齐方式，使页面更加整齐。
6
6.3.文字修饰标记 在HTML文件中，可以加入多种文字的修饰标记: <HTML> <HEAD>
<TITLE>文字修饰标记</TITLE> </HEAD> <BODY> 这是一本<B>专业</B><i>详尽</i>的HTML<u>书籍</u>。<br><br> 当前价格：<s>98元</s>。<br><br> A<sub>1</sub>+B<sub>1</sub>=C<sub>1</sub><br><br> a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup><br><br> </BODY> </HTML> 标 记 描 述 <B> 粗体 <STRONG> <I> 斜体 <EM> <CITE> <SUP> 上标 <SUB> 下标 <BIG> 大字号 <SMALL> 小字号 <U> 下划线 <S> 删除线 <STRIKE> <ADDRESS> 地址 <TT> 打字体
7
6.4.字体标记 如果希望更改页面中的字体、字号和颜色
最佳的标记是使用<FONT>标记。 字体face：在任何一种安装在Windows系统中的字体都可以显示在浏览器中,选择“开始/控制面板”,双击“字体”,可以看到系统中安装的所有字体。 一般来说，不应该在网页中使用过于特殊的字体，因为对于浏览网页的人来说，其计算机中不一定会安装这些特殊字体，如果浏览到带有这些特殊字体格式的字符，只能以普通的默认字体来显示。对于中文网页来说，应该尽量对汉字使用宋体或黑体，因为大多数计算机中，默认时都安装这两种字体。 字号size：HTML页面中的文字可以使用不同的字号表现。字号指的是字体的大小，它没有一个绝对的大小标准，其大小只是相对于默认字体而言。例如，1号和2号字，比默认字体要小一些，而4号和5号字，比默认字体要大一些。 颜色color：HTML页面中的文字可以使用不同的颜色表现。丰富的字符颜色毫无疑问能够极大增强文档的表现力。 属 性 描 述 FACE 字体 SIZE 字号(1-7) COLOR 颜色 <HTML> <HEAD> <TITLE>文字的颜色</TITLE> </HEAD> <BODY> <FONT face="黑体" SIZE=7 COLOR="#ff0000">这是一本HTML书籍</FONT> </BODY> </HTML>
8
6.5.段落标记 文字属性的设定我们已经做了介绍，文字的组合就是段落。 下面就来介绍HTML语言中对段落的控制。
在HTML语言中，有专门的标记表示段落。所谓段落，就是一段格式统一的文本。在文档窗口中，每输入一段文字，按下回车键后，就自动生成一个段落。按下回车键的操作通常被称作硬回车，可以说，段落就是带有硬回车的文字组合。在HTML中，段落主要由标记<P>定义。 段落标记<p>…</p> 段落的对齐方式，指的是段落相对于文档窗口（或浏览器窗口）在水平位置的对齐方式。段落文字在页面中可以实现水平方向上的左、中、右的对齐，便于文字在页面中的编排 align=left、align=center、align=right。 换行标记<BR> 段落与段落之间是隔行换行的。文字的行间距过大，这时可以使用换行标记来完成文字的紧凑换行显示。 不换行标记<NOBR> 如果浏览器中单行文字的宽度过长，浏览器会自动将该文字换行显示，如果希望强制浏览器不换行显示，可以使用相应的标记。 <HTML> <HEAD> <TITLE>段落</TITLE> </HEAD> <BODY> <p align=center>这是一本HTML书籍<br>这是一本HTML书籍</p> </BODY> </HTML>
9
6.5.段落标记 预格式化标记<PRE>
所谓格式化，就是保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示，例如，原封不动地保留文档中的空白，如空格、制表符等。 <HTML> <HEAD> <TITLE>文字的预格式化</TITLE> </HEAD> <BODY> <PRE> 分散逐风转， 此以非常身。 落地为兄弟， 何必骨肉亲。 得欢当作乐， 斗酒聚比邻。 盛年不重来， 一口难再晨， </PRE> </BODY> </HTML>
10
6.6.水平线标记<HR> 程序实现 <HTML> <HEAD>
水平线用于段落与段落之间的分隔，使文档结构清晰明白，使文字的编排更整齐。水平线自身具有很多的属性，如宽度、高度、颜色、排列对齐等。在HTML文档中经常会用到水平线，合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档，如果合理放置几条水平线，就会变得层次分明，便于阅读。 属性：水平线宽度属性WIDTH ，水平线高度属性SIZE，水平线颜色属性COLOR ，水平线排列属性ALIGN 程序实现 <HTML> <HEAD> <TITLE>水平线标记</TITLE> </HEAD> <BODY> 为了全面了解双学位（双专业）毕业生的基本情况。 <hr width=400 SIZE=5 color="#ff0000" align=center> </BODY> </HTML>
11
谢谢!
Similar presentations
