html课件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,HTML,全部内容,基本概念,HTML,基本标识符,CSS,样式表,Javascript,基本目标,学会基本的标记的功能及属性设置,学会对样式表的设置,学会基本的,js,方法及自定义函数,自己设计并实现简单的个人网站,(,静态,),基本英语单词,Client,：,客户机程序，顾客,客户,委托人,www,：,world wide web,万维网,element,：,元素,value,：,值，价值,request,：,请求,response,：,回答,响应,standard,：,标准,document,：,文件,attribute,：,属性,基本英语单词,form,：,表单,frame,：,框架,table,：,表格,background,：,背景,color,：,颜色,title,：,标题,embed,：,嵌入,head,：,头，头部,body,：,身体,Image:,图片,基本英语单词,HTML,：,Hyper Text Markup Language,超文本标记语言,HTTP,：,Hyper Text Transfer Protocol,超文本传输协议,web page,：,网页,web servers,：,网络服务器,web clients,：,网络客户端,web browser,：,浏览器,HTML tags,：,HTML,标记,基本概念,HTTP,：,超文本传输协议,HTML,：,超文本标记语言,网页：用于存储网页信息的文件,网络服务器：用于存储网络文件的计算机,客户端：用于浏览网页的一端的计算机,浏览器：用于浏览网页的软件平台,浏览器类型：,IE,、,Netscape Navigator,、,MyIE,等,用户如何从浏览器获得资源,internet,输入地址,请求,HTTP,传输,基本概念,网络分类：,按照范围分：广域网,(WAN),、,城域网,(MAN),、,局域网,(LAN),按拓扑结构：,总线型结构,星型结构,环形结构,网状结构,网络的拓扑结构是指网络中通信线路,(,揽线,),和计算机、以及其他组件的物理布局。,概述,当我们畅游,Internet,时，我们透过浏览器所看到的网站，是由,HTML(,HyperText,Markup Language),语言所构成。,HTML(,超文件标记语言,),是一种建立网页文件的语言，透过标记式的指令,(Tag),，,将影像、声音、图片、文字等连结显示出来。,概述,HTML,标记是由,所括住的指令，主要分为,:,单标记指令、双标记指令,(,由,，,所构成,),。它是一种介于,前台,和,后台,的语言。,HTML,网页文件可由任何文本编辑器或网页专用编辑器编辑，完成以,.,htm,或,.html,为文件后缀保存将,HTML,网页文件由浏览器打开显示，若测试没有问题则可以放到服务器,(Server),上，对外发布信息。,如何保存一个,HTML,文件,HTML,网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后以,.,htm,或,.html,为文件后缀保存,编辑工具,FL,Dreamweaver,记事本,HTML,语法示例,1,：,欢迎学习,HTML,我的第一个,HTML,文档,运行结果,基本结构标识,注意：在,HTML,中是不分大小写的。,标记要书写规范，包括标记的缩进,!,HTML,基本标识符,HTML,文件基本架构,单标识,特殊标识,排版标识,字体标识,列表标识,表格框架表单标识,其他标识,HTML,文件基本架构,文件开始,标头区开始,.,标题区,标头区结束,本文区开始 本文区内容,本文区结束,文件结束,网页文件格式。,标头区,:,记录文件基本资料，如作者、编写时间。,标题区,:,文件标题须使用在标头区内，可以在浏览器最上面看到标题。,本文区,:,文件资料，即在浏览器上看到的网站内容,单标识,注意：,c,语言中的两种注释,特殊标识,P12-13,空格,&,nbsp,;,&,gt,;,“&,quot,;,&,apos,;,&,copy,&,reg,;,排版标识,-,注意：,和,的区别,不强行换行,字体标识,P21,打字体,(,固定宽度文字,),列表标识,有序列表,无序列表,自定义列表,条目,内容,表格框架表单标识,表格,框架,表单,其他标识,链接标识,字幕标识,多媒体标识,图片标识,标记,标记包含的元素有：,标题,描述非,html,标准的一些文档信息,描述当前文档与其他文档间的链接关系,脚本程序内容,样式表内容,设置打开链接的方式,标记,Target,属性值有：,_blank,_parent,_self,标记,Meta,元素提供一些非,html,标准的用户不可见的信息。,单标记,作用：,编码的说明,定时刷新,页面进入和退出的特效,进入页面,推出页面,这个是页面被载入和调出时的一些特效。,duration,表示特效的持续时间，以秒为单位。,transition,表示使用哪种特效，取值为,0-23:,页面进入和退出的特效,0,矩形缩小,1,矩形扩大,2,圆形缩小,3,圆形扩大,4,下到上刷新,5,上到下刷新,6,左到右刷新,7,右到左刷新,8,竖百叶窗,9,横百叶窗,10,错位横百叶窗,11,错位竖百叶窗,页面进入和退出的特效,12,点扩散,13,左右到中间刷新,14,中间到左右刷新,15,中间到上下,16,上下到中间,17,右下到左上,18,右上到左下,19,左上到右下,20,左下到右上,21,横条,22,竖条,23,以上,22,种随机选择一种,标记,属性：,attribute,每个标记中用于修饰标记的一些描述信息。,属性值：用来设置属性的值。,如：,标记,Bgcolor,背景色,Background,背景图片,Text,文本颜色,Link,链接文字颜色,Alink,活动链接文字颜色,Vlink,已访问链接文字颜色,Topmargin,页面顶部留白距离,Letfmargin,页面左侧留白距离,Bottommargin,页面底部留白距离,Rightmargin,页面右部留白距离,补充内容,颜色的设定：三种方法,#FFFFFF#,六位十六进制数,RGB(255,255,255),rgb,码,White,英文单词名,长度单位,绝对长度：单位为像素,相对长度：单位为百分比,标题标记,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,可显示六种大小的标题，即,到,，,为最大，,为最小,标题标记,我的网页,Align,的属性值有：,left,（,默认）,right,center,段落标记,P,的属性有,align,如：,你们好，欢迎来到华育国际,标记,属性：,color,定义文字的颜色,face,定义文字的字体,size,定义文字的大小,文字内容,标记,属性：,align,对齐方式,color,线条颜色,size,线条的粗度,width,线条的宽度,如：,图片标记,P,17,在网页中插入图片,属性：,src,指定图片的路径,alt,用于描述图片的文字,width,图片的宽度,height,图片的高度,border,图片的边框,align,图片的对齐方式,图片标记,Align,的属性值,top,图片和文字顶部对齐,middle,图片和文字居中对齐,bottom,图片和文字底部对齐,left,图片居左对齐文字沿图片绕排,right,图片居右对齐文字沿图片绕排,absmiddle,图片对齐到目前文字的绝对中央,absbottom,图片对齐到目前文字的绝对底部,插入图像,插入图像,插入图像,底部对齐,图,2.15,：示例,15,的输出结果,顶部对齐,居中对齐,IMG,标记用于将图像插入到,HTML,文档中。可以将,IMG,标记放置在要显示图像的位置。语法为：,其中,SRC,是属性，而值是指定图像文件位置的,URL,。,IMG,标记的,ALIGN,属性可以用于调整图像相对于周围文本的对齐方式。语法为：,分隔图片,将一整张图片分隔成几个部分。,超链接标记,通过链接可以调用另一个页面或是同页面某一区域的资源。,属性：,align,对齐方式,target,目标窗口的显示形式,title,链接提示,href,设置要连接的地址,target,Target,的属性值,_blank,打开一个新窗口,_self,在当前窗口打开,_parent,在当前的上一级窗口打开,链接到其他文档,使用链接,本页的所有内容都讲述关于如何创建到文档的链接,单击此处查看文档,2,文档,2,这是文档,2,。单击文档,1,中的超链接后将显示本页。,返回,链接到同一文档的各个部分,使用链接,互联网,HTML,简介,多样化和统一性,互联网,互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过,TCP/IP,传输协议绑定在一起,。,HTML,简介,超文本标记语言是,Web,用来创建和识别文档的标准语言。虽然它不是标准通用标记,语言,(SGML),的子,集，但与它有着某种程度上的关联。,SGML,是一种文档格式语言表示方法。,多样性和统一性,万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。,单击,链接到另一文档中某个特定位置,主文档,互联网,HTML,简介,多样性和统一性,单击,使用电子邮件,如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入,mailto,值。,我的电子邮件,为图片加超链接,在图片上加上超级链接使它链接到另一个网页上。,列表,无序列表,有序列表,定义列表,使要表现的信息在页面上是一条一条整齐出现的。,分类：,无序列表,学习,HTML,星期一,星期二,星期三,星期四,星期五,无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表,包含在无序列表标记,.,内。列表中的每个项目都使用列表标记,进,行标记，其中,LI,表示,List Item,（,列表项）。关闭标记,是可选的。,无序列表中的,type,的属性值,square,方形项目符号,disc,（,默认）实心圆项目符号,circle,空心圆项目符号,有序列表,学习,HTML,星期一,星期二,星期三,星期四,星期五,有序列表包含在,.,标记内。有序列表也显示列表项目。它与无序列表的区,别在于有序列表项前面的编号是可设置的有序编号。,有序列表,属性,type,列表符号的类型,start,符号的起始,有序列表中的,type,的属性值,1,数字,A,大写字母,a,小写字母,I,大写罗马字母,i,小写罗马字母,列表嵌套,学习,HTML,星期一,简介,HTML,创建列表,星期二,创建表,插入图像,星期三,星期四,星期五,定义列表,学习,HTML,星期日,一周的第一天,HTML,超文本标记语言,互联网,网络的网络,定义列表用于生成术语列表（术语和定义）。定义列表包含在,.,标记内。,标记用于指定要定义的术语，而,标记用于对术语的定义。,标记,实现字幕滚动效果,属性,behavior,滚动的方式,bgcolor,背景色,direction,滚动方向,height,窗体的高度,loop,循环次数,scrollamount,滚动速度,scrolldelay,滚动延迟时间,width,窗体宽度,title,文字描述,behavior,属性值设置,alternate,交替,scroll,滚动,slide,一次滑动,dirction,属性值设置,left,right,up,down,例子,1,：不同方式的滚动文字,不同方式的滚动文字,最新图书：,超梦幻劲爆网页,MX,完美结合,最新图书：,超梦幻劲爆网页,MX,完美结合,最新图书：,超梦幻劲爆网页,MX,完美结合,例子,2,：不同方向的滚动文字,不同方向的滚动文字,最新图书：,超梦幻劲爆网页,MX,完美结合,最新图书：,超梦幻劲爆网页,MX,完美结合,最新图书：,超梦幻劲爆网页,MX,完美结合,最新图书：,超梦幻劲爆网页,MX,完美结合,在,HTML,文档中插入多媒体,插入声音,插入视频,添加声音,方法,1,：,其中,pathsound filename,为声音文件的路径和文件名,Netscape Navigator,不支持,bgsound,元素,添加声音,方法,2,：,在,HTML,中插入声音示例,插入声音,插入声音,添加音频,/,视频,要将音频或视频文件插入到,HTML,文档中，可以使用,标记,在,HTML,中插入视频示例,Inserting a Video file,Inserting a Video ,层简介,使用多个层，可以将一个层放到另一个层的上面或下面。,Z,顺序,决定元素的显示顺序。,层,就像一个包含内容的框架，可以将它放置在所需的位置。,表格,表格,标记,Table,中的属性,Width,Height,Cellspacing,Cellpadding,Border,Bgcolor,Background,bordercolor,标记,Table,中的属性,Width,Height,valign,Border,Bgcolor,Background,bordercolor,标记,Table,中的属性,Width,Height,Colspan,Rowspan,Border,Bgcolor,Background,bordercolor,作业：,表单,简介,表单的用途,用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。,收集购买物品所需的信息。例如，如果想通过,Internet,购买一本书，就需要填写姓名、邮政地址和付款方式等。,一个样本表单,使用表单,NAME,指定表单名称,ACTION,此属性指定处理提交的表单的脚本的位置。语法为：,ACTION=URL,MEDTHOD,此属性指定向服务器发送数据的方法。如果值为,GET,，,浏览器将创建一个请求，该请求包含页面,URL,、,一个问号和表单的值。浏览器会将该查询返回给,URL,中指定的脚本，以进行处理。如果将值指定为,POST,，,表单上的数据会作为一个数据块发送到脚本，而不使用任何请求字符串。语法为：,METHOD=(GET|POST),例如，要使用,POST,方法将表单提交给“,processform,”,程序，,可编程如下：,.,表单内容,.,HTML,输入元素属性,TYPE,此属性指定表单元素的类型。可用的选项有,TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN,和,BUTTON。,默认值为,TEXT。,NAME,此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们,-TEXT1,、,TEXT2,或用户选择的任何名称。,VALUE,此属性是可选属性，它指定表单元素的初始值,SIZE,此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是,TEXT,或,PASSWORD,的,MAXLENGHT,此属性用于指定在,TEXT,或,PASSWORD,表单元素中可以输入的最大字符数。默认值为无限的,CHECKED,此属性是一个,Boolean,属性，指定按钮是否是被选中的。当输入类型为,RADIO,或,CHECKBOX,时，使用此属性。,SRC,SRC=URL,。,当使用,IMAGE,作为输入类型时使用此属性，它用于标识图像的位置。,Input Type,属性,TEXT,CHECKBOX,RADIO,SUBMIT,RESET,IMAGE,BUTTON,示例：,表单示例,证券调查示例,投资经验,新手,中级,专家,投资类型,股票,期权,互惠基金,今年选择什么证券？,其他输入元素,TextArea,元素,Cols,Rows,Size,Type,Value,BUTTON,元素,Name,Value,Type,示例：,表单示例,证券调查示例,有对其他投资者的建议吗？,图,4.3,：示例,2,的输出结果,发送,重置,列表（下拉框）元素,SELECT,元素,Name,Size,Multiple,示例：,表单示例,证券调查示例,您用什么方式购买证券？,1),网上交易,2),电话交易,3),经纪人代理,图,4.4,：示例,3,的输出结果,4),其他,示例：,求职,申请表,姓名：,求职意向,网站设计师,网管,网站开发人员,工作经历,无,一年,三年,五年,附注,请在这里键入附注。,发送确认,框架集,框架集（框架组）是框架的集合或是说是一个框架的组合。,框架,框架将,Web,浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。,例如，可以在网页中使用三个框架，一个显示标题，一个用作导航菜单，一个显示数据。,必须放在,之中,用于划分框窗，,标识框架集中的每一个框窗。,标记的属性,Cols,垂直切割窗口,Rows,横向切割窗口,Frameborder,设定框架的边框,Border,设定边框的厚度,Bordercolor,设定框架的边框颜色,Framespacing,框架与框架间保留空白的距离,FRAME,元素,FRAME,元素的属性包括：,Name,用来标记框架内显示的网页的名字,Src,用以标记要链接的网页的路径,Noresize,框架不可改变大小,Scrolling,是否要滚动条,Frameborder,框架使用示例：,两个大小相等的框架,图,4.7,：示例,7,的输出结果,嵌套的框架集,嵌套框架,NOFRAMES,元素,未显示框架。请单击这里,查看无框架版本,内嵌,框架,IFRAME,属性,Name,Width,Height,示例：,很有趣吧。你已经对框架有所了解。,浏览器不支持框架或者被配置为不显示框架。请在这里查看,内容,图,4.13,：示例,14,的输出结果（支援框架的浏览器）,上面是一个内嵌框架。,复习：,基本概念,知道基本标识的作用,了解,列表，列表框，下拉框，框架及其属性,完成一个完整的个人主页的设计,