《java_jsp_web技术应用基础html()课程ppt》由会员分享，可在线阅读，更多相关《java_jsp_web技术应用基础html()课程ppt（59页珍藏版）》请在金锄头文库上搜索。
1、1,第4章 HTML,第2篇 Web客户端程序设计基础,2,HTML,HTML的基本知识与结构 熟练掌握HTML应用,HTML,知识点与技术要求,3,HTML,4.1 HTML概述 4.1.1 HTML入门,一个简单HTML案例,4,HTML,例4.1： 具有网页最基本的功能：跳转,HTML 样例,源代码,5,HTML,制作步骤： 使用简单的文字编辑器 以扩展名“.html”保存文件 在浏览器地址栏目输入ex04-01.html,6,HTML, 简单的html案例 欢迎! 请单击Hello World！ ,7,HTML,文件名ex04-01_1.html Hello World！ 祝贺你，初试
2、成功！ ,8,4.1.2 HTML文件的结构,文件头,文件体,HTML,9,HTML,4.1.3 HTML 标记和元素,与平台无关 跨网络的超文本链接 格式化的标记语言 文档 = 控制标记 + 显示内容,10,HTML,HTML标记的格式 HTML语言元素 标记大多成对出现,11,HTML, 标记与大小写无关 标记可以联合使用 标记可以带有一个或多个属性参数 注释标记不在浏览器中显示,12,HTML,4.1.4 页面结构标记 1.标记 2.文件头标记 标题标记,13,HTML, 基地址标记 相关资料标记,14,HTML,name Content http-equiv,15,HTML,3. 文件
3、体标记 ：文档开始 ：文档结束属性 ： Background Bgcolor,16,HTML,4.2 HTML页面修饰标记 4.2.1标题文字标记 语法： 标题文字 ,17,HTML,4.2.2 文字样式标记 “color” “face” “size”,18,4.2.3 特定文字样式标记,19,HTML,4.2.4 段落标记 分段标记 换行标记 水平线标记 预格式化标记,20,HTML,文字对齐标记 ,例4.2,21,HTML, 页面修饰标记应用 显示2号标题字 显示蓝色隶书字体 显示删除划线 (显示地址),22,HTML, 显示上标：x3 显示下标：x2 预格式化标记应用 * * * * ,
4、23,HTML,4.3 页面多媒体技术 4.3.1图像标记 Src Alt Align Border width、 height,24,HTML,4.3.2 背景音乐标记 Src Loop,25,HTML,4.3.3 音乐和影像文件 ,ex4-03.html,ex4-04.html,26,HTML,例4.3 图像标记的应用 新疆喀纳斯湖 ,27,例4.4 自动播放音乐文件 自动播放音乐文件 ,28,HTML,4.4 表格与列表标记 4.4.1. 表格标记 与之间：表格标题、表头及单元格中的内容。 属性border 与：定义表格标题。 属性align 每一行以开始，用结束。 定义表头元素 定义单
5、元格内容。,29,HTML,使用格式： 表格标题 第一列表头第二列表头 第一行、一列表项第一行、二列表项 第二行、一列表项第二行、二列表项 ,30,HTML,例4.6： 课表代码清单 ： 表格标记应用案例 0705331课表 节次星期一 星期二 星期三 星期四 星期五 ,例4.6,31,HTML, 1、2英语操作系统 网络基础 英语数据库原理 3、4Java数据库原理 实验 Java操作系统 5、6网络基础实验 实验 实验 ,32,4.4.2 列表标记 1.无序列表标记 属性type，type 取值： typedisk：实心园点(默认) typecircle：空心园点 typ
6、esquare：实心方块 例4.7,33,例4.7 无序列表标记应用案例 无序列表1 第一项。 第二项。 无序列表2 第一项。 第二项。 ,34,2.有序列表标记 属性type和start。type取值 type1：1、2、3等标识,默认值 typeA：大写字母A、B、C等标识 typea：小写字母a、b、c等标识 typeI：大写罗马字母标识 typei：小写罗马字母标识,例4.8,35, 有序列表标记应用案例 有序列表的属性 有序列表标记具有属性start,指定列表编号的开头 有序列表标记具有属性type type1，缺省值，用数字1，2，3等标识各项。 typeA，用大写字母A，B，C等
7、标识各项。 typea，用小写字母a，b，c等标识各项。 typeI，用大写罗马字母标识各项。 typei，用小写罗马字母标识各项。 ,36,3.定义列表标记 术语术语的定义1 术语的定义2 术语术语的定义 例4.9,37,例4.9 定义标记应用案例 定义列表的使用 列表数据项的有序集合。 标号程序中指令的标识符。 磁盘文件的标识说明记录。 数据集中或附加在数据集上的字符，它包括数据集的信息。 列表数据项的有序集合。 ,38,HTML,4.5 超链接标记 4.5.1 超链接标记 链接文本或图像 href 属性,39,HTML,ex4-10.html 超链接标记应用 下一页 超链接标记的功能 ,
8、例4. 10,40,ex4-10_1.html 超链接标记应用 上一页 超链接标记是超文本的基本结构，它可以从当前Web页面定义的位置跳转到其他位置，包括同一页面的其他位置、Internet上的另一个Web页面、本地硬盘或局域网上的文件、声音或图像文件、FTP或Telnet站点、电子信箱等。 ,41,HTML,4.5.3 同一页面间的链接 链接文本 “锚”文本,42,HTML,例4.11：锚的应用。 同一页面间的链接 Web技术应用基础 第1章 Web技术概述 第2章 Web应用环境构建技术 第3章 基于Web方式的信息系统开发案例 第4章 HTML应用 第5章 CSS技术与XML技术应用 第
9、6章 JavaScript 第7章 Web数据库编程技术,43,HTML,第8章 JSP技术应用 第9章 ASP技术应用 第10章 综合实训 第4章 HTML 4.1 HTML概述 4.2 HTML页面修饰标记 4.3 页面多媒体技术 4.4 表格与列表标记 4.5 超链接标记 4.6 表单标记 4.7 窗口框架标记 ,锚应用,44,HTML,4.5.3 链接电子信箱 语法规则： 电子信箱地址,例4.12,45,例4.12 超链接应用案例 联大主页 播放音乐文件 播放影像文件 ,46,HTML,4.6 表单标记 4.6.1表单的功能 提供图形用户界面和用户输入数据元素 处理程序 客户端程序
10、服务器端处理程序,47,HTML,4.6.2 表单标记 格式： 属性： Action Method enctype,48,HTML/,4.6.3 输入标记 name Value Maxlength Size Checked URL Align type：控件类型，text(文本框)、radio（单选按钮）等,49,HTML,4.6.4 列表框标记 Name Size Multiple 标记属性: Selected Value,50,4.6.5 多行文本框标记 语法： ,51,HTML,4.6.6表单标记的应用案例 表单标记的应用 请输入姓名： 性别： 男 女 ,52,HTML,请选择旅游城市，
11、可做多项选择 北京 上海 西安 昆明 请选择付款方式 信用卡 现金 ,旅游,53,HTML,4.7 窗口框架标记 4.7.1窗口框架的建立 语法： rows cols,54,HTML,4.7.2 子窗口的建立 Src Name,55,HTML,4.7.3 例4.14 窗口框架应用案例 ,框架,56,4.8 HTML应用案例,例4.15,例4.16,例4.17,例4.18,57,HTML,1. 网页的基本元素 (1) 文本 (2) 图像 (3) 超链接 (4) 表格 (5) 表单 (6) 框架 (7) 动态元素,58,2.设计网页的步骤,拟定网页主题,搜集相关资料,规划网页内容,绘制结构草图,开始制作网页,上传与测试,推广网页,更新与维护,前期准备,中期制作,后期维护,59,HTML,作业与实验,完,
