第一讲 Web基础开发.docx

1、第一讲 Web基础开发第一讲 Web基础开发1 HTML编程技术HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。对HTML的编辑使用普通的文本编辑器即可（记事本、Editplus等）。1.1 head头元素Description网页的描述信息关键字， Keywords当搜索引擎查找时，按此关键字查找， content-type用来设置网页的编码， author设置网页的作者姓名， refresh设置网页自动刷新时间。第一个html页面第一个html页面1.2 常用标记Html常用标记都放在body标记内。常用的标记有字体标记，图片标记，超链接

2、标记，列表标记，表格，表单，块级元素（div和span）（1）字体标记基本语法：* html字体标记实例字体的名称，可以在“控制面板-字体”中看到。（2）图片标记 src属性表示图片的路径和文件名，width和height为宽和高，border为边线宽度。（3）超链接标记基本语法 *， 是Anchor(锚)的缩写，从一个页面链接到另一个页面。 链接到电子科技大学网站（4）列表标记有两种方式，有序列表和无序列表。有序列表 html编程基础css基础javascript编程基础无序列表 html编程基础css基础javascript编程基础（4）表格标记表格基本标记基本表格 11122122313

3、2跨行跨列利用rowspan和colspan设置跨行跨列 跨两行跨两列10001000100030004000Cellpadding 和cellspacing属性的使用，前者是单元格的编剧，字与单元格边框的距离。后者指单元格间距。 第一行第一列第一行第二列1第二行第一列第二行第二列 第一行第一列第一行第二列1第二行第一列第二行第二列表格样式可以用过BordeCcolor设置表格边框颜色，Bgcolor设置背景颜色，Align设置表格的对齐方式。 序号姓名高数语文软件工程1徐东1501501502岳双150150150（5）表单标记通用格式：*Post方式，在浏览器的地址栏中不显示提交的信息，这

4、种方式传输数据没有数据量的限制；Get方法将信息传递到浏览器的地址栏上，最大传输信息量是2KB。不指明，默认是Get方式。用户名：密码： （5）div和span标记这是一个div这是一个span （6）其他常用标记文本框，文本区域，密码框，多选框，单选框和下拉框等。除了文本区域和下拉框，其他的只需要修改type属性即可。2 CSS编程技术CSS（Cascading Style Sheets，层叠样式表）简称样式表。使用CSS的主要原因： HTML对网页格式化功能的不足，比如段落间距，行距等的控制； HTML对字体变化和大小控制不好； HTML对页面格式的动态更新控制不好； HTML排版定位能力

5、差。CSS实质上是一种用来装饰HTML的标记集合。样式规则组成“选择符属性：值”，单一选择符的符合样式声明应该用分号隔开，如“选择符属性1：值1；属性2：值2；属性3：值3” H1font-size:x-large;color:redH2font-size:large;color:blue 用H1显示用H2显示H1、H2是浏览器中已经内置了的显示样式，这里被重定义了。2.1 加载CSS样式的方式使用CSS格式化网页共有三种方式：在head中引用，在body中引用和作为文件引用。(1) 在head中引用该方式只需要在head标记中加上style标记即可。 H1font-size:37px;col

6、or:greenPbackground:yellow 用H1显示用P显示(2) 在body中引用 用H1显示用P显示(3) 作为文件引用样式文件 style.cssH1font-size:37px;color:greenPbackground:yellowHtml文件（用link标记将样式表链接进入该html文件） 用H1显示用P显示2.2 CSS与标记对应的方式匹配HTML标记和CSS样式表标记有三种方式：标记选择符，类选择符和ID选择符。（1）标记选择符任何HTML元素都可以是一个CSS的选择符。如，H1font-size:37px;color:green（2）类选择符在style标记定义

7、一个“ .类名”，然后再HTML标记中使用class=“类名”即可引入该样式。 .littleredcolor:red;font-size:18px.littlegreencolor:green;font-size:18px 红色小字体绿色小字体（3）ID选择符在样式名之前加“#名字”，引用的时候使用“ID=名字” #szgcolor:red ID选择符2.3 定义超链接样式一个超链接有几种不同的状态：未被访问链接（Link），已访问链接（Visited），鼠标移动过（Hover）。可以定义超链接文字的颜色和字体的大小。 A:LINKcolor:red;font-size:9pt;text-d

8、ecoration:noneA:VISITED color:blue;font-size:9pt;text-decoration:none A:HOVER color:green;font-size:9pt;text-decoration:underline 超链接文字3 JavaScript编程技术JavaScript是一种解释性语言，当程序执行的时候浏览器一边解释，一边执行。而编译型语言（C#、Java等），必须经过编译才能执行。网页中引入JavaScript，只需要加上标记，然后再设置一下所有的语言就可以了。document.write(”第一个javascript程序” );3.1 J

9、avaScript变量和数组JavaScript和C语言是同一个语系，许多基本语法一样。JavaScript定义变量的关键字是“var”注意：（1）JavaScript的变量时弱变量，不经过声明就可以使用，不过建议利用var声明；（2）JavaScript语句后面可以加分号，也可以不加。C语系的其他语言都是严格要求加分号的，所以建议加上。 使用var定义的变量，赋值是字符串，就是字符串类型变量，赋值是整数，就是整型变量。 变量命名需要遵守的6个规则。（1） 变量命名必须以一个英文字母或下划线开头；（2） 变量名长度在0-255字符之间；（3） 除了首字符其他字符可以使用任何字符、数字以及下划线

10、，except空格（4） 不可以使用JavaScript运算符作为变量名；（5） 不可以使用JavaScript保留字，如sqrt（开方），parseInt（字符转整型）（6） JavaScript变量名是区分大小写的，如变量s12和S12是不同的变量。声明数组时，使用new和Array关键字。var arrayName = new Array(2);arrayName0=”苹果”;arrayName1=”橘子”;3.2 表达式与运算符和C语言非常类似，加减乘除运算符、逻辑运算符、注释符号等。3.3 控制语句条件语句If else语句var ihour = 13;if(ihour12)docu

11、ment.write(”早上好！” );elsedocument.write(”下午好！” );switch语句var val = ;var i=5;switch(i)case 3: val =三;break;case 4: val =四;break;case 5: val =五;break;default:val=不知道;document.write(下午好！ );循环语句for语句，do while语句，break，continuevar isum=0;for(var i=0;i=100;i+)isum+=i;document.write( isum);3.4 JavaScript函数定义

12、函数基本语法function 函数名称（参数表）语句块；3.5 事件界面事件包括：Click，MouseOut、MouseOver和MouseDown等。3.6对象处理语句this语句function image_click(obj)alert(“图片名称：”+obj.name+”图片地址：”+obj.src);for in语句var arr = new Array(3);arr0 = “Jack”;arr1 = “Simth”;arr2 = “Lucy”;for(i in arr)document.write( “第”+i+”个为：”+arri);3.7 JavaScript内置对象Date

13、对象getDategetDaygetHoursgetMinutesgetMonthgetScondsgetTime毫秒为单位getYearMath对象方法描述abs(x)返回数的绝对值。acos(x)返回数的反余弦值。asin(x)返回数的反正弦值。atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。ceil(x)对数进行上舍入。cos(x)返回数的余弦。exp(x)返回 e 的指数。floor(x)对数进行下舍入。log(x)返回数的自然对数（底为e）。m

14、ax(x,y)返回 x 和 y 中的最高值。min(x,y)返回 x 和 y 中的最低值。pow(x,y)返回 x 的 y 次幂。random()返回 0 1 之间的随机数。round(x)把数四舍五入为最接近的整数。sin(x)返回数的正弦。sqrt(x)返回数的平方根。tan(x)返回角的正切。String对象charAt(idx)：第一个字符位置是0，返回指定位置处的字符。indexOf(chr)：返回指定子字符串的位置，从左到右，找不到返回“-1”lastIndexOf(chr) ：返回指定子字符串的位置，从右到左，找不到返回“-1”toLowerCase()：将字符串中的字符全部转换

15、成小写toUpperCase()：将字符串中的字符全部转换成大写3.8 对象层次及DOM模型对象的层次 当使用浏览器载入一个网页时，浏览器会根据网页的内容产生一些相应的对象提供给JavaScript使用。与JavaScript语言本身并没有太大的关系。 DOM（Document Object Model）是文档对象模型的缩写，文档对象模型提供了文档的定位模型。当读取form表单中的某个元素时，就要用到DOM来定位。document.getElementById(element);document.getElementsByName()（1）window对象window对象的方法。open(ur

16、l,windowName,parameterList)open()方法创建一个新的浏览器窗口，并在新窗口中载如一个指定的URL地址close()关闭一个浏览器窗口alert()弹出一个消息框confirm()弹出一个确认框promt()弹出一个提示框setTimeout(expression,time)定时设置，在一定时间后自动执行expression的代码，使用time设置时间，单位是毫秒clearTimeout(timer)取消利用setTimeout的定时设置setIntervel(expression,time)设定一个时间间隔，可以定时反复自动执行expression描述的代码，使用

17、time设置时间，单位是毫秒setTimeout和setIntervel的区别setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。showTime();function showTime() var today = new Date(); alert(The time is: + today.toString(); setTimeout(showTime(), 5000);setInterval(showTime(), 5000);function showTime() var today = new Date

18、(); alert(The time is: + today.toString();两者的最大区别就是，setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。open方法 window.open(“new.html”,”my”,”toolbar=no,left=150,top200,menubar=no,width150,height=150”);location属性window.location=”页面地址”；window.location=;history对象可以利用history对象实现网页的前进和后退history.go（1）;history.go（-