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

《使用HTML设置文本和图像.ppt》由会员分享，可在线阅读，更多相关《使用HTML设置文本和图像.ppt（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、回顾内容:HTMLHTML文件的基本文件的基本结构是怎构是怎样的的?HTMLHTML标记及其属性如何命名及其属性如何命名?头部部标记主体主体标记1第第4讲 使用使用HTML设置文本和置文本和图像像4.1 4.1 段落段落标记4.2 4.2 文字文字标记4.3 4.3 列表列表标记4.4 4.4 图片片标记24.1 段落段落标记网网页中中对文字要安排文字位置需要通文字要安排文字位置需要通过特定的特定的HTMLHTML标记来完成。来完成。HTMLHTML文件中无文件中无论输入多少个空格（按入多少个空格（按空格空格键）均）均视为一个空格；一个空格；换行（按回行（按回车键）也无效。）也无效。31)段落

2、段落标记所谓段落，指得是一段格式上统一的文本所谓段落，指得是一段格式上统一的文本基本语法基本语法语法解释语法解释 从从开始处创建一个段落，开始处创建一个段落，段落与上下文都段落与上下文都有一空行的间隔有一空行的间隔标标 记记描描 述述属属 性性属性取值属性取值 双标记双标记alignleftcenterright42)换行行标记作用作用:产生一个生一个换行效果行效果基本基本语法法 53）居中）居中标记基本基本语法法 作用：使作用：使标记对之之间的文字在的文字在浏览器窗口中居器窗口中居中中对齐6段落、段落、换行及居中行及居中标记综合示例合示例74）预格式化格式化标记基本基本语法法 语法解法解释预

3、格式化，是指保留格式化，是指保留之之间的的文文字在字在源代源代码中的格式，使其在中的格式，使其在页面中面中显示的示的效果和源代效果和源代码中的效果几乎完全一致中的效果几乎完全一致8预格式化格式化标记示例示例95）水平水平线标记 水平线用于段落与段落之间的分隔，使文水平线用于段落与段落之间的分隔，使文档结构更加清晰，使文字的编排更加整齐档结构更加清晰，使文字的编排更加整齐基本语法基本语法 常用属性常用属性 属属 性性描描 述述width设置水平线宽度设置水平线宽度,单位为像素或浏览器窗口的单位为像素或浏览器窗口的%size水平线高度水平线高度,单位为像素单位为像素align水平线对齐方式水平线对

4、齐方式,取值取值left|center|right,默认居中对齐默认居中对齐noshade默认的水平线的空心立体效果改设为实心的不带阴影的效默认的水平线的空心立体效果改设为实心的不带阴影的效果果color水平线颜色水平线颜色,显示颜色时，当水平线将显示成实心显示颜色时，当水平线将显示成实心10水平水平线标记114.2 文字文字标记文字文字标记主要用于主要用于设置网置网页中的所有中的所有有关文字方面的内容，具体包括普通有关文字方面的内容，具体包括普通文字、特殊字符、文字、特殊字符、标题字、字体以及字、字体以及文字格式等方面的文字格式等方面的设置置12表表4-1 4-1 常用文字常用文字标记标标

5、记记描描 述述文字内容文字内容包括普通文字、空格及特殊符号等包括普通文字、空格及特殊符号等标题字标记标题字标记以某几种固定的字号显示文字，共以某几种固定的字号显示文字，共分为六个级别（分为六个级别（H1H6H1H6），对应着），对应着六种字号六种字号文字的修饰标记文字的修饰标记通过这些修饰标记，可设定文字的通过这些修饰标记，可设定文字的不同格式，如粗体、斜体等不同格式，如粗体、斜体等字体标记字体标记设定文字的字体、字号及颜色等设定文字的字体、字号及颜色等131）文字内容）文字内容网页中涉及到的文字主要包括网页中涉及到的文字主要包括:普通文字、普通文字、特殊符号以及页面的注释语句特殊符号以及页面

6、的注释语句普通文字的输入普通文字的输入:直接在直接在和和标记之间输入标记之间输入 特殊字符的输入特殊字符的输入:在源代码中特殊字符使用其对应的符号码代替在源代码中特殊字符使用其对应的符号码代替.特殊符号特殊符号符号码符号码空格空格 “"&>·Xק¢￥¥£©®&trade；142）标题字字标记l 所谓标题字就是以某几种固定的字号去显所谓标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容示文字，一般用于强调段落要表现的内容或作为文章的标题或作为文章的标题l具有加

