文字标签段落标签图象标签.ppt

《文字标签段落标签图象标签.ppt》由会员分享，可在线阅读，更多相关《文字标签段落标签图象标签.ppt（37页珍藏版）》请在金锄头文库上搜索。

1、第二章文本标记段落标记图像标记复习：复习： 上节课我们已经讨论了HTML语言的基本原理并且使用记事本书写了一些web页。同时也将网页设置背景颜色、背景图片等效果。其中，我们还设置了文字的颜色，并且知道在中所设置的是所以文字的颜色。今天我们首先来看在网页中究竟如何设置文字的属性。（1）文字标记在网页中我们所看到的文字属性可以分为：大小、颜色、字体等 这些属性其实都是由一个标签决定的： 文字 size是用来定义字体的大小的,可以是“1-7” color是定义字体的颜色的 face是控制字型的，可选：宋体，黑体，隶书，arial,arial black等等。网页的标题我的网页 我的网页 我的第五个网

2、页 我的网页 我的第五个网页 我的网页 我的网页 我的网页 黑体 隶书 幼圆 以下是常用英文字体： Times New Roman Arial Arial Black Courtier New face 属性属性Comic Sans MS Verdana图图 2-8 常用字体示例常用字体示例物理字符样式 所谓物理字符样式，是指标记符本身就说明了所修饰文字的效果的标记符。例如，B 标记符表示粗体，SUB 标记符表示下标因为 B 是 Bold（粗体）这个单词的首字母，而 SUB 是 subscript（下标）这个单词的前三个字母。常用的物理字符样式标记符有：黑体标记 B、斜体标记 I、下划线标记

3、U 等，如表 所示。常用物理字符样式标记符标记符功能功能标记符标记符功能功能粗体删除线大字体下标斜体上标删除线固定宽度字体小字体下划线 使用这些物理字符样式时，只需将设置格式的字符括在标记符之间即可。例如，以下 HTML 代码在浏览器中的显示如图 所示。物理字符样式效果 物理字符样式效果示例 此处为粗体显示文本 此处为大字体文本 此处为小字体文本 此处为斜体文本 此处为等宽字体文本 此处为下划线文本 此处为使用<S>标记设置的删除线文本 此处为使用<STRIKE>标记设置的删除线文本 此处为上标示例：x2 + y2 = R2 此处为下标示例：H2SO4（2）段落标记标题

4、标记符 Hn段落标记符 P 和换行标记符 BR 水平线标记符 HR 段落对齐 标题标记符标题标记符 Hn 以下HTML代码显示了 1 至 6 级标题的效果，如图 所示。标题效果 此为一级标题 此为二级标题 此为三级标题 此为四级标题 此为五级标题 此为六级标题 此为正常文本标题效果 可以看出，浏览器在解释标题标记符时，会自动改变文本的大小并将字体设为黑体，同时自动将内容设置为一个段落。 <P>与<BR>的用法 第一段 第二段，用<BR>标记符控制断行 仍然为第二段，但此行已经断开 第三段 第四段，多个<P> 标记符并没有起到产生多个空行的效果 但

5、 多 个 <BR>标 记 符 可 以 产 生 多 个 空 行 效 果 此为最后一段 段落标记符段落标记符 P 和换行标记符和换行标记符 BRP 与 BR 的用法水平线标记符水平线标记符 HR size 属性 width 属性 noshade 属性 color 属性 以下 HTML 代码显示了如何用 HR 标记符的各种属性控制水平线的显示，效果如图所示。 水平线效果 以下是默认水平线： 以下是粗为 5 像素的水平线： 以下是长度为100像素的水平线： 以下是长度为屏幕宽度 50% 的水平线： 以下是粗为 5 像素的实心水平线： 以下是红色的水平线： 在水平线属性中，size属性的取值

6、是有范围，一般情况是100px水平线的主要是用于分段，当我们在水平线后面添加文字时，文字会自动换行，这也是它能够实现分段功能的重要属性。段落对齐段落对齐 align 属性 align属性可应用于多种标记符，例如前面介绍的 P、Hn、HR 等。使用 align 属性 本行为默认对齐的段落，相当于 align=left 本行为居中对齐的段落 本行为右对齐的段落 本行为居中对齐的一级标题 以下为左对齐的水平线： 使用 align 属性 注意：对于不同的标记符，默认的 align 属性值不同。P 和 Hn标记符的默认 align 属性值是 left，而 HR 标记符的默认 align 属性值是 cen

7、ter。 DIV 标记符与 CENTER 标记符 如果需要将多个段落使用相同的对齐方式，那么可以不必在每个段落中设置 align 属性，而是使用 DIV 标记符将所有段落包括起来，然后在 DIV 标记符中设置 align 属性。例如，以下 HTML 代码将多个段落的内容都设置为居中对齐，效果如图 所示。使用 DIV 标记符 浣溪沙 晏殊 一曲新词酒一杯， 去年天气旧池台， 夕阳西下几时回？ 无可奈何花落去， 似曾相识燕归来， 小园香径独徘徊。使用 DIV 标记符 其实，在这里有个对齐是例外的：center。 在THML语言有个单独的标记.，在这个标记里面的所有元素都会相对页面水平居中对齐。 格

