ÕâÊÇһƪ˼Ï룬¾Ñ飬ÀíÄÒÔ¼°¹ýÈ¥¼¸ÄêÖÐÊÔÑéµÄÀíÄîµÄ¼¯ºÏ¡£Ëü¸²¸ÇÁËHTMLÓïÒ壬ǰ¶Ë¼Ü¹¹µÄ×é¼þºÍ·½·¨£¬ÀàÃüÃûģʽ£¬ºÍHTTPÄÚÈÝѹËõ¡£
¡°ÎÒÃDz»»áֹͣ̽Ë÷
¶øÎÒÃÇÒ»ÇÐ̽Ë÷µÄÖÕµã
½«»áµ½´ïÎÒÃdzö·¢µÄµØ·½
ÓÚÊÇÎÒÃǵÚÒ»´ÎÈÏʶÁËÕâ¸öµØ·½¡£¡±
T.S. Eliot ¡ª ¡°Ð¡¼ª¶¡¡±
¹ØÓÚÓïÒå
ÓïÒåÊǶԱê¼ÇÓë·ûºÅÖ®¼äµÄ¹ØÏµ£¬ÒÔ¼°ËüÃǵĺ¬ÒåµÄÑо¿¡£ÔÚÓïÑÔѧÖУ¬ÕâÖ÷ÒªÊǶÔÓïÑÔÖеķûºÅ£¨Èçµ¥´Ê£¬¶ÌÓ»òÉùÒô£©ÒâÒåµÄÑо¿¡£ÔÚǰ¶Ëweb¿ª·¢µÄÉÏÏÂÎÄÖУ¬ÓïÒå´ó¶àÊÇÓëÔªËØ£¬ÊôÐÔ£¬ºÍÊôÐÔÖµ£¨°üÀ¨ÏñMicrodataÖ®ÀàµÄÀ©Õ¹£©µÄÒ»ÖÂÈÏͬÒâÒåÏà¹Ø¡£ÕâЩÈÏͬÒâÒåͨ³£Ôڹ淶Öб»¶¨Òå¸ÅÄËüÃÇ¿ÉÒÔ°ïÖú³ÌÐòÔ±£¨Ò²¾ÍÊÇÈËÀࣩ¸üºÃµÄÀí½âÍøÕ¾ÖÐÐÅÏ¢µÄ²»Í¬·½Ãæ¡£µ«ÊÇ£¬¼´Ê¹Êǹ淶»¯ÒÔºó£¬ÔªËØ£¬ÊôÐÔ£¬ºÍÊôÐÔÖµµÄÓïÒ廹ÊÇÊÜÖÆÓÚ¿ª·¢Õß¶ÔÆäµÄÊÊÓ¦ÓëÎüÊÕ¡£Õâ¿ÉÄܻᵼÖºóÐø¶ÔÕýʽÈÏͬÓïÒåµÄÐ޸ģ¨ÕâÒ²ÊÇÒ»¸öHTML Éè¼ÆÔÔò£©¡£
Çø±ð²»Í¬ÀàÐ͵ÄHTMLÓïÒå
±àд¡°ÓïÒåHTML¡±ÔÔòÊÇÏÖ´úרҵǰ¶Ë¿ª·¢µÄ»ù´¡Ö®Ò»¡£´ó²¿·ÖÓïÒ幨ÓÚ´æÔڵı¾ÖÊÊôÐÔ»òÊÇÆÚÍûµÄÄÚÈÝ£¨ÀýÈçh1element,langattribute,emailvalue of thetypeattribute, Microdata£©¡£¡¡¡¡
È»¶ø£¬²»ÊÇËùÓеÄÓïÒå¶¼ÒªÔ´ÓÚÄÚÈÝ¡£ClassÃû²»ÄÜÊÇ¡°·ÇÓïÒ塱£¨unsemantic£©µÄ¡£ÎÞÂÛʹÓÃʲôÃû×Ö£¬¶¼ÒªÓÐÒâÒå¡¢ÓÐÄ¿µÄ¡£ClassÃûµÄÓïÒå¿ÉÒÔºÍÄÇЩHTMLÔªËØ²»Ò»Ñù¡£ ÎÒÃÇ¿ÉÒÔͳһÀûÓá°È«¾Ö¡±µÄÓïÒåÃüÃûHTMLÔªËØ¡¢Ä³Ð©HTMLÊôÐÔ¡¢Î¢Êý¾ÝµÈµÈ£¬ÒÔÃâºÍ¡°±¾µØ¡±µÄÍøÕ¾/Ó¦ÓÃרÊôµÄ³£³£°üº¬ÔÚÊôÐÔÖµÄÚµÄÓïÒåÏà»ìÏý£¬±ÈÈçtheclassattribute¡£¡¡¡¡¾¡¹ÜÔÚHTML5 specification section on classes ÖØ¸´µÄÈÏΪ¡°×î¼ÑµÄʵ¼ù¡± ÈçÏ¡
¡×÷Õß¹ÄÀøÓà [class attribute] ÖµÀ´ÃèÊöÄÚÈݵÄÏÔʾ£¬¶ø²»ÊÇÃèÊöµÄÄÚÈÝËùÐèµÄ±íÏÖÖµ¡£
¡Ã»ÓÐÄÚÔÚµÄÀíÓÉÕâÑù×ö¡£ÊÂʵÉÏ£¬ËüÍùÍùÊÇ´óÐÍÍøÕ¾»òÓ¦ÓóÌÐò¹¤×÷ʱµÄÒ»¸öÕϰ¡£
-
ÄÚÈݲãÓïÒåÒѾµ£ÈÎHTMLÔªËØºÍÆäËûÊôÐÔ¡£
-
ÀàÃûºÜÉÙ»ò¸ù±¾Ã»Óи³ÓèÓïÒåÓÐÓõÄÐÅÏ¢¸ø¼ÆËã»ú»òä¯ÀÀ£¬³ý·ÇËüµÄһС²¿·Ö£¨¼ÆËã»ú¿É¶Á£©Ô¼¶¨µÄÃû×Ö - ΢¸ñʽµÄ²¿·Ö¡£
-
ÀàÃû³ÆµÄÖ÷ҪĿµÄÊÇΪCSSºÍJavaScriptÉèÖù³×Ó¡£ Èç¹ûÄã²»ÐèÒª¸øÄãµÄwebÎĵµÌí¼ÓÑÝʾºÍÐÐΪ£¬ÄÇôÄã¿ÉÄܲ»ÐèÒªÔÚÄãµÄHTMLÎļþÖÐʹÓÃclasses¡£
-
ÀàÃûÓ¦¸ÃÌṩÓÐÓõÄÐÅÏ¢¸ø¿ª·¢ÉÌ¡£µ±Äã¶ÁÒ»¸öDOM´úÂë¶ÎµÄʱºò£¬ÓÐÖúÓÚÁ˽âÒ»¸öÌØ¶¨µÄÀàµÄÃû×ÖÊÇÒª¸Éʲô£¬ÌرðÊÇÔÚǰÆÚÓë¶à¸ö¿ª·¢ÍŶӣ¬°üÀ¨·ÇHTML×é¼þ¹¤×÷µÄÈË¡£
ÒÔÕâÖַdz£¼òµ¥µÄÀý×Ó£º
¸´ÖÆ´úÂë
´ÓÉÏÃæµÄÀý×ÓºÜÃ÷ÏԵĿ´³ö£¬ÀàÃûnews²¢Ã»ÓиæËßÄãÈκÎÄÚÈÝ¡£Ëüû¸øÄã×é¼þµÄ×éÖ¯½á¹¹µÄÈκÎÐÅÏ¢£¬Ëü²»ÄÜÓÃÓÚ˵Ã÷ÄÚÈÝÊDz»ÊÇ¡°ÐÂÎÅ¡±¡£ÀàÃûµÄÓïÒåÓëÄÚÈݵÄÐÔÖÊÒѾ¼õÉٵĹØÁª£¬¼Ü¹¹¹¦ÄÜÒѾ±äС£¬»òÕßÒ²ºÜÈÝÒ×ÈÃÆäËû¿ª·¢ÕßʹÓá£
ÄÚÈÝÎ޹صÄÀàÃû
ÁíÒ»ÖÖ¿ÉÑ¡µÄ·½·¨ÊÇÔÚÉè¼ÆÖдÓÖØ¸´½á¹¹ºÍ¹¦ÄÜģʽÖÐÅÉÉúÀàÃûµÄÓïÒå¡£´ó¶àÊý¿ÉÖØÓõÄ×é¼þ¶¼´øÓÐÓëÄÚÈÝÎ޹صÄÀàÃû¡£¡¡¡¡
ÎÒÃDz»Ó¦¸Ãº¦ÅÂÔÚÇåÎúÃ÷È·µÄ²ã¼¶¼ä½¨Á¢ÁªÏµ£¬¶ø²»ÊÇÈÃÀàÃûÑϸñµØ·´Ó³Ìض¨µÄÄÚÈÝ¡£ÕâÑù×ö²»»áÈÃÀà±äµÃ¡°Ã»ÓÐÓïÒ塱£¬Ëü½ö½öÒâζ×ÅËüÃǵÄÓïÒå²»ÊÇ´ÓÄÚÈÝÖÐÅÉÉú³öÀ´µÄ¡£Èç¹û¸½¼ÓµÄHTMLÔªËØ°ïÖú´´½¨Â³°ôÐÔÇ¿£¬ÈáÈí¶È´ó£¬¿ÉÖØÓõÄ×é¼þ£¬ÎÒÃǾͲ»Òªº¦Å°ÑÕâÐ©ÔªËØ°üº¬½øÀ´¡£ÕâÑù×öÒ²²»»áÈÃHTML±äµÃûÓÐÓïÒ壬Ëü½ö½öÒâζ×ÅÄãʹÓÃÁ˸պó¬¹ý±ê¼ÇÄÚÈÝ×îСËùÐèµÄÔªËØ¡£
ǰ¶Ë¼Ü¹¹
×é¼þ/Ä£°å/ÃæÏò¶ÔÏó¼Ü¹¹µÄÉè¼Æ×ÚÖ¼¾ÍÊÇ¿ª·¢³öÒ»Ì×°üº¬Ò»ÏµÁв»Í¬ÀàÐ͵ĿÉÖØÓÃ×é¼þ¡£Ôڹ淶µÄÓ¦ÓóÌÐòÖУ¬¹ØÓÚÀàÃû³ÆµÄÓïÒ壬ÓÉʵÓÃÖ÷ÒåÕßÃÇÍÆ¶¯²¢·þÎñËûÃǵÄÖ÷ҪĿµÄ¡ª¡ªÌṩÓÐÒâÒåµÄ£¬Áé»îµÄ£¬¿ÉÖØÓõĹØÁª¹©¿ª·¢ÕßʹÓá£
¿ÉÖØÓü°¿É×éºÏµÄ×é¼þ
¿ÉÉìËõµÄHTML/CSS´óÌåÉϱØÐëÒÀÀµÓÚHTMLÄڵIJ㼶£¬ÕâÑù¾Í¿ÉÒÔ´´Ôì¿ÉÖØÓõÄ×é¼þ¡£Ò»¸öÁé»îÇÒ¿ÉÖØÓõÄ×é¼þ¼È²»ÄÜÒÀÀµ´æÔÚÓÚDOM Ê÷µÄij¸ö²¿·Ö£¬Ò²²»ÄÜÐèҪʹÓÃÌØ¶¨µÄÔªËØÀàÐÍ¡£ËüÓ¦¸ÃÄÜÊÊÓÃÓÚ²»Í¬µÄ±à¼Æ÷²¢ÇÒºÜÈÝÒ×Ö÷Ì廯¡£Èç¹û±ØÒªµÄ»°£¬¶àÓàµÄHTMLÔªËØ£¨³ýÁËÄÇЩÐèÒª±ê¼ÇÄÚÈݵÄÔªËØ£©¿ÉÒÔÓÃÀ´ÈÃ×é¼Û¸üǿ׳¡£Nicole SullivanËùνµÄýÌå¶ÔÏó¾ÍÊǺܺõÄÀý×Ó¡£¡¡
×é¼þ¿ÉÒÔºÜÈÝÒ×µÄ×éºÏÊÜÒæÓÚÀàÐÍÑ¡ÔñÆ÷µÄ·ÏÖ¹ºÍÖ§³Öclass¡£ÏÂÃæµÄʾÀýչʾÁËbtn×é¼þÓëuilist×é¼þµÄ¼òÒ××éºÏ¡£ÎÊÌâÊÇ£¬Ö¸¶¨.btn²»ÈçÖ¸¶¨.uilist£¨Õ⽫¸²¸Ç¹²ÏíÊôÐÔ£©£¬uilist×é¼þÐèÒªÒ»¸öê±ê¼Ç×÷Ϊ×ӽڵ㡣
-
.btn { /* styles */ }
-
.uilist { /* styles */ }
-
.uilist a { /* styles */ }
¸´ÖÆ´úÂë
ʹÓÃclassÀ´ÐÞÊÎ×ÓDOMÔªËØÊÇÌá¸ßÒ×ÓÃÐÔ¡¢Ê¹ÓÃuilistÀ´×éºÏÆäËû×é¼þµÄÒ»ÖÖ·½·¨¡£ËäÈ»ÕâÓÐÖúÓÚ¼õÉÙÖ¸¶¨¹æÔò£¬Ö÷ÒªµÄºÃ´¦ÊÇ¿ÉÒÔÈÃÄã¶ÔÈκÎÀàÐ͵Ä×Ó½ÚµãÓ¦Óýṹ»¯µÄÑùʽ¡£
-
.btn { /* styles */ }
-
.uilist { /* styles */ }
-
.uilist-item { /* styles */ }
¸´ÖÆ´úÂë
JavaScriptÖ¸¶¨class
ʹÓÃJavaScriptÖ¸¶¨classµÄÐÎʽµÄ¿ÉÒÔ½µµÍ·çÏÕ£º×é¼þµÄÖ÷Ìâ»ò½á¹¹µÄ¸Ä±äÊ±ÆÆ»µ¶ÔÆä¶ÔÓ¦µÄJavascript¡£Ò»ÖÖÓÐЧµÄ·½·¨ÊÇ£ºJavascript¹³×ÓֻʹÓÃjs-*µÄÌØ¶¨class£¬²¢ÇÒÒ»Ö±±£³Ö¡£
ÕâÑù×ö£¬Äã¿ÉÒÔ¼õÉÙ·çÏÕ£º×é¼þµÄ½á¹¹»òÖ÷Ìâ¸Ä±äʱ»áÎÞÒâÖÐÓ°ÏìÈκαØÐèµÄJavaScriptÐÐΪ»ò¸´ÔÓ¹¦ÄÜ¡£
×é¼þ±à¼Æ÷
×é¼þͨ³£¾ßÓÐÓë»ù´¡×é¼þÓÐЩÐí²î±ðµÄ¶àÖÖ²»Í¬Íâ¹Û£¬±ÈÈ磬һ¸ö²»Í¬ÑÕÉ«µÄ±³¾°»òÕ߱߿ò¡£ÓÐÁ½ÖÖÖ÷ÒªµÄģʽ±»ÓÃÀ´´´½¨ÕâЩ²»Í¬µÄ×é¼þ¡£ÎÒ³ÆËüÃÇΪ¡°µ¥ÀࡱģʽºÍ¡°¶àÀࡱģʽ¡£
¡°µ¥Àࡱģʽ
-
.btn, .btn-primary { /* button template styles */ }
-
.btn-primary { /* styles specific to save button */ }
¸´ÖÆ´úÂë
¡°¶àÀࡱģʽ
-
.btn { /* button template styles */ }
-
.btn-primary { /* styles specific to primary button */ }
-
-
Default
-
Login
¸´ÖÆ´úÂë
Èç¹ûÄãʹÓÃÁËÔ¤´¦ÀíÆ÷£¬¾Í¿ÉÒÔʹÓÃSassµÄ@extend¹¦ÄÜ£¬À´Ëõ¼õһЩʹÓá°µ¥ÀࡱģʽʱËùÉæ¼°µÄά»¤¹¤×÷¡£¿ÉÊÇ£¬¼´Ê¹ÓÐÔ¤´¦ÀíÆ÷µÄ°ïÖú£¬ÎÒÈÔÈ»ÇãÏòÓÚʹÓá°¶àÀࡱģʽ£¬ºÍÔÚHTMLÖÐÔö¼Ó±à¼Àà¡£
ÎÒ·¢ÏÖÕâÊÇÒ»¸ö¸ü¾ßÉìËõÐÔµÄģʽ¡£ÀýÈ磬Óûù´¡µÄbtn×é¼þ£¬¸øËüÔöÌí5ÖÖÀàÐ͵İ´Å¥ºÍ3ÖÖ¶îÍâµÄ³ß´ç¡£Ê¹Óá°¶àÀࡱģʽÄã×îÖÕ½«»ñµÃ9ÖÖ¿É»ìÓÃÆ¥ÅäµÄÀà¡£µ«Ê¹Óá°µ¥ÀࡱģʽÄ㽫ÓÐ24ÖÖÀà¡£
Èç¹ûȷʵÐèÒªµÄ»°£¬Ëü¸ø×é¼þ×öһЩÉÏÏÂÎĵÄÐÞ¸ÄÒ²¸üÈÝÒס£Äã»òÐí»áÏëÔÚÁíÒ»¸ö×é¼þÖУ¬¶ÔÈÎÒâÒ»¸öbtn×öһЩÍâ¹ÛµÄϸ΢µ÷Õû¡£
-
/* "multi-class" adjustment */
-
.thing .btn { /* adjustments */ }
-
-
/* "single-class" adjustment */
-
.thing .btn,
-
.thing .btn-primary,
-
.thing .btn-danger,
-
.thing .btn-etc { /* adjustments */ }
¸´ÖÆ´úÂë
¡°¶àÀࡱģʽÒâζ×ÅÔÚ×é¼þÖУ¬ÄãÖ»ÐèÒ»¸ö×é¼þÄÚµÄÑ¡ÔñÆ÷£¬À´±êʾbtn-ÑùÊ½ÔªËØµÄÈÎÒâÒ»ÖÖÀàÐÍ¡£¶ø¡°µ¥ÀࡱģʽÒâζ×ÅÄã±ØÐë³Ðµ£ÈκοÉÄܵİ´Å¥ÀàÐÍ£¬²¢ÇÒÔÚÒ»¸öа´Å¥±äÁ¿±»´´½¨µÄʱºòµ÷ÕûÑ¡Ôñ·û¡£
½á¹¹»¯µÄÀàÃû
ÔÚ´´½¨×é¼þ£¬»¹ÓÐÔÚ´Ë»ù´¡Éϵġ°Ö÷Ì⡱µÄʱºò£¬ÓÐЩÀà±»ÓÃ×÷×é¼þµÄ±ß½ç£¬ÓÐЩ±»ÓÃ×÷×é¼þµÄÐÞÊÎÆ÷£¬ÓÐЩ±»ÓÃÀ´½«Ò»Ð©DOM½ÚµãäÖȾµ½Ò»¸ö¸ü´óµÄ³éÏóµÄÕ¹ÏÖ×é¼þÖС£
ÎÒÃǺÜÄÑÍÆ¶Ï³öbtn£¨×é¼þ£©,btn-primary£¨ÐÞÊÎÆ÷£©,btn-group£¨×é¼þ£©ºÍbtn-group-item£¨×é¼þÖеÄ×Ó¶ÔÏó£©ÕâЩÑùʽ֮¼äµÄ¹ØÏµ£¬ÒòΪÕâЩÃüÃû²¢Ã»ÓÐÇå³þµÄ½ÒʾÕâЩÀàµÄÄ¿µÄ¡£Ã»ÓÐͳһµÄģʽ¡£¡¡¡¡
ÔçÔÚ2011Ä꣬ÎÒ¿ªÊ¼Ê¹ÓÃÃüÃûģʽ£¬ÕâÈÃÎҺܿìµÄÀí½âÁËDOMƬ¶Î½ÚµãÖ®¼äÍâÔڵĹØÏµ£¬Õâ±È³¢ÊÔͨ¹ýÀ´»ØÒƶ¯HTML,CSSºÍJSÎļþÀ´Æ´´ÕÕû¸öÍøÕ¾µÄ½á¹¹ÒªÀ´µÃ¿ìºÜ¶à¡£ÔÚÒªµãÖеıê¼ÇµÄ·½Ê½Ö÷ÒªÊÇÊÜBEMϵͳµÄÃüÃû·½Ê½ËùÓ°Ï죬µ«±»ÎҸıä³ÉÁËÎÒÈÏΪÈÝÒ×ʹÓõķ½Ê½¡£
×Ô´ÓÎÒ¿ªÊ¼Ð´ÕâÆªÎÄÕÂ,ÆäËûµÄ¼¸Ö§ÍŶӺͿò¼Ü£¨ÒëÕß¼Ó£º×÷Õߣ©²ÉÓÃÁËÕâÖÖ·½·¨¡£MontageJSÐÞ¸ÄÁË·ûºÅ±ä³ÉÁíÍâÒ»¸ö·ç¸ñ,ÎÒ¸üÆ«°®µÄ²¢ÇÒĿǰÕýʹÓõÄÊÇSUIT ¹¤¾ß°ü:
-
/* Utility */
-
.u-utilityName {}
-
-
/* State-utility */
-
.u-isStateName {}
-
-
/* Component */
-
.ComponentName {}
-
-
/* Component modifier */
-
.ComponentName--modifierName {}
-
-
/* Component descendant */
-
.ComponentName-descendant {}
-
-
/* Component descendant modifier */
-
.ComponentName-descendant--modifierName {}
-
-
/* Component state (scoped to component) */
-
.ComponentName.is-stateOfComponent {}
-
-
/* Component mixin (ancestor style dependencies) */
-
.with-ComponentName {}
¸´ÖÆ´úÂë
ÕâÖ»ÊÇÎҴ˿̷¢ÏÖÓÐÓõÄÒ»¸öÃüÃûģʽ£¬Ëü¿ÉÒÔ²ÉÈ¡ÈκÎÐÎʽ¡£µ«ºÃ´¦ÔÚÓÚÏû³ý ½ö½öÒÀÀµ(µ¥)Á¬×Ö·û»òÏ»®Ïß,»òÕßÍÕ·åʽ´óСдµÄÀàÃûµÄÆçÒå¡£
×¢ÒâÔÎļþ´óСºÍhttpѹËõ
·²ÌÖÂÛµ½Ä£¿é»¯ºÍ¿ÉÀ©Õ¹£¬css³ÉΪÓйØÎļþ´óСºÍÅòÕ͵ĹØ×¢ÐÔÎÊÌâ¡£Nicole SullivanµÄ̸»°Öо³£Ìá¼°µ½½ÚÊ¡Îļþ´óС£¨ºÍά»¤¸Ä½ø£©¡£¶ø½ÚÊ¡Îļþ´óСÊÇһЩ¹«Ë¾ÀýÈçfacebook£¬ÔÚ²ÉÓÃÕâÖÖÄ£¿é»¯ºÍ¿ÉÀ©Õ¹·½·¨Ê±Óöµ½µÄÎÊÌâ¡£½øÒ»²½µØ£¬ÎÒÏë·ÖÏí£¬ÔÚÔ¤´¦ÀíÆ÷ÉϱàдÇÒ´óÁ¿Ê¹ÓÃHTMLÔªËØÊ±ÎÒ¶Ô±àдÍêµÄÎļþ½øÐÐhttpѹËõµÄЧ¹û¡£
µ±Twitter BootstrapÎÊÊÀʱ£¬ÎÒ¸ÄдÁËÒѾ±àÒëµÄcss£¬Ê¹ÆäÄܸüºÃµÄ·´Ó³³öÎÒÊÇÈçºÎÊÖдÀ´½øÐÐÓïÒ廯£¬²¢ÇұȽÏǰºóÎļþµÄ´óС¡£ÔÚͬʱ¾«¼òÁËÕâÁ½¸öÎļþÖ®ºó£¬ÊÖдÀ´½øÐÐÓïÒ廯µÄcss±ÈÔ¤´¦ÀíÆ÷ÉÏдµÄҪС´óÔ¼10%¡£µ«Êǵ±Á½¸öÎļþ¶¼²ÉÓÃgzipѹËõÁËÖ®ºó£¬Ô¤´¦ÀíÆ÷ÉÏдµÄ±ÈÊÖд½øÐÐÓïÒ廯µÄcssҪС´óÔ¼5%¡£
´Ë´¦Í¹ÏÔÁËÔÚ¾¹ý HTTP ѹËõÖ®ºó½øÐÐÎļþ´óС¶Ô±ÈµÄÖØÒªÐÔ, ÒòΪѹËõºóµÄÎļþµÄ´óС²¢²»ÄÜÍêȫ˵Ã÷ÎÊÌâ. ÕâÒ²°µÊ¾ÁËÓоÑéµÄ CSS ¿ª·¢ÕßÔÚʹÓÃÔ¤´¦ÀíÆ÷µÄʱºòÎÞÐè¹ý¶à¾À½áÓÚÔÚ±àÒëÖ®ºóµÄ CSS Öлá³öÏÖµÄÒ»¶¨³Ì¶ÈµÄÖØ¸´, ÒòΪÔÚ HTTP ѹËõÖ®ºóËüµÄ³ß´ç»á×ÔÈ»µØ±äµÃ¸üС. ͨ¹ýÔ¤´¦ÀíÆ÷´¦Àí¹ýµÄ¸ü¾ßά»¤Ð﵀ CSS ´úÂëËù´øÀ´µÄÒæ´¦½«»áʤ¹ý¶ÔÔʼÎļþÒÔ¼°Ñ¹ËõÊä³öµÄ CSS ÎļþµÄ´óС»òÃÀѧÉϵĿ¼Á¿¡£¡¡
ÔÚÁíÒ»´Îʵ¼ùÖÐ, ÎÒ´ÓÒ»¸öÔÚÏßÍøÕ¾ÉÏÏÂÔØÁËÒ»·ÝÓÐ 60KB ´óСµÄ HTML Îĵµ, ´ÓÖÐɾ³ýÁËËùÓÐµÄ class ÊôÐÔ(ËüÃǹ¹³ÉÁËÐí¶à¿ÉÖØÓõÄ×é¼þ). ÕâÑù´¦ÀíÖ®ºó½«ÎĵµµÄ´óС¼õСµ½ÁË 25KB. µ±ÔʼÎĵµºÍ·ÖÀë¹ýµÄÎĵµ¸÷×Ô±» gzip ѹËõ¹ýºó, ËüÃǵijߴç±ä³ÉÁË 7.6KB ºÍ 6KB ¨C ½ö 1.6KB µÄÇø±ð. ¶ÔÓÚÄÇЩͨ¹ý×ÔÓÉʹÓà class ¶øÊµ¼Ê¶ÔÎļþ´óС²úÉúµÄÓ°ÏìÕæµÄ²»ÖµµÃÔÙÇ¿µ÷ºÍ·Å´óÁË¡£
ÎÒÔõÑùѧ»áÍ£Ö¹·³Äյġ
Ðí¶àÊìÁ·µÄ¿ª·¢ÈËÔ±µÄ¾Ñé,¾¹ý¶àÄê,ÒѾµ¼ÖÂÁË´ó¹æÄ£ÍøÕ¾ºÍÓ¦ÓóÌÐò¿ª·¢µÄ¾Þ´óת±ä¡£¾¡¹ÜÈç´Ë,¶ÔÄÇЩÔÚÒâʶÐÎ̬É϶ÏÄ̵ĸöÌåÀ´Ëµ,¡°ÓïÒ廯HTML¡±ÊÇָʹÓÃÄÚÈÝÅÉÉúÀàÃû(¼´Ê¹ÊÇÕâÑù,Ö»ÄÜ×÷Ϊ×îºóµÄÊÖ¶Î),ÔÚÄã±äµÃ¿ÉÒÔÃôÈñµØÒâʶµ½ÄǸö·½·¨²»ÇÐʵ¼ÊµÄÐÔÖÊ֮ǰ£¬Í¨³£ÐèÒªÄãÍê³ÉÒ»¸ö´óÐÍÓ¦ÓóÌÐò¡£Äã±ØÐë×¼±¸·ÅÆú¾ÉµÄ¹ÛÄî,¿´¿´Ìæ´úÆ·,ÉõÖÁÄã¿ÉÒÔÖØÊ°Ö®Ç°ÞðÆúµÄ·½·¨¡£
Ò»µ©Ä㿪ʼд×÷ÄãºÍÆäËûÈ˲»½öҪά»¤¶øÇÒÒª»ý¼«µü´úµÄ²»Æ½·²µÄÍøÕ¾ºÍÓ¦ÓóÌÐòʱ,ÄãºÜ¿ì¾Í»á·¢ÏÖ,¾¡¹ÜÄ㾡ÁË×î´óµÄŬÁ¦,ÄãµÄ´úÂ뿪ʼ±äµÃÔ½À´Ô½ÄÑά»¤¡£Ò»Ð©ÈËÌá³öÁËËûÃÇ×Ô¼ºµÄ·½·¨À´½â¾öÕâЩÎÊÌ⣬ÄãÖµµÃ»¨Ê±¼äȥ̽Ë÷ËûÃǵŤ×÷:ÄݿɵIJ©¿ÍºÍÃæÏò¶ÔÏóµÄCSSÏîÄ¿,ÇÇÄÉÉ˹Ŭ¿ËµÄ¿ÉÉìËõµÄCSSÄ£¿é»¯¼Ü¹¹,ºÍYandex¿ª·¢µÄ¿éÔªËØÐÞ¸ÄÆ÷·½·¨¡£
µ±ÄãÑ¡ÔñÓÃHTMLºÍCSSд×÷,²¢ÊÔͼ¼õÉÙÄ㻨ÔÚд×÷ºÍ±à¼CSSÉϵÄʱ¼ä,ÕâÉæ¼°µ½±ØÐë½ÓÊÜÈç¹ûÄãÏë¸Ä±äHTMLÔªËØµÄ·ç¸ñ£¬Äã±ØÐ뻨¸ü¶àµÄʱ¼äÐÞ¸ÄÔªËØµÄÀàÉÏ¡£ÕâÖ¤Ã÷ÊÇÏ൱ʵÓõÄ,ÎÞÂÛ¶Ôǰ¶Ë»¹ÊǺó¶Ë¿ª·¢ÈËÔ±¡ª¡ªÈκÎÈ˶¼¿ÉÒÔÖØÐÂÅÅÁÐÔ¤Ïȹ¹½¨µÄ¡°Àָ߻ýľ¡±;ÊÂʵ֤Ã÷,ûÓÐÈË¿ÉÒÔ·¢Ã÷cssÁ¶½ðÊõ¡£