《《web基础知识》ppt课件》由会员分享,可在线阅读,更多相关《《web基础知识》ppt课件(38页珍藏版)》请在金锄头文库上搜索。
1、JSP动态网站开发,工商管理学院电子商务教研室,第2章 Web基础知识,2,一、Web发展及HTTP协议,1、客户端技术: HTML( HyperText Markup Language ); JavaScript; CSS( Cascading Style Sheets )。,2、服务器端技术: ASP( Active Server Pages ):Windows系统下Web服务器端的主流开发技术; 1997年Servlet技术问世,1998年JSP技术诞生; Web的未来:语义Web XML( EXtensible Markup Language)。,B/S,3,二、HTML 超文本标记语
2、言,1、为什么要学HTML: 制作任何类型网页的基础 HTML是JSP和Servlet的基础; JSP = 含有Java代码的HTML页面 hello.jsp; Servlet = 含有HTML的Java程序 hello.java 。,2、HTML标记结构:, this is my HTML page. ,4,HTML 标记,(、 ),(、 、 、 ),(、),(、 ),(、 、 、),HTML标记分类,5,结构化标记,功能:用来描述Web页面的整体结构。 Html基本结构:, 网页的标题 网页的内容 , 网页的标题 网页的内容 ,6,xx.htm,网页标题 ,HTML文件结构,7,文本标记,
3、功能:编排文本内容的布局和格式; 包含的标记: 文本布局:、 文本格式:、 color属性:可以是16种预定义标准色,也可以是6位16进制的色彩。,8,结构化标记, align:对齐方式,和常用的属性; 常用于将内容分层次,常和CSS联合使用。 列表标记:,无序列表: 星期日 星期一 ,有序列表: 星期日 星期一 ,2.2格式排版 1,类似于Word文档中的标题,事先定义好文字的字体、大小的一组标签,成对出现;,每行标题后会自动添加一行空白。,段落、 换行、 预格式化、 水平线、 对齐方式,设计时的排版与浏览时相同,保留代码中的回车换行和空格。,Size=“” Width=“”noshade,
4、 ,2.2格式排版 2,标签,src:图像文件的路径,推荐使用相对路径,此属性值必须提供;,图像以单独的文件形式存在,设计时要保证图像的src属性正确指向图像文件。,alt:替代图像的信息文字,或鼠标停留在图上时跟随鼠标的小提示;,2.2格式排版 3,以定义好三种列表方式;,无序列表,有序列表,项目1 项目2 项目3, 项目1 项目2 项目3 ,start=“整数”,设置列表的起始项属性,type=“1/i/I/a/A”,设置列表的起始项属性,项目1 项目2 项目3, 项目1 项目2 项目3 ,,空格,引号等符号在HTML语言中都有特殊意义;,一个字符实体一定由三部分组成:,HTML代码只会按
5、照符号在HTML语言中的特定意义来处理;,当在网页上不能正常显示这些符号时,可以使用字符实体(如空格用表示);,最常用的几个字符实体,空格(),2.2格式排版 4,&,实体名,;,对大小写敏感,2.3网页布局 1,两个作用:,在网页中显示普通的表格;,更重要的用法:网页布局,用于固定网页内各元素的位置,任何元素都可以放在表格的单元格内;,最基本的格式:, ,表格标签,至少包含一对标签,行标签,至少包含一对标签,列/单元格标签,标签之间可以嵌套任何元素,可以通过表格来控制页面的显示大小,2.3网页布局 1, 数码相机 诺基亚手机 , 手机卖场 诺基亚手机 ,跨列属性,属性值为要跨越的列数,跨行合
6、并单元格怎么做?,rowspan属性,属性值为要跨越的行数,2.3网页布局 1,16,表格标记,功能:用来以表格的方式组织需要显示的内容; 包含的标记: 的常用属性: rowspan colspan border align valign, 4 5 6 7 ,练习:写一个html页面,要求包含一个3行,3列的表格,效果如下:,链接,链接文字或图片,href:指定该链接要跳转到的位置:,URL链接;,本地链接;,2.3网页布局 2,新浪,index.htmxx.htm:,index.htm libai.htm:,libai.htm index.htm:,链接,链接,链接文字或图片,target:
7、指定在哪个窗口打开链接,默认为在当前窗口内打开:,target=“_self” 在当前窗口打开;,2.3网页布局 2,target=“_parent/_top”;,target=“_blank” 在新窗口中打开;,19,表单标记,功能:提供让用户输入信息的界面,并将用户输入的内容进行提交; 包含的标记:、;每个表单元素都有name、value属性;, . . ,:用来声明表单,而且其它表单元素只能在其范围内才适用:,20,表单标记的method属性,get方式: 浏览器的地址栏中会显示完整的请求字符串,包括请求资源和参数列表; 不太安全的方式; 传输数据量受限。,post方式: 浏览器地址栏中
8、只会显示请求资源的URL; 进行基本的安全处理; 传输数据量较大。,例:http:/localhost:8080/login.jsp?uname=admin&pwd=123456,21,表单中的标记,22,表单中的标记,23,表单标记,:下拉列表控件;,: 多行文本控件。, 西班牙 法国 巴西 德国 , 请填写您的工作经历 ,24,补充:JavaScript,1、为什么要学JavaScript: JavaScript是介于Java与Html之间、基于对象事件驱动的编程语言,正日益因全球的开发环境简单化、不需要Java编译器、而是直接运行在Web浏览器中,而受到开发者的所爱; 它是通过嵌入HTM
9、L或在标准的HTML语言中调用实现的。,JavaScript:让你的网页动起来,25,三、JavaScript-让网页动起来,1、为什么要学JavaScript: JavaScript是介于Java与Html之间、基于对象事件驱动的编程语言,正日益因全球的开发环境简单化、不需要Java编译器、而是直接运行在Web浏览器中,而受到开发者的所爱; 它是通过嵌入HTML或在标准的HTML语言中调用实现的。,26,三、JavaScript-让网页动起来,2、JavaScript VS Java: 两个公司开发的不同的两个产品: Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Inte
10、rnet应用程序开发; JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是LiveScript。,27,第一个JavaScript程序, / JavaScript语句. alert(“这是第一个JavaScript例子!“); alert(“今后我们将共同学习JavaScript知识!“); ,alert()是JavaScript的窗口对象方法,其功能是弹出一个具有OK对话框并显示参数中的字符串,在HTML文档中,JavaScript使用.来标识。,28,三、
11、JavaScript-让网页动起来,3、JavaScript语言的组成: 基本数据类型、表达式和运算符 控制流程 函数 事件 对象,29,基本数据类型、表达式和运算符,基本数据类型:数值型、字符型、布尔型、空值。,变量:用命令 var 作声明:,如:var mytest; 定义了一个mytest变量,但没有赋予它的值;,var mytest = “Welcome ! ”; 定义了一个mytest变量,同时赋予它字符串类型的值。,声明变量简单,不需要提前指定变量的数据类型,30,控制流程,if条件语句 for循环语句 while循环 break和continue语句,31,函数,JavaScri
12、pt函数定义 function 函数名(参数列表) 函数体;. return 表达式; ,函数名对大小写是敏感的。,32,事件,单击事件onClick 当用户单击鼠标按钮时,产生onClick事件,同时 onClick指定的事件处理程序或代码将被调用执行。 通常在下列基本对象中产生: button(按钮对象) radio (单选钮) checkbox(复选框) reset(重置按钮) select(列表框) submit(提交按钮),如 或Input type=“button“ value=“测试“ onclick=“alert(这是一个例子); “,在onClick等号后,可以使用自己编写的
13、函数作为事件处理程序,也可以使用JavaScript内部的函数,还可以直接使用JavaScript的代码等,33,事件,改变事件onChange 当text或textarea元素中输入的内容改变时发该事件,同时当在select列表项中一个选项状态改变后也会引发该事件。 获得焦点事件onFocus/失去焦点事件onBlur 载入文件事件onLoad/卸载文件事件onUnload, function loadform( ) alert(“欢迎光临! “); ,34,可根据网页中元素的名称定位具体的元素,如网页中有一个名为“form1”的表单,可用 document.form1来定位,内部对象,St
14、ring对象:字符串,掌握其常用属性和方法: Length:属性,返回字符串的长度。 Date对象:日期和时间 getFullYear( )、getMonth( )、getDate( ) 常结合window.setTimeOut(“方法名( ); “, 毫秒数); 使用,刷新时间。,window对象:浏览器窗口对象 该对象通常包括三个对象: document:当前HTML文档对象; location:当前地址对象; document.write( );或document.writeln( );,35,JavaScript文件,JavaScript程序可以直接嵌入在HTML中,也可以独立文件的形
15、式出现: 后缀名:.js 以“*.js”形式存在的JavaScript程序有更高的重用性,可以被多个HTML文件引用;,引用方式: 将原来写在中的JavaScript程序直接剪切出来,另存为“check.js“; 将原来的修改为:,36,具体应用:表单校验,form表单:, 用户名: 密码: ,验证要求: 用户没填用户名即提交:提示用户名不能为空; 用户密码小于6位:提示用户密码不能低于6位。,37,具体应用:表单校验,form表单:, function check( ) var name = document.form1.uname.value; var pwd = document.form1.upwd.value; if(name.length = 0) alert(“请输入您的用户名!“); document.form1.uname.focus( ); return false; ,38,四、本讲小结,1、确定项目小组,开始准备项目规划 2、客户端技术 HTML常用标记(重点:表单、表格标记); JavaScript基本应用(重点:表单验证、动态刷新时间); 3、小组任务一: 使用表单开发用户登录界面,并用表格为网页布局; 要求:页面美观、有基本的验证功能、有电子时钟。,