第4讲 使用HTML设置文本和图像.pptVIP

字体标记综合示例 4.3 列表标记 所谓列表，通俗的讲就是各列表项按一定的方式进行排列而成的一张表 按列表项排列方式的不同，可分成： 有序列表 无序列表 嵌套列表 有序列表 以数字或字母等表示顺序的符号为项目前导符来排列列表项目的列表。例如: 无序列表 以无顺序的符号（●、○、■等）为项目前导符来排列列表项目或没有任何符号作项目前导符的列表。 嵌套列表 指多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等 1）有序列表ol 基本语法 ol li项目一/li li项目二/li …… /ol 有序列表标记示例 常用属性 属 性 描 述 属性值 type 设置有序列表的前导符 1 前导符为数字1、2、3… a 前导符为小写字母a、b、c… A 前导符为大写字母A、B、C… i 前导符为小写罗马数字i、ii、iii… I 前导符为大写罗马数字I、Ⅱ、Ⅲ… start 设置有序列表的起始编号 value 在默认情况下，有序列表从数字1开始编号； 不论列表编号是数字、英文字母还是罗马数字，value的值都是需要起始的数字 有序列表前导符和起始编号设置示例 2) 无序列表ul 常用无序列表如下: 项目列表ul 前导符默认为实心圆点 2）项目列表ul 基本语法 ul li项目一/li li项目二/li …… /ul 常用属性 属 性 描 述 属性值 type 设置项目列表的前导符 disc 前导符为●（默认前导符） circle 前导符为○ square 前导符为■ 项目列表前导符设置示例 3） 嵌套列表 嵌套列表指的是多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等 嵌套列表类型： 定义列表的嵌套 无序列表和有序列表的嵌套 这种嵌套类型是最常见的，它主要是通过在 一种列表中的列表项中嵌套另一种列表的定 义来实现 无序列表和有序列表嵌套示例 4.4 图片标记 网页中的常用图片格式 - GIF（Graphics Interchange Format，图形交换格式） 最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜 色的图像，如站点图标、导航条等。 - JPEG（Join Photograph Graphic，联合图像专家组标准) 又称JGP，用来显示照片等颜色丰富的精美图像 - PNG（Portable Network Graphics，可移植网络图形） 既融合了GIF格式透明显示的颜色，又具有JPEG处 理精美图像的优势，是逐渐流行的网络图像格式，但目前浏览器对其支持并不一致 插入图片基本语法 基本语法 img src=“file_name” 常用属性 属 性 描 述 src 指定图片源文件所在路径(必设属性) alt 设置提示文字 width 设置图片的宽度 height 设置图片的高度 hspace 设置图片与相邻对象之间的左右间距 vspace 设置图片与相邻对象之间的上下间距 align 设置对齐方式 border 设置图片边框，默认情况下，不显示边框 align属性值 描 述 baseline、bottom、absbottom 图片底端与文字底端对齐 top、texttop 图片顶端与文字行最高字符的顶端对齐 middle 图片的中间线与文字底端对齐 absmiddle 图片的中间线与文字的中间线对齐 right 图片在文字的右边 left 图片在文字的左边 align 插入图片综合示例 文件路径 路径分为以下两种情况： 绝对路径：先指明最高级别的层次，然后依次向下说明。 例： Img270819276.jpg D:\Pictures\Img270819276.jpg 相对路径：从自己的位置出发依次说明到达目标文件的路径。 例： Pictures\Img270819276.jpg 站点文件系统结构示意 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 小 结 字体标记font的size属性的取值范围是1~7，其中“1”为最小字号，“7”为最大字号。 空格在源代码中的表示是”nbsp;”，一个nbsp;表示一个半角空格。