WEBUI中HTML基本标签,表格表单,对象,浏览器时间窗口传真等基础知识精解笔记.doc

HTML(Hyper Text Markup Language):超文本标记语言，它是可以直接在浏览器上执行的语言。它的标签对大小写不敏感，基本上它的标签是成对儿出现的基本结构：用什么工具来编写html:记事本、editplus、Dreamweaver、MyEclipseHTML文件的扩展名：.html .htmHead: 可以写javascript代码、CSS样式等页面属性相关的内容Title:网页的标题Body:页面显示的内容都是写在body中的。Body的属性：bgcolor:背景色text:文字颜色background:背景标题标签：号码越大，字体越小.align属性可以确定标题在页面中的位置 lefth居左 center居中 right居右换行横线段落标签 加粗下划线斜体上标下标删除线通过size、color、face可以设置文字的大小、颜色、字体该标签中的内容都是居中的超链接href:链接地址target：_self在本窗口中打开（默认的） _blank在新窗口中打开title:当鼠标悬停在链接上面的时候提示的文字name:链接的名字，方便位置查找图片标签src=”图片的位置”title: 当鼠标悬停在链接上面的时候提示的文字width:宽height:高有序列表：Type:默认是数字 还可以写成a A i IStart:开始位置无序列表：Type:默认是disc 也可以写成circle square自定义列表：服务器：应用程序的代码编写完成后，要打包，然后将打好的包部署到服务器上，开启服务器，才能把软件运行起来BEA：WebLogic, JBossIBM:WebsphereApache: apache tomcatLocalhost表示本机地址，也可以使用127.0.0.1端口号：用来唯一的标识在一台计算机上的应用其实它就是页面中的一片区域，可以帮助我们来完成样式的设置可以设置一段内容的样式HTML注释 HTML用来表示表格表示行表示列border:边框width:宽align:位置bgcolor:背景色cellspaceing:单元格之间的距离cellpadding:文字和单元格之间的距离 colspan合并列rowspan合并行表单表单是用来收集信息action：表单提交的路径method:get/post表单提交的形式 标签有type属性，该属性值的不同所展示的效果也不同Text:文本框 value表示文本框中显示的内容 readonly表示只读，值可以是readonly也可以是true disabled表示此文本框不可用，值可以是disabled也可以是trueSize表示文本框的长度 maxlength表示方框对字符的限制数Button:按钮 value表示按钮上显示的文字Password:密码Radio:单选钮 name要给一个统一的值来表示一组单选钮 checked是否被选中，值可以是truecheckbox:复选框, checked属性同radiohidden:隐藏域submit：提交按钮reset:重置按钮image:图片下拉列表Select下有属性multiple可以展开下拉列表项Select下的第一对表示一个下拉项Selected属性表示该项是否被选中 南通 苏州 南京 文本域求职信息必须真实框架在里面可以写也可以嵌套Noresize：边框是否可以移动 top.html 欢迎访问本页面 left.html 链接到页面 链接到页面 在页面中的一片区域嵌入另一个页面src:嵌入页面的地址CSS:（Cascading Style Sheet）层叠样式表作用：可以使表现与结构分离CSS代码有三种形式嵌入到页面：内联样式：嵌入样式：选择器 样式。a:link font-size: 1cm;color: red;text-decoration: none;a:hover font-size: 2cm;color: green;font-weight: bolder;text-decoration: none;外部样式：选择器：标签选择器：标签名 属性：值;属性：值;。Id选择器：#id 属性：值;属性：值;。CSS样式 CSS样式类选择器：.类名 属性：值;属性：值;。关联选择器：外层标签 内层标签属性：值;属性：值;。组合选择器：标签1，标签2，标签n 属性：值;属性：值;。 Id选择器：#p1 Color:red; font-family: 隶书; font-weight: bold; font-size: 2cm; 类名选择器： .p2 color:gray; font-family: 华文彩云; font-weight: bold; font-size: 1cm; 标签选择器： a font color: blue; font-size: 1cm; text-decoration: none; 组合选择器： li, dt, dd color: red; font-weight: bolder; li list-style: none; JavaScript:它跟java一点关系都没有基于对象的语言-面向对象的思想还不够完善脚本语言-在浏览器上执行在客户端浏览器上执行它严格区分大小写作用：增加与用户的交互增加特效表单验证在页面中写入javascript的方式：直接嵌入javaScript代码：Javascript代码; document.write(第一个javascript页面); 引入外部的.js文件：Javascript代码放在哪合适：如果是直接执行的代码，放在任何地方都可以如果是函数，建议全部写在中数据类型：数值型：123 1.232字符型（在javascript中不区分字符和字符串）asdf “sdfsdfsdf”小明说：“今天天气不错”布尔型：true false变量的声明（javascript中有数据类型但没有变量类型）在声明变量时都使用var关键字来声明，其实var关键字也可以不写，建议还是写Var I = 10;Var str = “asd”;Var f = 1.23;语句：IfForWhileDowhileSwitch函数：javascript中的函数用function关键字来修饰，函数本身是可以用返回值的，但是在声明的时候不需要写返回值类型，如果有返回值就写return，否则就不写。函数也可以有参数，写参数的时候只写形参的名字就可以了Function 函数名（参数1，参数2.。） var i = fun3(1, 2);document.write();function fun1() for(var i=0;i10;i+) document.write(i + );function fun2(a, b) document.write(a + b + );function fun3(a, b) return a + b;三大提示框：alert(“提示内容”):confirm(“提示内容”)confirm提示框是不返回值的，当点击确定按钮时返回true,当点击取消按钮时返回falseprompt(“提示内容”)prompt(“提示内容1”，”提示内容2”);prompt的返回值是输入的内容function fun1() alert(这是一个提示窗口);function fun2() if(confirm(您确定删除吗？) document.write(确定);else document.write(取消);function fun3() var a = prompt(请输入内容,请按指定格式输入);alert(a); 如何获得标签中的属性的值，document.表单name.标签name.属性Javascript中的注释和java一样function calculate() var baseprice = document.myform.baseprice.value;var num = document.myform.num.value;var cost = document.myform.cost.value;if(num=) alert(请输入数量);else document.myform.cost.value = baseprice * num;/此语法错误 cost = baseprice * num;作业：计算器：重置计算下拉列表 =parseFloat, parseInt将字符串转换成小数或整数isNaN()判断是否不是一个数字 is not a number?Javascript有三种对象：浏览器对象，脚本对象，标签对象数组对象：声明： var 数组名 = new Array(长度);数组有length属性来标识数组的长度var a = new Array(3);a0 = Jim;a1 = Tom;a2 = Cat;for(var i=0;ia.length;i+) document.write(ai + );字符串对象：var str = “helloWorld”;var str = new String(“Helloworld”);字符串对象的一些函数：indexOf()和java的用法一样substr()当有一个参数时和java用法一样，当有两个参数时，第一个参数代表起始位置，第二个参数代表字符串截取长度split()和java一样var str = HelloWorld;/document.write(str.indexOf(z);和java中的indexOf一样，没有值时返回-1document.write(str.substr(2,4);var s = 12,dfg,43,12,gfd,2q,34;var a = s.split(,);for(var i=0;ia.length;i+) document.write(ai + );输出：llow 12dfg4312gfd2q34日期对象：格式：var 变量名 = new Date();var date = new Date();var hour = date.getHours();if(hour12) document.write(上午好！);else if(hour18) document.write(下午好！);else document.write(晚上好！); document.write(当前日期为： + date.getFullYear() + 年 + (date.getMonth() + 1) + 月 + date.getDate() + 日);document.write(当前时间为： + hour + 时 + date.getMinutes() + 分 + date.getSeconds() + 秒);getYear()返回年份数getFullYear()返回年份数getMonth()返回月份数（0-11）getDate()返回日期数（1-31）getDay()返回星期数（0-6）getHours()返回时数（0-23）getMinutes()返回分数（0-59）getSeconds()返回秒数（0-59）getMilliseconds()返回毫秒数（0-999）getTime()返回对应日期基线的毫秒Date.parse(日期字串)返回对应日期基线的毫秒setTime(时间值)指定一日期对象的值toGMTString()以GMT格式表示日期对象toUTCString()以GMT格式表示日期对象定时器：Var 变量名 = setTimeout(“定时内容”, 毫秒数);停止定时器：clearTimeout(定时器名); function fun() var date = new Date(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); var apm = AM; if(hour=12) apm = PM; if(hour12) hour = hour - 12; if(hour10) hour = 0 + hour; if(minute10) minute = 0 + minute; if(second10) second = 0 + second; document.myform.t.value = hour + : + minute + : + second + + apm; var timeout = setTimeout(fun(), 1000); /*定时器停止 if(minute=04) clearTimeout(timeout); */ fun(); function fun1() var img = document.getElementById(img);img.src = ./img/dog2.jpg;function fun2() var img = document.getElementById(img);img.src = ./img/dog1.jpg; 浏览器对象：WindowDocumentLocationHistoryWindow是javascript中所有对象的根对象，默认在使用的时候可以不直接写出，例如经常使用的alert()Window.open窗口格式：Window.open(“url”,”窗口的名字（可以不写）”,”窗口属性的设置”);window.open(adv.html,width=800,height=150)page.html 弹出窗口的文件名； newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； onload事件写在body中function fun() window.open(adv.html,width=800,height=150) document.bgColor设置背景色 function fun(color) document.bgColor = color; 红色| 黄色| 蓝色 location对象，经常使用location.href来做页面的跳转function fun() var url = document.myform.se.value;location.href = url; -请选择- 第一个页面 第二个页面 history.back()后退（等同于history.go(-1)）history.forward()前进(等同于history.go(1)后退另一个后退function del() var se = document.getElementById(se);se.remove(se.selectedIndex);function add() var se = document.getElementById(se);var o = new Option();o.text = 新水果;se.add(o); 苹果 香蕉 桔子 设置标签样式中的display，可以将标签设置成隐藏和显示，当值为none的时候是隐藏，当值为inline的时候是显示function fun1() var ta = document.getElementById(ta); ta.style.display = none