html课件(全).ppt

HTML,全部内容,基本概念HTML基本标识符CSS样式表Javascript,基本目标,学会基本的标记的功能及属性设置学会对样式表的设置学会基本的js方法及自定义函数自己设计并实现简单的个人网站(静态),基本英语单词,Client：客户机程序，顾客,客户,委托人www：worldwideweb万维网element：元素value：值，价值request：请求response：回答,响应standard：标准document：文件attribute：属性,基本英语单词,form：表单frame：框架table：表格background：背景color：颜色title：标题embed：嵌入head：头，头部body：身体Image:图片,基本英语单词,HTML：HyperTextMarkupLanguage超文本标记语言HTTP：HyperTextTransferProtocol超文本传输协议webpage：网页webservers：网络服务器webclients：网络客户端webbrowser：浏览器HTMLtags：HTML标记,基本概念,HTTP：超文本传输协议HTML：超文本标记语言网页：用于存储网页信息的文件网络服务器：用于存储网络文件的计算机客户端：用于浏览网页的一端的计算机浏览器：用于浏览网页的软件平台浏览器类型：IE、NetscapeNavigator、MyIE等,用户如何从浏览器获得资源,基本概念,网络分类：按照范围分：广域网(WAN)、城域网(MAN)、局域网(LAN)按拓扑结构：总线型结构,星型结构,环形结构,网状结构网络的拓扑结构是指网络中通信线路(揽线)和计算机、以及其他组件的物理布局。,概述,当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML(HyperTextMarkupLanguage)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结显示出来。,概述,HTML标记是由所括住的指令，主要分为:单标记指令、双标记指令(由，所构成)。它是一种介于前台和后台的语言。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成以.htm或.html为文件后缀保存将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。,如何保存一个HTML文件,HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后以.htm或.html为文件后缀保存,编辑工具,FrontPageDreamweaver记事本,关于设计模式的解释,C/S模式B/S模式MVC模式,C/S模式,C/S（Client/Server）结构，即大家熟知的客户机和服务器结构。将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构,B/S模式,B/S（Browser/Server）结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。,MVC模式,MVC是一种目前广泛流行的软件设计模式，早在70年代，IBM就推出了Sanfronscisico项目计划，其实就是MVC设计模式的研究。近来，随着J2EE的成熟，它正在成为在J2EE平台上推荐的一种设计模型，也是广大Java开发者非常感兴趣的设计模型。MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层模型层、视图层、控制层。,HTML语法示例1：,欢迎学习HTML我的第一个HTML文档,运行结果,基本结构标识,注意：在HTML中是不分大小写的。标记要书写规范，包括标记的缩进!,HTML基本标识符,HTML文件基本架构单标识特殊标识排版标识字体标识列表标识表格框架表单标识其他标识,HTML文件基本架构,文件开始标头区开始.标题区标头区结束本文区开始本文区内容本文区结束文件结束网页文件格式。标头区:记录文件基本资料，如作者、编写时间。标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。本文区:文件资料，即在浏览器上看到的网站内容,单标识,注意：c语言中的两种注释,特殊标识,P12-13空格,排版标识,-注意：和的区别不强行换行,字体标识,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（默认）rightcenter,段落标记,P的属性有align如：你们好，欢迎来到华育国际,标记,属性：color定义文字的颜色face定义文字的字体size定义文字的大小文字内容,标记,属性：align对齐方式color线条颜色size线条的粗度width线条的宽度如：,图片标记P17,在网页中插入图片属性：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表示ListItem（列表项）。关闭标记是可选的。,无序列表中的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,属性值设置leftrightupdown,例子1：不同方式的滚动文字,不同方式的滚动文字最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合,例子2：不同方向的滚动文字,不同方向的滚动文字最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合,在HTML文档中插入多媒体,插入声音插入视频,添加声音,方法1：其中pathsoundfilename为声音文件的路径和文件名NetscapeNavigator不支持bgsound元素,添加声音,方法2：,在HTML中插入声音示例,插入声音插入声音,添加音频/视频,要将音频或视频文件插入到HTML文档中，可以使用标记,在HTML中插入视频示例,InsertingaVideofileInsertingaVideo,层简介,使用多个层，可以将一个层放到另一个层的上面或下面。Z顺序决定元素的显示顺序。层就像一个包含内容的框架，可以将它放置在所需的位置。,表格,表格,标记,Table中的属性WidthHeightCellspacingCellpaddingBorderBgcolorBackgroundbordercolor,标记,Table中的属性WidthHeightvalignBorderBgcolorBackgroundbordercolor,标记,Table中的属性WidthHeightColspanRowspanBorderBgcolorBackgroundbordercolor,作业：,表单简介,表单的用途用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。收集购买物品所需的信息。例如，如果想通过Internet购买一本书，就需要填写姓名、邮政地址和付款方式等。,一个样本表单,使用表单,例如，要使用POST方法将表单提交给“processform”程序，可编程如下：,.表单内容.,HTML输入元素属性,InputType属性,TextCheckboxRadioSubmitresetImageButtonPassword密码Checked请上传照片,示例：,表单示例证券调查示例投资经验新手中级专家投资类型股票期权互惠基金今年选择什么证券？,其他输入元素,TextArea元素ColsRowsSizeTypeValueBUTTON元素NameValueType,示例：,表单示例证券调查示例有对其他投资者的建议吗？图4.3：示例2的输出结果发送重置,列表（下拉框）元素,select元素NameSizeMultiple,示例：,表单示例证券调查示例您用什么方式购买证券？1)网上交易2)电