µÚÒ»ÕÂ
1£®¼ò´ðÌâ
£¨1£©ÔÚWebÇ°¶Ë¿ª·¢·½Ã棬HTML5ÓëHTML4±È½Ï£¬Ö÷Òª½â¾öÄļ¸·½ÃæµÄÎÊÌ⣿ HTML5µÄºËÐÄÔÚÓÚ½â¾öµ±Ç°Web¿ª·¢ÖдæÔڵĸ÷ÖÖÎÊÌâ¡£
Ò»Êǽâ¾öWebä¯ÀÀÆ÷Ö®¼äµÄ¼æÈÝÐÔÎÊÌâ¡£ÔÚÒ»¸öä¯ÀÀÆ÷ÉÏÕý³£ÏÔʾµÄÍøÒ³£¨»òÔËÐеÄWebÓ¦ÓóÌÐò£©£¬ºÜ¿ÉÄÜÔÚÁíÒ»¸öä¯ÀÀÆ÷Éϲ»ÄÜÏÔʾ»òÏÔʾЧ¹û²»Ò»Ö£»
¶þÊÇÎĵµ½á¹¹ÃèÊöµÄÎÊÌâ¡£HTML4֮ǰµÄ¸÷°æ±¾ÖУ¬HTMLÎĵµµÄ½á¹¹Ò»°ãÓÃdivÔªËØÃèÊö£¬ÎĵµÔªËصĽṹº¬Òå²»¹»ÇåÎú£»
ÈýÊÇʹÓÃHTML+CSS+JavaScript¿ª·¢WebÓ¦ÓóÌÐòʱ£¬¿ª·¢¹¦ÄÜÊܵ½ºÜ´óµÄÏÞÖÆ£¬±ÈÈç±¾µØÊý¾Ý´æ´¢¹¦ÄÜ¡¢¶àÏ̷߳ÃÎÊ¡¢»ñÈ¡µØÀíλÖÃÐÅÏ¢µÈ£¬ÕâЩ¶¼Ó°ÏìÁËÓû§µÄÌåÑé¡£
£¨2£©HTML5ÐÂÔöµÄÈ«¾ÖÊôÐÔÓÐÄļ¸¸ö£¿ÃèÊöÆäÖ÷Òª¹¦ÄÜ¡£
HTML5ÐÂÔöµÄÈ«¾ÖÊôÐÔ£¬ÊÇÖ¸¿ÉÒÔ¶ÔÈκÎÔªËض¼Ê¹ÓõÄÊôÐÔ¡£¹¦ÄÜÈçÏÂËùʾ¡£
ÊôÐÔ accesskey class contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title ÃèÊö ¹æ¶¨·ÃÎÊÔªËصļüÅÌ¿ì½Ý¼ü ¹æ¶¨ÔªËصÄÀàÃû£¨ÓÃÓڹ涨Ñùʽ±íÖеÄÀࣩ¡£ ¹æ¶¨ÔªËصÄÉÏÏÂÎIJ˵¥¡£ ¹æ¶¨ÔªËØÖÐÄÚÈݵÄÎı¾·½Ïò¡£ ¹æ¶¨ÊÇ·ñÔÊÐíÓû§Í϶¯ÔªËØ¡£ ¹æ¶¨µ±±»Í϶¯µÄÏîÄ¿/Êý¾Ý±»ÍϷŵ½ÔªËØÖÐʱ»á·¢Éúʲô¡£ ¹æ¶¨¸ÃÔªËØÊÇÎ޹صġ£±»Òþ²ØµÄÔªËز»»áÏÔʾ¡£ ¹æ¶¨ÔªËصÄΨһ ID¡£ ¹æ¶¨ÔªËØÖÐÄÚÈݵÄÓïÑÔ´úÂë¡£ ¹æ¶¨ÊÇ·ñ±ØÐë¶ÔÔªËؽøÐÐƴд»òÓï·¨¼ì²é¡£ ¹æ¶¨ÔªËصÄÐÐÄÚÑùʽ¡£ ¹æ¶¨ÔªËØµÄ tab ¼ü¿ØÖÆ´ÎÐò¡£ ¹æ¶¨ÓйØÔªËصĶîÍâÐÅÏ¢¡£ HTML5ÐÂÔö ÊÇ ÊÇ ÊÇ ÊÇ ÊÇ ÊÇ contenteditable ¹æ¶¨ÊÇ·ñÔÊÐíÓû§±à¼ÄÚÈÝ¡£
£¨3£©HTML5ÊÇÏÂÒ»´úWebÓïÑԵĿª·¢¿ò¼Ü£¬µäÐÍÌØÐÔÓÐÄÄЩ£¿
HTML5´Ó±ê¼ÇÓïÑԵŦÄÜÌáÉýµ½ÏÂÒ»´úWebÓïÑԵĿª·¢¿ò¼Ü£¬Ëû¼¯³ÉÁËHTML+CSS3+JavaScriptµÄWebÓ¦Óÿò¼Ü¡£¡£
Á¼ºÃµÄÓïÒåÌØÐÔ¡£HTML5Ö§³Ö΢Êý¾ÝÓë΢¸ñʽ£¬Ôö¼ÓµÄ¸÷ÖÖÔªËظ³ÓèÍøÒ³¸üºÃµÄÒâÒåºÍ½á¹¹£¬ÊÊÓÚ¹¹½¨¶Ô³ÌÐò¡¢¶ÔÓû§¶¼¸üÓмÛÖµµÄÊý¾ÝÇý¶¯µÄWebÓ¦Óá£HTML5Ôö¼ÓÁËsectionÔªËØ¡¢articleÔªËØ¡¢navÔªËØÒÔ¼°asideÔªËصȽṹԪËØ¡£
Ç¿´óµÄ»æͼ¹¦ÄÜ¡£Í¨¹ýʹÓÃCanvas API¶¯Ì¬µØ»æÖƸ÷ÖÖЧ¹û¾«ÃÀµÄͼÐΣ¬Ò²¿ÉÒÔͨ¹ýSVG»æÖÆ¿ÉÉìËõʸÁ¿Í¼ÐΡ£
ÔöÇ¿µÄÒôÊÓƵ²¥·ÅºÍ¿ØÖƹ¦ÄÜ¡£ÐÂÔöÁËaudioºÍvideo ÔªËØ£¬¿ÉÒÔ²»ÒÀÀµÈκβå¼þ¶ø²¥·ÅÒôƵºÍÊÓƵ¡£
HTML5µÄÊý¾Ý´æ´¢ºÍÊý¾Ý´¦ÀíµÄ¹¦ÄÜ¡£
°üÀ¨ÀëÏßÓ¦Óá¢WebͨÐÅ¡¢±¾µØ´æ´¢ µÈ¹¦ÄÜ£¬HTML5»¹Ö§³ÖWebSQLºÍIndexedDBµÈÇáÁ¿¼¶Êý¾Ý¿â£¬ÔöÇ¿ÁËÊý¾Ý´æ´¢ºÍÊý¾Ý¼ìË÷ÄÜÁ¦¡£
»ñÈ¡µØÀíλÖÃÐÅÏ¢¡£HTML5ÐÂÔöÁËGeolocation API¹æ·¶£¬Ó¦ÓÃÓÚÒƶ¯É豸ÖеĵØÀí¶¨Î»¡£
Ìá¸ßÒ³ÃæÏìÓ¦µÄ¶àÏ̡߳£HTML5ÐÂÔöÁËWeb WorkersÀ´ÊµÏÖ¶àÏ̹߳¦ÄÜ¡£Í¨¹ýWeb Workers£¬½«ºÄʱ½Ï³¤µÄ´¦Àí½»¸øºǫ́Ị̈߳¬½µµÍWeb·þÎñµÄÏìӦʱ¼ä£¬ÓÐÀûÓÚÔöÇ¿Óû§ÌåÑé¡£
·½±ãÓû§´¦ÀíÎļþºÍ·ÃÎÊÎļþϵͳµÄÎļþÎļþAPI ¡£HTML5µÄÎļþAPI°üÀ¨FileReader APIºÍFile SystemAPI¡£
³ýÁËÉÏÃæ½éÉܵÄHTML5µÄÌØÐÔÖ®Í⣬HTML5»¹ÓйÜÀíä¯ÀÀÆ÷ÀúÊ·¼Ç¼µÄHistory API¡£HTML5¿ÉÒÔͨ¹ý½Å±¾ÓïÑÔÔÚä¯ÀÀÆ÷ÀúÊ·¼Ç¼ÖÐÌí¼ÓÏîÄ¿£¬ÒÔ¼°ÔÚ²»Ë¢ÐÂÒ³ÃæµÄÇ°ÌáÏÂÏÔʾµØ¸Ä±ää¯ÀÀÆ÷µØÖ·À¸ÖеÄURLµØÖ·£»¶øHTML5µÄÍϷŹ¦ÄÜ¿ÉÒÔʹÓÃmousedown¡¢mousemove¡¢mouseupµÈ·½·¨À´ÊµÏÖÍϷŲÙ×÷¡£
£¨4£©HTML5Îĵµ½á¹¹µÄHTML4֮ǰµÄÎĵµ½á¹¹ÓÐÄÄЩ±ä»¯£¿
ÄÚÈÝÀàÐÍ(ContentType) ¡£HTML5µÄÎļþÀ©Õ¹ÃûÓëÄÚÈÝÀàÐÍÓë֮ǰµÄHTML°æ±¾Ïàͬ¡£µ«. DOCTYPEÉùÃ÷ ×öÁ˼ò»¯£¬¸ÃÉùÃ÷ÊÊÓÃËùÓÐHTML¡£ÉùÃ÷ÈçÏ£º
ÔÚHTML5ÖУ¬Ö±½ÓÖ¸¶¨meta±ê¼ÇµÄcharsetÊôÐÔ¿ÉÒÔÉèÖÃ×Ö·û±àÂ룬ÈçÏÂËùʾ¡£
´ÓHTML5¿ªÊ¼£¬¶ÔÓÚHTMLÎļþµÄ×Ö·û±àÂëÍƼöʹÓÃUTF-8¡£
²Ù×÷ÌâÂÔ¡£
µÚ¶þÕÂ
1£®¼ò´ðÌâ
£¨1£©¼òÊöHTMLÎĵµµÄ»ù±¾½á¹¹ÔªËصŦÄÜ¡£
HTMLÎĵµµÄ»ù±¾½á¹¹ÔªËØ°üÀ¨¡¢
¡¢µÈ¡£ºÍ±ê¼Ç±íʾ¸ÃÎĵµÊÇHTMLÎĵµ¡£ÓÐʱ±ê¼Ç¿ÉÊ¡ÂÔ£¬ÒòΪ.html»ò.htmÎļþ±»Webä¯ÀÀÆ÷ĬÈÏΪÊÇHTMLÎĵµ¡£
ºÍ±ê¼Ç±íʾµÄÊÇÎĵµÍ·²¿ÐÅÏ¢£¬Ò»°ã°üÀ¨±êÌâºÍÖ÷ÌâÐÅÏ¢£¬¸Ã²¿·ÖÐÅÏ¢²»»áÏÔʾÔÚÒ³ÃæÕýÎÄÖС£Ò»Ð©CSSÑùʽ¶¨Òå¡¢JavaScript½Å±¾Ò²¿ÉÒԷŵ½ÎĵµµÄÍ·²¿¡£ ºÍ±ê¼ÇÊÇÍøÒ³µÄÖ÷ÌåÐÅÏ¢£¬ÊÇÏÔʾÔÚÒ³ÃæÉϵÄÄÚÈÝ£¬¸÷ÖÖÍøÒ³ÔªËØ£¬°üÀ¨ÎÄ×Ö¡¢±í¸ñºÍͼƬµÈÐÅÏ¢¶¼½«·Åµ½Õâ¸ö±ê¼ÇÄÚ¡£Èç¹ûΪbodyÔªËØÉèÖÃCSSÑùʽ£¬»¹¿ÉÒÔʵÏÖ±³¾°¡¢±ß¾à¡¢×ÖÌåµÈÑùʽµÄ±ä»¯¡££¨2£©HTML5Ôö¼ÓµÄarticle¡¢section¡¢nav¡¢asideµÈ½á¹¹ÔªËع¦ÄÜ¡£
HTML 5Ôö¼ÓÁËarticle¡¢section¡¢nav¡¢aside¡¢header¡¢footerµÈ²¼¾ÖÔªËØ£¬ÒÔʵÏÖ¸üºÃµÄÓïÒå½âÊÍ¡£µ«ÕâЩ½á¹¹ÔªËض¨ÒåµÄÊÇÔöÇ¿ÁËÓïÒåµÄdiv¿é£¬ÊÇHTMLÒ³Ãæ°´Âß¼½øÐзָîºóµÄµ¥Î»£¬²¢Ã»ÓÐÏÔʾЧ¹û
articleÔªËØ´ú±íÎĵµ¡¢Ò³Ãæ»òÓ¦ÓóÌÐòÖжÀÁ¢µÄ¡¢ÍêÕûµÄ¡¢¿ÉÒÔ¶À×Ô±»ÍⲿÒýÓõÄÄÚÈÝ¡£ ÀýÈ磬һƪ²©¿Í»ò±¨¿¯ÖеÄÎÄÕ¡¢Ò»ÆªÂÛ̳Ìû×Ó¡¢Ò»¶ÎÓû§ÆÀÂÛ»ò¶ÀÁ¢µÄ²å¼þµÈ¡£
sectionÔªËØÓÃÓÚ¶¨ÒåÎĵµÖеĽڡ£±ÈÈçÕ½ڡ¢Ò³Ã¼¡¢Ò³½Å»òÎĵµÖеÄÆäËü²¿·Ö¡£Ò»°ãÓÃÓڳɽڵÄÄÚÈÝ£¬»áÔÚÎĵµÁ÷ÖпªÊ¼Ò»¸öеĽڡ£
navÔªËØÊÇÒ»¸ö¿ÉÒÔÓÃ×÷Ò³Ãæµ¼º½µÄÁ´½Ó×飬ÆäÖеĵ¼º½ÔªËØÁ´½Óµ½ÆäËûÒ³Ãæ»òµ±Ç°Ò³ÃæµÄÆäËû²¿·Ö¡£
aside±êÇ©ÓÃÀ´³ÐÔØ·ÇÕýÎĵÄÄÚÈÝ£¬±»ÊÓΪҳÃæÀïÃæÒ»¸öµ¥¶ÀµÄ²¿·Ö¡£Ëü°üº¬µÄÄÚÈÝÓëÒ³ÃæµÄÖ÷ÒªÄÚÈÝÊÇ·Ö¿ªµÄ£¬¿ÉÒÔ±»É¾³ý£¬¶ø²»»áÓ°Ïìµ½ÍøÒ³µÄÄÚÈÝ¡¢Õ½ڻòÊÇÒ³ÃæËùÒª´«´ïµÄÐÅÏ¢¡£
headerÔªËØÊÇÒ»ÖÖ¾ßÓÐÒýµ¼ºÍµ¼º½×÷ÓõĽṹԪËØ£¬Í¨³£ÓÃÀ´·ÅÖÃÕû¸öÒ³Ãæ»òÒ³ÃæÄÚµÄÒ»¸öÄÚÈÝÇøÓòµÄ±êÌ⣬µ«Ò²¿ÉÒÔ°üÀ¨±í¸ñ¡¢logoͼƬµÈÄÚÈÝ¡£
footerÔªËØÒ»°ã×÷ΪÆäÉϲãÈÝÆ÷ÔªËصĽÅ×¢
£¨3£©HTMLΪʲôҪʹÓÃ×Ö·ûʵÌ壿Áоٳö5¸ö³£ÓõÄ×Ö·ûʵÌåÃû³Æ¡£
һЩ×Ö·ûÔÚ HTML ÖÐÓµÓÐÌØÊâµÄº¬Ò壬±ÈÈçСÓںŠ(<) ÓÃÓÚ¶¨Òå HTML ±ê¼ÇµÄ¿ªÊ¼¡£Èç¹ûÓû§Ï£Íûä¯ÀÀÆ÷ÕýÈ·µØÏÔʾÕâЩ×Ö·û£¬ÐèÒªÔÚ HTML Ô´ÂëÖвåÈë×Ö·ûʵÌå¡£³£¼ûµÄ×Ö·ûʵÌåÈçÏ¡£
ÏÔʾ½á¹û < > & \' ¡ì ? ? ¡Á ¡Â
²Ù×÷ÌâÂÔ¡£
ÃèÊö ¿Õ¸ñ СÓںŠ´óÓںŠºÍºÅ ÒýºÅ ƲºÅ ½Ú °æȨ ×¢²áÉÌ±ê ³ËºÅ ³ýºÅ ʵÌåÃû³Æ < > & " ' (IE²»Ö§³Ö) § © ® × ÷ µÚÈýÕÂ
1£®¼ò´ðÌâ
£¨1£©¶¨ÒåÁбíµÄ±ê¼ÇÓÐÄļ¸ÖÖ£¿¸÷ÖÖÁбí±ê¼ÇÖ®¼ä¶¼¿ÉÒÔǶÌ×ʹÓÃÂ𣿠HTMLÖеÄÁбíÔªËØÓÐ3ÖÖÐÎʽ¡ª¡ªÓÐÐòÁÐ±í¡¢ÎÞÐòÁбíºÍ×Ô¶¨ÒåÁÐ±í¡£
ÓÐÐòÁбíÓÉ
ÎÞÐòÁбíÓɳɶԵÄ
×Ô¶¨ÒåÁбíÒÔ
£¨2£©ÔÚHTMLÎĵµÖвåÈëͼÏñʹÓÃʲô±ê¼Ç£¿¸Ã±ê¼ÇÓÐÄÄЩ³£ÓÃÊôÐÔ£¿·Ö±ðʵÏÖʲô¹¦ÄÜ£¿ ʹÓñê¼Ç²åÈëͼÏñ£¬Óï·¨¸ñʽÈçÏ¡£
¸Ã±ê¼Çº¬Óжà¸öÊôÐÔ£¬¾ßÌåµÄÊôÐÔ¼°¹¦ÄÜÈç±íËùʾ¡£ÆäÖУ¬widthÊôÐÔ¡¢heightÊôÐÔ¡¢borderÊôÐÔ¡¢alignÊôÐÔÒѾ²»½¨ÒéʹÓ㬶øÊÇͨ¹ýCSSÀ´ÃèÊö¡£
ÊôÐÔÃû src title width/height border align ˵Ã÷ ͼÏñµØÖ· Ìí¼ÓͼÏñµÄÌæ´úÎÄ×Ö ÉèÖÃͼÏñ¿í¶È/¸ß¶È ÉèÖÃͼÏñ±ß¿ò ÉèÖÃͼÏñ¶ÔÆ뷽ʽ
£¨3£©¾ø¶Ô·¾¶¡¢Ïà¶Ô·¾¶ºÍ¸ù·¾¶µÄÇø±ðÊÇʲô£¿
¾ø¶Ô·¾¶Ö¸ÎļþµÄÍêÕû·¾¶£¬°üÀ¨Îļþ´«ÊäµÄÐÒéHTTP¡¢FTPµÈ£¬Ò»°ãÓÃÓÚÍøÕ¾µÄÍⲿÁ´½Ó£¬
Ïà¶Ô·¾¶ÊÇÖ¸Ïà¶ÔÓÚµ±Ç°ÎļþµÄ·¾¶£¬Ëü°üº¬ÁË´Óµ±Ç°ÎļþÖ¸ÏòÄ¿µÄÎļþµÄ·¾¶£¬ÊÊÓÃÓÚÍøÕ¾µÄÄÚ²¿Á´½Ó¡£
¸ù·¾¶µÄÉèÖÃÒÔ¡°/¡±¿ªÍ·£¬ºóÃæ½ô¸úÎļþ·¾¶£¬ÀýÈ磺/download/index.html¡£¸ù·¾¶µÄÉèÖÃÒ²ÊÊÓÃÓÚÄÚ²¿Á´½ÓµÄ½¨Á¢£¬Ò»°ãÇé¿öϲ»Ê¹Óøù·¾¶¡£¸ù·¾¶±ØÐëÔÚÅäÖúõķþÎñÆ÷»·¾³ÖвÅÄÜʹÓá£
£¨4£©ÈçºÎΪÍøÒ³Ìí¼Ó³¬Á´½Ó£¿¶¨Ò峬Á´½ÓʱÈçºÎÖ¸¶¨´ò¿ªÁ´½ÓÎļþµÄÄ¿±ê´°¿Ú£¿Óм¸ÖÖÄ¿±ê´°¿ÚÐÎʽ£¿
ÔÚHTMLÎļþÖУ¬Ê¹Óñê¼ÇÀ´¶¨Ò峬Á´½Ó£¬¾ßÌåÁ´½Ó¶ÔÏóͨ¹ý±ê¼ÇÖеÄhrefÊôÐÔÀ´ÉèÖ᣶¨Ò峬Á´½ÓµÄÓï·¨¸ñʽÈçÏ¡£
targetÊôÐÔÖ¸¶¨ÓÃÓÚ´ò¿ªÁ´½ÓµÄÄ¿±ê´°¿Ú£¬Ä¬ÈÏ·½Ê½ÊÇÔ´°¿Ú£¬ÆäÊôÐÔÖµÈç±íËùʾ¡£
ÊôÐÔÖµ parent blank self top ÔÚд°¿ÚÖдò¿ª ÔÚͬһ´°¿ÚÖдò¿ª£¬ºÍĬÈÏÖµÒ»Ö ÔÚä¯ÀÀÆ÷µÄÕû¸ö´°¿ÚÖдò¿ª£¬ºöÂÔÈκοò¼Ü ˵Ã÷ µ±Ç°´°¿ÚµÄÉϼ¶´°¿Ú£¬Ò»°ãÔÚ¿ò¼ÜÖÐʹÓÃ
2£®²Ù×÷Ìâ
£¨1£©Ê¹ÓÃÎÞÐòÁбí±ê¼Ç
ѧÉúÑ¡¿ÎÐÅÏ¢
ͼ3-23 ǶÌ×ÁбíЧ¹û
£¨2£©ÔÚÍøÒ³ÖвåÈëͼÏñ£¬²¢¶ÔͼÏñ×öÈçÏÂÉèÖá£
ͼÏñ¿íΪä¯ÀÀÆ÷´°¿ÚµÄÒ»°ë£¬¸ßΪä¯ÀÀÆ÷´°¿ÚµÄ1/4£»Í¼Ïñ±ß¿ò¿í5ÏñËØ£»Ìæ´úÎÄ×ÖΪ¡°Í¼Æ¬ÐÀÉÍ¡±£»Í¼ÏñÏÔʾÔÚÎÄ×Ö×ó²à¡£
£¨3£©Ê¹Óñí¸ñ¼°±í¸ñǶÌ×¼¼ÊõµÈ£¬¶ÔÍøÒ³×öÈçͼ2-43ËùʾµÄ²¼¾ÖÉè¼Æ¡£ ¢Ù ±í¸ñ¿í¶ÈΪ600ÏñËØ£»
¢Ú ¿ÉÒÔÏȺó²åÈë4¸ö2¡Á2µÄ±í¸ñ£¬½«Ã¿¸ö±í¸ñµÚÒ»ÐеÚÒ»¸öµ¥Ôª¸ñÉèÖÃΪ¿ç2ÊúÁУ¬Ò²¿ÉÒÔ¸ù¾Ýͼʾ£¬×Ô¶¨Òå±í¸ñ½á¹¹£»
¢Û ±êÌâµ¥Ôª¸ñµÄ±³¾°ÑÕÉ«¿É×Ô¶¨Òå¡£
ͼ3-24 ±í¸ñʾÀý