第02章 网页设计基础

第2章网页设计基础主要内容2.1HTML2.2CSS2.3JScriptHTMLHTML!--告知浏览器下面的内容为HTML文档--HEAD!--告知浏览器下面的内容为HTML文档的头部--TITLE/TITLE!—定义HTML文档的显示标题--/HEAD!--告知浏览器HTML文档头部定义结束--BODY!--告知浏览器下面的内容为HTML文档的身体部分--/BODY!--告知浏览器HTML文档的身体部分定义结束--/HTML!--告知浏览器HTML文档定义结束--文本格式标记brpfontcenterHTMLBODYFONTFACE=隶书SIZE=5COLOR=Blue本书的特色是以案例为主brcenter全书有若干个完整的案例/center/FONT/BODY/HTML插入图像标记HTMLBODYIMGSRC=myimage.jpgWIDTH=200HEIGHT=100BORDER=10/BODY/HTML表格标记HTMLBODYTABLEBORDER=1TRTDROWSPAN=2跨两行/TDTDCOLSPAN=2跨两列/TD/TRTRTD1000/TDTD1000/TD/TRTRTD3000/TDTD2000/TDTD4000/TD/TR/TABLE/BODY/HTML超级链接HTMLBODYAhref=2-1.htm上一个页面/ABRAhref==”_blank”江苏大学/A/BODY/HTML表单标记2HTMLBODYFORMMETHOD=PostACTION=do_submit.htm用户名：INPUTTYPE=TextNAME=UserIDBR密码：INPUTTYPE=PasswordNAME=UserPWDBR性别：INPUTTYPE=RADIONAME=UserXBVALUE=男CHECKED男INPUTTYPE=RADIONAME=UserXBVALUE=女女BR爱好：INPUTTYPE=CHECKBOXNAME=UserAH1VALUE=篮球篮球INPUTTYPE=CHECKBOXNAME=UserAH2VALUE=足球篮球BR职业：SELECTNAME=UserZYOPTIONVALUE=教师教师/OPTIONOPTIONVALUE=学生学生/OPTION/SELECTBR意见：TEXTAREANAME=UserYJCOLS=45ROWS=5/TEXTAREABRINPUTTYPE=SubmitVALUE=提交NAME=B1INPUTTYPE=ResetVALUE=重写NAME=B2/FORM/BODY/HTML框架标记FRAMESETCOLS=25%,*FRAMEBORDER=0FRAMENAME=LEFTSRC=2-11.HTMNORESIZEFRAMENAME=MAINSRC=2-12.HTM/FRAMESET主要内容2.1HTML2.2CSS2.3JScriptCSS概述CSS（CascadingStyleSheets）中文翻译为层叠样式表单，简称样式单，是近几年才发展起来的新技术，它可以将有关文档样式与文档内容分开，甚至可作为外部文件供HTML调用，简化页面的排版，并可在多个页面中进行共享使用，保持多个页面样式的协调统一。CSS样式规则组成为：选择符{属性:值}，单一选择符的复合样式声明应该用分号隔开，如：选择符{属性1:值1;属性2:值2}。实例HTMLHEADSTYLETYPE=TEXT/CSSH1{FONT-SIZE:36px;COLOR:RED}H2{FONT-SIZE:32px;COLOR:BLUE}/STYLE/HEADBODYH1中国，我的祖国！H1显示的/H1H2中国，我的祖国！H2显示的/H2/BODY/HTML定义CSS的方式标记重定义类定义.LITTLEGREEN{COLOR:GREEN;FONT-SIZE:18px}标记符CLASS=”LITTLEGREEN”内容/标记符ID标识定义#IDN{COLOR:RED}标记符ID=”IDN”内容/标记符定义超接链接A:LINK{COLOR:#000000;FONT-SIZE:12px;TEXT-DECORATION:NONE}A:HOVER{COLOR:#000000;FONT-SIZE:12px;TEXT-DECORATION:NONE}A:ACTIVE{COLOR:#000000;FONT-SIZE:12px;TEXT-DECORATION:NONE}A:VISITED{COLOR:#000000;FONT-SIZE:12px;TEXT-DECORATION:NONE}CSS样式的使用HEAD内使用HTMLHEADSTYLETYPE=TEXT/CSSH1{COLOR:GREEN;FONT-SIZE:37PX;}P{BACKGROUND:YELLOW;}/STYLE/HEADBODYH1北京大学，清华大学/H1P南京大学，复旦大学/P/BODY/HTMLCSS样式的使用文件外使用样式表文件mystyle.cssH1{COLOR:GREEN;FONT-SIZE:37PX;}P{BACKGROUND:YELLOW;}HTMLHEADLINKREL=STYLESHEETHREF=mystyle.cssTYPE=TEXT/CSS/HEADBODYH1北京大学，清华大学/H1P南京大学，复旦大学/P/BODY/HTML主要内容2.1HTML2.2CSS2.3JScriptJScript简介JavaScript（JScript）是一种Script脚本语言，所谓的脚本语言就是可以和HTML语言混合使用的语言。VBScript也是Script语言中的一种，但是VBScript只有微软的浏览器InternetExplore（IE）才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是JScript的一个优点。从本质上说JScript和Java没有什么联系，但是同时作为语言，可以从三个角度来区别：（1）JScript是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执行。（2）代码格式不一样，Java代码经过编译后成为二进制文件，而JScript是纯文本的文件。（3）在HTML中的嵌入方式不一样。Jscript代码是通过script标记符嵌入，而Java代码是通过%%符号嵌入，或以小应用程序方式嵌入。实例HTMLBODYSCRIPTLANGUAGE=JScriptdocument.write(这是以JavaScript输出的!);/SCRIPT/BODY/HTMLJScript函数SCRIPTLANGUAGE=JScriptfunctiongetSqrt(iNum){variTemp=iNum*iNum;document.write(iTemp);}/SCRIPTSCRIPTLANGUAGE=JScriptgetSqrt(8);/SCRIPTSCRIPTLANGUAGE=JScriptfunctionf(y){varx=y*y;returnx;}/SCRIPTSCRIPTLANGUAGE=JScriptfor(x=0;x10;x++){y=f(x);document.write(y);document.write(br);}/SCRIPTJScript事件与事件过程forminputtype=Buttonvalue=单击onClick=alert('单击了鼠标')/formselectname=selonChange=func()optionselectedvalue=北京北京/optionoptionvalue=上海上海/optionoptionvalue=天津天津/option/selectscriptlanguage=JScriptfunctionfunc(){alert(你选择了+sel.value);}/scriptJScript事件与事件过程事件说明事件过程blur对象失去当前输入焦点时发生onBlurchange对象内容被修改并失去焦点时发生onChangeclick鼠标单击时发生onClickdblclick鼠标双击时发生onDblClickerror当装入窗口、框架、图像发生错误时发生onErrorfocus对象获得焦点时发生onFocusmouseMove鼠标在对象上移动时发生onMouseMovemouseOver鼠标移入对象上方时发生onMouseOvermove移动窗口或框架时发生onMovereset重置表单时发生onResetresize窗口、框架改变尺寸时发生onResizeselect对象文本被选中时发生onSelectsubmit提交表单时发生onSubmitload加载窗口、框架时发生onLoadunload卸载窗口、框架时发生onUnload对象层次及DOM模型对象引用HTMLHEADSCRIPTLANGUAGE=JScriptfunctiondo_Copy(){varstr=frm1.txtBox1.value;frm2.txtBox2.value=str;}/SCRIPT/HEADBODYFORMNAME=frm1INPUTTYPE=TEXTNAME=txtBox1INPUTTYPE=BUTTONVALUE=复制ONCLICK=do_Copy()/FORMFORMNAME=frm2INPUTTYPE=TEXTNAME=txtBox2/FORM/BODY/HTMLWindow对象HTMLHEADSCRIPTLANGUAGE=JScriptfunctionnew_win(){window.open(“2-1.htm,my,toolbar=no,left=150,top=200,menubar=no,width=150,height=150);}/SCRIPT/HEADBODYonload=new_win()/BODY/HTMLLocation对象HTMLHEADSCRIPTLANGUAGE=JavaScriptfunctiontest_location(){window.location=“2-1.htm;}/SCRIPT/HEADBODYFORMNAME=frmINPUTTYPE=BUTTONVALUE=超级链接ONCLICK=test_location()/FORM/BODY/HTML