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