html课件(全).ppt

1、HTML,全部内容,基本概念 HTML基本标识符 CSS样式表 Javascript,基本目标,学会基本的标记的功能及属性设置 学会对样式表的设置 学会基本的js方法及自定义函数 自己设计并实现简单的个人网站(静态),基本英语单词,Client：客户机程序，顾客, 客户, 委托人 www：world wide web 万维网 element：元素 value：值，价值 request：请求 response：回答, 响应 standard：标准 document：文件 attribute：属性,基本英语单词,form：表单 frame： 框架 table：表格 background：背景 co

2、lor：颜色 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：超文本标记语言 网页：用于存储网页信息的文件 网络服务器：用于存储网络文件的计算机 客户端：用于浏览网页的一端的计

3、算机 浏览器：用于浏览网页的软件平台 浏览器类型：IE 、Netscape Navigator、MyIE等,用户如何从浏览器获得资源,基本概念,网络分类： 按照范围分：广域网(WAN)、城域网(MAN)、局域网(LAN) 按拓扑结构：总线型结构,星型结构,环形结构,网状结构 网络的拓扑结构是指网络中通信线路(揽线)和计算机、以及其他组件的物理布局。,概述,当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音

4、、图片、文字等连结显示出来。,概述,HTML标记是由 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 ，所构成 ) 。它是一种介于前台和后台的语言。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成以 .htm 或 .html 为文件后缀保存将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。,如何保存一个HTML文件,HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后以 .htm或 .html 为文件后缀保存,编辑工具,FrontPage Dreamweaver 记事本 ,关于设计模式的解释,C/S模式 B

5、/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结构。这样就大大简化了客

6、户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。,MVC模式,MVC是一种目前广泛流行的软件设计模式，早在70年代，IBM就推出了Sanfronscisico项目计划，其实就是MVC设计模式的研究。近来，随着J2EE的成熟，它正在成为在J2EE平台上推荐的一种设计模型，也是广大Java开发者非常感兴趣的设计模型。 MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层模型层、视图层、控制层。,HTML 语法示例1：, 欢迎学习 HTML 我

7、的第一个 HTML 文档 ,运行结果,基本结构标识, 注意：在HTML中是不分大小写的。 标记要书写规范，包括标记的缩进!,HTML基本标识符,HTML文件基本架构 单标识 特殊标识 排版标识 字体标识 列表标识 表格框架表单标识 其他标识,HTML文件基本架构, 文件开始 标头区开始 . 标题区 标头区结束 本文区开始 本文区内容 本文区结束 文件结束 网页文件格式。 标头区 : 记录文件基本资料，如作者、编写时间。 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。 本文区 : 文件资料，即在浏览器上看到的网站内容,单标识, 注意：c语言中的两种注释 ,特殊标识,P12-1

8、3 空格,排版标识, - 注意：和的区别 不强行换行,字体标识,P21 打字体 ( 固定宽度文字 ) ,列表标识,有序列表 无序列表 自定义列表 条目 内容 ,表格框架表单标识,表格 框架 表单 ,其他标识,链接标识 字幕标识 多媒体标识 图片标识,标记,标记包含的元素有： 标题 描述非html标准的一些文档信息 描述当前文档与其他文档间的链接关系 脚本程序内容 样式表内容 设置打开链接的方式,标记,Target属性值有： _blank _parent _self,标记,Meta元素提供一些非html标准的用户不可见的信息。 单标记 作用： 编码的说明 定时刷新 ,页面进入和退出的特效,进入页

9、面推出页面 这个是页面被载入和调出时的一些特效。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种随机选择一种,标记,属性

10、：attribute每个标记中用于修饰标记的一些描述信息。 属性值：用来设置属性的值。 如： ,标记,Bgcolor背景色 Background背景图片 Text文本颜色 Link链接文字颜色 Alink活动链接文字颜色 Vlink已访问链接文字颜色 Topmargin页面顶部留白距离 Letfmargin页面左侧留白距离 Bottommargin页面底部留白距离 Rightmargin页面右部留白距离,补充内容,颜色的设定：三种方法 #FFFFFF#六位十六进制数 RGB(255,255,255)rgb码 White英文单词名 长度单位 绝对长度：单位为像素 相对长度：单位为百分比,标题标记

11、, HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 ,可显示六种大小的标题，即到，为最大，为最小,标题标记,我的网页 Align的属性值有： left（默认） right center,段落标记,P的属性有align 如： 你们好，欢迎来到华育国际,标记,属性： color定义文字的颜色 face定义文字的字体 size定义文字的大小 文字内容,标记,属性： align对齐方式 color线条颜色 size线条的粗度 width线条的宽度 如：,图片标记P17,在网页中插入图片 属性： src指定图片的路径 alt用于描述图片的文

