WEB网页文字和图片

第2章网页文字和图片 网页的文字是设计一个网页的基础 而网页图片则使网页内容更加的丰富 使用HTML代码来编辑网页文字和图片可以达到在Word软件里设计文档几乎一样的效果 当然 与Word软件相比较起来 使用标签来设计网页文字和图片没有使用菜单来设计Word文档方便 但是正因为网页的这种标签属性 使得网页具有跨平台的特性 可以在任何一种平台上显示 2 1文字格式 文字格式主要是用一些HTML元素来标记文本的方式 用来更改文字的大小 字体 颜色等属性 另外还能为文本增加如粗体 斜体 上标 下标等修饰效果 2 1 1设置文字大小 在HTML里 元素可以用来显示文字的属性 包括文字的大小 颜色 字体等 其中设置文字大小的属性为SIZE 其语法代码如下所示 文字 2 1 2设置字体 文字可以设置成多种字体 中文的有宋体 仿宋 黑体等 英文字体也有Arial TimesNewRoman等 为了保证网页的通用性 HTML的早期版本里是不允许为文字指定字体的 然而从HTML3 2版本开始 可以为网页中的文字指定不同的字体 使得网页的表现形式更为丰富 1 设置网页字体设置文字字体使用元素中的FACE属性 其语法代码如下所示 文字2 设置浏览器默认字体 2 1 3设置字体颜色 如果一个网页不能设置文字字体的颜色 那么这个网页就是黑白的 失去了其缤纷的色彩 使用元素的COLOR属性可以将文字设置成不同的颜色 其语法代码为 文字 2 1 3设置字体颜色 颜色可以有两种表示方法 颜色名称与RGB颜色数值 颜色名称就是类似于RED BLUE等颜色的英文名 RGB颜色是由红色 绿色 蓝色的组合来指定的一种颜色 任何一种颜色都可以用0 255之间的一个数值来表示 但必须要使用16进制的数字来表示这些组合 例如 一种颜色的RGB代码为 FFC0CB 这就代表是用强度为FF 也就是255 的红色 强度为C0的绿色与强度为CB的蓝色混合成的颜色 也就是粉红色 2 1 3设置字体颜色 几乎所有浏览器都能识别以下16种预定义的颜色 Red 红色 Yellow 黄色 Blue 蓝色 Navy 深蓝色 Green 绿色 Lime 浅绿色 Aqua 浅绿色 Olive 橄榄绿 Black 黑色 Gray 灰色 Silver 银色 Maroon 原色 Purple 紫色 Fuchsia 紫红色 Teal 深青色 而InternetExplorer浏览器可以识别更多的颜色单词 如下表列出了InternetExplorer9浏览器所能识别的颜色单词 2 1 3设置字体颜色 2 1 3设置字体颜色 2 1 4加粗与斜体 通常在进行文字处理时 都会对比较重要的内容使用加粗 斜体来引起读者的注意 在网页上同样可以使用加粗与斜体来达到相同的效果 在HTML元素中 可以用元素来加粗文字 用元素来使文字倾斜 除了元素与元素之外 还可以使用元素来加粗文字 元素来使文字倾斜的 其语法代码如下 加粗的文字倾斜的文字加粗的文字倾斜的文字 2 1 5下划线与删除线 在有些时候希望文字带下划线显示 例如要对一些文字说明 可以使用下划线元素突出显示 删除线一般在修改文章的时候常常用到 表示原来的这部分文字被删除了 1 被反对使用的元素在HTML的早期版本里 使用元素来标注带有删除线的文字 使用元素来标注带有下划线的文字 2 1 5下划线与删除线 2 被赞成使用的元素HTML从4 0版本开始 正式使用了两个新元素 元素 删除线 和元素 插入线 来替代元素与元素 不过他们在浏览器里的显示结果都是一样的 删除线与下划线元素的语法代码如下所示 删除线下划线删除线插入线 2 1 6上标与下标 在描述一些复杂的表达式时 特别是一些数学公式 经常会用到上标和下标 例如3的平方 32 在HTML页面中 上标采用元素 下标采用元素 其具体语法是 作为上标的文字作为下标的文字 2 1 7等宽字 等宽字体一般是针对英文字体而言的 所谓等宽就是像打字机文本一样的字体 在默认情况下 这种字体是Courier字体 在HTML中的元素可以用来设置等宽字体 使用 标签表明标注的文字为类似打印机文本 typewritertext 所使用的等宽字体 TT元素的语法代码为 英文文字 2 2与文字排版相关的元素 与文字排版相关的元素就是对某段文字进行设置的元素 包括文本缩进 段落 换行 段落居中等 一个好的网页 文字段落的设置是必不可少的 它可以使网页更加的简洁和漂亮 本节就来详细讲解与文字排版相关的一些元素 2 2 1文本缩进 文本缩进元素主要用于设置文本的缩进效果 通过使用该元素 可以实现页面文字的段落缩排 从而使页面的文字布局更加错落有致 文本缩进元素的语法是 需要进行缩排的文字 2 2 3换行 HTML里的换行元素在前面的章节里已经多次提到并且也多次使用过了 元素就是用来对文字进行换行的 元素没有结束标签 也就是说 一个元素就是换一次行 2 2 3段落 在HTML里 使用元素可以用来区分一个与另一个段落 在 标签与 标签之间的文字是一段文字 其语法代码如下 一段文字 2 2 4段落居中 如果想要居中显示网页中的段落 可以使用元素 居中对齐元素是双元素 成对出现 以开始 以结束 在元素之间的所有内容都居中对齐 包括文字 图像 表格等 其具体的语法如下所示 需要居中对齐的内容 2 2 5预定义格式 通过前面章节的学习可以知道 在HTML源代码里 即使文字已经换行 但是只要没有使用 标签 那么在浏览器里显示出来的文字是不会被换行的 如果想要在浏览器里显示出源代码里所设置的所有格式 包括其文字之间的空白 如空格 制表符等 可以使用元素 元素相当于设置了一个 块 这个块可以将源代码里的所有文本 除HTML标签外 在浏览器中按原样显示出来 其语法如下所示 设定了格式的文字 2 2 6水平分隔线 当页面内容比较繁琐时 可以在段与段之间插入一条水平分隔线来使页面显得层次分明 便于阅读 在HTML中可以使用元素来创建一个水平分隔线 其语法如下所示 2 3编号列表格式 列表格式 ol包含type和start两个属性li包含type和value两个属性 项目列表格式 只有type属性 2 4设置网页背景颜色 在前面章节里多次使用过元素 不过在使用元素时 都没有对其属性值进行过设定 元素里有一个BGCOLOR属性可以用来设置网页的背景颜色 其语法代码如下 网页内容 2 5在网页中插入图像 一个网页中可以插入如Logo 网站标志 Banner 横幅广告 照片等各种图片 当浏览者浏览网页时 这些图片将会自动显示出来 合理的应用图片 可以让网页看起来更漂亮 重点更突出 形式更活泼 浏览更方便 在HTML里可以通过元素来插入图片 其语法代码为 2 6设置背景图片 元素里的BACKGROUND属性