1.HTML/CSS/JavaScript 先睹为快 2.HTML 3.CSS 4.JavaScript

Download 1.HTML/CSS/JavaScript 先睹为快 2.HTML 3.CSS 4.JavaScript

Post on 01-Jan-2016

27 views

Category:

Documents

10 download

Embed Size (px)

DESCRIPTION

. 1.HTML/CSS/JavaScript 2.HTML 3.CSS 4.JavaScript. 1.1 HTML . css JavaScript html css JavaScript html css JavaScript html - PowerPoint PPT Presentation

TRANSCRIPT

<ul><li><p>1.HTML/CSS/JavaScript</p><p>2.HTML</p><p>3.CSS</p><p>4.JavaScript</p></li><li><p>1.1 HTML</p><p> cssJavaScripthtml cssJavaScripthtml</p><p>cssJavaScripthtml </p><p>HTMLhtmlhtm</p></li><li><p>1.2 CSS</p><p> csshtml h2{ font-size:50} p{font-size:20;font-style:italic} csshtml</p><p>csshtml </p></li><li><p>1.3 JavaScript</p><p> cssJavaScripthtml h2{ font-size:50} p{font-size:20;font-style:italic} alert("JavaScript"); cssJavaScripthtml</p><p>cssJavaScripthtml </p></li><li><p>1.4 HTMLCSSJavaScriptHTMLHTML.</p><p>CSSHTML</p><p>JavaScriptInternetHTML</p><p>HTMLCSSJavaScript.css.js</p></li><li><p>2 HTML1:HTML2:</p><p>3:list4:table5:form</p><p>6:frame7:div</p></li><li><p>2.1.1 HTMLHTML</p><p>Hyper Text Markup Language </p><p>HTMLHTMLHTML*.htm*.html</p><p>HTML:Netscape Navigator ,Microsoft IE,Mazilla FireFox</p></li><li><p>2.1.2 HTML</p><p>.htm .htmlHTML</p><p>HTML FrontpageDreamweaver,</p></li><li><p>2.1.3 HTML </p><p> my first page This is my first homepage! </p></li><li><p>2.1.3 HTML ()HTML</p><p>HTML</p><p>my first homepage </p><p>&lt; title&gt; </p></li><li><p>2.1.3 HTML -head(title) </p><p> 1: HTML </p></li><li><p>2.1.3 HTML -head(meta)2: </p></li><li><p>2.1.3 HTML -(head)meta3</p><p> my first page </p></li><li><p>2.1.3 HTML -bodyHTMLHTML</p><p>1)bgcolorbgcolorHTMLbgcolor="#CCFFCC"2)backgroundbackgroundHTMLgif,jpgbackground=images/bg.gif"3)texttextHTMLtext=#FF6666text</p></li><li><p>2.1.3 HTML -body</p></li><li><p>2.2 HTML 1.2. 3.4.5.6.HTML6.7.8.</p></li><li><p>2.2.1 </p><p>HTML HTML HTML HTML HTML HTML HTML </p></li><li><p>2.2.2 </p><p>1. ... #=RRGGBB 16 2. ... #=3. ... #=1, 2, 3, 4, 5, 6, 7</p></li><li><p>2.2.3.(paragraph) </p><p>HTML</p></li><li><p>2.2.4 </p></li><li><p>2.2.5 #=left, right </p></li><li><p>2.2.6 HTMLHTML </p><p>HTML </p></li><li>2.2.7 href,hrefURL () (Target Window) </li><li><p>2.2.7 http://www.sina.com/sports/index.htmlhttp://127.0.0.1:8080/digitalhome/a.jpg</p></li><li><p>2.2.8 </p><p>srcsrcURLsrcsrcURL</p><p>widthheight% </p><p> #=left,right,top,middle,bottom</p></li><li><p>2.2.8 HTML </p><p>GIFGraphics Interchange Format (.GIF) 256</p><p>JPEGJoint Photographic Experts Group (.JPG) 256</p><p>PNGPortable Network Graphics gifjpeg48bit</p></li><li><p>2.2.8 </p><p>map</p></li><li><p>2.2.9 ... </p><p>(1) direction=##=left, right,up,down(2) behavior=# #=scroll(), slide(), alternate()(3): loop=# #=(infinite) (4): scrollamount=#(5): scrolldelay=#</p></li><li><p>2.3.1 :</p><p> sportsfood drink friends </p><p> typetypetypedisc()circle square</p></li><li><p>2.3.2 :</p><p> sports drink friends</p><p>typetype1AaIiABC</p><p>51start</p></li><li><p>2.4.1 </p><p>..</p></li><li><p>2.4.1 </p></li><li><p>2.4.2 </p><p>width%height%borderbgcolorbackgroundURLalign(left,center,right)</p></li><li><p>2.4.3 </p><p>valign top middle bottom; baseline;alignleft,center,rightcolspanrowspan</p></li><li><p>2.4.4 1valign top middle bottom baseline2align(left,center,right)3height%</p></li><li><p>2.4.5 </p></li><li><p>2.4.5 HTML </p></li><li><p>2.4.6 </p><p> 1000550240150027651240 30002430250012509003400 </p></li><li><p>2.5.1 formHTMLHTML</p><p>HTMLCGIASP</p></li><li><p>2.5.2 </p><p>textpasswordradiocheckboxselecttextareasubmitreset</p></li><li><p>2.5.2 </p></li><li><p>2.5.2 </p></li><li><p>2.5.2 </p></li><li><p>2.5.2 </p></li><li><p>2.5.2 </p></li><li><p>2.5.3 1.:</p><p> ... </p><p> actionASPJSP()methodgetpost GETPOST,</p></li><li><p>2.5.3 2.: ? ** *** ?? </p><p>3.</p></li><li><p>2.5.3 3.: // </p><p>4.: // name</p><p>5.: </p></li><li><p>2.5.3 6.:</p><p>7.:submit </p><p>8. </p></li><li><p>2.5.3 9.: ... </p><p>10. </p></li><li><p>2.5.3 </p></li><li><p>2.6.1 </p></li><li><p>2.6.1 </p></li><li><p>2.6.2 </p><p>framesetframe</p><p>frame HTML </p></li><li><p>2.6.2 framset </p><p>rowscolsrowscolsrowscols</p></li><li><p>2.6.2 frame </p><p>srcURLframebordernamenoresizescrollingyes, no, auto</p></li><li><p>2.6.2 frame</p><p>left.html:</p><p> , target=_self target=name target=_blank target=_parent</p></li><li><p>2.7.1 HTML</p><p>word</p></li><li><p>2.7.2 </p></li><li><p>2.7.3 // .. //</p></li><li><p>3.1 CSSCSSCascading Style Sheets().,css</p><p>CSS HTMLCSS</p><p>CSS,,,. CSShtml.css</p></li><li><p>3.1 CSS</p><p>CSS1HTML234</p><p>CSS12HTML3</p></li><li><p>3.2 CSScssTRP </p><p>p{font-style:italic; font-weight:bold; color:limegreen} .water { color:blue }RuleSelector {property:value;property: value; ... }</p></li><li><p>3.3 1()1.1 HTML--HTML1.2 HTMLCLASS1.3 IDHTMLID</p><p>2()</p></li><li><p>3.3 1.1HTML</p><p>h1, h2, h3, h4, h5, h6 { color: green } P{font-style:italic; font-weight:bold; color:red} </p><p>HTMLHTML</p></li><li><p>3.3 1.2</p><p>.water { color:blue; text-align:right}p.danger { color:red; text-align:center}</p><p> CSS</p></li><li><p>3.3 1.3ID</p><p>ID#control {color:red}</p></li><li><p>3.3 HTML</p><p>HTMLCSS HTMLIDIDID</p><p>IDclass IDJavaScriptid(div)</p></li><li><p>3.3 2</p><p>a{color:red;font-size:20}table a{color:green;font-size:25}table a:hover{color:blue}</p></li><li><p>3.3 2</p><p> BODY{color:blue;background:lavender;font-family:Arial;} UL {color:red } ul a{color:green; font-size:15} </p></li><li><p>3.4 HTML1Style</p><p>2Style</p><p>3Link</p></li><li><p>3.4 HTML1Style</p><p>STYLESTYLE </p><p> H1{color:maroon;} P{color:hotpink; font-family:Arial;}</p></li><li><p>3.4 HTML2Style</p><p>styleHTMLstylestyleCSS</p></li><li><p>3.4 HTML3Link</p></li><li><p>3.5 </p></li><li><p>3.5 </p></li><li><p>JavaScriptJavaScriptJavaScriptJavaScriptJavaScript</p></li><li><p>4.1.1 JavaScript</p><p>HTML,JavaScript</p></li><li><p>4.1.1 JavaScriptHTML,JavaScript!</p><p>1HMTLJavaScript test.js document.write("JavaScript")</p></li><li><p>4.1.1 JavaScript</p><p>function checkPw() {fm = document.form1;if (fm.pw2.value != fm.pw1.value) { alert(""); document.form1.pw2.select();}else alert(""+fm.name.value);}</p></li><li><p>4.1.1 JavaScript</p><p>document.bgColor="green";document.fgColor="white"function mOver(object,msg){ status = msg; object.color = "red"; object.face = ""; }</p><p>function mOut(object){ status = ''; object.color = "blue"; object.face = ""; }</p><p>Javapro</p></li><li><p>4.1.2 JavaScriptJavaScriptNetscapeNavigator </p><p>JavaScript(object-based)(Event Driven)</p><p>HTMLJava JavaWebWeb,</p><p>HTMLHTMLJavaHTML </p></li><li><p>4.1.3 JavaScript 1 ASCIICC++Java</p><p>web</p></li><li><p>4.1.3 JavaScript 2 </p></li><li><p>4.1.3 JavaScript 3 Java, Java</p><p> var a,b,c; a=123; b=abc; a=b; </p></li><li><p>4.1.3 JavaScript 4 </p><p>JavaScript</p><p>5</p><p>JavaScriptJavaScript JavaScriptJavaScript </p></li><li><p>4.1.3 JavaScript 6</p><p>JavaScriptWeb</p><p>(Event)</p></li><li><p>4.1.3 JavaScript JavaScript</p><p>JavaScriptJavaScript JavaScript</p><p>JavaScriptWebJavaScriptJavaScript WebJavaScript----Web</p></li><li><p>4.1.4 JavaScript</p><p>Web</p></li><li><p>4.1.5 JScript :Microsoft Netscape JavaScriptJavaScriptJScript </p><p>ECMAscript:JavaScriptJavaScript</p><p>VBScriptMicrosoftVBJavaScriptIEVBScript </p><p>JavaScriptJavaScriptJavaScriptwebJavaScriptJavaScriptJavaScript</p></li><li><p>4.1.6 JavaScript Java</p><p>JavaSUNInternet JavaOak</p><p>JavaScriptNetscapeNetscape NavigatorWebLive Script</p></li><li><p>4.1.6 JavaScript JavaJavaScriptObject BasedEvent Driver</p><p>JavaJava </p></li><li><p>4.1.6 JavaScript JavaJavaScriptJava</p><p>JavaScriptJavaScriptWeb</p><p>Java</p></li><li><p>4.1.6 JavaScript Java</p><p>Java: int x=1234; String s=abcd;</p><p>JavaScriptvar var a,b,c; a=123; b=abc; a=b;</p></li><li><p>4.1.6 JavaScript JavaJavaHTMLHTMLHTMLJava...</p><p>JavaScriptHTMLHTMLHTMLJavaScript...</p></li><li>4.1.7 JavaScriptHTMLJavaScriptJavaScript </li><li><p>4.1.7 JavaScriptHTML JavaScriptJavaScriptHTMLJavaScriptHTMLHTMLsrcJavaScript</p></li><li><p>4.1.8 JavaScript1 JavaScriptJavaScript</p><p>2 JavaScriptJavaScript</p></li><li><p>4.2.1 853.1415926</p><p>0,1JavaScriptJavaScript </p><p>truefalse</p><p>null""0</p><p>undefined</p></li><li><p>4.2.1 null000nullundefinedJavaScriptundefinedJavaScript</p></li><li><p>4.2.2 JavaScriptJavaScript1JavaScript var up,down,left,right; // x=3;</p><p>2</p></li><li><p>4.2.2 2.6.4.1 2.6.4.2 2.6.4.3 2.6.4.4 undefined var x; //undefined alert(i) ; // d=123; //</p></li><li><p>4.2.3 1 </p><p>2 3.1415926-3.1E121e122E-12</p><p>3 </p></li><li><p>4.2.3 4 truefalse</p><p>5 33 apple=["fruit","China","vitamin"] God=["Belial",,"Angel] </p></li><li><p>4.2.4 </p></li><li><p>4.2.4 </p><p>var x = 11; var y = 5;with (document) { write("x = 11, y = 5"); write("x + y ", x + y); write("x - y ", x - y); write("x * y ", x * y); write("x / y ", x / y); write("x % y ", x % y); write("++ x ", ++ x); write("-- y ", -- y);}</p></li><li><p>4.2.4 </p><p>var x = 5; //x 5var y = '5'; //y 5var z = 6; //x 6with (document) { write("x = 5, y = '5', z = 6"); write("x == y ", x == y); write("x === y ", x === y); write("x != y ", x != y); write("x !== y ", x !== y); write("x </p></li><li><p>4.2.4 </p><p>var t = true;var f = false;with(document) {write("true &amp;&amp; true ", t &amp;&amp; t);write("true &amp;&amp; false ", t &amp;&amp; f);write("false &amp;&amp; true ", f &amp;&amp; t);write("false &amp;&amp; false ", f &amp;&amp; f);write("true &amp;&amp; (1==1) ", t &amp;&amp; (1==1));write("false &amp;&amp; 'A' ", f &amp;&amp; 'A');write("'A' &amp;&amp; false ", 'A' &amp;&amp; f);write("true &amp;&amp; 'A' ", t &amp;&amp; 'A');write("'A' &amp;&amp; true ", 'A' &amp;&amp; t);write("'A' &amp;&amp; 'B' ", 'A' &amp;&amp; 'B');}</p></li><li><p>4.2.5 </p><p>ifSwitch </p><p>whiledo-whilefor</p><p>breakcontinue</p></li><li><p>4.2.6 functionJavaScript</p><p>function (1,2){</p><p>return [];}</p><p>JavaScriptarguments .LengthJavaScript(function)</p></li><li><p>4.2.6 function</p><p>function checkPassword(testObject) {if (testObject.value.length &lt; 4) { alert(""); testObject.focus(); testObject.select();}}</p></li><li><p>4.2.6 function</p><p>function check(){if(document.forms[0].elements[0].value.length</p></li><li><p>4.2.6 function</p><p>eval()parseInt()parseFloat()</p><p>JavaScriptNaNNaNNot a NumberJavaScriptisNaN()true </p></li><li><p>4.2.6 function</p><p>with (document) { write("eval('12.34*10') ", eval("12.34*10")); write("eval('12*(3+4)') ", eval("12*(3+4)")); write(" eval('12.34abc1.2')", eval("12.34abc1.2")); write(" "); write("parseInt('0x11') ", parseInt("0x11")); write("parseInt('1234') ",parseInt("1234")); write("parseInt('12abc') ", parseInt("12abc")); write("parseInt('12.34*10') ", parseInt("12.34*10")); write("parseInt('abc123') ", parseInt("abc123")); write(" "); write("parseFloat('12.34*1.2')", parseFloat("12.34*1.2")); write("parseFloat('12.34e10')", parseFloat("12.34e10")); write("parseFloat('12abc')", parseFloat("12abc")); write("parseFloat('2.1e4abc') ", parseFloat("2.1e4abc")); write("parseFloat('xyz123')", parseFloat("xyz"));}</p></li><li><p>4.2.6 function</p><p>function add(){var sc1=document.fm.chj1.value; var sc2=document.fm.chj2.value;if(sc1=="") sc1=0; if(sc2=="") sc2=0;if(isNaN(sc1)) sc1=0; if(isNaN(sc2)) sc2=0;document.fm.chj3.value=parseInt(sc1)+parseInt(sc2);}</p></li><li><p>4.3.1 JavaScript</p><p>onClickonDbClickonMouseOveronMouseOutonMouseDownonMouseUp</p><p>onKeyDownonKeyUponKeyPress, onKeyDown,onKeyPress</p></li><li><p>4.3.1 JavaScriptHTMLonLoadonUnload onChangeonSelect onFocusonBluronSubmitonReset</p></li><li><p>4.3.2 onloadonunload</p><p>function loadform(){alert(".....");}function unloadform(){confirm("");}</p></li><li><p>4.3.3 onchangeonselect</p><p> onchangeonselect</p></li><li><p>4.3.4 onBluronFocusonFous,, onFous</p><p>onBlur,,onBlur</p></li><li><p>4.3.5 </p><p>function check(){var nameDiv = document.getElementById("nameerror");var pwdDiv = document.getElementById("pwderror");var name=document.register.name.value;var pwd=document.register.pwd.value;if(name!="lkl")nameDiv.innerHTML = "";else if (pwd != "lkl"){nameDiv.innerHTML = "";pwdDiv.innerHTML = "";}else{ document.register.action="http://www.softedu.org"; document.register.submit();}}</p></li><li><p>4.3.5 </p></li><li><p>4.4.1 JavaScript(window) (navigator) (document)(location)URL(history) :</p><p>JavaScriptDateStringMath</p></li><li><p>4.4.2 DOMDOMDOMJavaScriptNetScapeDOMIEDOM</p></li><li><p>4.4.3 windowwindowDOM</p><p>windowwindow</p><p>status selfopener closedhistory navigatordocument location</p></li><li><p>4.4.3 window</p><p>open()</p><p>close()</p><p>alert()OK</p><p>confirm()OKCancel</p><p>prompt()prompt</p></li><li><p>4.4.3 windowfirst.html</p><p>window.open("second.html","sec","height=150");document.write(window.closed);</p></li><li><p>4.4.3 windowsecond.html</p><p>function changeColor(color){window.opener.document.bgColor=color;}</p><p>xy</p></li><li><p>4.4.4 document(document)</p><p>fgColorbgColorurl</p><p>write() writeln() document.getElementById()document.getElementsByName()document.getElementsByTagName()</p></li><li><p>4.4.4 document </p><p>document.write(");var test=window.prompt(":");document.write(test+"JavaScript");</p><p> :window.prompt(", ); :document.write() document.writeln() window.alert()</p></li><li><p>4.4.5 formJavaScript ...............</p><p>1: document.fm1 document.fm2 document.fm3 2:forms[] forms[] 0 document.forms[0] document.forms[1] document.forms[2]</p></li><li><p>4.4.5 formformnametargetactionmethodgetpost</p><p>formsubmit( ) reset( ) </p></li><li><p>4.4.5 form</p><p> function submits(){ document.firstForm.action="show.html"; document.firstForm.submit();}</p></li><li><p>4.4.5 form</p><p>elements[]</p><p>myformpwdtextdocument.myform.elements[3].value document.myform.pwd.value</p></li><li><p>4.4.5 form</p><p>function checkPw() {fm = document.form1;if (fm.pw2.value != fm.pw1.value) { alert(""); }else alert(""+fm.name.value);}</p></li><li><p>4.4.6 locationnavigator(navigator) (location)URL</p><p>document.write(":"+location.hostname);document.write(":"+location.port);document.write("+:"+location.host);document.write("URL:"+location.href);document.write("");document.write(":"+navigator.appName);document.write(":"+navigator.appVersion);document.write(":"+navigator.platform);document.write("java:"+navigator.javaEnabled());</p></li><li><p>4.4.7 for...in</p><p> for in { ..}</p></li><li><p>4.4.7 </p><p>arr1=new Array("java","html/css/JavaScript","jsp/servlet","struts/hibernate/spring");//arr1=["java","html/css/JavaScript","jsp/servlet","struts/hibernate/spring"];</p><p>for(i=0;i</p></li><li><p>4.4.7 with</p><p> with object{ ...} withobject</p></li><li><p>4.4.7 </p><p>var x = 5; //x 5var y = '5'; //y 5var z = 6; //x 6with (document) { write("x = 5, y = '5', z = 6"); write("x == y ", x == y); write("x === y ", x === y); write("x != y ", x != y); write("x !== y ", x !== y); write("x </p></li><li><p>4.4.7 this</p><p>thisJavaScriptJavaScriptthis</p></li><li><p>4.4.7 </p></li></ul>