HTML基础之文本格式.ppt

文本格式 文本与超链接 1 学习目标 掌握FONT标记符的用法 理解物理字符样式和逻辑字符样式 掌握P BR Hn HR标记符的用法 掌握设置段落对齐的方法 掌握有序列表 无序列表和嵌套列表的构造方法 理解超链接的基本概念 掌握A标记符的用法 2 69 文本格式 文本分段分段标记符 p换行标记符 br水平线标记符 hr标题标记符 h段落对齐文本显示效果列表超链 文本格式 文本分段文本显示效果字体控制标记符 font物理字符样式逻辑字符样式滚动字幕标记符 marquee列表超链 文本格式 文本分段文本显示效果列表有序列表无序列表超链相对地址与绝对地址页面链接锚点链接电子邮件链接 分段标记符 p 分段标记符用于将文档划分为段落 标记为结束标记符可以省略 在下一个段落开始之前结束 连续的多个等同于一个 不会产生多个段落 换行标记符 br 仅一个单独的标记符强制换行 不分段 仍属于同一个段落 演示p和br 第一段第二段请注意两段之间的距离 第三段在这里使用 第五段请注意两段之间的距离 多个连续的分段标记符并没有起到分段的效果 水平线标记符 hr 只有一个单独的标记符在页面中添加一个水平线 用以上下分隔文档 有以下属性size 水平线的粗细 单位是像素widh 水平线的长度 单位是像素 可以是浏览器窗口宽度的百分比noshade 不以加阴影的3D线形式显示color 水平线的颜色 演示hr 标题标记符 Hn 标记符来标识文档中的标题和副标题 其中n是1至6的数字 表示最大的标题 表示最小的标题 浏览器自动改变文字的显示样式注意 并非仅仅用于文字的样式显示 要切实作为文档的标题使用 演示Hn 此为一级标题此为二级标题此为三级标题此为四级标题此为五级标题此为六级标题此为正常文本 段落对齐 段落的水平对齐方式aligndiv和center格式嵌套 align属性 align属性用于设置段落的对齐格式 其值包括 right 右对齐 left 左对齐 center 居中对齐 justif 两端对齐 align属性可应用于多种标记符 最典型的是应用于p Hn 标题标记符 hr等 14 69 演示align 第一段默认为左对齐方式第二段align center 第三段align right 请注意两行之间的距离 虽然换行了 但仍然是同一个段落 第四段align justify 15 69 div标记符 div标记符用于为文档分节 其标记为 位于div标记符中的多段文本将被认为是一个节 可为它们设置一致的对齐格式 span标记符与div类似 仅用于具体文字的样式 不含对齐方式 16 69 演示div和span 第一段第二段span标记符控制的文本第三段 CENTER标记符 如果用户要将文档内容居中 还可使用CENTER标记符 方法为 将需居中的内容置于和之间 改标记符已经过时 建议不使用 18 69 格式嵌套 1 如果所设置的格式是相容的 则取格式叠加的效果 2 如果所设置的格式是冲突的 则取最近样式符的修饰效果 19 69 演示格式嵌套 20 69 三段使用div设置居中第一段第二段设置左对齐此为正常文本字体大小设为10 FONT标记符 FONT标记符具有3个常用的属性 SIZE设置字体大小COLOR设置字体颜色FACE设置字体样式字体标记符的color属性可用来控制文字的颜色 21 69 size属性 字号属性size的值可以从1到7 3是默认值 可以用 号或 号来作为相对值指定 22 69 演示size和color 23 69 此为正常文本11113333 2 2 2 25555777788881010红色 face属性 Face属性用来指定字体样式 用户可以指定一个或几个字体名称 用逗号隔开 尽量使用第一个字体 如果系统没有该字体 尝试下一个 默认中文字体是 宋体 默认英文字体是 TimesNewRoman 24 69 演示face face属性 常用物理字符样式 物理字符样式是指标记符本身说明了所修饰的效果 常用物理字符样式标记符有 黑体标记斜体标记下划线标记等 26 69 演示B I U 此为正常文本加粗倾斜下划线加粗且倾斜下划线 其他物理字符样式标记符 big大字体small小字体sub上标sup下标strike删除线 逻辑字符样式 逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义 例如 ADDRESS标记符说明了 地址 这个含义 但并没有说明具体的效果 地址样式 29 69 滚动字幕marquee marquee标记符之间的文本可以滚动marquee标记符的属性width和height 字幕滚动区域的宽和高align 与周围对象的对齐方式behavior 滚动方式bgcolor 背景色direction 滚动方向 水平 hspace和vspace 左右与上下的间隙loop 滚动重复的次数 1表示无限重复scrollamount 滚动速度 步进的像素值scrolldelay 两次文本重画之间的毫秒延时数 演示marquee 此为正常文本正常滚动文字往返滚动文字 步进200像素 间隔1秒 有序列表 有序列表 Orderedlist 也称数字式列表 它是一种在表的各项前显示有数字或字母的缩排列表 定义有序列表需要使用有序列表标记符和列表项 Listitem 标记符 结束标记符可省略 语法如下 Listitem1Listitem2 32 69 有序列表 OL标记符最常用的属性type 用来设置数字序列样式 取值为 1 阿拉伯数字A 大写字母a 小写字母I 大写罗马数字i 小写罗马数字 33 69 演示有序列表 列表内容第一句列表内容第二句列表内容第三句列表内容第四句列表内容第五句 有序列表嵌套 列表内容第一句列表内容第二句列表内容第三句嵌套列表内容1嵌套列表内容2嵌套列表内容3嵌套列表内容4嵌套列表内容5列表内容第四句列表内容第五句 无序列表 无序列表 Unorderedlist 也称强调式列表 它是一种在表的各项前显示有特殊项目符号的缩排列表 定义无序列表需要使用无序列表标记符和列表项标记符 语法如下 Listitem1Listitem2 36 69 无序列表 UL标记符最常用的属性type 用来设置项目符号样式 取值为 disc 实心圆circle 空心圆square 矩形 37 69 演示无序列表 列表内容第一句列表内容第二句列表内容第三句嵌套列表内容1嵌套列表内容2嵌套列表内容3嵌套列表内容4嵌套列表内容5列表内容第四句 超链接基础 URL UniversalResourcesLocator 用于定位Web上的文档信息 一个URL包括3部分 协议 计算机地址 文件路径 协议 计算机 文件路径 39 69 超链接基础 绝对URL 绝对URL是指资源的完整地址 包括URL的所有3个部分 即 协议 计算机 文档名 40 69 超链接基础 相对URL 相对URL是指Internet上资源相对于当前页面的地址 它包含从当前页面指向目标页面位置的路径 使用相对URL的好处 易于维护 41 69 超链接基础 相对URL 使用相对URL时 经常使用两个与DOS类似的符号 句点 表示当前目录双重句点 表示当前目录的上一级目录 42 69 超链接基础 相对URL 43 69 不同类型的超链接 根据超链接的目标文件不同 分为 网页之间的超链接页面内的超链接文件下载超链接Email超链接空超链接 44 69 不同类型的超链接 根据超链接源对象的不同 分为 文本超链接图像超链接 包括图像映射 对象超链接 例如Flash Java小程序 45 69 不同类型的超链接 根据超链接实现方式的不同 分为 HTML超链接JavaScript超链接对象超链接 46 69 创建超链接 A标记符用于创建超链接 结束标记符不能省略 href属性用于指定超链接的目标文件 内部网页超链接 链接外部网页超链接 链接 47 69 创建超链接 锚点链接 使用页面内的超链接 首先需要定义锚点 然后在超链接中指向该锚点 定义锚点应使用指向锚点的超链接为 link 48 69 创建超链接 锚点链接 指向其他页面内锚点的超链接 linkblanklink 49 69 演示 锚点超链接效果 50 69 问题 在刚才的示例里 如果有另外一个同目录的网页文件page2 htm 在该网页中想访问示例页面中的 巫师 所在位置 应如何设置超链接 51 69 创建超链接 文件下载 当超链接目标为浏览器不能识别的文件格式时 那么就自动生成了文件下载链接 下载 52 69 演示 文件下载效果 53 69 创建超链接 Email链接 Email控制命令 subject 设置信件主题 cc 设置抄送人 bcc 设置密件抄送人 组合多个控制命令 54 69 演示 Email链接效果 55 69 超链接的显示效果 超链接颜色在BODY标记符中使用LINK属性设置未被访问的链接的颜色 VLINK设置已被访问过的链接的颜色 ALINK设置活动链接 即当前选定的链接 的颜色 下划线效果动态效果 悬停效果 鼠标指针形状 鼠标指针跟随效果 56 69 演示 超链接显示效果 57 69 Part5 使用Dreamweaver开发网站 58 Dreamweave