使用HTML设置文本和图像.ppt

回顾内容 HTML文件的基本结构是怎样的 HTML标记及其属性如何命名 头部标记主体标记 1 第4讲使用HTML设置文本和图像 4 1段落标记4 2文字标记4 3列表标记4 4图片标记 2 4 1段落标记 网页中对文字要安排文字位置需要通过特定的HTML标记来完成 HTML文件中无论输入多少个空格 按空格键 均视为一个空格 换行 按回车键 也无效 3 1 段落标记 所谓段落 指得是一段格式上统一的文本基本语法语法解释从开始处创建一个段落 段落与上下文都有一空行的间隔 4 2 换行标记 作用 产生一个换行效果基本语法 5 3 居中标记 基本语法 作用 使标记对之间的文字在浏览器窗口中居中对齐 6 段落 换行及居中标记综合示例 7 4 预格式化标记 基本语法 语法解释预格式化 是指保留之间的文字在源代码中的格式 使其在页面中显示的效果和源代码中的效果几乎完全一致 8 预格式化标记示例 9 5 水平线标记 水平线用于段落与段落之间的分隔 使文档结构更加清晰 使文字的编排更加整齐基本语法常用属性 10 水平线标记 11 4 2文字标记 文字标记主要用于设置网页中的所有有关文字方面的内容 具体包括普通文字 特殊字符 标题字 字体以及文字格式等方面的设置 12 表4 1常用文字标记 13 1 文字内容 网页中涉及到的文字主要包括 普通文字 特殊符号以及页面的注释语句普通文字的输入 直接在和标记之间输入特殊字符的输入 在源代码中特殊字符使用其对应的符号码代替 14 2 标题字标记 所谓标题字就是以某几种固定的字号去显示文字 一般用于强调段落要表现的内容或作为文章的标题具有加粗显示并与下一行产生一空行的特性根据字号的大小分为六级 分别用标记H1 H6表示 字号的大小随数字增大而递减 15 标题字标记综合示例 16 3 文字的修饰标记 用于对文字进行格式化常用的修饰标记如下 17 文字修饰标记综合示例 18 4 1 字体标记 作用 设置文字的字体 字号及颜色基本语法 表4 3字体标记的属性 19 字体标记综合示例 20 4 3列表标记 所谓列表 通俗的讲就是各列表项按一定的方式进行排列而成的一张表按列表项排列方式的不同 可分成 有序列表无序列表嵌套列表 21 有序列表以数字或字母等表示顺序的符号为项目前导符来排列列表项目的列表 例如 无序列表以无顺序的符号 等 为项目前导符来排列列表项目或没有任何符号作项目前导符的列表 嵌套列表指多于一级层次的列表 一级列表项下面可以存在二级项目 三级项目等 22 1 有序列表 基本语法项目一项目二 23 有序列表标记示例 24 常用属性 25 有序列表前导符和起始编号设置示例 26 2 无序列表 常用无序列表如下 项目列表前导符默认为实心圆点 27 2 项目列表 基本语法项目一项目二 常用属性 28 项目列表前导符设置示例 29 3 嵌套列表 嵌套列表指的是多于一级层次的列表 一级列表项下面可以存在二级项目 三级项目等嵌套列表类型 定义列表的嵌套无序列表和有序列表的嵌套这种嵌套类型是最常见的 它主要是通过在一种列表中的列表项中嵌套另一种列表的定义来实现 30 无序列表和有序列表嵌套示例 31 4 4图片标记 网页中的常用图片格式 GIF GraphicsInterchangeFormat 图形交换格式 最多使用256种颜色 最适合显示色调不连续或具有大面积单一颜色的图像 如站点图标 导航条等 JPEG JoinPhotographGraphic 联合图像专家组标准 又称JGP 用来显示照片等颜色丰富的精美图像 PNG PortableNetworkGraphics 可移植网络图形 既融合了GIF格式透明显示的颜色 又具有JPEG处理精美图像的优势 是逐渐流行的网络图像格式 但目前浏览器对其支持并不一致 32 插入图片基本语法 基本语法常用属性 align 33 插入图片综合示例 34 文件路径 路径分为以下两种情况 绝对路径 先指明最高级别的层次 然后依次向下说明 例 35 站点文件系统结构示意 Root F 01 F 02 F 03 F 04 F01 F02 a htm Cup gif b htm d htm hat gif c htm car gif a htm b htm Cup gif hat gif d htm car gif 以a为起点的路径 cup gif 以b为起点的路径 F01 hat gif 以d为起点的路径 F02 car gif 36 小结 字体标记的size属性的取值范围是1 7 其中 1 为最小字号 7 为最大字号 空格在源代码中的表示是 表示一个半角空格 另外一些特殊符号如 等 在源代码中也要象空格的表示一样 使用字符码 设置文字的格式 如加粗显示文字 需要使用文字修饰标记标题标记的级别范围是h1 h6 其中 h1 的字号是最大的 h6 的字号是最小的 37 标记可使显示的内容的格式与源代码的格式几乎完全一样 段落标记和换行标记的一个显著的不同之处是在换行的同时 会与上 下 文产生一空行的间隔 而则没有 水平线标记中的属性size用于设置水平线的高度 图片标记必设置的一个属性是src 38 思考题 1 和有何不同 2 的size属性的取值范围是什么 3 如何使文字加粗并倾斜显示 4 标题标记共分几个级别 不同级别标题的字号的变化情况如何 5 如何在网页放置水平线 6 如何在网页中插入一幅图片 39