7、粗显示并与下一行产生一空行的特具有加粗显示并与下一行产生一空行的特性性l根据字号的大小分为六级，分别用标记根据字号的大小分为六级，分别用标记H1H6H1H6表示，字号的大小随数字增大而递表示，字号的大小随数字增大而递减减标标 记记描描 述述属属 性性属性取值属性取值一级标题一级标题alignleft（默认值）（默认值）二级标题二级标题三级标题三级标题center四级标题四级标题五级标题五级标题right六级标题六级标题15标题字字标记综合合示例示例163）文字的修）文字的修饰标记用于对文字进行格式化用于对文字进行格式化常用的修饰标记如下：常用的修饰标记如下：标标 记记描描 述述粗体粗体斜体斜体

8、上标上标下标下标大字号大字号小字号小字号下划线下划线删除线删除线地址，用于地址、地址，用于地址、Email17文字修文字修饰标记综合示例合示例184-1）字体）字体标记作用：作用：设置文字的字体、字号及置文字的字体、字号及颜色色基本基本语法法font face=表表4-3 4-3 字体字体标记的属性的属性属属 性性描描 述述face设置字体设置字体size字号，取值范围为从字号，取值范围为从1到到7，或者从，或者从+1到到+7、从、从-1到到-7（正负取值相对于（正负取值相对于页面默认字号页面默认字号3），超出取值），超出取值范围的，范围的，与取值范围的最近的极值效果相同与取值范围的最近的极值

9、效果相同color文字颜色文字颜色19字体字体标记综合示例合示例204.3 列表列表标记所所谓列表，通俗的列表，通俗的讲就是各列表就是各列表项按按一定的方式一定的方式进行排列而成的一行排列而成的一张表表按列表按列表项排列方式的不同，可分成：排列方式的不同，可分成：有序列表有序列表无序列表无序列表嵌套列表嵌套列表21有序列表有序列表 以数字或字母等表示以数字或字母等表示顺序的符号序的符号为项目前目前导符来排列列表符来排列列表项目的列表。例如目的列表。例如:无序列表无序列表 以无以无顺序的符号（序的符号（、等）等）为项目前目前导符符来排列列表来排列列表项目或没有任何符号作目或没有任何符号作项目前目

10、前导符的列表。符的列表。嵌套列表嵌套列表 指多于一指多于一级层次的列表，一次的列表，一级列表列表项下面下面可以存在二可以存在二级项目、三目、三级项目等目等 221）有序列表）有序列表基本语法基本语法 项目一项目一 项目二项目二 23有序列表有序列表标记示例示例24常用属性常用属性属属 性性描描 述述属性值属性值type设置有序列设置有序列表的前导符表的前导符1前导符为数字前导符为数字1、2、3a前导符为小写字母前导符为小写字母a、b、cA前导符为大写字母前导符为大写字母A、B、Ci前导符为小写罗马数字前导符为小写罗马数字i、ii、iiiI前导符为大写罗马数字前导符为大写罗马数字I、start设

11、置有序列设置有序列表的起始编表的起始编号号value在默认情况下，有序列表从数字在默认情况下，有序列表从数字1开始编号；开始编号；不论列表编号是数字、英文字母不论列表编号是数字、英文字母还是罗马数字，还是罗马数字，value的值都是需的值都是需要起始的要起始的数字数字25有序列表前有序列表前导符和起始符和起始编号号设置示例置示例262)无序列表无序列表常用无序列表如下常用无序列表如下:项目列表目列表 前前导符默符默认为实心心圆点点272）项目列表目列表基本语法基本语法 项目一项目一 项目二项目二 常用属性常用属性属属属属 性性性性描描描描 述述述述属性值属性值属性值属性值type设置项目列设置

12、项目列表的前导符表的前导符discdisc前导符为前导符为（默认前导符）（默认前导符）circlecircle前导符为前导符为squaresquare 前导符为前导符为前导符为前导符为28项目列表前目列表前导符符设置示例置示例293）嵌套列表嵌套列表嵌套列表指的是多于一嵌套列表指的是多于一级层次的列表，次的列表，一一级列表列表项下面可以存在二下面可以存在二级项目、三目、三级项目等目等嵌套列表嵌套列表类型：型：定定义列表的嵌套列表的嵌套无序列表和有序列表的嵌套无序列表和有序列表的嵌套 这种嵌套种嵌套类型是最常型是最常见的，它主要是通的，它主要是通过在在 一种列表中的列表一种列表中的列表项中嵌套另

13、一种列表的定中嵌套另一种列表的定 义来来实现30无序列表和有序列表嵌套示例无序列表和有序列表嵌套示例314.4 图片片标记l网网页中的常用中的常用图片格式片格式-GIF-GIF（Graphics Interchange FormatGraphics Interchange Format，图形交形交换格格式）式）最多使用最多使用256256种种颜色，最适合色，最适合显示色示色调不不连续或具有大面或具有大面积单一一颜 色的色的图像，如站点像，如站点图标、导航条等。航条等。-JPEG-JPEG（Join Photograph GraphicJoin Photograph Graphic，联合合图像像

14、专家家组标准准)又称又称JGPJGP，用来，用来显示照片等示照片等颜色丰富的精美色丰富的精美图像像-PNG-PNG（Portable Network GraphicsPortable Network Graphics，可移植网，可移植网络图形）形）既融合了既融合了GIFGIF格式透明格式透明显示的示的颜色，又具有色，又具有JPEGJPEG处 理理精美精美图像的像的优势，是逐，是逐渐流行的网流行的网络图像格式，但像格式，但目前目前浏览器器对其支持并不一致其支持并不一致32插入插入图片基本片基本语法法基本语法基本语法 img src=常用属性常用属性 属属属属 性性性性描描描描 述述述述src指定

15、图片源文件所在路径指定图片源文件所在路径(必设属性必设属性)alt设置提示文字设置提示文字width设置图片的宽度设置图片的宽度height设置图片的高度设置图片的高度hspace设置图片与相邻对象之间的左右间距设置图片与相邻对象之间的左右间距vspace设置图片与相邻对象之间的上下间距设置图片与相邻对象之间的上下间距align设置对齐方式设置对齐方式border设置图片边框，默认情况下，不显示边框设置图片边框，默认情况下，不显示边框align属性值描 述baseline、bottom、absbottom图片底端与文字底端对齐top、texttop图片顶端与文字行最高字符的顶端对齐middle

16、图片的中间线与文字底端对齐absmiddle图片的中间线与文字的中间线对齐right图片在文字的右边left图片在文字的左边align33插入插入图片片综合示例合示例34文件路径文件路径路径分为以下两种情况：绝对路径：先指明最高级别的层次，然后依次向下说明。p例：D:PicturesImg270819276.jpgD:PicturesImg270819276.jpg相对路径：从自己的位置出发依次说明到达目标文件的路径。p例：PicturesImg270819276.jpgPicturesImg270819276.jpg35站点文件系站点文件系统结构示意构示意RootF_01F_02F_03F_

17、04F01F02a.htmCup.gifb.htmd.htmhat.gifc.htmcar.gifa.htmb.htmCup.gifhat.gifd.htmcar.gif以以a为起点的路径：为起点的路径：cup.gif以以b为起点的路径：为起点的路径：F01/hat.gif以以d为起点的路径：为起点的路径：./F02/car.gif36小小 结字体字体标记的的sizesize属性的取属性的取值范范围是是1717，其中，其中“1 1”为最小字号，最小字号，“7 7”为最大字号。最大字号。空格在源代空格在源代码中的表示是中的表示是”  ”，一个，一个  表示

18、一个半角空格。另外一些特殊符号如表示一个半角空格。另外一些特殊符号如“”等，在源代等，在源代码中也要象空格的表示一中也要象空格的表示一样，使用字符使用字符码。设置文字的格式（如加粗置文字的格式（如加粗显示文字）需要使用文示文字）需要使用文字修字修饰标记标题标记的的级别范范围是是h1h6h1h6，其中，其中“h1h1”的字号的字号是最大的，是最大的，“h6h6”的字号是最小的。的字号是最小的。37标记可使可使显示的内容的格式与源代示的内容的格式与源代码的格式几乎完全一的格式几乎完全一样。段落段落标记和和换行行标记的一个的一个显著著的不同之的不同之处是是在在换行的同行的同时，会与上，会与上（下）文（下）文产生一空行的生一空行的间隔，而隔，而则没有。没有。水平水平线标记中的属性中的属性sizesize用于用于设置水置水平平线的高度。的高度。图片片标记必必设置的一个属性是置的一个属性是srcsrc38思考思考题1.1.和和有何不同？有何不同？2.2.的的sizesize属性的取属性的取值范范围是什么？是什么？3.3.如何使文字加粗并如何使文字加粗并倾斜斜显示示?4.4.标题标记共分几个共分几个级别？不同？不同级别标题的字号的的字号的变化情况如何化情况如何?5.5.如何在网如何在网页放置水平放置水平线?6.6.如何在网如何在网页中插入一幅中插入一幅图片片?39