8、式的嵌套（1）如果所设置的格式是相容的，则取格式叠加的效果。例如，如果为一段文字同时设置了粗体和斜体格式，则该段文字将以粗斜体显示。（2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。例如，如果同时在不同标记符中设置了段落对齐方式，那么相应内容的对齐方式以最近的标记符为准。 例如，以下 HTML 代码可以说明浏览器如何解释格式嵌套格式嵌套示例 本行使用 <DIV align="center">对齐 本行的对齐方式被更改了 本行文字显示了如何同时应用粗体和斜体 图 2-6 格式嵌套示例（3）图像标记Web 页图像基础图像标记符 IMG在页面中显示动画Web

9、页图像基础 Web 页图像格式 1 GIF 格式 对于目前广泛使用的 GIF 格式而言，还具有透明色的特点，即可以将图片中的某种颜色设置为透明色。这对于实现某些网页效果来说，具有非常现实的意义。例如，图 3-1 对比了一般的 GIF 图像和具有透明色的 GIF 图像。对于多数 图 像 处 理 软 件 （ 例 如 Fireworks） 甚 至 某 些 网 页 制 作 软 件 （ 例 如 FrontPage），都提供了将图片中的某种颜色转换为透明色的功能。图 3-1 普通 GIF 与透明 GIF 的区别2 JPEG 格式 图3-2中显示了两种不同压缩比率的 JPEG 图的效果。图 3-2 不同质量

10、 JPEG 图像的对比3 PNG 格式4 矢量格式 位图格式与矢量格式的区别如图 3-3 所示。 位图，用点描述图像矢量图，用线条等数学信息描述图像图 3-3 位图与矢量图的对比 使用网页图像的要点确保文件较小使图像具有所需的像素大小 所谓图像的像素大小就是指由图像本身的像素宽和像素高所确定的图像大小，例如，在同一种显示模式下，一个 1024768 的图像就显然比 800600的图像大的多。 在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图像处理软件更改图像的“Image Size”。一般在修改之后，图像的文件大小会显著变化。 例如，在 Photoshop 中，可以使用“Ima

11、ge”菜单中的“Image Size”命令，此时弹出如图 所示的“Image Size”对话框，可以在其中更改图像的宽度、高度和分辨率。图 3-7 Photoshop6.0 的“Image Size”对话框 插插 入入 图图 像像 示示 例例我插入的第一幅图像：我插入的第一幅图像：这段代码中，觉得了所插入图片的地址及文件名。Alt是图像标记的一个属性，用以说明图像。当我们用鼠标指向图像是就可以发现在鼠标下方会出现相应的文字信息。 设设置置图图像像在在页页面面中中的的对对齐齐与与设设置置文文本本对对齐齐类类似似，可可以以使使用用 DIV 或或 P 标记符将标记符将 IMG 标记符括起来，然后使用

12、标记符括起来，然后使用 align 属性。属性。 例例如如，以以下下 HTML 语语句句将将使使图图像像居居中中对对齐齐（图图像像默默认认时时与与文文本本一样是左对齐的）：一样是左对齐的）： 图像除了与页面水平对齐之外还有就是与周围内容的垂直对齐 这个属性此时属于img标记里面 以下HTML代码说明了 align 属性如何控制文本与图像的垂直对齐（同时显示了 border边框 属性的效果），如图 所示。文本与图像的垂直对齐示例此图像与文本顶部对齐此图像与文本中央对齐此图像与文本底部对齐文字与图像的垂直对齐图文混排时的图像对齐 以下 HTML 代码显示了文本与图像的环绕效果（同时显示了 hspa

13、ce 和 vspace 属性的效果）（水平边界与垂直边界），如图 所示。文本与图像的环绕示例 野蛮人-文明边缘的几个部落中的成员之一，拒绝一切看起来温柔和软弱的事物对他的影响。在部落之间的不断战争中他活了下来，这得益于坚定的意志和强健的体格。虽然缺乏文明人的心计，但是他能够敏锐的感觉到周围的环境，因为这一切来自他那动物般的直觉，这也使得野蛮人让人想起了民间关于狼人的一些传说。事实上他们坚信能够召唤图腾上动物的灵魂来鼓舞他们，并且因而得到非凡的力量和能力，不过这些召唤只是改善他们早已完美的战斗技能罢了。 女巫反叛的女人，她从东方男性魔法师占优势的魔法部落中偷取了如何使用魔法的秘密，使她成为了使用神秘巫术的专家，尽管她在白刃战斗中有很大不足，但她可以使用凶猛的进攻和防御魔法来弥补这一点不足。狐独和隐居的个性使很多人不理解她，有时候她看起来反复无常，但是事实上，她懂得怎样在次序和混乱中找到胜利的真谛。