1. HTML緇撴瀯
絳旓細<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
聽聽聽 <!-- 1) 鐢蟲槑榪欎釜欏甸潰鐨凥MTL鐗堟湰涓?.01;
聽聽聽聽聽聽聽聽 2) 鈥淓N鈥濇寚鏄嶥TD涓璦鏄嫳璇?
聽聽聽 -->
聽聽聽 <html>
聽聽聽 <head>
聽聽聽 <!--head鍏冪礌鍖呮嫭褰撳墠欏甸潰涓俊鎭紝渚嬪鏍囬銆佺敤浜庢悳绱㈠紩鎿庝腑鐨勫叧閿瓧浠ュ強鍏跺畠涓浜涗笉浼氳璁や負鏄〉闈㈠唴瀹圭殑鏁版嵁-->
聽聽聽聽聽聽 <meta HTTP-EQUIV="Content-Type" CONTENT="text/html">
聽聽聽聽聽聽 <meta name="author" content="John">
聽聽聽聽聽聽 <meta name="keywords" content="web development">
聽聽聽聽聽聽 <!--鍏冩暟鎹紝琚璁″府鍔╃敤浜庢悳绱㈠紩鎿庢绱㈤〉闈?->
聽聽聽聽聽聽 <title>HelloWorld Test</title>
聽聽聽聽聽聽 <!--欏甸潰鏍囬錛屼細鏄劇ず鍦ㄦ祻瑙堝櫒鏍囬鏍忓唴-->
聽聽聽 </head>
聽聽聽 <body>
聽聽聽 Hello World!
聽聽聽 </body>
聽聽聽 </html>
聽聽聽 鏁翠釜欏甸潰鍒嗘垚涓夐儴鍒嗭細
聽聽聽 1) 涓琛屽寘鎷琀TML鐗堟湰淇℃伅鐨勫唴瀹?
聽聽聽 2) 鎶ュご澹版槑鍖哄煙;
聽聽聽 3) 欏甸潰涓昏閮ㄥ垎錛屽寘鎷〉闈㈢殑瀹為檯鍐呭銆?/p>
2. 鍩烘湰鐨凥TML鏍囪
絳旓細1) Headings(鏍囬): <h1>This is a heading</h1>;
聽聽聽 2) Paragraphs(孌佃惤): <p> This is a paragraph</p>;
聽聽聽 3) Line Breaks(鎹㈣): This <br> is a para <br> graph with line breaks;
聽聽聽 4) Comments in HTML(娉ㄩ噴): <!-- This is a comment -->;
聽
3. HTML 鏂囨湰鏍煎紡
絳旓細1) <b>: 綺椾綋;
聽聽聽 2) <big>: 澶у彿;
聽聽聽 3) <em>: 寮鴻皟;
聽聽聽 4) <i>: 鏂滀綋;
聽聽聽 5) <small>: 灝忓彿;
聽聽聽 6) <strong>: 鍔犲己;
4. HTML 鍒楄〃
絳旓細1) 鏃犲簭鍒楄〃(Unordered Lists)
聽聽聽聽聽聽 <ul><li>Coffee</li><li>Milk</li></ul>
聽聽聽 2) 鏈夊簭鍒楄〃(Ordered Lists)
聽聽聽聽聽聽 <ol><li>Coffee</li><li>Milk</li></ol>
聽聽聽 3) 鑷畾涔夊垪琛?Definition Lists)
聽聽聽聽聽聽 <dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>
5. HTML 琛ㄦ牸
絳旓細1) 琛ㄦ牸
聽聽聽 <table border="1">
聽聽聽聽聽聽 <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
聽聽聽聽聽聽 <tr><td>row 2, cell 1</td><td> </td></tr>
聽聽聽 </table>
聽聽聽 2) 琛ㄥご
聽聽聽 <table border="1">
聽聽聽聽聽聽 <tr><th>HEading</th><th>Another Heading</th></tr>
聽聽聽聽聽聽 <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
聽聽聽聽聽聽 <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
聽聽聽 </table>
6. HTML 妗嗘灦
絳旓細1) <frameset>: 瀹氫箟妗嗘灦闆?
聽聽聽 2) <frame>:瀹氫箟瀛愮獥浣?涓涓鏋?;
聽聽聽 3) <noframes>: 瀹氫箟涓涓潪妗嗘灦鍖哄煙;
聽聽聽 4) <iframe>: 瀹氫箟涓涓唴宓屽瓙紿椾綋;
聽聽聽 5) 紺轟緥錛?br />聽聽聽聽聽聽 <frameset cols="25%, 75%">
聽聽聽聽聽聽 <!-- <frameset cols="100, *"> -->
聽聽聽聽聽聽 <!-- <frameset cols="100, 300"> -->
聽聽聽聽聽聽聽聽聽 <frame src = "frame_a.htm">
聽聽聽聽聽聽聽聽聽 <frame src = "frame_b.htm">
聽聽聽聽聽聽 </frameset>
7. HTML 琛ㄥ崟鍜岃緭鍏?br />絳旓細1) 琛ㄥ崟鏍煎紡: <form action="..." method = "...">...</form>
聽聽聽聽聽聽 a. action: 琛ㄥ崟鐨勫鐞嗛〉闈紝渚嬪錛歛ction="Hello.jsp"
聽聽聽聽聽聽 b. method: Get,Post.
聽聽聽 2) 杈撳叆綾誨瀷:
聽聽聽聽聽聽 a. 鏂囨湰妗嗭細<input type="text" name="firstname">
聽聽聽聽聽聽 b. 瀵嗙爜錛?lt;input type="password" name="pwd" size=10 maxlength=8>
聽聽聽聽聽聽 c. 鍗曢夋寜閽細<input type="radio" name="sex" value="male">Male
聽聽聽聽聽聽 d. 澶嶉夋錛?lt;input type="checkbox" name="bike">Bike
聽聽聽聽聽聽 e. 鎸夐挳錛?lt;input type="button" value="Hello world!">
聽聽聽聽聽聽 f. 鎻愪氦鎸夐挳錛?lt;input type="submit" value="Submit">
聽聽聽聽聽聽 g. 閲嶇疆鎸夐挳錛?lt;input type="reset" value="Reset">
聽聽聽聽聽聽 h. 涓嬫媺妗嗭細<select name="cars">
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 <option value="Popo">Popo
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 <option value="Viso">Viso
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 </select>
聽聽聽聽聽聽 i. 鏂囨鍩燂細<textarea rows="10" cols="30"></textarea>
8. HTML 琛ㄥ崟鎻愪氦鏂規硶
絳旓細1) GET: 瀹㈡埛绔殑琛ㄥ崟璇鋒眰鏁版嵁琚紪鐮佽繘鍦板潃銆傛湇鍔″櫒绔氳繃鐜鍙橀噺鎺ユ敹鏁版嵁銆?br />聽聽聽 2) POST: 璇鋒眰鏁版嵁鍖呮嫭澶撮儴鍜屼富瑕侀儴鍒嗐?/p>
聽聽聽 1) GET鏂規硶閫傚悎鏁版嵁灝忎簬256涓瓧絎? 涓昏鐩殑鏄煡鎵俱?br />聽聽聽 2) POST鏂規硶搴旇琚敤浜庤姹傚皢浼氬鑷存湇鍔″櫒绔姸鎬佺殑姘鎬箙鏀瑰彉銆?/p>
9. HTML 鍥懼儚
絳旓細1) 鏅氬浘鍍忥細<img src="enterinfo.gif" alt="Enterinfo Studio" width="200" height="100">
聽聽聽 2) 鑳屾櫙鍥懼儚錛?lt;body background="enterinfobg.gif">
聽聽聽 3) 鍥劇墖閾炬帴錛?lt;a href = " border="0" src="enterinfo.gif" width="200" height"100"></a>
10. HTML 澶氬獟浣?br />絳旓細1) 闊抽璁懼鎴栭煶棰戞挱鏀懼櫒
聽聽聽聽聽聽 <embed src="lzh.mp3" height=160 width=244 controls="bigconsole" autostart="false" nosave="true" loop="true"></embed>
聽聽聽 2) 鑳屾櫙闊充箰
聽聽聽聽聽聽 <bgsound src="lzh.mp3" loop="10">
2004-9-10聽聽 鏄熸湡浜斅犅?闃綽犅犅犅犅?
1. CSS鍦ㄩ〉闈㈢殑浣嶇疆
絳旓細1) 澶栭儴鏂囦歡寮曠敤錛?br />聽聽聽聽聽聽 <head>
聽聽聽聽聽聽聽聽聽 <link rel="stylesheet" type="text/css" href="enterinfo.css">
聽聽聽聽聽聽 </head>
聽聽聽 2) 欏甸潰澶撮儴
聽聽聽聽聽聽 <head>
聽聽聽聽聽聽聽聽聽 <style type="text/css">
聽聽聽聽聽聽聽聽聽聽聽 body{background-color:red}
聽聽聽聽聽聽聽聽聽 </style>
聽聽聽聽聽聽 </head>
聽聽聽 3) 浣滀負灞炴?br />聽聽聽聽聽聽 <p style="color:red">This is a paragraph</p>
2. CSS璇硶
絳旓細CSS鐢變笁閮ㄥ垎緇勬垚錛氶夋嫨鍊?selector), 灞炴?property)鍜屽搴旂殑鍊?value)
聽聽聽 紺轟緥錛?br />聽聽聽 p{text-align:center;color:blue;font-family:arial}聽聽 /* 澶氫釜灞炴ч棿浠ュ垎鍙峰垎闅?*/
聽聽聽 h1,h2,h3,h4,h5,h6{color:green}聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 /* 澶氫釜閫夋嫨鍊奸棿浠ラ楀彿鍒嗛殧 */
3. 閫夋嫨鍊間腑鐨刢lass鍜宨d
絳旓細1) 綾誨睘鎬?Class attribute):
聽聽聽聽聽聽 p.right {text-align:right}聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 /* 瀹氫箟綾?right" */
聽聽聽聽聽聽 p.center{texta-align:center}聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 /* 瀹氫箟綾?center" */
聽聽聽聽聽聽 <p class="right>This paragraph will be right-aligned. </p>
聽聽聽聽聽聽 <p class="right>This paragraph will be right-aligned. </p>
聽聽聽 2) ID 灞炴?br />聽聽聽聽聽聽 *#ei{color:green}聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 /* 瀹氫箟id */
聽聽聽聽聽聽 <p id="ei">A new paragraph starts from here.</p>
4. web鏄浣曞伐浣滅殑錛?br />絳旓細1) Web鏈嶅姟鍣? 涓涓猈eb鏈嶅姟鍣ㄥ氨鍍忎竴涓綆楁満紼嬪簭鐩戝惉浠嶣rowser鍙戝嚭鐨勮姹傜劧鍚庡搷搴旇繖浜涜姹傘?br />聽聽聽 2) 璇鋒眰錛氬鎴風閫氳繃HTTP鍗忚璇鋒湇鍔″櫒榪斿洖涓涓瓨鍌ㄥ湪鏈嶅姟鍣ㄧ鐨勬枃妗ｏ紝瀹㈡埛绔拰鏈嶅姟鍣ㄧ浣跨敤TCP/IP(鎴朏TP)鍗忚榪涜浼氳瘽銆?br />聽聽聽 3) 鍝嶅簲錛氬綋鏈嶅姟鍣ㄧ鏀跺埌HTTP璇鋒眰錛屽畠瀹氫綅鍒扮浉鍏崇殑鏂囨。騫朵笖榪斿洖瀹冦?/p>
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
聽
]]>