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

第二章 文本标记 段落标记 图像标记 复习： 上节课我们已经讨论了HTML语言的基本原理并且使用记事本书写了一些 web页。同时也将网页设置背景颜色、背景图片等效果。其中，我们还设置 了文字的颜色，并且知道在中所设置的是所以文字的颜色。今天我们 首先来看在网页中究竟如何设置文字的属性。 （1）文字标记 在网页中我们所看到的文字属性可以分为：大小、颜色、字体等 这些属性其实都是由一个标签决定的： 文字 size是用来定义字体的大小的,可以是“1-7” color是定义字体的颜色的 face是控制字型的，可选：宋体，黑体，隶书，arial,arial black等等。 网页的标题 我的网页 我的 网页 我的第五个网页 我的网页 我的第五个网页 我的网页 我的网页 我的网页 黑体 隶书 幼圆 以下是常用英文字体： Times New Roman Arial Arial Black Courtier New face 属性 Comic Sans MS Verdana 图 2-8 常用字体示例 物理字符样式 所谓物理字符样式，是指标记符本身就说明了所修饰文字的效 果的标记符。例如，B 标记符表示粗体，SUB 标记符表示下标 因为 B 是 Bold（粗体）这个单词的首字母，而 SUB 是 subscript（ 下标）这个单词的前三个字母。常用的物理字符样式标记符有：黑体 标记 B、斜体标记 I、下划线标记 U 等，如表 所示。 常用物理字符样式 标记符功能标记符功能 粗体 删除线 大字体 下标 斜体 上标 删除线固定宽度字体 小字体下划线 使用这些物理字符样式时，只 需将设置格式的字符括在标记符之间 即可。例如，以下 HTML 代码在浏 览器中的显示如图 所示。 物理字符样式效果 物理字符样式效果示例 此处为粗体显示文本 此处为大字体文本 此处为小字体文本 此处为斜体文本 此处为等宽字体文本 此处为下划线文本 此处为使用S标记设置的删除线文本 此处为使用STRIKE标记设置的删除线文本 此处为上标示例：x2 + y2 = R2 此处为下标示例：H2SO4 （2）段落标记 标题标记符 Hn 段落标记符 P 和换行标记符 BR 水平线标记符 HR 段落对齐 标题标记符 Hn 以下HTML代码显示了 1 至 6 级标题的效果，如图 所示。 标题效果 此为一级标题 此为二级标题 此为三级标题 此为四级标题 此为五级标题 此为六级标题 此为正常文本 标题效果 可以看出，浏览器在解释标题标记符时，会自动改变文本的大小 并将字体设为黑体，同时自动将内容设置为一个段落。 P与BR的用法 第一段 第二段，用BR标记符控制断行 仍然为第二段，但此行已经断开 第三段 第四段，多个P 标记符并没有起到产生多个空行的效果 但多个BR标记符可以产生多个空行效果 此为最后一段 段落标记符 P 和换行标记符 BR P 与 BR 的用法 水平线标记符 HR size 属性 width 属性 noshade 属性 color 属性 以下 HTML 代码显示了如何用 HR 标记符的各种属性控制水平线的显示，效 果如图所示。 水平线效果 以下是默认水平线： 以下是粗为 5 像素的水平线： 以下是长度为100像素的水平线： 以下是长度为屏幕宽度 50% 的水平线： 以下是粗为 5 像素的实心水平线： 以下是红色的水平线： 在水平线属性中，size属性的取值是有范围，一般情况是100px 水平线的主要是用于分段，当我们在水平线后面添加文字时，文字会 自动换行，这也是它能够实现分段功能的重要属性。 段落对齐 align 属性 align属性可应用于多种标记符，例如前面介绍的 P、Hn、HR 等。 使用 align 属性 本行为默认对齐的段落，相当于 align=“left“ 本行为居中对齐的段落 本行为右对齐的段落 本行为居中对齐的一级标题 以下为左对齐的水平线： 使用 align 属性 注意：对于不同的标记符，默认的 align 属性值不同。P 和 Hn标记符 的默认 align 属性值是 left，而 HR 标记符的默认 align 属性值是 center。 DIV 标记符与 CENTER 标记符 如果需要将多个段落使用相同的对齐方式，那么可以不必在每个段 落中设置 align 属性，而是使用 DIV 标记符将所有段落包括起来，然后在 DIV 标记符中设置 align 属性。例如，以下 HTML 代码将多个段落的内容 都设置为居中对齐，效果如图 所示。 使用 DIV 标记符 浣溪沙 晏殊 一曲新词酒一杯， 去年天气旧池台， 夕阳西下几时回？ 无可奈何花落去， 似曾相识燕归来， 小园香径独徘徊。 使用 DIV 标记符 其实，在这里有个对齐是例外的：center。 在THML语言有个单独的 标记.，在这个标记里面的所有元素都会相对页面水 平居中对齐。 格式的嵌套 （1）如果所设置的格式是相容的，则取格式叠加的效果。例如，如果为一 段文字同时设置了粗体和斜体格式，则该段文字将以粗斜体显示。 （2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。例如，如 果同时在不同标记符中设置了段落对齐方式，那么相应内容的对齐方式以最 近的标记符为准。 例如，以下 HTML 代码可以说明浏览器如何解释格式嵌套 格式嵌套示例 本行使用 DIV align=center对齐 本行的对齐方式被更改了 本行文字显示了如何同时应用粗体和斜体 图 2-6 格式嵌套示例 （3）图像标记 Web 页图像基础 图像标记符 IMG 在页面中显示动画 Web 页图像基础 Web 页图像格式 1 GIF 格式 对于目前广泛使用的 GIF 格式而言，还具有透明色的特点，即可以将图片 中的某种颜色设置为透明色。这对于实现某些网页效果来说，具有非常现实的 意义。例如，图 3-1 对比了一般的 GIF 图像和具有透明色的 GIF 图像。对于多 数图像处理软件（例如 Fireworks）甚至某些网页制作软件（例如 FrontPage ），都提供了将图片中的某种颜色转换为透明色的功能。 图 3-1 普通 GIF 与透明 GIF 的区别 2 JPEG 格式 图3-2中显示了两种不同压缩比率的 JPEG 图的效果。 图 3-2 不同质量 JPEG 图像的对比 3 PNG 格式 4 矢量格式 位图格式与矢量格式的区别如图 3-3 所示。 位图，用点描述图像矢量图，用线条等数学 信息描述图像 图 3-3 位图与矢量图的对比 使用网页图像的要点 确保文件较小 使图像具有所需的像素大小 所谓图像的像素大小就是指由图像本身的像素宽和像素高所确定的图 像大小，例如，在同一种显示模式下，一个 1024768 的图像就显然比 800600的图像大的多。 在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图 像处理软件更改图像的“Image Size”。一般在修改之后，图像的文件大小会显著 变化。 例如，在 Photoshop 中，可以使用“Image”菜单中的“Image Size”命令，此 时弹出如图 所示的“Image Size”对话框，可以在其中更改图像的宽度、高度和分 辨率。 图 3-7 Photoshop6.0 的“Image Size”对话框 插入图像示例 我插入的第一幅图像： 这段代码中，觉得了所插入图片的地址及文件名。 Alt是图像标记的一个属性，用以说明图像。当我们用鼠标指向图像是就可 以发现在鼠标下方会出现相应的文字信息。 设置图像在页面中的对齐与设置文本对齐类似，可以使用 DIV 或 P 标记符将 IMG 标记符括起来，然后使用 align 属性。 例如，以下 HTML 语句将使图像居中对齐（图像默认时与文本 一样是左对齐的）： 图像除了与页面水平对齐之外还有就是与周围内容的垂直对齐 这个属性此时属于img标记里面 以下HTML代码说明了 align 属性如何控制文本与图像的垂直对齐（同时显 示了 border边框 属性的效果），如图 所示。 文本与图像的垂直对齐示例 此图像与文本顶部对齐 此图像与文本中央 对齐 此图像与文本底部 对齐 文字与图像的垂直对齐 图文混排时的图像对齐 以下 HTML 代码显示了文本与图像的环绕效果（同时显示了 hspace 和 vspace 属性的效果）（水平边界与垂直边界），如图 所示。 文本与图像的环绕示例 野蛮人-文 明边缘的几个部落中的成员之一，拒绝一切看起来温柔和软弱的事物对他的影 响。在部落之间的不断战争中他活了下来，这得益于坚定的意志和强健的体格 。虽然缺乏文明人的心计，但是他能够敏锐的感觉到周围的环境，因为这一切 来自他那动物般的直觉，这也使得野蛮人让人想起了民间关于狼人的一些传说 。事实上他们坚信能够召唤图腾上动物的灵魂来鼓舞他们，并且因