Web技术应用ppt_04.ppt

1、第章,1,第四章 HTML,第二篇 Web客户端程序设计基础,第章,2,HTML/DHTML,第二篇 知识点与技术要求 Web 编程技术，以及与这些技术相关的基础知识与原理 HTML； CSS与XML应用； 脚本的应用。,第章,3,HTML/DHTML,HTML的基本知识与结构。 熟练掌握HTML应用。,HTML,知识点与技术要求：,第章,4,HTML/DHTML,4.1 HTML概述 HTML文件的基本结构,第一个HTML文件,第章,5,HTML/DHTML,制作步骤： 使用简单的文字编辑器，如Notepad(记事本)、WordPad(书写板)等都可以。 在编辑器中输入两个HTML文件的代码

2、。 以扩展名“.html”保存文件。在只支持三个字母作后缀的操作系统中,扩展名是“.htm”。 在浏览器地址栏目输入文件名,显示页面 .,第章,6,HTML/DHTML,不副实 文档开始- 一个简单的html文件 欢迎！ 请单击学习web技术！ 文档的开始- ,第章,7,HTML/DHTML, 学习web技术 祝贺你，初试成功！ ,第章,8,HTML文件的结构,文件头,文件体,HTML/DHTML,第章,9,HTML/DHTML, HTML文档标记 文档首部标记 主页标题 标题标记 文档内容标记 主页文档部分 ,第章,10,HTML/DHTML,HTML 应用,HTML(Hyper Text

3、Markup Language)超文本标记语言 HTML的作用 用途： 万维网的基础技术之一 编制主页的超文本标记语言 特征： 与平台无关：从本质上讲, 记号语言是一种文本.传输后通过 浏览器用解释手段进显示. 文本本身具有跨 平台性, HTML可以跨平台工作. 跨网络的超文本链接 格式化的标记语言 文档 = 控制标记 + 显示内容,第章,11,HTML/DHTML,4.1.3 HTML的标记和元素 控制语句称为标记，格式如下： HTML语言元素 例如： 你好！ 标记大多成对出现，由和组成。始标记通知浏览器开始执行该标记指示的功能，尾标记说明该功能到此结束。始标记与尾标记同名，但是尾标记名称之

4、前有一斜杠“/”。也有的标记无尾标记，如换行标记即没有尾标记也没有语言元素。,第章,12,HTML/DHTML, 标记与大小写无关。 标记可以联合使用，也可以嵌套使用。 标记可以带有一个或多个属性参数。格式： 注释标记不在浏览器中显示，只供阅读页面代码帮助理解使用。,第章,13,HTML/DHTML,4.1.4 页面结构标记 1.标记 在html文档最外层，表示html文件开始与结束。 2.文件头标记 在文件头标记与之间保存说明整个文件的综合信息。包含的标记 ： 标题标记 给出文件的总标题，在浏览器标题栏中显示。标题应简明扼要，切中文件的主题。格式如下： 标题 ,第章,14,HTML/DHTM

5、L, 基地址标记 指定整个html文件各部分链接路径的起始点，又称基锚。 相关资料标记：提供用户不可见信息，说明与文件有关的资料信息。主要属性有：,第章,15,HTML/DHTML,name ：meta名称 content：定义页面内容，一些特定内容应与 http-equiv属性配合使用。 http-equiv：说明content属性内容的类别。 http-equiv=“refresh”, content中是页面刷新时间 http-equiv=“expires”, content中是页面过期时间,第章,16,HTML/DHTML, META示例 meta示例 5 秒钟后将跳回！ ,第章,17,

6、HTML/DHTML,3. 文件体标记 标明文档主体，是HTML文档主要部分。表示文档的开始，表示文档的结束。标记可以使用属性使页面带有背景颜色或背景图案，主要属性如下： background：背景图案或图像文件的URL。 bgcolor：背景颜色。 6位16进制的红-绿-蓝(red-green-blue，RGB)值表示。 “#ff0000”红色 ， “#00ff00”绿色，“#0000ff”蓝色 。 (常用颜色及其对应的16进制数对照见p83表4-1。) 英文单词表示。 “red”-红色， “green”绿色，“blue”蓝色 P92 表4-1,第章,18,HTML/DHTML,4.2 页面

