疯狂HTML 5/CSS 3/JavaScript讲义


ਨޜेӜѝᯠՏъঠࡧᴹ䲀 ᴽ࣑✝㓯˖˄010˅88258888DŽ ᵳѮᣕ䈧ਁ䛞Ԧ㠣 dbqq@phei.com.cnDŽץ⡸䍘䟿ᣅ䇹䈧ਁ䛞Ԧ㠣 zlts@phei.com.cnˈⴇ ㌫৺䛞䍝⭥䈍˖˄010˅88254888DŽ ࠑᡰ䍝Ҡ⭥ᆀᐕъࠪ⡸⽮മҖᴹ㕪ᦏ䰞仈ˈ䈧ੁ䍝ҠҖᓇ䈳ᦒDŽ㤕Җᓇ୞㕪ˈ䈧оᵜ⽮ਁ㹼䜘㚄㌫ˈ㚄 ঠ ᮠ˖4000 ޼ ᇊԧ˖69.00 ݳ˄ਜ਼ݹⴈ 1 ᕐ˅ ঠ ⅑˖2012 ᒤ 5 ᴸㅜ 1 ⅑ঠࡧ ᔰ ᵜ˖787h1092 1/16 ঠᕐ˖32 ᆇᮠ˖819 ॳᆇ ᖙᨂ˖1 ൠ൰˖ेӜᐲ⎧⏰४зሯ䐟 173 ؑ㇡ 䛞㕆 100036 ࠪ⡸ਁ㹼˖⭥ᆀᐕъࠪ⡸⽮ 㻵 䇒˖ ঠ ࡧ˖ 䍓ԫ㕆䗁˖㪋 ၌ ㆆࡂ㕆䗁˖ᕐᴸ㨽 ѝഭ⡸ᵜമҖ侶 CIP ᮠᦞṨᆇ˄2012˅ㅜ 078047 ਧ Č.ķTP312ĸTP393.092 ĉ. ķ⯟Ă Ċ. ķᵾĂ ċ. ķ䎵᮷ᵜḷ䇠䈝䀰ˉ〻ᒿ䇮䇑ĸ㖁亥ࡦ֌ᐕާĹJAVA 䈝䀰ˉ〻ᒿ䇮䇑 ISBN 978-7-121-16863-5 ⯟⣲ HTML 5/CSS 3/JavaScript 䇢ѹ / ᵾࡊ㕆㪇. üेӜ˖⭥ᆀᐕъࠪ⡸⽮ˈ2012.5 ഴҜ൞⡾㕌ⴤδCIPεᮦᦤ ᵳᗵウDŽץˈ⡸ᵳᡰᴹ 䜘޵ᇩDŽޘᵚ㓿䇨ਟˈнᗇԕԫօᯩᔿ༽ࡦᡆᢴ㻝ᵜҖѻ䜘࠶ᡆ ᴹᖸ儈Ⲵ৲㘳ԧ٬DŽᵜҖҏਟ֌Ѫ儈ṑǃษ䇝ᵪᶴⲴษ䇝ᮉᶀDŽ ሩҾᴹаᇊᐕ֌㓿傼Ⲵࡽㄟᐕ〻ᐸˈᵜҖާ˗ሩҾࡊࡊӾһࡽㄟᔰਁⲴᯠӪˈᵜҖާᴹᖸྭⲴᆖҐԧ٬ ᵜҖሩ HTML 5ǃCSS 3ǃJavaScript Ⲵӻ㓽ᱟĀӾ䴦ᔰ࿻āⲴˈഐ↔䰵䈫ᵜҖᒦн䴰㾱仍ཆⲴส⹰DŽ Java 㚄ⴏ˄http://www.crazyit.org˅ਁᑆˈㅄ㘵ሶՊ৺ᰦҸԕ䀓ㆄDŽ 儈Ⲵ৲㘳ԧ٬DŽᵜҖᨀ׋Ҷ䝽྇Ⲵㆄ⯁㖁ㄉˈྲ᷌䈫㘵൘䰵䈫ᵜҖᰦ䙷ࡠҶᢰᵟ䰞仈ˈਟԕⲫᖅ⯟⣲ 㖇ᯟᯩඇDŽ䈕⑨ᠿ㔬ਸ䘀⭘Ҷ HTML 5 Ⲵ㔈മ᭟ᤱǃᇒᡧㄟᆈۘㅹᢰᵟˈާᴹ䖳״⣲ᢰᵟⲴሿ⑨ᠿ˖⯟ ቲ䶒䱀䘠ˈ㘼ᱟ㔃ਸҶབྷ䟿ᇎֻᶕ䇙䈫㘵ሩ➗㓳Ґǃᆖԕ㠤⭘DŽᵜҖᴰਾ䘈ᨀ׋ҶањสҾ HTML 5 ⮉൘⸕䇶⛩ڌᵜҖⲴᇊսᱟаᵜࡽㄟᔰਁⲴĀᇎᡈᙗāമҖˈഐ↔൘ӻ㓽਴⸕䇶⛩ᰦᒦнᱟㆰঅൠ ᡧㄟ䙊ؑ᭟ᤱǃWebSocket 㕆〻ㅹDŽ ᤜ JavaScript สᵜ䈝⌅ǃDOM 㕆〻ˈԕ৺ HTML 5 ᯠ໎Ⲵᵜൠᆈۘǃ⿫㓯ᓄ⭘ǃJavaScript ཊ㓯〻ǃᇒ Ⲵ࣏㜭઼⭘⌅ǃᴰࡽ⋯Ⲵਈᖒоࣘ⭫࣏㜭ㅹDŽ䲔↔ѻཆˈᵜҖ䘈㌫㔏ൠӻ㓽Ҷ JavaScript 㕆〻⸕䇶ˈव ᑨ⭘Ⲵݳ㍐઼኎ᙗǃHTML 5 Ⲵ㺘অݳ㍐઼኎ᙗǃHTML 5 Ⲵ㔈മ᭟ᤱǃHTML 5 ⲴཊჂփ᭟ᤱǃCSS 3 䶒ӻ㓽 HTML 5ǃCSS 3 ઼ JavaScript ࡽㄟᔰਁᢰᵟⲴമҖˈ㌫㔏ൠӻ㓽Ҷ HTML 5ޘᵜҖᱟаᵜ CSS 3ǃSVG ઼ HTML 5 ㅹᯠ㿴㤳ˈ䘉Ӌ䘩䊑㺘᰾˖HTML 5 ᰦԓࡠᶕҶDŽ FirefoxǃOperaǃChrome ㅹ⍿㿸ಘᰙᐢᖸྭൠ᭟ᤱ਴⿽ HTML 5 㿴㤳ˈᗞ䖟ҏᇓᐳ IE 9 ሶՊᴤྭൠ᭟ᤱ HTML 5 㿴㤳બѻⅢࠪˈ਴⍿㿸ಘল୶ᴤᰙᐢ᪙ᤣᬖᦼˈ㓧㓧᧘ࠪ᭟ᤱ HTML 5 㿴㤳Ⲵ⍿㿸ಘ˖ ޻ᇯㆶԁ Ҿᡰ䉃Ā䇮䇑ᙍᜣāⲴҖˈн㾱ᤷᵋᆖҐᵜҖ㜭ᨀ儈֐ᡰ䉃ⲴĀ䇮䇑ᙍᜣāˈᡰԕޣᱟаᵜ 䴰㾱䈤᰾ⲴᱟˈᵜҖਚᱟаᵜӻ㓽 HTML 5ǃCSS 3ǃJavaScript ᇎ䱵ᔰਁⲴമҖˈ㘼н Ⲵ਴⿽⸕䇶ˈҏਟ䇙䈫㘵ሶᡰᆖ⨶䇪䘀⭘ࡠᇎ䱵ᔰਁѝDŽ 㖇ᯟᯩඇāDŽ䘉њሿ⑨ᠿᰒਟ䇙䈫㘵ᐙപࡽ䶒ᡰᦼᨑ״⣲ㅹ޵ᇩˈᔰਁҶањ㖁亥⡸ⲴĀ⯟ ㅜഋ䜘࠶˖㔬ਸ䘀⭘Ҷ HTML 5 Ⲵ㔈മ᭟ᤱǃᇒᡧㄟᆈۘǃCSS ṧᔿǃJavaScript 㕆〻 ᭟ᤱⲴᯠ࣏㜭ˈ䶎ᑨ䘲ਸ֌Ѫࡽㄟᔰਁ㘵ⲴᆖҐᮉ〻DŽ 䙊ؑǃWebSocket 㕆〻ㅹ⸕䇶ˈ䘉Ӌ޵ᇩᰒ㾶ⴆҶࡍᆖ㘵Ⲵ㕆〻ส⹰ˈҏ㾶ⴆҶ HTML 5 ᡰ ࠭ᮠǃJavaScript ሩ䊑ǃDOM 㕆〻ǃһԦ༴⨶ǃᵜൠᆈۘǃ⿫㓯ᓄ⭘ǃཊ㓯〻ǃ䐘᮷ẓ⎸᚟ ޵ᇩˈवᤜ JavaScript ส⹰䈝⌅ǃJavaScriptޣㅜй䜘࠶˖䟽⛩ӻ㓽Ҷ JavaScript 㕆〻Ⲵ⴨ ਟԕ֌Ѫࡽㄟᔰਁ㘵Ⲵ৲㘳᡻޼DŽ 䶒ǃ㌫㔏ൠᦼᨑ CSS 3 Ⲵ࣏㜭઼⭘⌅DŽ䘉䜘࠶޵ᇩҏޘᨀ׋Ҷ⽪ֻˈᯩׯᒯབྷ䈫㘵৲㘳ᵜҖ ㅜҼ䜘࠶˖䈖㓶ൠӻ㓽Ҷ CSS 3 Ⲵ㔍བྷ䜘࠶ᑨ⭘䘹ᤙಘǃ኎ᙗˈᒦѪ䘉Ӌ䘹ᤙಘǃ኎ᙗ Ⲵᮉ〻ˈҏਟԕ֌ѪᰕᑨᔰਁⲴ৲㘳᡻޼DŽ ᒦѪ਴ HTML ḷㆮǃ኎ᙗ䜭ᨀ׋Ҷ䝽྇Ⲵ⽪ֻ亥䶒ˈ䘉Ӌ޵ᇩнӵਟԕ֌ѪᆖҐ HTML 5 䜘ḷㆮˈᒦф䈖㓶ൠӻ㓽Ҷ਴ḷㆮᡰ᭟ᤱⲴ኎ᙗˈޘ䶒ൠӻ㓽Ҷ HTML 5 Ⲵޘ˖ㅜа䜘࠶ Җਟ࠶Ѫ 4 њ䜘࠶DŽޘᵜҖᱟаᵜӻ㓽 HTML 5ǃCSS 3 ઼ JavaScript ᔰਁⲴᇎ⭘മҖDŽ 㦻⃵䔈䍈 ࡠᶕਟԕ䇙ࡽㄟᔰਁ㘵ᴤ࣐䖫ᶮDŽ ࡽㄟ UI ᔰਁⲴᰦ䰤ঐࡠᮤњ亩ⴞᔰਁᰦ䰤Ⲵ 40ˁ˄⭊㠣ᴤ儈˅ˈHTML 5 Ⲵىഎ䚯Ⲵˈᴹᰦ ᡰ䙷ࡠⲴ䐘⍿㿸ಘ䰞仈ĂĂሩҾᡰᴹӾһԱъ㓗ᓄ⭘ᔰਁⲴ〻ᒿઈᶕ䈤ˈࡽㄟᔰਁ৸ᱟᰐ⌅ ল୶ሩ HTMLǃJavaScriptǃCSS Ⲵ᭟ᤱᴹᐞᔲˈᔰਁӪઈ䴰㾱㣡䍩བྷ䟿ᰦ䰤ᶕ䀓ߣࡽㄟᔰਁ ᗵ享Җ߉བྷ䟿Ⲵ JavaScript ԓ⸱᡽㜭ᆼᡀ˄ᡆ㘵ⴤ᧕⭘ㅜйᯩᨀ׋Ⲵᰕশ㓴Ԧ˅˗ĸ਴⍿㿸ಘ ᔰਁཚⰋ㤖ҶüüķHTML ᧗ԦⲴ࣏㜭䗷Ҿঅаˈ∄ྲањㆰঅⲴᰕশ䘹ᤙṶˈࡽㄟᔰਁ㘵 ሩҾᡰᴹⲴࡽㄟᔰਁ㘵ᶕ䈤ˈHTML 5 о CSS 3 ᱟањ䮯ѵⲴĀᵏᖵāˈഐѪԕࡽⲴࡽㄟ HTML 5 ᨀ׋ҶᖸྭⲴ᭟ᤱDŽ ᵋҶ䀓ࡠ䘉Ӌ⍿㿸ಘሩ HTML 5 Ⲵ᭟ᤱ〻ᓖDŽ⧠൘ᖸ⅓ௌൠⴻࡠˈ㔍བྷ䜘࠶⍿㿸ಘ䜭ᐢሩ ઼ Safariˈ⇿ᖃ䘉Ӌ⍿㿸ಘᴹᯠ⡸ᵜ䶒цᰦˈㅄ㘵ᙫՊ൘ㅜаᰦ䰤৫л䖭ᒦ֯⭘ᆳԜˈᙫᐼ ㅄ㘵аⴤ൘㠚ᐡⲴ⭥㝁кᆹ㻵⵰ 5 њ⍿㿸ಘ˖Internet ExplorerǃFirefoxǃOperaǃChrome Ҷ䇞һᰕ〻DŽ䘉Ӌһᇎ㺘᰾˖HTML 5 ↓൘ੁབྷᇦᤋ᡻DŽޕ㿴㤳㓣 㿴㤳ˈᗞ䖟Ӿ IE 9 ᔰ࿻ҏ㜭᭟ᤱ HTML 5ǃCSS 3 ઼ SVG ㅹᯠ㿴㤳DŽW3C ᐢ㓿ᢺਁᐳ HTML 5 HTML 5 ᰦԓণሶࡠᶕˈFirefoxǃOperaǃChrome ㅹ⍿㿸ಘᰙᐢᖸྭൠ᭟ᤱ਴⿽ HTML 5 ⓜ岏 㿱ྲᶕˈҏ䇨Ӫ⭏Ӗ䈕ྲ↔DŽ ྲ≤DŽᗵᗇᗳᰐᯱ僋ˈᯩ⭏ߕߕѻᘇDŽ֋㓿ӖӁ˖ࠑᡰᴹ⴨ˈⲶᱟ㲊ྴˈ㤕㿱䈨⴨䶎⴨ˈࡉ ⎞೓ц⭼ˈ⟉⟉ᭈᭈˈц⭼ᱟ✝䰩Ⲵˈԕаᐡѻ䓛ˈ㹼䎠Ҿ↔┊┊ቈцˈᖰᖰᖸ䳮ᗳ䶉 Ⲵ༠丣ˈⴻ⵰ቿᒅкⲴᆇањањൠࠪ⧠ˈ䘉ቡᱟᡁⲴ⭏⍫ᯩᔿDŽ ԿᰦˈᖃᒯᐎⲴӪ㗔൘㺇ᐲкᐍ⍱н᚟ᰦˈᡁᆱᝯǃᆱᝯᆸ⵰㠚ᐡᆱ䶉Ⲵᇦˈੜ⵰ᇦӪ⑙俘 ᤱ䐍⿫Ⲵ⣦ᘱDŽᖃᇦґⲴ⛞ㄩ༠൘䲔ཅཌ↔䎧ᖬ؍ᘱˈа⿽ᖸঅ㓟Ⲵ⣦ᘱˈа⿽о⎞೓ц⭼ എᜣ䘉ࠐᒤˈ⇿ᒤ䗷ᒤ䜭൘ࡋ֌മҖˈҏ䇨䘉᡽ᱟа⿽኎ҾᡁⲴ⣦ᘱˈа⿽ᡁௌ⅒Ⲵ⣦ ཊ⇧⇧ᵏᵋⲴ䈫㘵нՊཡᵋDŽ ⲴᯠҖн㜭┑䏣ᡰᴹ䈫㘵ⲴᵏᵋDŽਚ㜭ᢺ㠚ᐡॱҼ࠶Ⲵ✝ᘡǃॱҼ࠶Ⲵࣚ࣋ӔࠪᶕˈᐼᵋՇ 䇨ഐѪᐢࠪ⡸ҶнቁമҖˈн޽ӗ⭏ᯠ勌Ⲵ᛺ௌ˗ҏ䇨ഐѪབྷ䟿䈫㘵Ⲵ⇧࠷ᵏᵋˈ␡ 㠚ᐡ 㘼⭏а⿽ᜦ ˖ҏ❦⋨ق৸аᵜᯠҖሶ䶒цˈᡁᐢ㓿䘰৫ҶⴻࡠᯠҖ䶒цⲴ⅓ௌᝏˈ৽ ⒪⇫㎮岏 㘵ቡਟ䗮ࡠԱъࡽㄟᔰਁⲴ㾱≲DŽ 䇔ⵏ䰵䈫ᵜҖˈᢺҖѝᡰᴹ⽪ֻᗚᒿ⑀䘋ൠ㓳Ґа䙽ˈᒦᢺᵜҖᴰਾањṸֻ⤜・ᆼᡀˈ䈫 ᤱҶĀ⯟⣲ Java փ㌫āⲴа䍟仾Ṭ˖ᙍ䐟␵Რˈ䈝䀰ᒣᇎˈ᫽֌↕僔䈖㓶DŽਚ㾱؍ᵜҖ 3κ䇨䀙䈜㓼θрᢁᇯ᱉ 㖇ᯟᯩඇāṸֻˈᇎ⭘ᙗᖸᕪDŽ״⣲⽪ֻDŽᵜҖᴰਾ䘈ᨀ׋ҶĀ⯟ ᱟ䇢䀓 HTML 5 ḷㆮ䘈ᱟ CSS 3 䘹ᤙಘǃ኎ᙗⲴ࣏㜭ˈࠐѾ⇿њ⸕䇶⛩䜭ਟ᢮ࡠሩᓄⲴ৲㘳 ᵜҖᒦнተ䲀Ҿᷟ⠕Ⲵ⨶䇪ӻ㓽ˈ㘼ᱟ䟷⭘ҶĀ亩ⴞ傡ࣘāⲴᯩᔿᶕ䇢ᦸ⸕䇶⛩DŽᰐ䇪 2κ޻ᇯᇔ䱻θᇔ⭞ᙝᕰ 㾶ⴆҶ W3C ᇈ㖁кᐢਁᐳⲴ HTML 5 ᯠ㿴㤳ˈҏ㾶ⴆҶ䜘࠶ণሶਁᐳⲴᯠ㿴㤳DŽ 䶒ޘ⿫㓯ᓄ⭘ǃᇒᡧㄟᆈۘǃJavaScript ཊ㓯〻ǃ䐘᮷ẓ⎸᚟Ր䙂ǃWebSocket ㅹ޵ᇩDŽᵜҖ ኎ᙗǃޣঅḷㆮǃ㔈മ᭟ᤱǃཊჂփ᭟ᤱǃCSS 䘹ᤙಘǃCSS ⴂ⁑ර኎ᙗǃCSS ਈᖒ઼ࣘ⭫⴨ ⸕䇶ˈवᤜ HTML 5 ໎ᕪⲴ㺘ޣ䶒ӻ㓽Ҷ HTML 5ǃCSS 3ǃJavaScript Ⲵ਴⿽⴨ޘᵜҖ 䶘θ㾼ⴌ䶘ᒵޞ1κ⸛䇼 ᵜҖާᴹྲлࠐњ⢩⛩DŽ ҐDŽ ˄http://www.crazyit.org˅оᒯ བྷ Java ᆖҐ㘵Ӕ⍱ˈㅄ㘵ҏՊ䙊䗷䈕ᒣਠоབྷᇦа䎧Ӕ⍱ǃᆖ ਚ㾱䈫㘵൘䰵䈫ᵜҖᰦ䙷ࡠ⸕䇶кⲴ䰞仈ˈ䜭ਟԕⲫᖅ⯟⣲ Java 㚄ⴏ Ⲵа䍟仾Ṭ˖ᙍ䐟␵Რˈ䈝䀰ᒣᇎˈ᫽֌↕僔䈖㓶DŽ ᤱҶĀ⯟⣲ Java փ㌫ā؍❦⋑ᴹึ⸼аึĀ␡ྕāⲴᯠ਽䇽ǃаึĀ儈␡āⲴᙍᜣˈᵜҖ׍ ᗇࠪāDŽᵜҖᒦڊ⽪ֻᗚᒿ⑀䘋ൠ㓳Ґа䙽ˈᵜҖᑖ㔉֐Ⲵਚᱟ 9 њᆇ˖Āⴻᗇ៲ǃᆖᗇՊǃ ᵜҖᡰӻ㓽Ⲵ⸕䇶䜭ᖸĀ⍵ᱮāˈਚ㾱䈫㘵ᝯ᜿඀лᶕǃ䶉ᗳ䰵䈫ᵜҖˈᒦᢺҖѝᡰᴹ ཹ࣍䛓Ӌᐼᵋᨀ儈ᙍᜣⲴ䈫㘵н㾱䰵䈫ᵜҖDŽ gIVg 2012-3-10  н᧘㦀䘹ᤙᵜҖDŽ ҾᵜҖᱟаᵜуъ㓗ⲴࡽㄟᔰਁᢰᵟമҖˈሩҾ䛓ӋਚᜣㆰঅҶ䀓 HTMLǃCSS Ⲵъ։Ӫ༛ˈ 傼Ⲵࡽㄟᐕ〻ᐸˈᵜҖާᴹᖸ儈Ⲵ৲㘳ԧ٬DŽᵜҖҏਟ֌Ѫ儈ṑǃษ䇝ᵪᶴⲴษ䇝ᮉᶀDŽ⭡ ሩҾᴹаᇊᐕ֌㓿˗仍ཆⲴส⹰DŽሩҾࡊࡊӾһࡽㄟᔰਁⲴᯠӪˈᵜҖާᴹᖸྭⲴᆖҐԧ٬ ᵜҖᱟаᵜĀӾ䴦ᆖҐāⲴ HTML 5ǃCSS 3ǃJavaScript уъമҖˈ䰵䈫ᵜҖᒦн䴰㾱 㦻⃵␨全庐䦚 gVg http://www.crazyit.org ྲ᷌ᛘ൘֯⭘ᵜݹⴈѝ䙷ࡠн៲Ⲵᢰᵟ䰞仈ˈਟԕⲫᖅྲл㖁ㄉо֌㘵㚄㌫˖ ഑Ƚᢶᵥ᭥ᤷ ˄2˅൘֯⭘ᵜݹⴈѝⲴ〻ᒿᰦˈ䈧ሶ〻ᒿᤧ䍍ࡠ⺜ⴈкˈᒦ৫䲔᮷ԦⲴਚ䈫኎ᙗDŽ ᴽ࣑ಘˈ֯⭘⍿㿸ಘণਟ䇯䰞䈕ᓄ⭘DŽ ˄1˅ሩҾ Web ᓄ⭘ˈሶ䈕ᓄ⭘༽ࡦࡠ%TOMCAT_HOME%/webapps 䐟ᖴлDŽ੟ࣘ Tomcat пȽ⌞ᝅӁ亯 ⧟ຳਈ䟿٬Ѫ JDK ᆹ㻵䐟ᖴDŽ ֯⭘ᆹ㻵᮷Ԧᆹ㻵ˈ㘼ᱟ䟷⭘䀓঻㕙Ⲵᆹ㻵ᯩᔿDŽᆹ㻵 Tomcat 䴰㾱໎࣐ JAVA_HOME ⧟ຳਈ䟿ˈ ˄3˅ㅜ 18 ㄐⲴ⿫㓯 Web ᓄ⭘䴰㾱 Tomcat ᴽ࣑ಘˈᔪ䇞ᆹ㻵 Apache Ⲵ Tomcat 7.0.20ˈн㾱 ѝ JAVA_HOME ԓ㺘 JDK˄нᱟ JRE˅Ⲵᆹ㻵䐟ᖴDŽ ѪҶਟԕ㕆䈁઼䘀㹼 Java 〻ᒿˈ䘈ᓄ䈕൘ PATH ⧟ຳਈ䟿ѝ໎࣐%JAVA_HOME%/binDŽަ HOME%/lib/dt.jarDŽ ᡀਾˈ␫࣐ CLASSPATH ⧟ຳਈ䟿ˈ䈕⧟ຳਈ䟿Ⲵ٬Ѫ.; %JAVA_HOME%/lib/tools.jar; %JAVA_ ˄2˅ᵜҖቁ䟿〻ᒿ䴰㾱֯⭘ Java 㕆䈁ǃ䘀㹼ˈᔪ䇞ᆹ㻵 jdk-7u3-windows-i586.exeˈᆹ㻵ᆼ Opera 11.60ǃFirefox 10.0ǃChrome 17.0 ԕк⡸ᵜⲴ⍿㿸ಘDŽ ˄1˅ᵜҖᖸཊ HTML 5ǃCSS 3 ԓ⸱ᗵ享൘儈⡸ᵜⲴ⍿㿸ಘѝ᡽㜭ⴻࡠ᭸᷌DŽᔪ䇞䈫㘵ᆹ㻵 ᵜҖѝⲴ〻ᒿ൘ԕл⧟ຳѝ䈳䈅䙊䗷DŽ ӂȽ䘆㺂⧥ູ 亩ⴞ᮷Ԧˈ䈧н㾱ࡐ䲔DŽ ˄2˅ݹⴈѝᴹӋ᮷Ԧཀྵлवਜ਼Ҷ.classpathǃ.mymetadataǃ.project ㅹ᮷ԦˈᆳԜᱟ Eclipse ㄐᡰ֯⭘Ⲵԓ⸱᭮൘ codes ᮷ԦཀྵⲴ 03 ᮷Ԧཀྵлˈ׍↔㊫᧘DŽ ˄1˅01̚19 ᮷Ԧཀྵ਽ሩᓄҾlj⯟⣲ HTML 5/CSS 3/JavaScript 䇢ѹNJѝⲴㄐ਽ˈ∄ྲㅜ 3 ᵜݹⴈ codes ⴞᖅлᴹ 19 њ᮷Ԧཀྵˈަ޵ᇩ઼ਜ਼ѹ䈤᰾ྲлDŽ ㌫ˈᯩׯ䈫㘵ḕ᢮DŽޣҖѝ⇿ԭⓀԓ⸱ҏ㔉ࠪоݹⴈⓀ᮷ԦⲴሩᓄ ᤹㢲ᆈ᭮ˈ∄ྲㅜ 3 ㄐㅜ 2 㢲ᡰ֯⭘Ⲵԓ⸱᭮൘ codes ᮷ԦཀྵⲴ 03\2.2 ᮷Ԧཀྵлˈ׍↔㊫᧘DŽ ᵜݹⴈᱟlj⯟⣲ HTML 5/CSS 3/JavaScript 䇢ѹNJаҖⲴ䝽ҖݹⴈˈҖѝⲴԓ⸱᤹ㄐǃ жȽݿⴎ޻ᇯ ݿⴎ䈪᱄ ...............................81 䥽  ㇤ 4.1 ֯⭘canvasݳ㍐ ㅢ 4 ㄖ HTML 5 Ⲻ㔎ഴ᭥ᤷ ......................80 3.5 ᵜㄐሿ㔃 ...........................................79 䰝ṑ傼 .......................................78ޣ 3.4.4 3.4.3 㠚ᇊѹ䭉䈟ᨀ⽪ ...........................77 ṑ傼 ..............................................76 3.4.2 䈳⭘checkValidityᯩ⌅䘋㹼 3.4.1 ֯⭘ṑ傼኎ᙗᢗ㹼ṑ傼 ...............75 3.4 HTML 5 ᯠ໎Ⲵᇒᡧㄟṑ傼 .......75 3.3.2 ֯⭘FileReader䈫ਆ᮷Ԧ޵ᇩ .....71 3.3.1 FileListሩ䊑оFileሩ䊑 ................69 3.3 HTML 5 ໎ᕪⲴ᮷ԦкՐฏ .......69 3.2.3 HTML 5 ᯠ໎Ⲵ㺘অ᧗Ԧ ............68 3.2.2 ࣏㜭ѠᇼⲴinputݳ㍐ ...................65 ኎ᙗ ..............................................61 3.2.1 HTML 5 Ѫ㺘অ᧗Ԧᯠ໎Ⲵ 3.2 HTML 5 ᯠ໎Ⲵ኎ᙗоݳ㍐ .......61 3.1.6 ֯⭘textareaᇊѹ᮷ᵜฏ ..............60 3.1.5 ࡇ㺘Ṷ઼л᣹㨌অ .......................58 3.1.4 ֯⭘buttonᇊѹ᤹䫞 .....................58 3.1.3 ֯⭘labelᇊѹḷㆮ .......................57 3.1.2 ֯⭘inputݳ㍐ ..............................54 3.1.1 㺘অݳ㍐ .......................................53 㺘অ᧗Ԧ ...........................................53 3.1 HTML৏ᴹⲴ㺘অ৺ ㅢ 3 ㄖ HTML 5 㺞ঋ⴮ީݹ㍖ૂኔᙝ ....52 2.6 ᵜㄐሿ㔃 ...........................................51 2.5.5 ᭩ਈᤆ᭮മḷ ...............................50 2.5.4 ᤆ᭮㹼Ѫ .......................................49 2.5.3 DataTransferሩ䊑 ..........................46 2.5.2 ᧕ਇĀ᭮ā....................................44 2.5.1 ੟ࣘᤆࣘ .......................................43 2.5 HTML 5 ᯠ໎Ⲵᤆ᭮API...............43 2.4 HTML 5 ཤ䜘઼ݳؑ᚟ .................41 2.3.3 єњ⢩↺࣏㜭Ⲵݳ㍐ ...................40 ݳ㍐ .............................. 39ޣ2.3.2 䈝ѹ⴨ 2.3.1 ᮷ẓ㔃ᶴݳ㍐ .............................. 34 2.3 HTML 5 ᯠ໎Ⲵᑨ⭘ݳ㍐ ............ 34 2.2.4 spellcheck኎ᙗ .............................. 33 2.2.3 hidden኎ᙗ ................................... 33 2.2.2 designMode኎ᙗ ........................... 32 2.2.1 contentEditable኎ᙗ ..................... 31 2.2 HTML 5 ᯠ໎Ⲵ䙊⭘኎ᙗ ............ 31 ݳ㍐ .............................. 30ޣ2.1.8 Ṷᷦ⴨ ݳ㍐ .............................. 25ޣ2.1.7 㺘Ṭ⴨ ݳ㍐ .............................. 24ޣ⴨ۿ2.1.6 മ ݳ㍐ .............................. 22ޣ2.1.5 ࡇ㺘⴨ 2.1.4 䎵䬮᧕઼䭊⛩ .............................. 20 ݳ㍐ .............................. 18ޣ2.1.3 䈝ѹ⴨ 2.1.2 ᮷ᵜṬᔿॆݳ㍐ .......................... 16 2.1.1 สᵜݳ㍐ ...................................... 14 ⮉Ⲵᑨ⭘ݳ㍐ ............ 14؍ 2.1 HTML 5 ㅢ 2 ㄖ HTML 5 Ⲻᑮ⭞ݹ㍖фኔᙝ ........ 13 1.4 ᵜㄐሿ㔃 ........................................... 12 1.3.2 HTML 5 Ⲵ䈝⌅ਈॆ ..................... 9 1.3.1 HTML 5 สᵜ㔃ᶴ ......................... 8 ਈॆ ...................................................... 8 1.3 HTML 5 Ⲵสᵜ㔃ᶴ઼䈝⌅ 1.2.4 ໎ᕪҶWebᓄ⭘〻ᒿⲴ࣏㜭 ......... 8 1.2.3 ᴤ᰾⺞Ⲵ䈝ѹ᭟ᤱ ........................ 7 1.2.2 䜘࠶ԓᴯҶ৏ᶕⲴJavaScript......... 7 1.2.1 䀓ߣ䐘⍿㿸ಘ䰞仈 ........................ 6 1.2 HTML 5 ⲴՈ࣯ ................................ 6 1.1.4 ӾXHTMLࡠHTML 5 ..................... 5 ᇊѹ˄DTD˅ ................................. 4 1.1.3 HTML઼XHTMLⲴ᮷ẓ㊫ර 1.1.2 HTML 4.01 ઼XHTML................... 3 1.1.1 HTMLਁኅশਢ ............................. 2 1.1 HTMLশਢоHTML 5 ..................... 2 ㅢ 1 ㄖ HTML 5 ㆶԁ ...................................... 1 ㅢж䜞࠼ ኎ᙗ ................................170ޣ7.1 ᆇփ⴨ ㅢ 7 ㄖ ᆍ։фᮽᵢ⴮ީኔᙝ ...................169 6.7 ᵜㄐሿ㔃 .........................................168 6.6.2 ࣘᘱ໎࣐・փ᭸᷌ .....................167 6.6.1 䲿ᵪ᭩ਈ亥䶒Ⲵ㛼Ჟ㢢 .............166 6.6 ൘㝊ᵜѝ؞᭩ᱮ⽪ṧᔿ ..............166 6.5.4 :not઼:target .................................164 6.5.3 ⍿㿸ಘу኎Ⲵ኎ᙗ .....................162 6.5.2 UIݳ㍐⣦ᘱ՚㊫䘹ᤙಘ .............158 6.5.1 㔃ᶴᙗ՚㊫䘹ᤙಘ .....................150 6.5 CSS 3.0 ᯠ໎Ⲵ՚㊫䘹ᤙಘ .......150 6.4.7 ␫࣐ཊ㓗㕆ਧ .............................148 6.4.6 ֯⭘㠚ᇊѹ㕆ਧ .........................147 ␫࣐㕆ਧ .....................................146 䝽ਸcounter-increment኎ᙗ 6.4.5 145.......... ޕ6.4.4 䝽ਸquotes኎ᙗᢗ㹼ᨂ 䜘࠶ݳ㍐ .........................144ޕਚᨂ 6.4.3 143..................................... ۿമޕ6.4.2 ᨂ Ⲵ኎ᙗ .........................142ޣ6.4.1 ޵ᇩ⴨ 6.4 ՚ݳ㍐䘹ᤙಘ ................................ 140 6.3.8 䘹ᤙಘ㓴ਸ ................................ 139 6.3.7 CSS 3 ᯠ໎Ⲵݴᕏ䘹ᤙಘ ......... 138 6.3.6 ᆀ䘹ᤙಘ .................................... 137 6.3.5 वਜ਼䘹ᤙಘ ................................ 136 6.3.4 class䘹ᤙಘ ................................. 135 6.3.3 ID䘹ᤙಘ .................................... 134 6.3.2 ኎ᙗ䘹ᤙಘ ................................ 132 6.3.1 ݳ㍐䘹ᤙಘ ................................ 131 6.3 CSS䘹ᤙಘ ..................................... 131 6.2.4 ֯⭘޵㚄ṧᔿ ............................ 129 6.2.3 ֯⭘޵䜘CSSṧᔿ ..................... 128 ཆ䜘ṧᔿঅ ........................ 127ޕ6.2.2 ሬ ཆ䜘ṧᔿ᮷Ԧ .................... 126ޕ6.2.1 ᕅ 6.2 CSSṧᔿঅⲴสᵜ֯⭘ .............. 125 6.1.2 CSSⲴਁኅশਢ ......................... 125 6.1.1 CSSᾲ䘠 ..................................... 124 6.1 ṧᔿঅᾲ䘠 .................................... 124 ㅢ 6 ㄖ 㓝㚊ṭᕅঋфCSS䘿᤟ಞ ......... 123 ㅢӂ䜞࠼ 5.4 ᵜㄐሿ㔃 .........................................122 5.3.2 ⴁੜಘ .........................................121 5.3.1 һԦ ............................................120 5.3 һԦⴁੜ ......................................... 119 HTMLVideoElementⲴ኎ᙗ ....... 118 5.2.2 HTMLAudioElementо ᯩ⌅ ............................................ 116 HTMLVideoElement᭟ᤱⲴ 5.2.1 HTMLAudioElementо ᫝᭮ .................................................. 116 5.2 ֯⭘JavaScript㝊ᵜ᧗ࡦჂփ 5.1 ֯⭘audio઼videoݳ㍐ ................ 113 ㅢ 5 ㄖ HTML 5 Ⲻཐ჈։᭥ᤷ ................ 112 4.8 ᵜㄐሿ㔃 ......................................... 111 4.7 䗃ࠪսമ .........................................109 ㍐༴⨶ .....................................107ۿ 4.6.2 4.6.1 սമ㻱࢚ .....................................106 4.6 սമ༴⨶ ......................................... 106 4.5.3 սമປݵ .................................... 104 4.5.2 ശᖒ⑀ਈ .................................... 103 4.5.1 㓯ᙗ⑀ਈ .................................... 102 4.5 ᧗ࡦປݵ仾Ṭ ................................ 102 4.4 ᧗ࡦਐ࣐仾Ṭ ................................ 100 4.3.3 ֯⭘⸙䱥ਈᦒ .............................. 99 4.3.2 ඀ḷਈᦒо䐟ᖴ㔃ਸ֯⭘ ........... 97 4.3.1 ֯⭘඀ḷਈᦒ .............................. 96 4.3 മᖒ⢩᭸༴⨶ .................................. 95 4.2.7 㔈ࡦսമ ...................................... 94 4.2.6 㔈ࡦᴢ㓯 ...................................... 92 4.2.5 ֯⭘䐟ᖴ ...................................... 88 4.2.4 䇮㖞䱤ᖡ ...................................... 87 4.2.3 㔈ࡦᆇㅖѢ .................................. 86 4.2.2 㔈ࡦࠐօമᖒ .............................. 85 CanvasRenderingContext2D.......... 82 4.2.1 canvas㔈മส⹰˖ 4.2 㔈മ .................................................... 82 gVIIIg 12.4 ᵜㄐሿ㔃 .......................................277 12.3.2 劬⵬᭸᷌ ...................................275 12.3.1 ਼ᰦ᭩ਈཊњ኎ᙗⲴࣘ⭫ .......274 ࣘ⭫................................................272 12.3 CSS 3 ᨀ׋ⲴAnimation 12.2.2 ᤷᇊࣘ⭫䙏ᓖ ...........................271 12.2.1 ཊњ኎ᙗ਼ᰦ⑀ਈ ...................269 ࣘ⭫ ...............................................268 12.2 CSS 3 ᨀ׋ⲴTransition 12.1.4 ֯⭘⸙䱥ਈᦒ ...........................266 12.1.3 ᤷᇊਈᖒѝᗳ⛩ .......................265 12.1.2 ਼ᰦᓄ⭘ཊ⿽ਈᖒ ...................263 12.1.1 4 ⿽สᵜਈᖒ ............................262 12.1 CSS 3 ᨀ׋Ⲵਈᖒ᭟ᤱ ............261 ㅢ 12 ㄖ ਎ᖘфࣞ⭱⴮ީኔᙝ .................260 11.5 ᵜㄐሿ㔃 .......................................259 11.4.2 䪸ሩ⍿㿸ಘᇭᓖ䈳ᮤᐳተ .......256 11.4.1 media query䈝⌅ .......................254 11.4 media query࣏㜭 .........................254 11.3 ᧗ࡦݹḷⲴ኎ᙗ .........................253 ኎ᙗ ..............................250ޣ11.2 ࡇ㺘⴨ ኎ᙗ ..............................247ޣ11.1 㺘Ṭ⴨ media query ..................................246 ㅢ 11 ㄖ 㺞ṲȽࡍ㺞⴮ީኔᙝ਀ 10.5 ᵜㄐሿ㔃 .......................................245 10.4.2 ֯⭘ⴂ⁑රᇎ⧠ཊḿᐳተ .......240 10.4.1 CSS 3 ᯠ໎Ⲵ࠶ḿ࣏㜭 ............237 10.4 CSS 3 Ⲵཊḿᐳተ ......................237 10.3.2 ሩ㺘Ṭ৺অݳṬ␫࣐䱤ᖡ .......236 10.3.1 ֯⭘box-shadow኎ᙗ ...............235 10.3 ሩⴂ␫࣐䱤ᖡ ..............................235 10.2.7 run-inⴂ⁑ර .............................233 10.2.6 list-itemⴂ⁑ර .........................232 Ⲵⴂ⁑ර ...................231ޣ10.2.5 㺘Ṭ⴨ 10.2.4 inline-tableⴂ⁑ර .....................230 10.2.3 inline-blockⴂ⁑ර ...................228 227....................................... 10.2.2 none٬ 10.2.1 є⿽ᴰสᵜⲴⴂ⁑ර ...............225 10.2 ⴂ⁑ර઼display኎ᙗ ................225 10.1.4 ᧗ࡦ㓴ԦⲴ┊ࣘᶑ ................... 224 10.1.3 ֯⭘clip኎ᙗ᧗ࡦ㻱࢚ ............. 223 10.1.2 ֯⭘clear኎ᙗᇎ⧠ᦒ㹼 ........... 222 10.1.1 䙊䗷float኎ᙗᇎ⧠ཊḿᐳተ ... 221 ኎ᙗ ............................. 219ޣ10.1 ᐳተ⴨ ㅢ 10 ㄖ ⴈ⁗ශфᐹቶ⴮ީኔᙝ ............ 218 9.4 ᵜㄐሿ㔃 ......................................... 217 ኎ᙗ ................................ 215ޣ9.3 䖞ᔃ⴨ ኎ᙗ ................................ 213ޣ9.2 ᇊս⴨ 9.1.2 CSS 3 ᯠ໎Ⲵresize኎ᙗ ............ 212 9.1.1 CSS 3 ᯠ໎Ⲵbox-sizing኎ᙗ ..... 210 ኎ᙗ ................................ 209ޣ9.1 བྷሿ⴨ ㅢ 9 ㄖ ཝቅȽᇐփȽ䖤ᔉ⴮ީኔᙝ ..... 208 8.4 ᵜㄐሿ㔃 ......................................... 207 ኎ᙗ ........................ 205ޣ8.3.2 ཆ㺕б⴨ ኎ᙗ ........................ 204ޣ8.3.1 ޵㺕б⴨ ኎ᙗ ................................ 204ޣ8.3 㺕б⴨ 8.2.3 CSS 3 ᨀ׋Ⲵമ⡷䗩Ṷ ............. 202 8.2.2 CSS 3 ᨀ׋Ⲵശ䀂䗩Ṷ ............. 200 8.2.1 CSS 3 ᨀ׋Ⲵ⑀ਈ䗩Ṷ ............. 199 ኎ᙗ ................................ 196ޣ8.2 䗩Ṷ⴨ 8.1.3 CSS 3 ᯠ໎Ⲵཊ㛼Ჟമ⡷ ......... 195 ኎ᙗ ...... 191ޣ8.1.2 CSS 3 ᯠ໎Ⲵ㛼Ჟ⴨ 8.1.1 㛼Ჟമ⡷പᇊ ............................ 190 ኎ᙗ ................................ 188ޣ8.1 㛼Ჟ⴨ ㅢ 8 ㄖ 㜂ᲥȽ䗯Ṽૂ㺛з⴮ީኔᙝ ..... 187 7.5 ᵜㄐሿ㔃 ......................................... 186 7.4.3 Ոݸ֯⭘ᇒᡧㄟᆇփ ................. 185 7.4.2 ᇊѹ㋇փǃᯌփᆇ .................... 184 7.4.1 ֯⭘ᴽ࣑ಘᆇփ ........................ 183 7.4 CSS 3 ᯠ໎Ⲵᴽ࣑ಘᆇփ .......... 182 7.3.2 䮯অ䇽઼URLൠ൰ᦒ㹼 ............. 181 7.3.1 ᮷ᵜ㠚ࣘᦒ㹼˖word-break ....... 180 ኎ᙗ ................................ 178ޣ7.3 ᮷ᵜ⴨ 7.2 CSS 3 ᭟ᤱⲴ仌㢢㺘⽪ᯩ⌅ ..... 176 ᆇփབྷሿ .................................... 175 7.1.3 ֯⭘font-size-adjust኎ᙗᗞ䈳 7.1.2 ␫࣐ཊњ䱤ᖡ ............................ 174 7.1.1 ␫࣐䱤ᖡ .................................... 173 gIXg ݳ㍐ ..........................................359 ㌫䇯䰞HTMLޣ14.3.2 ࡙⭘㢲⛩ 14.3.1 ṩᦞID䇯䰞HTMLݳ㍐ ...........358 14.3 䇯䰞HTMLݳ㍐ ..........................358 ㌫ ..........................................357ޣ 14.2.2 HTMLݳ㍐ѻ䰤ᑨ㿱Ⲵवਜ਼ ㌫ ..........................................356ޣ 14.2.1 HTMLݳ㍐ѻ䰤Ⲵ㔗᢯ 14.2 DOM⁑ර઼HTML᮷ẓ ...........356 14.1 DOM⁑රᾲ䘠 ............................355 ㅢ 14 ㄖ DOM㕌ぁ䈜䀙 .............................354 13.12 ᵜㄐሿ㔃 .....................................353 13.11.3 ֯⭘JSON䈝⌅ࡋᔪሩ䊑 ........350 13.11.2 ֯⭘Objectⴤ᧕ࡋᔪሩ䊑 ......348 ࡋᔪሩ䊑 .................................348 䭞ᆇ䈳⭘ᶴ䙐ಘޣ13.11.1 ֯⭘new 13.11 ࡋᔪሩ䊑 .....................................347 13.10.3 㔗᢯઼prototype ......................344 㚄ᮠ㓴 .....................343ޣ13.10.2 ሩ䊑઼ 13.10.1 䶒ੁሩ䊑Ⲵᾲᘥ .....................342 13.10 ֯⭘ሩ䊑 .....................................342 13.9.3 ৲ᮠ㊫ර ...................................340 13.9.2 オ৲ᮠ .......................................339 ৲ᮠՐ䙂 ...................................337 13.9.1 สᵜ㊫ර઼༽ਸ㊫රⲴ 13.9 ࠭ᮠⲴ৲ᮠ༴⨶ .........................337 13.8.7 ࠭ᮠⲴ⤜・ᙗ ...........................336 13.8.6 䈳⭘࠭ᮠⲴ 3 ⿽ᯩᔿ ...............334 13.8.5 ࠭ᮠⲴᇎֻ኎ᙗ઼㊫኎ᙗ .......332 13.8.4 ࠭ᮠǃᯩ⌅ǃሩ䊑઼㊫ ...........329 13.8.3 ተ䜘ਈ䟿઼ተ䜘࠭ᮠ ...............327 13.8.2 䙂ᖂ࠭ᮠ ...................................326 13.8.1 ᇊѹ࠭ᮠⲴ 3 ⿽ᯩᔿ ...............324 13.8 ࠭ᮠ ................................................323 13.7.6 break઼continue.........................321 13.7.5 for inᗚ⧟ ..................................320 13.7.4 forᗚ⧟ ......................................319 13.7.3 do whileᗚ⧟ .............................319 13.7.2 whileᗚ⧟ ................................. 318 13.7.1 ࠶᭟ .......................................... 316 13.7 ⍱〻᧗ࡦ ....................................... 315 13.6.5 with䈝ਕ ................................... 315 13.6.4 ᔲᑨᦅ᥹䈝ਕ .......................... 314 13.6.3 ᔲᑨᣋࠪ䈝ਕ .......................... 312 13.6.2 オ䈝ਕ ...................................... 312 13.6.1 䈝ਕඇ ...................................... 312 13.6 䈝ਕ .................................................311 13.5.10 typeof઼instanceof䘀㇇ㅖ ...... 310 13.5.9 void䘀㇇ㅖ ............................... 310 13.5.8 䙇ਧ䘀㇇ㅖ .............................. 309 13.5.7 йⴞ䘀㇇ㅖ .............................. 308 13.5.6 䙫䗁䘀㇇ㅖ .............................. 307 13.5.5 ∄䖳䘀㇇ㅖ .............................. 306 13.5.4 ࣐ᕪⲴ䍻٬䘀㇇ㅖ ................... 305 13.5.3 ս䘀㇇ㅖ .................................. 304 13.5.2 ㇇ᵟ䘀㇇ㅖ .............................. 302 13.5.1 䍻٬䘀㇇ㅖ .............................. 302 13.5 䘀㇇ㅖ ........................................... 301 13.4.3 ࠭ᮠ .......................................... 300 13.4.2 ᮠ㓴 .......................................... 299 13.4.1 ሩ䊑 .......................................... 298 13.4 ༽ਸ㊫ර ....................................... 298 13.3.5 ↓ࡉ㺘䗮ᔿ .............................. 296 13.3.4 undefined઼null ......................... 295 13.3.3 ᐳቄ㊫ර .................................. 294 13.3.2 ᆇㅖѢ㊫ර .............................. 291 13.3.1 ᮠ٬㊫ර .................................. 286 13.3 สᵜᮠᦞ㊫ර ............................. 286 13.2.3 ਈ䟿 .......................................... 283 13.2.2 ㊫ර䖜ᦒ .................................. 282 13.2.1 ᇊѹਈ䟿Ⲵᯩᔿ ...................... 281 13.2 ᮠᦞ㊫ර઼ਈ䟿 ......................... 280 JavaScript᮷Ԧ .................. 280ޕ13.1.2 ሬ 13.1.1 䘀㹼JavaScript........................... 280 13.1 JavaScriptㆰӻ ............................. 279 ㅢ 13 ㄖ JavaScript䈣⌋䈜䀙 .................. 278 ㅢп䜞࠼ gXg 17.1 ֯⭘Workerࡋᔪཊ㓯〻 ...........453 ㅢ 17 ㄖ ֵ⭞Workerࡑᔰཐ㓵ぁ ...........452 16.3 ᵜㄐሿ㔃 .......................................451 16.2.5 ⿫㓯ᓄ⭘ⲴһԦоⴁੜ ...........449 16.2.4 applicationCacheሩ䊑 ...............447 16.2.3 ࡔᯝ൘㓯⣦ᘱ ...........................446 16.2.2 ᶴᔪ⿫㓯ᓄ⭘ ...........................444 ४࡛ ...........................................444 16.2.1 ⿫㓯ᓄ⭘о⍿㿸ಘ㕃ᆈⲴ 16.2 ⿫㓯ᓄ⭘ .......................................444 16.1.4 ᆈۘ㔃ᶴॆᮠᦞ .......................441 ⮉䀰ᶯ .......................................439 16.1.3 สҾWeb StorageⲴᇒᡧㄟ ᮠᦞ ...........................................438 16.1.2 ֯⭘Storageᆈۘǃ䈫ਆ 16.1.1 Storage᧕ਓ ...............................437 16.1 Web Storage...................................436 ㅢ 16 ㄖ  ᵢ൦ᆎ۞ф⿱㓵ᓊ⭞ ...............435 15.4 ᵜㄐሿ㔃 .......................................433 15.3.5 ਆ⎸һԦⲴ唈䇔㹼Ѫ ...............432 15.3.4 䖜ਁһԦ ...................................431 15.3.3 һԦՐ᫝ ...................................426 15.3.2 䇯䰞һԦሩ䊑 ...........................423 15.3.1 㔁ᇊһԦ༴⨶ಘ .......................422 15.3 DOMⲴһԦ⁑ර ........................421 15.2.7 ᦅ㧧啐ḷһԦ ...........................419 15.2.6 ਆ⎸һԦ唈䇔㹼Ѫ ...................418 15.2.5 䟽ᇊੁһԦ ...............................416 15.2.4 һԦ߂⌑ ...................................414 15.2.3 䇯䰞һԦሩ䊑 ...........................410 㔁ᇊ ...........................................408 15.2.2 ֯⭘attachEventᯩ⌅ᢗ㹼 15.2.1 ֯⭘script for㔁ᇊ ....................408 ⁑ර ................................................407 15.2 Internet ExplorerⲴһԦ 15.1.5 ൘ԓ⸱ѝ䀖ਁһԦ ...................406 15.1.4 ֯⭘䘄എ٬᭩ਈ唈䇔㹼Ѫ .......405 䭞ᆇthis ......403ޣ15.1.3 һԦ༴⨶࠭ᮠ઼ 15.1.2 㔁ᇊDOMሩ䊑኎ᙗ ..................401 15.1.1 㔁ᇊHTMLݳ㍐኎ᙗ ............... 399 15.1 สᵜһԦ⁑ර ............................. 399 ㅢ 15 ㄖ ӁԬ༺⨼ᵰ࡬ .............................. 398 14.12 ᵜㄐሿ㔃 .................................... 397 14.11.2 ࠶᷀ሬ㡚㹼Ѫ ......................... 396 14.11.1 ࠶᷀ᰦ䰤ᙗ㜭 ......................... 394 ࠶᷀ ............................................. 394 14.11 HTML 5 ᯠ໎Ⲵ⍿㿸ಘ 14.10.2 䈫߉Cookie.............................. 393 14.10.1 ࣘᘱ亥䶒 ................................ 392 14.10 ֯⭘documentሩ䊑 .................. 391 14.9.3 ൘Googleൠമкᇊս ............... 389 14.9.2 㧧ਆൠ⨶ս㖞 .......................... 388 ኎ᙗ .......................................... 387 14.9.1 HTML 5 ᯠ໎Ⲵgeolocation 14.9 navigator઼ൠ⨶ս㖞 ................. 386 14.8.6 ֯⭘ᇊᰦಘ .............................. 384 ሩ䈍Ṷ ....... 383ޕ14.8.5 ⺞䇔ሩ䈍Ṷ઼䗃 14.8.4 ᕩࠪᯠデਓ .............................. 383 14.8.3 ᇒᡧᵪቿᒅؑ᚟ ...................... 382 14.8.2 䇯䰞亥䶒URL ........................... 381 14.8.1 䇯䰞শਢ .................................. 381 14.8 ֯⭘windowሩ䊑 ........................ 378 14.7 Ր㔏ⲴDHTML⁑ර .................. 376 14.6.3 ࡐ䲔㺘ṬⲴ㹼ᡆঅݳṬ ........... 375 䘹亩 .......................................... 374 14.6.2 ࡐ䲔ࡇ㺘Ṷǃл᣹㨌অⲴ 14.6.1 ࡐ䲔㢲⛩ .................................. 373 14.6 ࡐ䲔HTMLݳ㍐ .......................... 372 14.5.4 ࣘᘱ␫࣐㺘Ṭ޵ᇩ ................... 371 䘹亩 .......................................... 369 14.5.3 Ѫࡇ㺘Ṷǃл᣹㨌অ␫࣐ 14.5.2 ␫࣐㢲⛩ .................................. 369 14.5.1 ࡋᔪᡆ༽ࡦ㢲⛩ ...................... 367 14.5 ໎࣐HTMLݳ㍐ .......................... 367 14.4 ؞᭩HTMLݳ㍐ .......................... 365 14.3.5 䇯䰞㺘Ṭᆀݳ㍐ ...................... 364 䘹亩 .......................................... 363 14.3.4 䇯䰞ࡇ㺘Ṷǃл᣹㨌অⲴ 14.3.3 䇯䰞㺘অ᧗Ԧ .......................... 361 gXIg 19.5 ᵜㄐሿ㔃 .......................................500 19.4.5 ࡍ࿻ॆ⑨ᠿ⣦ᘱ .......................499 19.4.4 ༴⨶ᯩඇ᯻䖜 ...........................497 19.4.3 ༴⨶ᯩඇਣ〫 ...........................496 19.4.2 ༴⨶ᯩඇᐖ〫 ...........................494 19.4.1 ༴⨶ᯩඇᦹ㩭 ...........................490 19.4 ᇎ⧠⑨ᠿ䙫䗁 ..............................490 19.3.2 ࡍ࿻ॆ⑨ᠿ⣦ᘱᮠᦞ ............... 486 19.3.1 ᇊѹᮠᦞ⁑ර .......................... 485 㖇ᯟᯩඇⲴᮠᦞ⁑ර ........... 485״ 19.3 19.2.2 ᔰਁ⑨ᠿ⭼䶒㓴Ԧ ................... 483 19.2.1 ᔰਁ⭼䶒ᐳተ .......................... 482 19.2 ᔰਁ⑨ᠿ⭼䶒 ............................. 482 㖇ᯟᯩඇㆰӻ ......................... 481״ 19.1 ㅢ 19 ㄖ HTML 5 Ⲻ⯥⣸׺㖍ᯥᯯඍ .... 480 ㅢ഑䜞࠼ 18.3 ᵜㄐሿ㔃 .......................................479 㙺ཙ ...........................................475 18.2.3 สҾWebSocketⲴཊӪᇎᰦ 18.2.2 ֯⭘WebSocket䘋㹼䙊ؑ .........472 18.2.1 WebSocket᧕ਓ .........................470 䙊ؑ ................................................470 18.2 ֯⭘WebSocketоᴽ࣑ಘ 18.1.3 ਁ䘱༽ᵲ⎸᚟ ...........................467 18.1.2 䐘᮷ẓ⎸᚟Ր䙂⽪ֻ ...............465 18.1.1 postMessageоonmessage..........464 18.1 䐘᮷ẓ⎸᚟Ր䙂 ......................... 464 ㅢ 18 ㄖ ᇘᡭㄥ䙐ؗ ................................... 463 17.4 ᵜㄐሿ㔃 ....................................... 462 17.3.2 ᆀ㓯〻ѻ䰤ⲴᮠᦞӔᦒ ........... 461 17.3.1 ፼྇Worker㓯〻 ....................... 458 17.3 Worker㓯〻፼྇ ......................... 458 17.2.2 Worker㓯〻ѝਟ⭘ⲴAPI ......... 458 17.2.1 оWorker㓯〻Ӕᦒᮠᦞ ........... 456 Ӕᦒ ............................................. 455 17.2 оWorker㓯〻䘋㹼ᮠᦞ gXIIg ;ctx.lineWidth = 12 ctx.closePath(); ctx.arc(0 , 0 , 80 , 0 , Math.PI * 2 , true); // ␫࣐ശᕗ ctx.beginPath(); ctx.translate(280 , 160) // ᒣ〫඀ḷ㌫㔏 ctx.restore(); // ᚒ༽඀ḷ㌫㔏 ctx.fillRect(0 , 0 , 160 , 80); // ປݵањ⸙ᖒ ctx.fillStyle = lg; // 䇮㖞֯⭘㓯ᙗ⑀ਈ֌Ѫປݵ仌㢢 lg.addColorStop(0.9 , "#00f"); lg.addColorStop(0.5 , "#0f0"); lg.addColorStop(0.2 , "#f00"); // ੁ㓯ᙗ⑀ਈк␫࣐仌㢢 lg = ctx.createLinearGradient(0 , 0 , 160 , 80); // ࡋᔪ㓯ᙗ⑀ਈ ctx.translate(30 , 20); ctx.save(); var ctx = canvas.getContext('2d'); // 㧧ਆ൘ canvas к㔈മⲴ CanvasRenderingContext2D ሩ䊑 var canvas = document.getElementById('mc'); // 㧧ਆ canvas ݳ㍐ሩᓄⲴ DOM ሩ䊑 ctx.stroke(); ctx.strokeStyle = lg2; // 䇮㖞֯⭘㓯ᙗ⑀ਈ֌Ѫ䗩Ṷ仌㢢 lg2.addColorStop(0.8 , "#f0f"); lg2.addColorStop(0.4 , "#0ff"); lg2.addColorStop(0.1 , "#ff0"); // ੁ㓯ᙗ⑀ਈк␫࣐仌㢢 lg2 = ctx.createLinearGradient(-40 , -40 , 80 , 50); ޽⅑ࡋᔪ㓯ᙗ⑀ਈ // Z repeat-y˖ປݵᰦսമਚ൘ Y ᯩੁкᒣ䬪䟽༽DŽ Z repeat-x˖ປݵᰦսമਚ൘ X ᯩੁкᒣ䬪䟽༽DŽ Z repeat˖ປݵᰦսമ൘ XǃY єњᯩੁкᒣ䬪䟽༽DŽ䈕৲ᮠⲴ唈䇔٬ᱟ repeatDŽ ປݵⲴսമሩ䊑˗ㅜҼњ৲ᮠԓ㺘䟽༽仾Ṭˈ䈕৲ᮠ᧕ਇྲлࠐњ৲ᮠ٬DŽ ᯩ⌅ࡋᔪањսമປݵˈ䈕ᯩ⌅䘄എањ CanvasPattern ሩ䊑DŽ䈕ᯩ⌅Ⲵㅜањ৲ᮠԓ㺘֌Ѫ ˄1˅䈳⭘ CanvasRenderingContext2D Ⲵ createPattern(Image image,String repetitionStyle) HTML 5 Ѫսമປݵᨀ׋Ҷ CanvasPattern ሩ䊑ˈ֯⭘սമປݵⲴ↕僔ྲлDŽ 4.5.3 ⇜⦍⫺⏔ മ 4.18 ശᖒ⑀ਈ᭸᷌ 䭞ԓ⸱DŽ൘⍿㿸ಘѝ⍿㿸䈕亥䶒ˈሶਟԕⴻࡠྲമ 4.18 ᡰ⽪Ⲵ᭸᷌DŽ ޣк䶒〻ᒿѝ㋇փᆇԓ⸱ᱟࡋᔪǃ䇮㖞ശᖒ⑀ਈሩ䊑ˈᒦ֯⭘ശᖒ⑀ਈ֌Ѫປݵ仌㢢Ⲵ ctx.fill(); ctx.fillStyle = lg2; // 䇮㖞֯⭘ശᖒ⑀ਈ֌Ѫປݵ仌㢢 lg2.addColorStop(0.8 , "#f0f"); lg2.addColorStop(0.4 , "#0ff"); lg2.addColorStop(0.1 , "#ff0"); // ੁശᖒ⑀ਈк␫࣐仌㢢 lg2 = ctx.createRadialGradient(0, 0 , 5 , 0 , 0 , 80); // ޽⅑ࡋᔪശᖒ⑀ਈ ctx.lineWidth = 12; ctx.closePath(); ctx.arc(0 , 0 , 80 , 0 , Math.PI * 2 , true); // ␫࣐ശᕗ ctx.beginPath(); ctx.translate(280 , 160) // ᒣ〫඀ḷ㌫㔏 ctx.restore(); // ᚒ༽඀ḷ㌫㔏 ctx.fillRect(0 , 0 , 160 , 80); // ປݵањ⸙ᖒ ctx.fillStyle = lg; // 䇮㖞֯⭘ശᖒ⑀ਈ֌Ѫປݵ仌㢢 lg.addColorStop(0.9 , "#00f"); lg.addColorStop(0.5 , "#0f0"); lg.addColorStop(0.2 , "#f00"); 19 HTML 5 Ⲻ⯥⣸׺㖍ᯥᯯඍ ㅢ 19 ㄖ  Ṷ˅ˈк䶒〻ᒿ⽪㤳Ҷ䘉єњ⭘⌅DŽ൘⍿㿸ಘѝ⍿㿸䈕亥䶒ˈሶⴻࡠྲമ 4.19 ᡰ⽪Ⲵ᭸᷌DŽ ٬㔉 fillStyle ኎ᙗ˄֌Ѫࠐօᖒ⣦Ⲵປݵ˅ˈҏਟ䍻٬㔉 strokeStyle ኎ᙗ˄֌Ѫࠐօᖒ⣦Ⲵ䗩 䭞ԓ⸱ˈCanvasPattern ሩ䊑ᰒਟ䍻ޣк䶒〻ᒿѝ㋇փᆇԓ⸱ቡᱟࡋᔪᒦ֯⭘սമປݵⲴ } ctx.stroke(); ctx.strokeStyle = imgPattern; // 䇮㖞֯⭘սമປݵ֌Ѫ䗩Ṷ仌㢢 ctx.lineWidth = 12; ctx.closePath(); ctx.arc(0 , 0 , 80 , 0 , Math.PI * 2 , true); // ␫࣐ശᕗ ctx.beginPath(); ctx.translate(280 , 160) // ᒣ〫඀ḷ㌫㔏 ctx.restore(); // ᚒ༽඀ḷ㌫㔏 ctx.fillRect(0 , 0 , 160 , 80); // ປݵањ⸙ᖒ ctx.fillStyle = imgPattern; // 䇮㖞֯⭘սമປݵ֌Ѫປݵ仌㢢 imgPattern = ctx.createPattern(image, "repeat"); // ࡋᔪսമປݵ { image.onload = function() image.src = "wjc.gif"; var image = new Image(); ctx.translate(30 , 20); ctx.save(); var ctx = canvas.getContext('2d'); // 㧧ਆ൘ canvas к㔈മⲴ CanvasRenderingContext2D ሩ䊑 var canvas = document.getElementById('mc'); // 㧧ਆ canvas ݳ㍐ሩᓄⲴ DOM ሩ䊑 } ctx.restore(); ctx.drawImage(image , 124 , 20); // ↔↔ᰦ㔈ࡦⲴമ⡷ਚᴹ䐟ᖴ㾶ⴆⲴ䜘࠶᡽Պᱮ⽪ࠪᶕ ctx.clip(); // ࢚࠷䐟ᖴ ctx.closePath(); 䰝䐟ᖴޣ // ;(ctx.lineTo(200 , 130 // 䇙ശᕗ䘎᧕ࡠശᗳ ctx.arc(200 , 130 , 200 , 0 , dig * ++count , false); // ␫࣐а⇥ശᕗ ctx.beginPath(); // ᔰ࿻ࡋᔪ䐟ᖴ ctx.save(); ᆈᖃࡽⲴ㔈മ⣦ᘱ؍ // } ()var addRadial = function } setInterval("addRadial();" , 150); മ⡷ᮠᦞ᭮എ Canvas кDŽ൘⍿㿸ಘѝ⍿㿸䈕亥䶒ˈሶਟԕⴻࡠྲമ 4.21 ᡰ⽪Ⲵ᭸᷌DŽ ㍐Ⲵ䘿᰾ᓖ˗ㅜй㹼㋇փᆇԓ⸱ሶ؞᭩ਾⲴۿ⡷˗ㅜҼ㹼㋇փᆇԓ⸱䟷⭘ᗚ⧟׍⅑᭩ਈ⇿њ 䭞ԓ⸱ਚᴹ 3 㹼ˈަѝㅜа㹼㋇փᆇԓ⸱⭘Ҿ㧧ਆ Canvas кᤷᇊ४ฏⲴമޣк䶒〻ᒿⲴ } ctx.putImageData(imgData , 124 , 20); // ሶ㧧ਆⲴമ⡷ᮠᦞ᭮എ৫ } imgData.data[i + 3] = imgData.data[i + 3] * alpha; ㍐Ⲵ䘿᰾ᓖۿ// ᭩ਈ⇿њ { for (var i = 0 , len = imgData.data.length ; i < len ; i += 4 ) var imgData = ctx.getImageData(x , y , image.width , image.height); // ҏቡᱟ㧧ਆ㔈ࡦⲴമ⡷ᮠᦞ // 㧧ਆӾ xǃy ᔰ࿻ˈᇭѪ image.widthǃ儈Ѫ image.height Ⲵമ⡷ᮠᦞ ctx.drawImage(image , x , y); // 㔈ࡦമ⡷ { var drawImage = function(image , x , y , alpha) } drawImage(image , 124 , 20 , 0.4); // ⭘ᑖ䘿᰾ᓖ৲ᮠⲴᯩ⌅㔈ࡦമ⡷ { image.onload = function() image.src = "android.png"; var image = new Image(); var ctx = canvas.getContext('2d'); // 㧧ਆ൘ canvas к㔈മⲴ CanvasRenderingContext2D ሩ䊑 var canvas = document.getElementById('mc'); // 㧧ਆ canvas ݳ㍐ሩᓄⲴ DOM ሩ䊑 style="border:1px solid black"> മ⡷儈Ӟ 〻ᒿ␵অ˖codes\04\4.6\light.html ٬䜭᤹∄ֻ໎བྷDŽл䶒〻ᒿԓ⸱⽪㤳Ҷྲօሩമ⡷ᢗ㹼儈Ӟ༴⨶DŽ ㍐Ⲵ RǃGǃBۿ䲔↔ѻཆˈҏਟԕሩമ⡷ᢗ㹼儈Ӟ༴⨶DŽᡰ䉃儈Ӟˈቡᱟᢺമ⡷Ⲵ⇿њ മ 4.21 ᭩ਈ䘿᰾ᓖ᭸᷌ മ 4.22 儈Ӟ༴⨶᭸᷌ ሶਟԕⴻࡠྲമ 4.22 ᡰ⽪Ⲵമ⡷᭸᷌DŽ Ҷєᕐമ⡷ˈаᕐᱟ儈ӞѻࡽⲴ৏࿻മ⡷ˈаᕐᱟ儈ӞѻਾⲴമ⡷DŽ൘⍿㿸ಘѝ⍿㿸䈕亥䶒ˈ ሩമ⡷ᢗ㹼儈Ӟ༴⨶Ⲵᯩᔿо᭩ਈ䘿᰾ᓖⲴᯩᔿབྷ㠤⴨լˈ↔༴н޽䈖䘠DŽᵜ〻ᒿ㔈ࡦ 19 HTML 5 Ⲻ⯥⣸׺㖍ᯥᯯඍ ㅢ 19 ㄖ 
还剩21页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享pdf获得金币 ] 2 人已下载

下载pdf

pdf贡献者

qwegg

贡献于2014-10-29

下载需要 6 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf