第2章 文本格式与超链接（课件)-《网页设计与制作》同步教学（人民邮电出版社）

第 2 章 文本格式与超链接 1 第 2 章　文本格式与超链接 知识要点 （1）掌握段落标记符p、断行标记符br、标题标记符h1~h6、水平线标记符hr的用法 （2）理解物理字符样式和逻辑字符样式 （3）掌握使用ol/ul 和 li 标记符创建列表 （4）掌握使用 a 标记符创建页面链接和锚点链接 本章目标 1 第 2 章　文本格式与超链接 （1）段落格式 段落格式是指针对 HTML 文档中的段落所设置的格式，例如段落的对齐方式。 段落 格式 还有哪些段落格式？ 01 首行缩进是不是段落格式？段间距呢？ 02 1．段落格式 1 第 2 章　文本格式与超链接 （1）段落格式 Part 1 分段标记符用于将文档划分为段落，标记为<p></p> Part 2 换行标记符用于在文档中强制断行，标记为一个单独的<br /> 2．分段标记符 1 第 2 章　文本格式与超链接 （1）段落格式 hn 标记符 = 各级标题 n 是1至6的数字；h1表示最大的标题，h6表示最小的标题 注意：使用标题时应按照其逻辑含义，而不是按照其显示效果！ 3．标题样式 1 第 2 章　文本格式与超链接 （1）段落格式 添加水平线的标记符为hr，它包括以下属性： size （粗细） width （长度） noshade （实线） 4．添加水平线 1 第 2 章　文本格式与超链接 6 （1）段落格式 1 align 属性用于设置段落的对齐格式，取值：right（右对齐）、left（左对齐）、center（居中对齐）和 justify（两端对齐） 2 align 属性可应用于多种标记符，例如 p、hn（标题标记符）、hr 等 注意：在学习了CSS技术之后应避免使用align属性。 5．align 属性 1 第 2 章　文本格式与超链接 （1）段落格式 4．段落格式示例 1 第 2 章　文本格式与超链接 （2）字体格式与列表 字体格式/字符格式是指针对段落中的部分文字所设置的格式，通常包括： 1．字体格式 字体样式 01 字号 02 文字颜色 03 注意：字体格式属于显示效果的设置，因此应主要使用CSS技术来实现。 1 第 2 章　文本格式与超链接 （2）字体格式与列表 物理字符样式是指标记符本身说明了所修饰的效果。常用物理字符样式标记符有： 2．物理字符样式 01 黑体标记<b></b> 02 斜体标记<i></i> 03 下划线标记<u></u> 1 第 2 章　文本格式与超链接 （2）字体格式与列表 逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义，例如address标记符。常用逻辑字符样式： 3．逻辑字符样式 01 <strong></strong> 02 <em></em> 03 <code></code> 1 第 2 章　文本格式与超链接 （2）字体格式与列表 有序列表是一种在表的各项前显示有数字或字母的缩排列表，表示一种顺序的关系。定义有序列表的语法如下： 4．有序列表 <ol type=”1|A|a|I|i”> <li>List item 1</li> <li>List item 2</li> </ol> 属性type用来设置数字序列样式，取值为：1、A、a、I、i。 1 第 2 章　文本格式与超链接 （2）字体格式与列表 无序列表是一种在表的各项前显示有特殊项目符号的缩排列表，表示并列关系。定义无序列表的语法如下： 5．无序列表 <ul type=”disc|circle|square”> <li>List item 1</li> <li>List item 2</li> </ul> 1 第 2 章　文本格式与超链接 （2）字体格式与列表 6．嵌套列表 1 第 2 章　文本格式与超链接 （2）字体格式与列表 7．文本元素总结 块元素 h# 换行 br 展示元素 b p 通用元素 div i pre span u address 列表 ul small blockquote ol hr 行内元素 em li strong sub sup 1 第 2 章　文本格式与超链接 （2）字体格式与列表 8．核心文档结构元素 01 h1~h3 02 p 03 ul, ol, li 1 第 2 章　文本格式与超链接 （3）超链接 URL（Universal Resources Locator）用于定位Web上的文档信息。一个 URL 包括 3 部分： 1．超链接基础 协议 01 计算机地址 02 文件路径 03 1 第 2 章　文本格式与超链接 （3）超链接 绝对URL是指资源的完整地址，包括所有3个部分： 绝对URL 协议 01 计算机 02 文档名 03 1 第 2 章　文本格式与超链接 （3）超链接 相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。使用相对URL的好处：易于维护。 使用相对URL时，经常使用两个与DOS类似的符号： 相对URL Part 1 句点（.）表示当前目录 Part 2 双重句点（..）表示当前目录的上一级目录 1 第 2 章　文本格式与超链接 （3）超链接 根据超链接的目标文件不同，分为： 2．不同类型的超链接 超链接 网页之间的超链接 01 页面内的超链接 02 文件下载超链接 03 Email超链接 04 空超链接 05 1 第 2 章　文本格式与超链接 （3）超链接 根据超链接源对象的不同，分为 01 文本超链接 02 图像超链接（包括图像映射） 03 对象超链接（例如Flash、Java小程序） 1 第 2 章　文本格式与超链接 （3）超链接 根据超链接实现方式的不同，分为： HTML超链接 01 JavaScript超链接 02 对象超链接 03 1 第 2 章　文本格式与超链接 （3）超链接 a 标记符用于创建超链接，href 属性用于指定超链接的目标文件。 3．创建超链接 1 内部网页超链接 <a href=wow.htm> 关于魔兽世界</a> 2 外部网页超链接 <a href=http://www.microsoft.com>Microsoft</a> 1 第 2 章　文本格式与超链接 （3）超链接 1 第 2 章　文本格式与超链接 <a href = 页面的URL#该文件中的锚点>link</a> <a href= # >blank link</a> <a href="图2-5.htm#yyjb">夜雨寄北</a> （3）超链接 使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。 定义锚点应使用<a name=xxx></a> 指向锚点的超链接为： 锚点链接 <a href=#锚点名称>link</a> 指向其他页面内锚点的超链接： 1 第 2 章　文本格式与超链接 （3）超链接 1 第 2 章　文本格式与超链接 <a href=mailto:i@email.com>Email</a> 控制命令： ?subject= 设置信件主题 ?cc= 设置抄送人 ?bcc= 设置密件抄送人 & 组合多个控制命令 （3）超链接 当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。 文件下载 <a href=xxx.zip>下载</a> Email链接 1 第 2 章　文本格式与超链接 （4）综合实例 1．站点目录设计 1 第 2 章　文本格式与超链接 （4）综合实例 1 第 2 章　文本格式与超链接 （4）综合实例 1 第 2 章　文本格式与超链接 （4）综合实例 1 第 2 章　文本格式与超链接 THANKS 1 第 2 章　文本格式与超链接 $$