HTML入门讲座.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,HTML,入门,HTML入门,HTML,文件结构,页面属性标记,常用页面元素标记,常用页面布局标记,基础篇,表单和滚动字幕标记,作业,1,2.1,HTML,入门,HTML,概述,HTML,的作用,HTML,的编辑环境,HTML,文件的组成,2,超文本：,是指它所编写的对象不仅包含普通的文字字符元素，还有声音、图形甚至多媒体等其他,“,超越,”,普通文字字符的对象元素。,HTML,：,用于网页制作的排版语言，是,Web,最基本的构成元素,。,利用一些指令符号，来标记表示出各种文件效果。,由浏览器来解读HTML,的指令符号，将文件格式效果展现出来。,纯文本文件。,图形、声音等文件必须用其他软件制作，,再用,HTML,的标记编排在网页的原始文件里。,HTML,概述,HTML,入门,3,格式化文本,建立超链接,创建列表,插入图像,建立表格,插入多媒体,建立交互式表单,HTML,的作用,HTML,入门,4,Dreamweaver,Frontpage,Editplus,记事本,HTML,的编辑环境,HTML,入门,5,HTML,文件的组成,标记,单一标记：,只要一个标记就能完成所需表示的功能,如,、,成对标记：,需要两个标记组合才能完成所需功能,如,和,、,和,文字与图像,统一资源定位器,URL,HTML,入门,6,2.2,HTML,文件结构,标记及属性,HTML,文件结构,7,文件结构,标记及属性,标记：,为了使所要显示的内容达到一定的效果，在内容中加入的特定标识,。,每个标记都用“,”,（大于号）围住。,注意：“,”,与标记之间不能留有空格或其他非标记字符,在标记前加“,/”,是结束标记,标记字母不区分大小写,对同一段要标记的内容，可以使用多个标记来共同作用，各 个标记间的顺序是任意的。,受标记影响的内容,8,属性：,标记通过属性来精确控制信息，以便制作出各种效果。,并不是每个标记都有属性。,可以根据需要使用标记的所有属性或几个属性，属性之间没有顺序。,属性和标记一样，也不区分大小写。,内容,文件结构,9,HTML,文件结构,以,开头，以,结尾。,包括头部（,Head,）和主体（,Body,）两大部分。,：网页的题头，说明文件命名与文件本身的相关信息。,：网页标题，在浏览器的标题栏显示。,：网页的正文。,网页的标题,网页的内容,文件结构,10,2.3,页面属性标记,meta,标记,页面属性标记,11,页面属性标记,meta,标记,主要属性有：,HTTP-EQUIV,：,类似于,HTTP,的头部协议，回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用类型有：,expires,（期限）：,设定网页的过期时间,Pragma,（,cache,模式）：,禁止浏览器从本地机的缓存中调阅页面,Refresh,（刷新）：,将网页定时自动链接到其它网页上,Content-Type,（字符集设定）,12,NAME,：,描述网页信息的，便于搜索引擎查找和分类。,常用类型有：,Keywords,（关键字）：,设定页面的关键字,description,（简介）：,告诉搜索引擎网页的主要内容,robots,（机器人向导）：,告诉搜索引擎哪些页面需要索,引，哪些页面不需要索引。,author,（作者）：,标注网页的作者,页面属性标记,13,页面属性标记,主要属性有：,bgcolor,：,设置页面背景色,background,：,设置网页的背景图像,text,：,设置网页中文字的颜色,link,：,设置还没有被访问的超文本链接的颜色,vlink,：,设置已经被访问过的超文本链接的颜色,alink,：,设置超文本链接正在被访问时候的颜色,页面内容,页面属性标记,14,2.4,常用页面元素标记,段落标记,文字标记,超链接标记,列表标记,图像和多媒体标记,15,页面元素标记,段落标记,Hn,：,表示标题文字的大小，,n,从,1,到,6,，,H1,最大，,H6,最小。,align,：,标题文字的水平对齐方式，取值有：,Left,：左对齐,Center,：居中对齐,Right,：右对齐,标题,标题文字标记,16,align,：,标题文字的水平对齐方式，取值有：,Left,：左对齐,Center,：居中对齐,Right,：右对齐,本行文字,下一行文字,强制换行标记,上一段落文字,下一段落文字,段落文字,强制换段标记,17,align,：,分区的水平对齐方式，取值有：,Left,：左对齐,Center,：居中对齐,Right,：右对齐,已经排好格式的段落文字,显示预排格式标记,多个段落文字或图像,分区显示标记,18,align,：,设定对齐方式，可以为,left,、,center,或,right,size,：,设定水平线粗细，以像素为单位,width,：,设定水平线长度,绝对长度：像素数,相对长度：水平线占浏览器窗口宽度的百分比,noshade,：,取消线条的阴影显示,color,：,设定线条颜色。可以用英文单词或以“”引导的一个十六进制代码。常用的颜色代码如下：,水平线标记,19,常用颜色代码表,颜色名,颜色英文名,16,进制代码,颜色名,颜色英文名,16,进制代码,黑色,Black,#000000,粉红色,Pink,#FFC0CB,蓝色,Blue,#0000FF,红色,Red,#FF0000,棕色,Brown,#A52A2A,白色,White,#FFFFFF,青色,Cyan,#00FFFF,黄色,Yellow,#FFFF00,灰色,Grey,#808080,深红色,Crimson,#CD061F,绿色,Green,#008000,黄绿色,Greenyellow,#00FFFF,乳白色,Ivory,#FFFFF0,水蓝色,Dodgerblue,#0B6EFF,桔黄色,orange,#FFA500,淡紫色,lavender,#DBDBF8,20,文字标记,size,：,文字的大小，取值范围为,1,7,，,1,最小，,7,最大。,face,：,文字的字体,color,：,文字的颜色,文字,字体字号标记,页面元素标记,21,字型标记,格式标记,字体效果,受影响的文字,加粗,受影响的文字,斜体,受影响的文字,带下划线,受影响的文字,标准打印机字体,受影响的文字,带删除线,受影响的文字,下标,受影响的文字,上标,受影响的文字,大字体文字,受影响的文字小字体文字,22,设定整个网页的文本的缺省颜色,标记的,text,属性,:,文字,文字颜色标记,标记的,color,属性,:,文字,将网页中不同的文字段设置为不同的颜色,标记的优先级比,标记要高,23,特殊标记,特殊字符标记,表示的字符,&,lt,;,&,nbsp,;,空格,&,%,&,quot,“,24,超链接标记,从根目录开始描述目录或文件,UNIX,以“,/”,开始，,Windows,以“,c:”,开始。,标识,Internet,上文件的全部信息，包含协议、主机名、文件夹名和文件名称。,绝对路径,以当前目录为参考来说明文件的位置,相对路径,绝对路径清楚明确的指出文件和文件夹的位置,相对路径则根据当前目录不同，可能同样的文件名指向不同的文件,。,页面元素标记,25,href,：,目标资源的具体地址。可以是绝对路径，也可以是相对路径。,name,：,设定一个较长的,HTML,文档的跳转位置点，相当于书签。,target,：,控制超链接内容打开方式，即链接内容出现的位置。,titile,：,超链接中的链接说明。,注意：,name,属性和,href,属性不能同时使用。,热点,锚点标记,26,链接到同一目录内的网页文件：,热点,链接到下一级目录中的网页文件：,热点,链接到上一级目录中的网页文件：,热点,链接到同级目录中的网页文件：,热点,创建指向其他页面的链接,27,建立超级链接的标记：,热点文本,建立锚点的标记：,跳转目标文本,创建指向本页的链接,热点文本,创建指向其他页面某处的链接,热点,创建指向下载文件的链接,热点,创建指向电子邮件的链接,28,列表标记,LI,：,项目标记，单标记。,Type,属性：,项目符号的样式，取值有：,Disc,：实心圆点,Circle,：空心圆点,Square,：实心方块,的,type,属性比,的,type,属性的优先级高,项目,1,项目,2,无序列表标记,页面元素标记,29,lh,：,分类标题，标题前没有项目符号。,标记不会自动换行,分类标题,1,分类,1,之项目,1,分类,1,之项目,2,分类标题,2,分类,2,之项目,1,分类,2,之项目,2,选单列表标记,30,项目,1,项目,2,有序列表标记,Type,的属性值,含 义,1,序号为阿拉伯数字，,1,、,2,、,3,。,a,序号为小写英文字母，,a,、,b,、,c,。,A,序号为大写英文字母，,A,、,B,、,C,。,i,序号为小写罗马字母，,、,、,。,I,序号为大写罗马字母，,、,、,。,31,不同可以互相嵌套，相互组合以达到很好的显示效果。,上层项目说明,下层项目说明,下层项目说明,说明式列表标记,32,图像和多媒体,标记,src,：,插入的图像的,url,地址，即含路径的图像文件名,alt,：,表示图像的信息文字。,当没有完全装载图像时，在图像的位置显示的信息。当图片完全显示时，将鼠标移动到图像上，看到的信息文字,width,：,设定图像的宽度,height,：,设定图像的高度,图像标记,页面元素标记,33,border,：,设定图像的边框,hspace,：,图像左右边缘空白，在图文混排时候使用,vspace,：,设定图像上下边缘空白大小,align,：,图像的对齐方式。取值有：,Top,：上对齐,Middle,：中间对齐,Bottom,：下对齐,Left,：左对齐,Right,：右对齐,34,src,：,要播放的声音文件,loop,：,声音文件的播放次数。,Infinite,表示循环播放,auotstart,：,是否自动播放,True,：是,False,：否,标记：加入背景音乐,多媒体标记,注意：,只支持,IE,浏览器,35,src,：,要播放的媒体文件,controls,：,设定播放媒体文件的控制面板的类型,Console,：一般正常的面板,Smallconsole,：较小的面板,Playbutton,：只显示播放按钮,Pausebutton,：只显示暂停按钮,Stopbutton,：只显示停止按钮,Volumelever,：只显示音量调整钮,标记：插入多媒体文件,36,height,：,设定播放区域的高度,width,：,设定播放区域的宽度,hidden,：,是否隐藏控制画面。取值有,true,或,false,loop,：,设定播放次数。取值有,true,、,false,或播放次数,autostart,：,设定是否自动播放。取值有,true,或,false,例插入背景音乐：,插入多媒体链接：,链接入口,37,2.5,常用页面布局标记,表格标记,框架标记,38,页面布局标记,表格,标记,align,：,表格相对于页面的位置，取值有：,Left/Center/right,：页面的左侧,/,中间,/,右侧,表格标题,分类名称,1,分类名称,2,分类名称,n,表项,1,表项,2,表项,n,表项,1,表项,2,表项,n,(,表格,),标记的属性,39,border,：,表格边框的宽度。,width,：,表格的宽度，可以是像素的值也可以是相对于页面大小的百分比。,height,：,设定表格的高度。,cellspacing,：,表项和表项之间的间隔。,cellpadding,：,表项边框和表项内部文字之间的间隔。,frame,：,表格边框的属性,。,frame,属性值,含 义,void,没有边框,above,只有上边框,below,只有下边框,hsides,只有水平边框，没有左右边框,vsides,只有垂直边框，没有上下边框,lhs,只有左边框,rhs,只有右边框,40,rules,：,设定表格内部线的属性。取值如下,:,rules,属性值,含 义,none,没有内部线,rows,只有内部行线（水平线）,cols,只有内部列线（垂直线）,groups,只有不同分组之间有分界线,all,所有表项周边都有边线,dir,：,表示表项的排列方向，缺省的为从左到右排列,bgcolor,：,设定表格的背景颜色,(,标题,),标记的属性,align,：,标题和表格的对齐方式，取值为,left,、,center,或,right,。,valign,：,标题在表格的上方或者下方，取值为：,top,或,bottom,。,41,bgcolor,：,单元格的背景颜色,rowspan,：,设定跨行的表项，表示从当前行开始合并的行数。,colspan,：,设定跨列的表项，表示从当前列开始合并的列数。,align,：,文字左、中、右对齐或者左右均匀调整,，,对应的值为,：,left,、,center,、,right,或者,justify,。,valign,：,文字垂直上、中、下对齐或者按基准线对齐，对应的值为：,top,、,bottom,、,middle,或者,baseline,。,：表格的一行,：分类名称，值会用黑体显示,：具体的表项值,单元格标记的属性,42,页面布局标记,框架,标记,框架可以将一个浏览器窗口分割成数个不同的小窗口，每个小窗口能够显示不同的,HTML,文件；,不同的框架之间可以互相关联，可以通过在一个框架中的操作影响到其它框架的内容；,使用,和,标记，建立一个主调用,HTML,文件，用来声明框架的定义，以及如何进行框架的划分；,标记用来划分框架，并定义框架组的属性；,标记用来给各个框架指定页面内容，将框架与在框架中显示的,HTML,文件联系起来。,43,Row,：,横向分隔的框架数目，用逗号分隔，取值可以是像素、百分比或”*”。“*”表示将剩余的窗口平均分配。,Col,：,纵向分隔的框架数目,Border,：,整个框架组各个边框的宽度,Bordercolor,：,整个框架组各个边框的颜色,Frameborder,：,设定有,/,无边框,Framespacing,：,设定各窗口间的空白,的属性,44,src,：,表示该框架对应的文件名,name,：,指定框架名,marginwidth,：,设置框架内容与左右边框的空白,marginheight,：,设置框架内容与上下边框的空白,scrolling,：,设置是否加入滚动条或根据内容自动加入滚动条,noresize,：,不允许改变各窗口大小,的属性,注意：,标记的个数应该等于,标记中定义的框架数,如果,标记的个数小于,框架中定义的框架数量，则多余框架为空。,按照先行后列的顺序对框架进行初始化。,框架可以嵌套。,45,热点文字,框架间的链接,target,属性值,含 义,框架名,链接的目标文件将被载入到指定的框架中,_blank,链接的目标文件将被载入到一个新的浏览器窗口,_self,链接的目标文件将被载入到当前的框架窗口，替,换当前正在显示的文件。,_top,目标文件将被载入到当前的整个浏览器窗口。,_parent,当框架嵌套时，目标文件将被载入到父框架中，,否则被载入到整个浏览器窗口。,46,2.6,表单和滚动字幕标记,表单标记,滚动字幕标记,47,表单和滚动字幕标记,表单,标记,表单是,Web,页面和用户进行信息交互的途径,：,标记表单的开始和结束,：,设定表单以何种形式和用户交互,48,action,：,表单处理的方式,通过,E-MAIL,将信息发出,将信息输入到数据库,将信息发布到新闻组或者页面,根据输入内容搜索数据库并返回结果给访问者,method,：,表单数据的传送方向,Get,：当按下提交按钮，,form,输入框内容附在,action,指明的,URL,的“,?”,之后立即传给服务器，,get,执行效率比较高，但传送的信息量有限，大约,2k,。,Post,：当按下提交按钮后，需要等待服务器来读取参数信息，在传送信息量上没有限制。,的属性,49,type,：,指定项目的类型，取值为,text,，,password,，,radio,，,checkbox,，,image,，,submit,，,reset,，,hidden,和,file,等。,name,：,项目的控制名称。,size,：,如果,type,是,password,或者,text,，则,size,指初始字节长度，其他的指控制组件的初始大小（像素值）。,maxlength,：,用户可以输入的最大字符数，对,type,为,text,或者,password,有效。,src,：,当,type,为,image,时，指明图像文件的具体位置。,checked,：,当,type,为,radio,或者,checkbox,时，表明初始选中该项目。,的属性,50,文本框的,type,属性为,text,，输入的文本正常显示。,密码框的,type,属性为,password,，输入的文本以”*”或者其他字符显示。,单行文本和密码框,name,：,项目的控制名,cols,：,不用滚动条就可以看到的行数,rows,：,不用滚动条就可以看到的列数，即每行的字符数。,多行文本框,51,value,：,单选按钮控制值，告诉处理程序用户的选择结果。,checked,：,表示默认选中。,单选钮,选项,1,选项,2,选项,n,注意：,选项互斥，每次只能有一个被选中。,同一组单选钮的控制名一样，但控制值不同。,52,value,：,选中时的控制值。当没有选中时，控制值为空。,checked,：,表示默认选中,复选框,选择栏,选项,1,选项,2,53,的属性,size,：,选择栏中一次可以显示的项目数,size=1,：下拉式选择栏，项目不可多选。,size1,：列表框式选择栏，用,multiple,属性设定是否允许多选。,checked,：,表示默认选中,multiple,：表示选择栏是否可以允许多选,的属性：,value,：,表示这个项目的值，传递给处理程序用。,selected,：,表示这个项目默认被选中。,隐藏控件,54,表单和滚动字幕标记,滚动字幕,标记,滚动字幕,55,height,：,字幕的高度，用像素或可视页面的百分比表示。,width,：,字幕的宽度，用像素或可视页面的百分比表示。,direction,：,字幕滚动的方向。,bgcolor,：,字幕的背景颜色。,hspace,：,字幕左右的空白空间,用像素表示。,vspace,：,字幕上下的空白空间,用像素表示。,scrollamount,：,每个连续滚动字幕的间隔,用像素表示。,scrolldelay,：,两次滚动之间的间隔时间,用毫秒表示。,loop,：,字幕的滚动次数。当值为“,INFINITE”,是“,-1”,时，字幕无限制地滚动。,ONMOUSEOUT=,this.start,(),：,鼠标移出该区域时继续滚动。,ONMOUSEOVER=,this.stop,(),：,鼠标移入该区域时停止滚动。,align,：,设定字幕的对齐方式,behavior,：,设定浏览器处理字幕的方法,Scroll,：文本单项滚动,Slide,：文本到达边界停止：,Alternate,：滚动文本到达边界后反向滚动,56,注意：,标记只适用于,IE3,以上版本的浏览器表示,虽是一个滚动字幕标记，但允许在其中加入图象。,例如：,57,教学实践：,初步掌握,HTML,应用,熟悉各种标记的基本操作,利用,HTML,制作简单网页,习题二,作 业,58,