ÎÄÖÐÌáµ½µÄMarkup£¬ÔÚÕâÀïÎÒ¼òµ¥µØÀí½âΪ(x)HTML±êÇ©£¬¼ò³Æ±êÇ©£¬ÒÔÏÂËù˵µÄ±êÇ©¶¼Ö¸Markup¡£
Ò²ÐíдHTML±êÇ©ÕæµÄÊÇÒ»¼þºÜ¼òµ¥µÄÊÂÇ飬ûÓÐʲô¼¼Êõº¬Á¿£»µ«ÊÇ£¬×Ðϸ¿´¿´ÏÂÃæÁгöÀ´µÄÕâЩ¶«Î÷£¬¶ÔÕÕÒ»ÏÂÄãд³öÀ´µÄ±êÇ©£¬¿ÉÒÔ×öµÄÊÂÇ黹ÊǺܶàµÄ¡£
±êÇ©ÊÇǰ̨´úÂëµØ»ù´¡£¬ËýºÍÉè¼Æ¡¢ÄÚÈÝ¡¢¿ÉÓÃÐÔ¡¢CSS¡¢DOM½Å±¾µÈÏ໥ӰÏ죬±êÇ©µÄÖÊÁ¿Ö±½ÓÓ°ÏìÍøÕ¾³ÌÐòµÄÔËÐÐЧÂʺÍά»¤³É±¾¡£Ò²ÐíÄãÈÏΪ×Ô¼ºµÄ±êÇ©Äܹ»ÈÃÒ³ÃæÐ§¹ûÔÚä¯ÀÀÆ÷Öб»³ÊÏÖ³öÀ´¾ÍÐÐÁË£¬µ«ÊÇÓÐЩ¿´²»¼ûµÄ¶«Î÷Ò²ÊDz»ÄܺöÊӵģ¬Ï£ÍûÒÔÏÂÌáµ½µÄ¶«Î÷ÄܰïÖúÄã¸üºÃµØÈÏʶ±êÇ©¡£¼òµ¥µØËµ£¬Ð´ºÃ±êÇ©ÊÇÒ»Ïî»ù´¡Í¶×Ê£¬Ëý¿ÉÒÔÈãº
ºóÐøµÄCSSÊéд¸ü¾«¼ò
DOM½Å±¾±àд¸ü¶ÀÁ¢
Ò³Ãæ¿ÉÓÃÐÔ¸üºÃ
ËÑË÷ÒýÇæ¸ü¶ÔÒ³ÃæÄÚÈݸüÓѺÃ
¼òµ¥ÖØÓÚÒ»ÇÐ
¼òµ¥µÄ±êÇ©´úÂ룬¿ÉÒÔÈôíÎóÎÞ´¦²ØÉí£¬¼õÉÙ´íÎó³öÏֵĻú»á£¬Ò²¸üÈÝÒ×±»±ðÈË»òÕßÄã×Ô¼º½â¶Á£¬Õâ¾ÍÊÇÎÒÃǵĵÚÒ»Ìõ£¬¼òµ¥¡£
1¡¢¼òµ¥¡¢¼òµ¥¡¢ÔÙ¼òµ¥
¼òµ¥£¬ÐèÒªÇå³ýÒ»Çв»Ç¡µ±ºÍ·Ç±ØÐëµÄ±êÇ©£ºÓÃÓÚ²¼¾ÖµÄ±í¸ñ¡¢font±êÇ©¡¢ÄÚǶµÄÑùʽÊôÐÔ¡¢ÄÚǶµÄJavaScript...
2¡¢²»ÒªÓñí¸ñÀ´²¼¾Ö
±í¸ñ²¼¾Ö²»ÀûÓÚºóÆÚά»¤£¬ÈÃÒ³Ãæ±êÇ©Òì³£Ó·Ö×£¬Ò²¸ø¿ÉÓÃÐÔ´øÀ´Âé·³£¬¸üȱÉÙ¾ßÌåµÄÓïÒå½á¹¹¡£
3¡¢±êÇ©ÍêÈ«ÓïÒ廯£¬ÅųýÓÃÓÚ×°ÊεÄÔªËØ
ÈÃÿһ¸ö±êÇ©¶¼ÄܺܺõظÅÀ¨ËýËù°üº¬µÄÄÚÈÝ£¬ÄÚǶµÄÑùʽÊôÐÔ¡¢font±êÇ©¡¢strikeºÍsÔªËØ¡¢ÓÃÓÚ×°ÊεÄͼÏñºÍÎÄ×Ö£¬ÕâЩûÓÐʵ¼Êº¬ÒåµÄÔªËØ¶¼ÒªÇå³ý¡£¶ÔÓÚÒ³ÃæÖеÄͼÏñ£¬³ýÕÕÆ¬¡¢Í¼±íµÈÓоßÌ庬ÒåµÄ£¬±ðµÄ×°ÊÎÐÔͼÏñ¿ÉÒÔÔÚÑùʽ±íÖÐ×÷Ϊ±³¾°ÏÔʾ¡£ÕâÓÐÀûÓÚ±íÏֺͽṹµÄÍêÈ«·ÖÀë¡£
4¡¢Ïû³ý±êÇ©ÖеĵĽű¾³ÌÐò£¬°üÀ¨Ê¼þ´¥·¢Óï¾ä
ÄÚǶµÄJavaScript£¬ÍêÈ«ÆÆ»µÁ˱êÇ©´úÂëµÄ½á¹¹ºÍÂ߼˳Ðò£¬ÈñêÇ©±äµÃÒì³£³ó¶ñ¡£ËýÖ±½Óµ¼Ö±êÇ©Óï¾äµÄ¿É¶ÁÐÔ½µµÍ£¬¸ø´íÎóµÄ×ÌÉúÌṩÁ˽ÇÂä¿Õ¼ä£¬±êÇ©ºÍ½Å±¾µÄ½»´íÒ²Ìá¸ßÁË¿ª·¢ºÍά»¤³É±¾¡£
°Ñ½Å±¾³ÌÐò·Åµ½Ò»¸öÍⲿµ¥¶ÀµÄÎļþÖУ¬Í¨¹ýgetElementByIdºÍgetElementsByTagNameµÈÀ´»ñµÃ¶ÔÏ󣬽ø¶ø´¥·¢¸÷ÖÖʼþ£¬½øÐвÙ×÷£¬ÕâÑùËýÃǾÍÄܹ»ÍêÈ«¶ÀÁ¢ÓÚ±êÇ©£¬×öµ½ÐÐΪºÍ½á¹¹µÄÍêÈ«·ÖÀë¡£
Òò´Ë£¬
±êÇ©±ØÐë¶ÀÁ¢²¢ÇÒ¼¯ÖÐ
5¡¢²»ÒªÔڽű¾Àï¼Ó±êÇ©
Õâ»áÊǺóÆÚµÄµ÷ÊÔºÍά»¤Ê±µÄ¶ñÃΡ£
6¡¢²»ÒªÔڽű¾Àï¼ÓÄÚÈÝ
Ò²ÐíÕâÓÐЩÄѶȣ¬µ«±ØÐë×î´óÏ޶ȵļõÉٽű¾ÖбêÇ©ºÍÄÚÈݵijöÏÖ¡£
½÷É÷´¦Àí±êÇ©ÓëCSS¡¢½Å±¾Ö®¼äµÄ½Ó¿Ú
µ±ÎÒÃǰѱíÏÖºÍÐÐΪ´Ó±êÇ©ÖзÖÀë³öÀ´ÒԺ󣬱êÇ©¾Í³ÉΪÁËÒ»¸öÊàŦ£¬°ÑCSSºÍDOMºÍ±êÇ©Á¬½ÓÆðÀ´£¬Õâʱºò£¬½Ó¿Ú³ÉΪÁ˹ؼü¡£ËäÈ»£¬ÎÒÃÇ¿ÉÒÔËæÒâ¸ø±êÇ©Ìí¼ÓIDsºÍclasses£¬À´µ½´ïÎÒÃǵÄÐèÇóµÄ£¬µ«ÊÇÕâÑù¿ÉÄÜ»á³öÏÖһЩÈßÓàµÄCSSºÍ´úÂ룬ҲΥ±³Á˼òµ¥µÄÔÔò£¬Òò´ËÈçºÎºÏÀíµØÊ¹ÓÃIDsºÍclasses³ÉΪÁËÒ»¸öÖØÒªµÄÎÊÌâ¡£
7¡¢±ÜÃâ²»±ØÒªµÄclassesºÍIDs
ÀýÈ磬ÎÒÃÇ¿ÉÒÔÓÃ#primary div h3À´´úÌæh3#name£¬ËäÈ»ÕâÑù¿ÉÄÜ»áÈÃCSS±È½Ï¸´ÔÓ£¬µ«±êÇ©ÊÇÒ»ÇеĻù´¡£¬È¨ºâ֮ϣ¬#primary div h3¼õÉÙÁËIDµÄʹÓ㬸ü¼ÓºÏÊÊ¡£ÎÒÃÇÊ×ÏÈ¿¼ÂǵÄÊÇ£¬¾¡Á¿±£³Ö½Ó¿Ú×îÉÙ»¯¡£
8¡¢ClassesºÍIDs±ØÐë¸ù¾ÝÄÚÈÝÀ´ÃüÃû¶ø²»ÊDZíÏÖ
±ÜÃâÃû³Æ±íʾµÄÊDZíÏÖµÄij¸ö·ç¸ñÔªËØ£¬Èçright_col£¬ÒòΪ£¬×îºóÎÒÃÇ¿ÉÄÜ»á°ÑÕⲿ·Ö·Åµ½×ó±ß£¬ÈÝÒ×Ôì³ÉºóÆÚ¸Ä°æÎ¬»¤µÄ»ìÂÒ¡£
9¡¢¸ù¾Ý¹¦ÄÜÀ´ÃüÃûClassesºÍIDs
ÈçÉÏÃæµÄright_col£¬¿ÉÒԸijÉsecond_nav_bar£¬ºÜºÃµÄ±íʾÁËÕâ¸öÄ£¿éµÄ¹¦ÄÜ£¬¶øºÍ²¼¾ÖÎ޹ء£
Á˽á±êÇ©´úÂëºÍÄãÐèÒªµÄÑ¡Ïî
10¡¢Êʵ±µØÊ¹ÓÃ΢¸ñʽ
΢¸ñʽÊÇÒ»×é±êÇ©ºÍClasses¡¢IDsÃüÃûµÄ¹Ì¶¨×éºÏ£¬Ò»¸öÄã×Ô¼º¶¨ÒåµÄ¹Ì¶¨µÄСģ¿é£¬ÀýÈçÒ»¸öÓÐÐÕÃû¡¢Ö°Îñ¡¢µØÖ·¡¢ÁªÏµ·½Ê½¡¢±¸×¢µÄÃûƬģ¿é¡£Àí½â΢¸ñʽ֮ºó£¬¿ÉÒÔºÜͳһµØ¿ìËÙµØÊéд±êÇ©Öг£³öÏÖµØÒ»Ð©ÔªËØ£¬°ÑËýÃǵ±×÷Äã×Ô¼ºµÄHTML±êÇ©¡£
11¡¢Á˽âËùÓеØHTML±êÇ©
ËäȻ΢¸ñʽÄܹ»½â¾öһЩÎÊÌ⣬µ«Ö»ÊÇÄã×Ô¼ºµÄһЩ±êÇ©ºÍÃüÃû£¬²¢²»ÊÊÓÃÓÚËùÓеĵط½£¬HTML±êÇ©²ÅÊÇÒ»ÇдúÂëµÄ»ù´¡£¬ÕÆÎÕ²¢ÄÜÕýȷʹÓÃHTML±êÇ©£¬ÊDz»¿É±ÜÃâµÄ¡£
12¡¢²»ÒªÓÃÒѾÌÔÌ»òÕßÓÐÕùÒé±êÇ©
ÖªµÀʲôµØ·½ÓÃʲô±êÇ©ÊDz»¹»µÄ£¬»¹ÒªÖªµÀʲôµØ·½²»ÄÜÓÃʲô±êÇ©£¬ÀýÈçfont±êÇ©£¬ÒѾ±»CSSÖеÄ×ÖÌåÑùʽȡ´ú¡£
13¡¢Í¨¹ýÓïÒå±êÇ©À´´«µ½Òâ˼¡£
ÀýÈçdelºÍstrong±êÇ©£¬ËýÃÇ´«´ï³öɾ³ýºÍ¼Ó´ÖµØÒâ˼¡£
14¡¢Á˽â¸÷¸öä¯ÀÀÆ÷ºÍËýÃÇÖ®¼äµÄ²îÒì
ÖªµÀÔÚʲôÇé¿öÏÂÓÃÄĸö±êÇ©ÊDz»¹»µÄ£¬»¹ÐèÒªÊìϤ¸÷¸öä¯ÀÀÆ÷¶Ô¸÷¸ö±êÇ©µÄÖ§³Ö£¬ÀýÈçIE6¾Í²»Ö§³ÖabbrºÍq±êÇ©,´ËʱÎÒÃÇÐèÒªÁíÍâѰÕÒ½â¾ö°ì·¨¡£
15¡¢Á˽âËùÓеØHTML±êÇ©ÊôÐÔ
Ðí¶àHTML±êÇ©¶¼²»Ö¹Ò»¸öÊôÐÔ£¬²»Í¬µÄÊôÐÔÓв»Í¬µÄÓÃ;£¬µ«ÊÇÏórel¡¢rev¡¢alt¡¢titleµÈÊôÐÔ£¬¾³£±»´íÎóµØÓ¦Óã¬ÕýȷʹÓñêÇ©ÊôÐÔ¿ÉÒÔ¸øÓû§Ìṩ¸ü¶àÓмÛÖµµÄÐÅÏ¢¡£
¹Ø×¢Ï¸½Ú
16¡¢ÈñêÇ©´úÂë±£³ÖÒ»¶¨µÄÂ߼˳Ðò
ϸ΢֮´¦¼ûÕæÕ£¬Ï¸½Ú·´Ó¦µÄÊÇÁîÒ»¸ö²ã´ÎµÄ¶«Î÷¡£ÏÈ¿´£¬±êÇ©´úÂëµÄ˳Ðò£¬ËäÈ»CSS¿ÉÒÔ¿ØÖÆÎÒÃÇ¿´µ½µÄÒ»ÇÐÊÓ¾õЧ¹û°üÀ¨ÄÚÈÝ˳Ðò£¬µ«ÊDZêÇ©´úÂëµÄ˳Ðò¶ÔÓÚÌá¸ß¿ÉÓÃÐԷdz£ÖØÒª¡£¶øÇÒÔÚ±êÇ©ÖÐÅÅÁкÃ˳Ðò±ÈÆðÓÃCSS¸ü¼òµ¥£¬»¹Äܹ»ÈÃÒ³ÃæÄÚÈݵÄÂß¼²ã´Î¸üÇåÎú¡£
17¡¢³¬Á´½ÓµÄÎÄ×Ö
ÈÃÄÚÈݳÉΪһ¸öÁ÷³©µÄÕûÌåÊÇÎÒÃǵÄÄ¿±ê£¬³¬Á´½ÓµÄÎÄ×ÖÊǹؼüµÄϸ½Ú¡£ ºÃµÄ³¬Á´½ÓµÄÎÄ×Ö£¬¿ÉÒÔÌá¸ß¿ÉÓÃÐÔ£¬ÄÜÓÃÐÔ£¬ËÑË÷ÒýÇæÓѺÃÐÔ¡£Òò´Ë»¨µãʱ¼ä£¬Èó¬Á´½ÓµÄÎÄ×Ö¸üºÃµØÃèÊöÄ¿±êÁ´½ÓÓÐÒæÎÞº¦¡£
18¡¢ÓÐÓõÄaltÌæ»»Îı¾
altÌæ»»Îı¾Ò²ÊÇÒ»¸öÖØÒªµÄϸ½Ú£¬altÌæ»»Îı¾²»½öÒªÃèÊöͼƬµÄÄÚÈÝ£¬»¹±ØÐë°ÑÕâЩÎÄ×ÖºÍÉÏÏÂÎÄÁªÏµÆðÀ´£¬¿¼ÂÇͼƬµÄ»·¾³¡£
19¡¢±êÌâhxÊǶÔÄÚÈݵÄÂß¼¸ÅÀ¨
ͨ¹ýÔĶÁ±êÌâÀ´Á˽áÒ³ÃæµÄ´ó¸ÅÒâ˼ºÍÄÚÈݵÄÂß¼½á¹¹£¬ÊÇÓ¦ÓñêÌâµÄÀíÏë¾³½ç¡£±êÌâ±êÇ©µÄÓïÒ廯ֻÊǵÚÒ»²½£¬ÈñêÌâÀ´¸ÅÀ¨ºÍËýÏà¹ØµÄÄÚÈÝ£¬Àí˳ÄÚÈݵÄÂ߼˳Ðò²ÅÊÇÎÒÃǵÄÄ¿±ê¡£
20¡¢×öºÃ±íµ¥
±íµ¥ÊÇÊéд±êǩʱÄܹ»×öµÄ×î¶àµÄ¶«Î÷£¬ÀûÓÃlabel¡¢fieldµÈ±êÇ©£¬¿ÉÒÔ¸ÄÉÆ±íµ¥µÄ¿ÉÓÃÐÔ¡£
21¡¢Óñí¸ñÀ´¸üºÃµØÕ¹Ê¾Êý¾Ý
ÎÒÃÇ·´¶ÔÓñí¸ñÀ´²¼¾Ö£¬µ«ÊÇ£¬ÔÚ´¦ÀíÊý¾ÝµØÊ±ºò£¬±í¸ñÈ´ÓµÓв»·²µØÄÜÁ¦¡£ÈçºÎÀûÓÃcaption¡¢tbody¡¢thead¡¢tfoot¡¢th¡¢colµÈ±êÇ©À´´¦ÀíÊý¾Ý²»ÊÇÒ»¸ö¼òµ¥µØÎÊÌâ¡£
ͨ¹ýÉÏÃæÕâЩŬÁ¦£¬Ð´³öÀ´µØ±êÇ©´úÂëʱÕû½àµÄ£¬Á÷³©µÄ£¬¾ßÓÐÓïÒåºÍÂß¼½á¹¹£¬Äܱí´ï¾ßÌåµÄÐÅÏ¢£¬¸üºÃµÄ¿ÉÓÃÐÔ£¬ÈÝÒ×±»½â¶ÁºÍά»¤£¬×îÖØÒªµÄÊÇÄÜ´ÓÖеĵ½Ò»ÖÖÌØ±ðµÄÏíÊÜ...
Æäʵ£¬Ð´HTML±êǩҲ¿ÉÒÔÊÇÓм¼Êõº¬Á¿µÄ
Markup as a Craft
Garrett Dimon
http://www.digital-web.com/articles/markup_as_craft/