资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,在线教务辅导网：,http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:,349134187,或者直接输入下面地址：,第3讲 文字、段落、列表及图片标记,3.1 文字标记,3.2 段落标记,3.3 列表标记,3.4 图片标记,文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊字符、标题字、字体以及文字格式等方面的设置,3.1 文字标记,表3-1 常用文字标记,标 记,描 述,文字内容,包括普通文字、空格及特殊符号等,标题字标记,以某几种固定的字号显示文字，共分为六个级别（H1H6），对应着六种字号,文字的修饰标记,通过这些修饰标记，可设定文字的不同格式，如粗体、斜体等,字体标记,设定文字的字体、字号及颜色等,1）文字内容,网页中涉及到的文字主要包括:普通文字、特殊符号以及页面的注释语句,普通文字的输入:,直接在和标记之间输入,特殊字符的输入:,在源代码中特殊字符使用其对应的符号码代替.,特殊符号,符号码,空格,&,nbsp,;,“,&,X,￥,&trade；,注释语句,基本语法,语法解释,上述两种表示法皆可代表注释语句 ；注释,语句不会显示在浏览器中,文字内容综合示例,2）标题字标记,所谓标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容或作为文章的标题,具有加粗显示并与下一行产生一空行的特性,根据字号的大小分为六级，分别用标记,H1H6,表示，字号的大小随数字增大而,递减,标 记,描 述,属 性,属性取值,一级标题,align,left（默认值）,二级标题,三级标题,center,四级标题,五级标题,right,六级标题,标题字标记综合示例,3）文字的修饰标记,用于对文字进行格式化,常用的修饰标记如下：,标 记,描 述,、,粗体,、 、 ,斜体,上标,下标,大字号,小字号,下划线,、,删除线,地址，用于地址、Email,文字修饰标记综合示例,3-1）字体标记,作用：,设置文字的字体、字号及颜色,基本语法,表,3-3,字体标记的属性,属 性,描 述,face,设置字体,size,字号，取值范围为从1到7，或者从+1到+7、从-1到-7（正负取值相对于,页面默认字号3,），超出取值范围的，,与取值范围的最近的极值效果相同,color,文字颜色,字体标记综合示例,3-2)基字体标记,作用,用于设定文字的,字体默认,属性，出现在,标记,之后,的所有,标记的,默认,属性使用,标记中所设置的属性,基本语法,基字体标记综合示例,3.2 段落标记,1)段落标记,所谓段落，指得是一段格式上统一的文本,基本语法,语法解释,从开始处创建一个段落。,使用双标记将使所包含的段落与,上下文,都有一空行的间隔；使用单标记将只使段落与,上文,有一空行的间隔,标 记,描 述,属 性,属性取值,双标记,align,left,center,单标记,right,2)换行标记,作用: 产生一个换行效果,基本语法,3）居中标记,基本语法,作用：,使标记对之间的文字在浏览器窗口中居中对齐,段落、换行及居中标记综合示例,4）预格式化标记,基本语法,语法解释,预格式化，是指保留,之间的,文字在,源代码,中的格式，使其在页面中显示的效果和源代码中的效果几乎完全一致,预格式化标记示例,5） 水平线标记 ,水平线用于段落与段落之间的分隔，使文档结构更加清晰，使文字的编排更加整齐,基本语法,常用属性,属 性,描 述,width,设置水平线宽度,单位为像素或浏览器窗口的%,size,水平线高度,单位为像素,align,水平线对齐方式,取值left|center|right,默认居中对齐,noshade,默认的水平线的空心立体效果改设为实心的不带阴影的效果,color,水平线颜色,显示颜色时，当水平线将显示成实心,水平线标记示例,3.3 列表标记,所谓列表，通俗的讲就是各列表项按一定的方式进行排列而成的一张表,按列表项排列方式的不同，可分成：,有序列表,无序列表,嵌套列表,有序列表,以数字或字母等表示顺序的符号为项目前导符来排列列表项目的列表。例如,:,无序列表,以无顺序的符号（,、,等）为项目前导符来排列列表项目或没有任何符号作项目前导符的列表。,嵌套列表,指多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等,1）有序列表,基本语法,项目一,项目二,有序列表标记示例,常用属性,属 性,描 述,属性值,type,设置有序列表的前导符,1,前导符为数字1、2、3,a,前导符为小写字母a、b、c,A,前导符为大写字母A、B、C,i,前导符为小写罗马数字i、ii、iii,I,前导符为大写罗马数字I、,start,设置有序列表的起始编号,value,在默认情况下，有序列表从数字,1,开始编号；,不论列表编号是数字、英文字母还是罗马数字，,value,的值都是需要起始的,数字,有序列表前导符和起始编号设置示例,2) 无序列表,及,常用无序列表包含如下两种:,项目列表,前导符默认为实心圆点,定义列表,列表项前没有任何前导符,2-1）项目列表,基本语法,项目一,项目二,常用属性,属 性,描 述,属性值,type,设置项目列表的前导符,disc,前导符为,（默认前导符）,circle,前导符为,square,前导符为,项目列表标记示例,项目列表前导符设置示例,2-2)定义列表,基本语法,名词一,解释1,解释2,名词二 ,解释1,语法解释,定义列表是一种具有两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次；使用定义需解释的名词，使用解释名词,定义列表标记示例,3） 嵌套列表,嵌套列表指的是多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等,嵌套列表类型：,定义列表的嵌套,无序列表和有序列表的嵌套,这种嵌套类型是最常见的，它主要是通过在,一种列表中的列表项中嵌套另一种列表的定,义来实现,无序列表和有序列表嵌套示例,3.4 图片标记,网页中的常用图片格式,-,GIF,（,Graphics Interchange Format,，图形交换格式）,最多使用,256,种颜色，最适合显示色调不连续或具有大面积单一颜 色的图像，如站点图标、导航条等。,-,JPEG,（,Join Photograph Graphic,，联合图像专家组标准,),又称,JGP,，用来显示照片等颜色丰富的精美图像,-,PNG,（,Portable Network Graphics,，可移植网络图形）,既融合了,GIF,格式透明显示的颜色，又具有,JPEG,处 理精美图像的优势，是逐渐流行的网络图像格式，但目前浏览器对其支持并不一致,插入图片基本语法,基本语法,常用属性,属 性,描 述,src,指定图片源文件所在路径(,必设属性,),alt,设置提示文字,width,设置图片的宽度,height,设置图片的高度,hspace,设置图片与相邻对象之间的,左右,间距,vspace,设置图片与相邻对象之间的,上下,间距,align,设置对齐方式,border,设置图片边框，默认情况下，不显示边框,align属性值,描 述,baseline、bottom、absbottom,图片底端与文字底端对齐,top、texttop,图片顶端与文字行最高字符的顶端对齐,middle,图片的中间线与文字底端对齐,absmiddle,图片的中间线与文字的中间线对齐,right,图片在文字的右边,left,图片在文字的左边,插入图片综合示例,小 结,字体标记,的,size,属性的取值范围是,17,，其中“,1”,为最小字号，“,7”,为最大字号。,空格在源代码中的表示是,”,&,nbsp,;”,，一个,&,nbsp,;,表示一个半角空格。另外一些特殊符号如“,”,等，在源代码中也要象空格的表示一样，使用字符码。,设置文字的格式（如加粗显示文字）需要使用文字修饰标记,标题标记的级别范围是,h1h6,，其中“,h1”,的字号是最大的，“,h6”,的字号是最小的。,标记可使显示的内容的格式与源代码的格式几乎完全一样。,段落标记,和换行标记,的一个显著的不同之处是,在换行的同时，会与上（下）文产生一空行的间隔，而,则没有。,水平线标记,中的属性,size,用于设置水平线的高度。,图片标记必设置的一个属性是,src,思考题,1. 和有何不同？,2. 的size属性的取值范围是什么？,3. 如何使文字加粗并倾斜显示?,4. 标题标记共分几个级别？不同级别标题的字号的变化情况如何?,5. 如何在网页放置水平线?,6. 如何在网页中插入一幅图片?,
展开阅读全文