第3章 文字与段落 清华大学出版社
主要内容 对网页中的文字格式化 对网页中的段落格式化
3.1.1添加文字 文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。在HTML文件中，添加文字内容的方式与在word、记事本等中添加文字的方式相同，在需要输入文字的地方输入即可，但是需要添加在<body>与</body>标记之间。具体内容包括浏览器中要显示的文字、空格符、特殊符号以及注释语句。
3.1.1添加文字 <!--程序3-1--> <html> <head> <title>在网页中添加文字</title> </head> <body> 这是一本介绍HTML，CSS，JAVASCRIPT的专业书籍。 </body> </html>
3.1.1添加文字
3.1.2标题字 标题字，就是以几种固定的字号去显示文字。在HTML中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。 基本语法： <h# align="left|center|right">标题文字</h#>
3.1.2标题字 <!--程序3-2--> <html> <head> <title>在网页中添加标题字</title> </head> <body> <h1 align="center">一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4 align=left >四级标题</h4> <h5 align=center>五级标题</h5> <h6 align=right>六级标题</h6> </body> </html>
3.1.2标题字
3.1.3添加空格 通常情况下，HTML会自动删除文字内容中的多余空格，不管文字中有多少空格，都被视做一个空格。比如：两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，可以明确使用“ ”表示空格。这种使用代码控制的方式与在文本编辑软件中通过输入空格键来添加空格的方式不同。 基本语法：
3.1.3添加空格 <!--程序3-3--> <html> <head> <title>在网页中添加空格</title> </head> <body> 这是一本 介绍HTML，CSS， JAVASCRIPT 的专业书籍。 </body> </html>
3.1.3添加空格
3.1.4添加特殊符号 特殊符号和空格一样，也是通过在HTML文件中输入符号代码来添加。使用特殊符号可以将键盘上没有的字符输出出来。 基本语法： <body> &…..© </body>
3.1.4添加特殊符号 <!--程序3-4--> <html> <head> <title>在网页中添加特殊符号</title> </head> <body> <center> 版权所有© <!--加入了版权符号的符号代码--> </body> </html>
3.1.4添加特殊符号
3.1.5注释语句 可以在HTML文档中添加注释，增加代码的可读性，便于以后维护和修改。访问者在浏览器中是看不见这些注释的，只有在用文本编辑器打开文档源代码时才可见。 基本语法： <comment>…</comment> 或 <!--…-->
3.1.5注释语句 <!--程序3-5--> <html> <head> <title>在网页中添加添加注释</title> </head> <body><comment>body标记是主体内容</comment> <center> <pre><!--pre代表原样显示排版格式--> 我们永远的家 ——多媒体专业！ </pre> </body> </html>
3.1.5注释语句
3.2文字样式 在网页中添加文字后，可以设置其字体、字号、颜色等属性，利用<font>标记或<basefont>标记都可以实现。
3.2.1普通文字标记 利用<font>可以对网页文字的字体、字号、颜色进行定义。 基本语法： <font face=" " size=" " color=" " >…</font>
3.2.1普通文字标记 <!--程序3-6--> <html> <head> <title>设置文字的字体、字号、颜色</title> </head> <body> <center> <font face=“黑体” size=6 color=“red” >我们是一个团体， 不会丢下谁，不会落下谁。共同奋进！！</font> </center> </body> </html>
3.2.1普通文字标记
3.2.2基底文字标记 在制作网页前，可以先使用<basefont>标记对整个网页文字进行一个基本的定义，主要包括字体、字号和颜色，当网页中没有另外定义文字样式时，就自动套用<basefont>定义的样式，定义将影响整个HTML页面。 基本语法： <basefont face=" " size=" " color=" " >
3.2.2基底文字标记 01：<!--程序3-7--> 02：<html> 03：<head> 04： <title>整个网页文字的字体、字号和颜色基本 定义</title> 05： <basefont face="黑体" size=5 color="red" > 06：</head> 07：<body> 08： <center> 09： 学校将于近期举办校园卡拉OK大赛<br> 10： <font size=+3 color="green"> 11： 学校将于近期举办校园卡拉OK大赛 12： </font>
3.2.2基底文字标记 13： <br> 14： <font size=–2 > 15： 学校将于近期举办校园卡拉OK大赛 16： </font> 17： </center> 18：</body> 19：</html>
3.2.2基底文字标记
3.3.1粗体、斜体、下划线 基本语法： <b>…</b> <i>…</i> <u>…</u>
3.3.1粗体、斜体、下划线 <!--程序3-8--> <html> <head> <title>文字的加粗、斜体和下划线</title> </head> <body> <center> <font color=“#FF0000” size=3><b>这些文字是粗体 的</b></font><br> <i>这些文字是斜体的</i> <br> <u>这些文字带有下划线</u> </center> </body> </html>
3.3.1粗体、斜体、下划线
3.3.2删除线 基本语法： <strike>…</strike>
3.3.2删除线 <!--程序3-9--> <html> <head> <title>给文字添加删除线</title> </head> <body> 作者信箱由<strike>junmeihao@gmail.com</strike>更改 为hongmei@gmail.com <!--添加删除线--> </body> </html>
3.3.2删除线 图3-9给文字添加删除线
3.3.3上标、下标 在数学公式中，上标和下标的使用比较广泛，比如x1，x2，y1，y2等。 基本语法： <sup>…</sup> <sub>…</sub>
3.3.3上标、下标 <!--程序3-10--> <html> <head> <title>上标、下标的实现</title> </head> <body> <h2>解下面的代数方程式</h2> x<sup>2</sup>-3x+2=0<br> 解：x<sub>1</sub>=2; x<sub>2</sub>=1<br> </body> </html>
3.3.3上标、下标
3.3.4设置文字标注 在HTML文件中，可以在文字上方添加说明，并以缩小的字号显示。 基本语法： <ruby>被说明文字 <rt>文字的标注</rt> <ruby>
3.3.4设置文字标注 <!--程序3-11--> <html> <head> <title>在文字上方标注说明</title> </head> <body> <ruby>第二十九届奥运会在北京举行<rt>2008</rt></ruby> </body> </html>
3.3.4设置文字标注
3.3.5设置地址文字 <address>标记用来表示HTML文档的特定信息，如：E-mail、地址、签名、作者、文档信息等。 基本语法： <address>…</address>
3.3.5设置地址文字 <!--程序3-12--> <html> <head> <title>设置地址文字</title> </head> <body> 给我们写信:<address>wangtao@gmail.com</address> </body> </html>
3.3.5设置地址文字
3.3.6设置等宽文字 为了使网页中的文字显示更加整齐、美观，可以使用以下标记进行设置。 基本语法： <tt>…</tt> <samp>…</samp> <code>…</code> <kbd>…</kbd>
3.3.6设置等宽文字 01：<!--程序3-13--> 02：<html> 03：<head> 04： <title>设置等宽文字</title> 05：</head> 06：<body> 07： <h2>成功源于努力去克服困难</h2> 08： <p><tt>Success grows out of struggles to overcome difficulties.</tt></p>
3.3.6设置等宽文字 09： <p><samp>Success grows out of struggles to overcome difficulties.</samp></p> 10： <p><code>Success grows out of struggles to overcome difficulties.</code></p> 11： <p><kbd>Success grows out of struggles to overcome difficulties.</kbd></p> 12：</body> 13：</html>
3.3.6设置等宽文字
3.4段落 文字的组合就是段落，段落就是格式上统一的文本。下面介绍和段落相关的HTML标记。
3.4.1段落标记 在文本编辑器中输入的回车和额外空格将被HTML忽略，所以要在网页中开始一个段落需要通过使用标记<p>来实现。由<p>标记所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，用以区别文字的不同段落。 基本语法： <p>…</p>
3.4.1段落标记 <!--程序3-14--> <html> <head> <title>段落</title> </head> <body> <p>五十个不同的分子，在不同状态下进入了同一容器， 这就组成了我们的家——多媒体专业。在这个容器里， 我们碰撞着，摩擦着，产生了各色各样的灵感，活力与 情绪。</p>
3.4.1段落标记 <p> 在不地碰撞和摩擦中，分子也不断地变化，成长着， 最终可走出这个容器，勇敢地面对、挑战外面的世界。 不管外面如何复杂、艰难，请大家彼此珍惜这段我们相逢 相识相知的日子，在这里我们痛过笑过哭过，不论是苦的 还是甜的，这都是我们年轻的见证。</p> </body> </html>
3.4.1段落标记
3.4.2换行标记 可以使用<br>来控制段落中文字的换行显示。一般，浏览器会根据窗口的宽度自动将文本进行换行显示，如果想强制浏览器不换行显示，可以使用<nobr>标记。若希望在<nobr>标记中的文字强制换行，则可以使用<wbr>。 基本语法： <br> <nobr>…</nobr> <wbr>…</wbr>
3.4.2换行标记 01：<!—程序3-15--> 02：<html> 03：<head> 04： <title>换行</title> 05：</head> 06：<body> 07：<p> 08：无换行标记：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。 09：<br>有换行标记：<br>在这个容器里，<br> 10：我们碰撞着，<br>摩擦着，<br>产生了各色各样的灵感，<br>活力与情绪。 11：</p> 12：<nobr>五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家—— 13：媒体专业。<wbr>在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活 14：与情绪。</wbr></nobr> 15：</body> 16：</html>
3.4.2换行标记
3.4.3居中标记 如果希望网页中的段落居中显示，可以采用标记<center>。该标记也可以使图片等网页元素居中显示。 基本语法： <center>…</center>
3.4.3居中标记 <!--程序3-16--> <html> <head> <title>居中对齐标记</title> </head> <body> <center>《关于我们》</center> <center> </center> <center>五十个不同的分子，在不同状态下进入了同一容器，这就组 成了我们的家——多媒体专业。<!--文字内容自动居中对齐--> </center> </body> </html>
3.4.3居中标记
3.4.4水平分隔线 水平线可以作为段落与段落之间的分隔线，使得文档结构清晰，层次分明。 基本语法： <hr width=" " size=" " color=" " align=" ">
3.4.4水平分隔线 01：<!--程序3-17--> 02：<html> 03：<head> 04： <title>水平分隔线</title> 05：</head> 06：<body> 07：<center> 08：关于我们 09：<hr> 10：五十个不同的分子， 11：<hr size="6"> 12：在不同状态下进入了同一容器， 13：<hr width="40%">
3.4.4水平分隔线 14：这就组成了我们的家——多媒体专业。 15：<hr width="60" align="left"> 16：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。 17：<hr size="6" width="30%" align="center" noshade color="red" > 18：</center> 19：</body> 20：</html>
3.4.4水平分隔线
3.4.5预格式化标记 浏览器在显示HTML页面时候，通常会将页面中所有的额外空白和回车进行压缩，并根据窗口宽度自动换行。要想保留原始文字排版的格式，可以通过<pre>标记来实现。 基本语法： <pre>…</pre>
3.4.5预格式化标记 01：<!--程序3-18--> 02：<html> 03：<head> 04： <title>原样显示文字标记</title> 05：</head> 06：<body> 07：<pre> 08： 请记住我们是一个团体， 09： 10： 不会丢下谁， 11： 12： 不会落下谁。 13： 14： 共同奋进！！ 15：</pre> 16：</body> 17：</html>
3.4.5预格式化标记
3.4.6忽略html标记 在HTML文件中，利用<xmp>标记，可以使得该标记后面的HTML标记的作用被忽略，直接显示在页面中。 基本语法： <xmp>…</xmp>
3.4.6忽略html标记 <!--程序3-19--> <html> <head> <title>忽略HTML标记</title> </head> <body> 基本语法：<hn>内容</hn> <br><br> 作用：设置显示字号。 示例： <xmp><h3>这是h3标记的例子</h3></xmp> </body> </html>
3.4.6忽略html标记
3.4.7设置段落缩进 利用段落的缩进，可以增加段落的层次效果。 基本语法： <blockquote>…</blockquote>
3.4.7设置段落缩进 01：<!--程序3-20--> 02：<html> 03：<head> 04：<title>段落缩进</title> 05：</head> 06：<body> 07： 关于我们<br> 08： <blockquote > 09： <p>五十个不同的分子，在不同状态下进入了同一容器，</p><!--缩进了5个字符--> 10： </blockquote> 11： <blockquote><blockquote> 12： <p>这就组成了我们的家——083007班。<p> 13： </blockquote></blockquote> 14： <!--缩进了10个字符--> 15：</body> 16：</html>
3.4.7设置段落缩进
3.5小实例 本节给出一个唐诗欣赏的页面，在这个实例中综合运用本章所介绍的标记对普通文字进行格式化。
3.5小实例 <!--程序3-21--> <html> <head> <title>文字网页</title> </head> <body> <h2 align=center>唐诗欣赏</h2> <hr width="100%" size="1" color="#00ffee"> <p align="center"><b><font size="3">静夜思</font></b></p> <p align="center"><font size="2">李白</font></p> <p align="center"><b>床前明月光，<br> 疑是地上霜。 <br> 举头望明月，<br> 低头思故乡。</b></p> <p> </p> <p><font class="text"><b>【简析】</b><br>
3.5小实例 <p> 这是写远客思乡之情的诗，诗以明白 如话的语言雕琢出明静醉人的秋夜的意境。它不追求想象的新颖奇特，也 摒弃了辞藻的精工华美；<br>它以清新朴素的笔触，抒写了丰富深曲的 内容。境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻绎。 无怪乎有人赞它是“妙绝古今”。 </p> <hr width="400" size="3" color="#00ee99" align="left"> 版权©:版权所有，违者必究 <address>E-mail:limingwei@gmail.com</address> </body> </html>
3.5小实例
小结 本章介绍了文字与段落的格式设置。主要内容包括文字内 容标记、文字样式标记、文字修饰标记、段落修饰标记的 使用。 1. 在浏览器显示的文字内容编写在<body>和</body>标 记之间，内容包括普通的文字、空格符号和特殊符号以及 页面的注释语句，标题字标记<h>在HTML中，定义了六 级标题； 2. 文字修饰标记可实现网页文字的斜体、加粗、上标、下标、大小字号、下划线、删除线、等宽、地址等设置； 3. 段落格式设置可实现段落对齐方式、换行、预格式化、水 平线设置、换行等设置。
Thank You ! www.hnufe.edu.cn