7、修饰标记 控制页面的段落，显示字符的大小、颜色、字体和属性。 1. 字体标记 定义了六级字头，、 ，标记的字体最大最黑，其余的依次小下来 ,与尾标记一起使用。 常用的描述字体标记见p84表4-2,4-3。 标记描述字体的颜色、大小和字体。使用属性： “color”：定义字体颜色， 。 “face”：定义字体类型，宋体,隶书,楷体,黑体等 。 “size”： 字体大小，n从1到7，7号最大。,第章,19,HTML/DHTML,2段落标记 HTML文档中的空格、Tab符、回车换行符等，在浏览器中不起作用，必须使用标记，使文章分出段落，显出层次。 分段标记 标记表示新一段开始，在段落之间有一空行。

8、段落的结束，可以省略。 换行标记 标记另起一行，中间不插入空行。 水平线标记： 在页面上画出一条水平线。 : 颜色为#RRGGBB，宽度为n象素直线 预格式化标记 使HTML文档中的空格、Tab符、回车换行符起作用，与尾标记一起使用。,第章,20,HTML/DHTML,3.文字对齐标记 文字居中 文字左对齐 文字右对齐格式 这些标记可以复合使用,第章,21,HTML/DHTML, 页面修饰标记应用 显示粗体字 显示蓝色宋体字 删除划线; 下划线 显示上标：x3 显示下标：x2,第章,22,HTML/DHTML, 显示2号字 * * * * ,第章,23,HTML/DHTML,4.3 网页多媒体

9、技术 1.图像标记 把图像嵌入html文档 。具有属性： src：必选项，指定图像文件的url。 alt： 定义一个文本串，浏览器尚未完全读入图像或因故不能显示图像时，在图像位置使用文本串代替图像的显示。当浏览器可以显示图像时，alt属性不起作用。 align：文本与图像的对齐方式，取值：left、middle、right、top和bottom。 align=bottom表示图像底部与文本对齐。 border：图像边框的宽度(以像素为单位) ，如 border1。border0取消边框。 width、 height： 定义图像高和宽的像点数目。,第章,24,HTML/DHTML,2. 背景音乐

10、标记 在展示页面的同时播放音乐。 属性： src：音乐文件的url。 loop：音乐的播放次数，loop=-1 音乐不断循环播放。 如 ，,第章,25,HTML/DHTML, 图像标记的应用 圣诞快乐！ ,第章,26,HTML/DHTML,4.4 表格与列表标记 1. 表格标记： 建立表格， 与之间：表格标题、表头及单元格中的内容。 属性border：表格边框宽度，以像素为单位，缺省值 border1，border0没有边框。 表格有宽度为2个像素的边框。 与：定义表格标题。 属性align，aligntop 标题位于表首，缺省在表首； alignbottom 表格标题位于表尾。 每一行以开始

11、，用结束。 定义表头元素，表头显示成黑体。 定义单元格内容。,第章,27,HTML/DHTML,使用格式： 表格标题 第一列表头第二列表头 第一行、一列表项 第一行、二列表项 第二行、一列表项 第二行、二列表项 ,第章,28,HTML/DHTML,例： 课表代码清单 ： 表格标记应用 课表 节次星期一星期二星期三 星期四星期五 1、2基础英语操作系统网络基础 基础英语数据库 ,第章,29,HTML/DHTML, 3、4Java数据库实验 Java操作系统 5、6网络基础实验实验 实验 ,第章,30,HTML/DHTML,2.列表标记 三种类型的列表： 无序列表(Unordered list):

12、 列表项 有序列表(Ordered list)：列表项 定义列表(Description list):列表项 列表中每一项以标记开始，标记结束。列表可以嵌套使用，一个列表中的列表项又可以是一个列表。,第章,31,HTML/DHTML,无序列表 具有属性type， type取值： type disk 加重符号是实心园点(缺省) type circle 加重符号是空心园点 type square 加重符号是实心方块,第章,32,HTML/DHTML,无序列表标记使用 无序列表标记的使用 无序列表1：属性TYPE为缺省值 第一项。 第二项。 无序列表2：属性TYPE=circle 第一项。 第二项。

13、 无序列表3：属性TYPE=square 第一项。 第二项。 ,第章,33,HTML/DHTML,有序列表标记 列表中序列号由浏览器自动给出 属性type和start 取值： type 1，缺省值，用数字1，2，3等标识各项 type A，用大写字母A，B，C等标识各项 type a，用小写字母a，b，c等标识各项 type I，用大写罗马字母标识各项 type i，用小写罗马字母标识各项 用start属性指定列表开头数字， 例 type A , start 3， 列表的第一项 从C开始. 标记可以具有属性value，把列表编号指定为特定值。,第章,34,HTML/DHTML,有序列表及列表嵌

