《《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、小组任务一： 使用表单开发用户登录界面，并用表格为网页布局； 要求：页面美观、有基本的验证功能、有电子时钟。,