12、字 width图片的宽度 height图片的高度 border图片的边框 align图片的对齐方式,图片标记,Align的属性值 top图片和文字顶部对齐 middle图片和文字居中对齐 bottom图片和文字底部对齐 left图片居左对齐文字沿图片绕排 right图片居右对齐文字沿图片绕排 absmiddle图片对齐到目前文字的绝对中央 absbottom图片对齐到目前文字的绝对底部,插入图像, 插入图像 插入图像 底部对齐 图2.15：示例15的输出结果 顶部对齐 居中对齐 ,IMG标记用于将图像插入到HTML文档中。可以将IMG标记放置在要显示图像的位置。语法为： 其中SRC是属性，而值

13、是指定图像文件位置的URL。 IMG标记的ALIGN属性可以用于调整图像相对于周围文本的对齐方式。语法为： ,分隔图片,将一整张图片分隔成几个部分。 ,超链接标记,通过链接可以调用另一个页面或是同页面某一区域的资源。 属性： align对齐方式 target目标窗口的显示形式 title链接提示 href设置要连接的地址,target,Target的属性值 _blank打开一个新窗口 _self在当前窗口打开 _parent在当前的上一级窗口打开,链接到其他文档, 使用链接 本页的所有内容都讲述关于如何创建到文档的链接 单击此处查看文档2 , 文档2 这是文档2。单击文档1中的超链接后将显示本

14、页。 返回 ,链接到同一文档的各个部分, 使用链接 互联网 HTML简介 多样化和统一性 互联网 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。 HTML简介 超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。 多样性和统一性 万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性

15、。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 ,单击,链接到另一文档中某个特定位置, 主文档 互联网 HTML简介 多样性和统一性 ,单击,使用电子邮件,如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。 我的电子邮件,为图片加超链接,在图片上加上超级链接使它链接到另一个网页上。 ,列表,无序列表 有序列表 定义列表,使要表现的信息在页面上是一条一条整齐出现的。 分类：,无序列表, 学习 HTML 星期一 星期二 星期三 星期四 星期五 ,无序列表是一

16、种“项目符号列表”。其中的项目都带有项目符号前缀。该列表 包含在无序列表标记 . 内。列表中的每个项目都使用列表标记进 行标记，其中LI表示List Item（列表项）。关闭标记是可选的。,无序列表中的type的属性值,square方形项目符号 disc（默认）实心圆项目符号 circle空心圆项目符号,有序列表, 学习 HTML 星期一 星期二 星期三 星期四 星期五 ,有序列表包含在 . 标记内。有序列表也显示列表项目。它与无序列表的区 别在于有序列表项前面的编号是可设置的有序编号。,有序列表,属性 type列表符号的类型 start符号的起始,有序列表中的type的属性值,1数字 A大写

17、字母 a小写字母 I大写罗马字母 i小写罗马字母,列表嵌套, 学习HTML 星期一 简介HTML 创建列表 星期二 创建表 插入图像 星期三 星期四 星期五 ,定义列表, 学习 HTML 星期日 一周的第一天 HTML 超文本标记语言 互联网 网络的网络 ,定义列表用于生成术语列表（术语和定义）。定义列表包含在 . 标记内。 标记用于指定要定义的术语，而标记用于对术语的定义。,标记,实现字幕滚动效果 属性 behavior 滚动的方式 bgcolor背景色 direction滚动方向 height窗体的高度 loop循环次数 scrollamount滚动速度 scrolldelay滚动延迟时间

18、 width窗体宽度 title文字描述,behavior,属性值设置 alternate交替 scroll滚动 slide一次滑动,dirction,属性值设置 left right up down,例子1：不同方式的滚动文字, 不同方式的滚动文字 最新图书：超梦幻劲爆网页MX完美结合 最新图书：超梦幻劲爆网页MX完美结合 最新图书：超梦幻劲爆网页MX完美结合 ,例子2：不同方向的滚动文字, 不同方向的滚动文字 最新图书：超梦幻劲爆网页MX完美结合 最新图书：超梦幻劲爆网页MX完美结合 最新图书：超梦幻劲爆网页MX完美结合 最新图书：超梦幻劲爆网页MX完美结合 ,在HTML文档中插入多媒体,

19、插入声音 插入视频,添加声音,方法1： 其中 pathsound filename 为声音文件的路径和文件名 Netscape Navigator 不支持 bgsound 元素,添加声音,方法2： ,在HTML中插入声音示例, 插入声音 插入声音 ,添加音频/视频,要将音频或视频文件插入到 HTML 文档中，可以使用 标记 ,在HTML中插入视频示例, Inserting a Video file Inserting a Video ,层简介,使用多个层，可以将一个层放到另一个层的上面或下面。 Z 顺序决定元素的显示顺序。 层就像一个包含内容的框架，可以将它放置在所需的位置。,表格,表格 ,标

20、记,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,作业：,表单简介,表单的用途 用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。 收集购买物品所需的信

21、息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。,一个样本表单,使用表单,例如，要使用POST方法将表单提交给“processform”程序， 可编程如下：, .表单内容. ,HTML 输入元素属性,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)电话交易