网页设计与开发第2章初识HTML.ppt

2-1 对文字的格式化有哪几种方式？ 2-2 在网页中如何输入空格和回车？ 2-3 在网页中如何创建书签？ 习题 * 在网页中利用font/font标记修饰字体。通过修改这个标记中的属性可以修饰文字的字号、颜色和字体。font标记的属性如表2-3所示。 表2-3 font标记的属性 2.2.5 修饰字体标记 标记 描述 face 字体 Size 字号 color 颜色 【例2-6】 使用font标记修饰了一段文字，代码如下所示。 body font color=#CC0000为/fontfont size=+6读者/fontfont face=华文彩云演示/fontfont color=#C0C0C0 size=+3 face=黑体修饰字体标记/font /body 运行本实例，将显示如图2-10所示的运行效果。 图2-10 使用font标记修饰一段文字 2.3 段落标记 2.3.1 段落标记p 2.3.2 取消文字换行标记nobr 2.3.3 修饰段落的对齐属性align 2.3.4 保留原始排版方式标记pre 在HTML中使用p/p来划分段落。 基本语法如下： p段落文字/p 说明： 与其他的标记不同，段落标记可以没有结束标记/p，也就是说每一个新段落标记的开始，就是上一个段落标记的结束。 2.3.1 段落标记p 在网页中如果某一行的文字宽度过长，浏览器会自动对这段文字进行换行处理。但是有的时候用户并不希望浏览器对这行文字进行换行处理，这时用户可以使用nobr/nobr标记让这行文字不进行换行处理。 【例2-7】 使用nobr标记修饰文字，让文字进行不换行处理。代码如下所示。 body pnobr使用段落标记修饰段落，本行不进行自动换行/nobr/p p使用段落标记修饰段落，本行进行自动换行/p /body 2.3.2 取消文字换行标记nobr 运行本实例，将显示如图2-11所示的运行结果。 图2-11 使用nobr/nobr标记修饰段落 段落的对齐方式是指段落相对于浏览器窗口在水平位置的对齐方式。可以设置段落文字在页面中水平位置的左、中、右的对齐，这样方便于文字在页面中的编排。具体语法如下： p align=value……/p value：对齐位置。 【例2-8】 通过设置align属性，改变段落的对齐方式。代码如下所示。 body p align=left读者您好：/p p align=center感谢您能购买本书，希望本书能为您在以后的编程中带来帮助！/p p align=right明日科技/p /body 2.3.3 修饰段落的对齐属性align 运行本实例，将显示如图2-12所示的运行结果。 图2-12 设置段落的对齐方式 在网页制作中一般是通过各种标记来对文字进行排版的。但是在实际应用中，往往需要一些特殊的排版效果，比如说打印图形，这样使用标记会非常的麻烦。但使用pre标记就能够保留文本格式的排版效果，为用户排版带来许多的方便。其语法格式如下： pre要保留的文本格式/pre 【例2-9】 使用pre标签在网页中输出字符画。代码如下所示。 body pre ╭︿︿︿╮ {/ o o /} ( (oo) ) ︶ ︶︶ /pre /body 2.3.4 保留原始排版方式标记pre 运行本实例，将显示如图2-13所示的运行结果。 图2-13 使用PRE标记在网页中输出字符画 2.4 超链接标记 2.4.1 链接标记a 2.4.2 书签链接 2.4.1 链接标记a 链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是a标记。本章介绍的超链接应用都是基于a标记基础上的。a标记中的主要属性如表2-4所示。 表2-4 a标记中的主要属性 标记 描述 href 指定链接地址 name 给链接命名 title 给链接提示文字 target 指定链接的目标窗口 accessKey 链接热键 【例2-10】 现在创建一个超链接，链接到明日科技的官方网站上，通过代码的形式为读者展示a标记的用法。代码如下所示。 body a href=明日科技/a /body 运行本实例，将显示如图2-14所示的运行结果。 图2-14 创建一个链接到明日科技的超链接 绝对路径 绝对路径指的是文件或目录在硬盘上的真实路径。使用绝对路径定位链接目标文件比较清晰，但是有缺点，第一个缺点需要输入更多的内容，第二个缺点如果链接指向文件被移动了，就需要重新设置所