14、套使用 有序列表标记的使用 有序列表的属性 有序列表标记具有属性START。用START属性指定列表编号的开头值。 有序列表标记具有属性TYPE TYPE1，缺省值，用数字1，2，3等标识各项。 TYPEA，用大写字母A，B，C等标识各项。 TYPEa，用小写字母a，b，c等标识各项。 TYPEI，用大写罗马字母标识各项。 TYPEi，用小写罗马字母标识各项。 ,第章,35,HTML/DHTML,定义列表标记 组成 术语 : 标记描述 术语的定义: 标记描述 格式 术语术语的定义1 术语的定义2 术语术语的定义 可有属性compact，使术语和定义在同一行显示,第章,36,HTML/DHTML

15、,定义标记的使用 定义标记的使用 定义列表的使用 列表数据项的有序集合。 标号程序中指令的标识符。 磁盘文件的标识说明记录。 数据集中或附加在数据集上的字符， 它包括数据集的信息。 列表数据项的有序集合。 ,第章,37,HTML/DHTML,4.5 超链接标记 超链接标记是超文本的基本结构，把不连续的文字或文件连接起来。网页上的超链接一般指同一网页和不同网页之间的链接。 1. 超链接标记 链接文本或图像 href 属性：指明所要链接资源的URL， 和之间的内容是链接点，点击链接点网页转跳至href指明的资源处。,第章,38,HTML/DHTML,2.超链接标记的应用 超链接标记应用 下一页 超

16、链接标记的功能 ,第章,39,HTML/DHTML,3.锚同一页面间的链接 实现同一网页内部的链接，指向同一文件的特定位置，相当于提供了一个屏幕滚动功能。它的格式为： 链接文本 “锚”文本 锚名是网页中特定位置的名称。,第章,40,HTML/DHTML,锚的应用。 同一页面间的链接 Web技术应用基础 第1章 Web技术概述 第2章 Web应用环境构建技术 第3章 基于Web方式的信息系统开发案例 第4章 HTML,第章,41,HTML/DHTML,第5章 CSS 第6章 XML 第7章 JavaScript 第8章 Web数据库编程技术 第9章 JSP技术应用 第10章 ASP技术应用 第1

17、1章 综合实训 第4章 HTML 4.1 HTML概述 4.2 HTML页面修饰标记 4.3 页面多媒体技术 4.4 表格与列表标记 4.5 超链接标记 4.6 表单标记 4.7 窗口框架标记 ,第章,42,HTML/DHTML,5. 锚在图书馆管理信息系统中的应用,第章,43,HTML/DHTML,6.链接电子信箱 语法规则： 电子信箱地址 语句： 建立了系统管理员电子信箱超链接，点击信箱地址，向系统管理员发信。,第章,44,HTML/DHTML,4.6 表单和输入标记 1.表单的作用 提供图形用户界面和用户输入数据的元素：基本元素有按钮、文本框、单选钮、复选框等，是实现交互功能的主要接口。

18、 处理程序 客户端程序，在浏览器端执行。 服务器端处理程序，在服务器端执行。 用户通过表单向服务器提交信息，表单接收用户信息，并把信息提交给服务器，由服务器端的应用程序处理用户信息，并把处理结果返给用户并向用户显示。,第章,45,HTML/DHTML,2.表单标记 格式： 三个属性： action：完成表单信息处理任务服务器程序的完整URL，例如 method：表单中输入数据的传输方法，缺省值get。 methodget，将表单中输入数据打包后加到在 action中指定的URL后面。 post与get的功能相似，post将表单中的数据和调用程序分开发送，一般来讲使用post比较安全。 enctype：指定表单中输入数据的编码方法。,第章,46,HTML/DHTML,3. 输入标记 定义输入控件，类型由type属性确定，属性： name：控件标识 value：控件输入域的初始值 maxlength：控件输入域允许输入最多字符数 size：控件输入域大小 checked：复选框和单选按钮初始状态 URL：图像按钮使用图像位置(URL) align：图像的对齐方式 type：控件类型，text(文本框)、radio（单选按钮）等,缺省值是text。属性type的取值及它们的意义p99表4-6“type控