×÷ÕߣºØýÃû ÎÄÕÂÀ´Ô´£º²»Ïê µã»÷Êý£º ÔÚÏßͶ¸å Ͷ¸åÖ¸ÄÏ  |
ÍøÒ³ÖÆ×÷WebjxÎÄÕ¼ò½é£ºÔÚ¶¨ÒåÁ˹淶ºó£¬ÔªËØ¡¢ÊôÐÔ£¨attribute£©¼°ÊôÐÔ£¨attribute£©ÖµµÄÓïÒ廹ҪÊܵ½¿ª·¢É̹²Í¬Ñ¡ÔñºÍʵÏÖµÄÓ°Ï죬Õâ¾Íµ¼ÖÂÁ˺óÆÚ¹æ·¶»¯µÄÔ¼¶¨ºÃµÄÓïÒåÒª½øÐÐÐ޸ģ¨ÕâÊÇHTMLÉè¼ÆµÄÒ»¸öÔÔò£©¡£ |
|
¹ØÓÚÓïÒå
ÓïÒåÊÇÑо¿·ûºÅºÍ±êÖ¾£¬ÒÔ¼°ËûÃÇËù´ú±íµÄÊÂÎïÖ®¼äµÄ¹ØÏµµÄ¡£ÔÚÓïÑÔѧÀÖ÷ÒªÊÇÑо¿·ûºÅËù±í´ïµÄÒâ˼£¨Èçµ¥´Ê¡¢¶ÌÓï»òÉùÒô£©¡£Webǰ¶Ë¿ª·¢ÖУ¬ÓïÒåÖ÷񻃾¼°µ½ÁËÔ¼¶¨ºÃµÄHTMLÔªËØ¡¢ÊôÐÔ£¨attribute£©¼°ÊôÐÔ£¨attribute£©ÖµµÄÒâÒ壨°üÀ¨Ò»Ð©À©Õ¹£¬Èç΢Êý¾Ý£©¡£ÕâЩԼ¶¨ºÃµÄÓïÒ壬ͨ³£ÊÇÕýʽµÄ¹æ·¶£¬¿ÉÒÔÓÃÀ´¸üºÃµÄÀí½âÒ»¸öÍøÕ¾µÄ¸÷·½ÃæÐÅÏ¢¡£µ«ÊÇ£¬ÔÚ¶¨ÒåÁ˹淶ºó£¬ÔªËØ¡¢ÊôÐÔ£¨attribute£©¼°ÊôÐÔ£¨attribute£©ÖµµÄÓïÒ廹ҪÊܵ½¿ª·¢É̹²Í¬Ñ¡ÔñºÍʵÏÖµÄÓ°Ï죬Õâ¾Íµ¼ÖÂÁ˺óÆÚ¹æ·¶»¯µÄÔ¼¶¨ºÃµÄÓïÒåÒª½øÐÐÐ޸ģ¨ÕâÊÇHTMLÉè¼ÆµÄÒ»¸öÔÔò£©¡£
Çø·Ö²»Í¬ÀàÐ͵ÄHTMLÓïÒå
±àд“¾ßÓÐÓïÒåµÄHTML”ÔÔòÊÇÏÖ´ú¡¢×¨ÒµÇ°¶Ë¿ª·¢µÄÒ»¸ö»ù´¡¡£´ó¶àÊýµÄÓïÒåºÍ×ÔÈ»´æÔڵĻòÔ¤ÆÚÄÚÈÝµÄ¶à·½ÃæÏà¹Ø£¨ÀýÈ磬h1ÔªËØ¡¢langÊôÐÔ(attribute)¡¢typeÊôÐÔ(attribute)µÄemailÖµ¡¢Î¢Êý¾Ý£©¡£
È»¶ø£¬²¢·ÇËùÓеÄÓïÒåÐèÒª¸ù¾ÝÄÚÈÝÑÜÉý³öÀ´µÄ¡£ÀàÃû²»ÄÜÊÇ“·ÇÓïÒ唵ġ£ÎÞÂÛʹÓÃʲôÃû×Ö£¬ËûÃǶ¼ÐèÒªÓÐÒâÒå¡¢ÓÐÄ¿µÄ¡£ÀàÃûÓïÒå¸úHTMLÓïÒ岻ͬ¡£ÎÒÃÇ¿ÉÒÔʹÓÃHTMLÔªËØ£¬Ä³Ð©HTMLÊôÐÔ£¨attributes£©¡¢Î¢Êý¾ÝµÈÔ¼¶¨µÄ“global”ÓïÒ壬ËûÃǵÄÄ¿µÄ²»»áºÍÄÇÐ©ÍøÕ¾¡¢Ìض¨µÄÓ¦ÓóÌÐòµÄ“local”ÓïÒå²úÉý»ìÏý¡£ÄÇЩ“local”µÄÓïÒåÊǰüº¬ÔÚÊôÐÔ£¨attribute£©ÖµÀïµÄ£¬ÈçclassÊôÐÔ£¨attribute£©¡£
¾¡¹ÜHTML5 specification section on classesÔٴμٶ¨“×î¼Ñʵ¼ù”ÊÇ£º
“¹ÄÀø×÷ÕßʹÓÃ[ÀàÊôÐÔ£¨attribute£©]ÖµÀ´ÃèÊöʵ¼ÊÄÚÈݵı¾ÖÊ£¬¶ø²»ÊÇÃèÊöÄÇЩËùÐèµÄÄÚÈÝ¡£”
±¾ÉíûÓÐÀíÓÉÕâÑù×öµÄ¡£Êµ¼ÊÉÏ£¬ÔÚ¿ª·¢´óÐÍÍøÕ¾»òÓ¦ÓóÌÐòʱ£¬ÕâÑù¾³£»áÊÇÒ»¸ö×è°¡£
- ÄÚÈݲãÓïÒå±¾À´¸£ÎñÓÚHTMLÔªËØºÍÆäËûÊôÐÔ(attribute)¡£
- ÀàÃû¸ø»úÆ÷»òÕß·ÃÎÊÕßÌṩºÜÉÙ»òûÓÐÓõÄÓïÒåÐÅÏ¢£¬³ý·ÇÊÇÉ̶¨ºÃµÄÃû×Ö£¨²¢ÇÒÊÇ»úÆ÷¿É¶ÁµÄ£©µÄһС²¿·Ö——΢¸ñʽ¡£
- ʹÓÃÀàÃûÖ÷ÒªµÄÄ¿µÄÊÇΪÁËʹÓÃCSSºÍjavascript¡£Èç¹ûÄã²»ÐèÒªÔÚÄãµÄwebÎĵµÀïÌí¼Ó±íÏÖºÍÐÐΪ£¬ÄÇôÔÚÄãµÄHTMLÀ¾Í¿ÉÄܲ»ÐèÒªÀàÃû¡£
- ÀàÃûÓ¦¸Ã´«´ïÓÐÓõÄÐÅÏ¢¸ø¿ª·¢Õß¡£µ±ÄãÔÚÔĶÁÒ»¸öDOM´úÂë¶ÎµÄʱºò£¬ËüÓÐÖúÓÚÀí½âÒ»¸öÌØ¶¨µÄÀàÃûÊÇ×öʲôµÄ£¬ÌرðÊÇÔÚ¶à¸ö¿ª·¢ÕßµÄÍŶÓÀǰ¶Ë¹¤×÷Õß²¢²»ÊÇΨһ¿ª·¢HTML×é¼þµÄ¡£
¿´Ò»¸ö·Ç³£Ð¡µÄÀý×Ó£º
?
1
2
3
4
|
<div class="news">
<h2>News</h2>
[news content]
</div>
|
ÕâÀïµÄÀàÃû“news”²»»á¸æËßÄãÈκÎÐÅÏ¢£¬´ÓÄÚÈÝÉÏ¿´£¬Ëü±¾Éí¾Í²»ÊǺÜÃ÷ÏÔ¡£¹ØÓÚÕâ¸ö×é¼þµÄ×ÜÌå½á¹¹Ã»ÓиøÄãÌṩÐÅÏ¢£¬Ëü²»Äܹ»ÓÃÓÚ·Ç“news”µÄÄÚÈÝ¡£ÊÔ׎«ÄãµÄÀàÃûÓïÒåºÍʵ¼ÊµÄÄÚÈݽôÃܽáºÍ£¬»á½µµÍ¼Ü¹¹¿ÉÀ©Õ¹ÐÔµÄÄÜÁ¦ºÍ±»ÆäËû¿ª·¢ÕßʹÓõÄÒ×ÓÃÐÔ¡£
ÄÚÈݶÀÁ¢µÄÀàÃû
ÔÚÒ»¸öÉè¼ÆÀÁíÒ»ÖÖ·½·¨ÊǸù¾ÝÖØ¸´½á¹¹ºÍ¹¦ÄÜģʽÑÜÉýÀàÃûÓïÒå¡£¸´ÓÃÐÔ×î¸ßµÄ×é¼þÊÇÄÇЩÄÚÈݶÀÁ¢µÄÀàÃû¡£
ÎÒÃDz»Ó¦¸Ãµ£ÐIJãÓë²ãÖ®¼äµÄÁ¬½ÓÊÇ·ñÇåÎúÃ÷È·£¬Ó¦¸Ãµ£ÐÄÄÇЩ·´Ó³¾ßÌåÄÚÈݵÄÀàÃû¡£ÕâÑù×ö²¢²»ÊÇÒâζ×ÅÀàÃû“ÎÞÓïÒ唣¬Ëü½ö½öÒâζ×ÅÕâЩÀàÃûµÄÓïÒå²»ÊǸù¾ÝÄÚÈÝÑÜÉý³öÀ´µÄ¡£Èç¹ûһЩ¶îÍâµÄHTMLÔªËØÓÐÖúÓÚ´´Ôì¸üÇ¿´óµÄ¡¢Áé»îµÄ¡¢¿ÉÖØÓõÄ×é¼þ£¬ÎÒÃǾͲ»½éÒâʹÓöîÍâµÄHTMLÔªËØ£¬ÕâÖ»ÊÇÒâζ×ÅÄãʹÓÃÁ˸ü¶àµÄÔªËØÀ´±ê¼ÇÄÚÈÝ¡£
ǰ¶Ë¼Ü¹¹
Ò»¸ö×é¼þ¡¢Ä£°æ¡¢ÃæÏò¶ÔÏóµÄ¼Ü¹¹µÄÄ¿µÄÊÇÄܹ»¿ª·¢Ò»Ð©¿ÉÖØÓõÄ×é¼þ£¬ÕâЩ×é¼þ°üº¬ÁËһϵÁв»Í¬µÄÄÚÈÝÀàÐÍ¡£ÀàÃûÓïÒåÔÚ´óÐÍÓ¦ÓóÌÐòÀïµÄÖØÒªÐÔÔÚÓÚËüÊÇÓÉʵÓÃÐÔÑÜÉý³öÀ´²¢ÇҺܺõĸ£ÎñÓÚÕâ¸ö×é¼þµÄÖ÷ҪĿµÄ-Ϊ¿ª·¢ÈËÔ±ÌṩÓÐÒâÒ壬Áé»î£¬¿É¸´ÓõıíÏÖ»òÐÐΪÐԵĽӿڣ¬ÒÔ±ãʹÓá£
¿É¸´ÓᢿÉ×éºÍµÄ×é¼þ
×ܵÄÀ´Ëµ£¬¿ÉÀ©Õ¹µÄHTML»òCSS±ØÐëÒÀÀµHTMLÀïµÄÀàÀ´´´½¨¿É¸´ÓõÄ×é¼þ¡£Ò»¸öÁé»îµÄ¡¢¿É¸´ÓõÄ×é¼þ¼È²»ÊÇÒÀÀµÓÚ´æÔÚµÄDOMÊ÷ÀïµÄij¸ö²¿·Ö£¬Ò²²»ÐèҪʹÓÃÌØ¶¨µÄÔªËØÀàÐÍ¡£ËüÓ¦¸ÃÄܹ»ÊÊÓ¦²»Í¬µÄÈÝÆ÷£¬²¢ÇÒ¿ÉÒÔÈÝÒ׵ļÓÉÏÑùʽ¡£Èç¹ûÓбØÒª£¬Ìí¼Ó¶îÍâµÄHTMLÔªËØ£¨³ýÁËÄÇЩ½öÓÃÀ´±ê¼ÇÄÚÈݵÄHTMLÔªËØ£©¿ÉÒÔÓÃÀ´´´½¨¸üÇ¿½¡µÄ×é¼þ¡£Ò»¸öºÜºÃµÄÀý×Ó¾ÍÊÇNicole SullivanËù˵µÄµÄmedia object.
Ò×ÓÚ×éºÍµÄ×é¼þµÃÒæÓÚʹÓÃÑ¡ÔñÆ÷ÀàÐÍ£¬¶ø±ÜÃâʹÓÃÀàÐÍÑ¡ÔñÆ÷¡£ÏÂÃæµÄÀý×Ó½µµÍÁËbtn²¿·ÖºÍuilist²¿·ÖÒ××éºÍÐÔ¡£ÎÊÌâÔÚÓÚ.btnµÄÓÈÏȼ¶±È.uilist a£¨»á¸²¸ÇÖØ¸´µÄÊôÐÔÑùʽ£©µÄÓÈÏȼ¶µÍ£¬²¢ÇÒuilistÐèÒªa×÷Ϊ×Ó½áµã¡£
?
1
2
3
|
.btn { /* styles */ }
.uilist { /* styles */ }
.uilist a { /* styles */ }
|
?
1
2
3
4
5
|
<nav class="uilist">
<a href="#">Home</a>
<a href="#">About</a>
<a class="btn" href="#">Login</a>
</nav>
|
Ìá¸ßÒ»¸ö×é¼þ²¿·ÖºÍuilist²¿·ÖµÄÒ××éºÍÐÔµÄÒ»¸ö·½·¨ÊÇʹÓÃÀà¸ø×ÓDOMÔªËØÌí¼ÓÑùʽ¡£ÕâÑù¿ÉÒÔ¼õÉÙÑùʽ¹æÔòµÄÌØÐÔ£¬µ«ÊÇ×î´óµÄºÃ´¦¾ÍÊÇÔÊÐíÄ㽫½á¹¹ÉϵÄÑùʽӦÓõ½ÈκÎÀàÐ͵Ä×Ó½ÚµãÉÏ¡£
?
1
2
3
|
.btn { /* styles */ }
.uilist { /* styles */ }
.uilist-item { /* styles */ }
|
?
1
2
3
4
5
6
7
|
<nav class="uilist">
<a class="uilist-item" href="#">Home</a>
<a class="uilist-item" href="#">About</a>
<span class="uilist-item">
<a class="btn" href="#">Login</a>
</span>
</nav>
|
JavascriptÌØ¶¨Àà
ʹÓÃjavascriptÌØ¶¨ÀàÓÐÖúÓÚ½µµÍÒò×é¼þÖ÷ÌâÑùʽ»ò½á¹¹¸Ä±ä¶øµ¼ÖÂÔÀ´Ó¦ÓÃÔÚÉÏÃæµÄjavascript²»Æð×÷ÓõķçÏÕ¡£ÎÒ·¢ÏÖÒ»¸ö·½·¨ÊÇʹÓÃijЩֻ¸øjavascriptʹÓõÄÀà——js-*——²»¸øÕâÐ©ÌØÊâÀàÌí¼ÓÈκÎÑùʽ³ÊÏÖ¡£
?
1
|
<a href="/login" class="btn btn-primary js-login"></a>
|
¸Ä±ä×é¼þµÄ½á¹¹»òÖ÷Ì⽫ÎÞÒâÖÐÓ°ÏìÈκÎËùÐèµÄJavaScriptÐÐΪºÍ¸´ÔӵŦÄÜ£¬Ê¹ÓÃÕâÖÖ·½·¨£¬Äã¿ÉÒÔ¼õÉÙÕâÖÖÎÞÒâÖеÄÇé¿ö·¢Éý¡£
×é¼þÐÞÊηû
×é¼þ¾³£»áÓÐЩ±ä»¯£¬ºÍ»ù×é¼þµÄ³ÊÏÖÓÐÉÔ΢µÄ²»Í¬£¬È粻ͬÑÕÉ«±³¾°»òÕ߱߿ò¡£ÓÐÁ½ÖÖģʽ¿ÉÒÔʹÓÃÀ´´ïµ½ÕâЩ±ä»¯¡£ÎÒ°ÑÕâÁ½ÖÖģʽ³ÆÎª“µ¥Àà”ģʽºÍ“¶àÀà”ģʽ¡£
“µ¥Àà”ģʽ
?
1
2
|
.btn, .btn-primary { /* button template styles */ }
.btn-primary { /* styles specific to save button */ }
|
?
1
2
|
<button class="btn">Default</button>
<button class="btn-primary">Login</button>
|
“¶àÀà”ģʽ
?
1
2
|
.btn { /* button template styles */ }
.btn-primary { /* styles specific to primary button */ }
|
?
1
2
|
<button class="btn">Default</button>
<button class="btn btn-primary">Login</button>
|
ÔÚʹÓÓµ¥Àà”ģʽʱ£¬Èç¹ûÄãʹÓÃÁËÔ¤´¦ÀíÆ÷£¬Äã¿ÉÄÜʹÓÃSassµÄ@extend¹¦ÄܼõÉÙһЩά»¤µÄ¹¤×÷¡£È»¶ø£¬¼´Ê¹ÓÐÔ¤´¦ÀíÆ÷µÄ°ïÖú£¬ÎÒÓÈÏÈÑ¡ÔñµÄÊÇʹÓÓ¶àÀà”ģʽ£¬ÔÚHTMLÀïÌí¼ÓÀàÐÞÊηû¡£
ÎÒ·¢ÏÖ“¶àÀà”ģʽÊÇÒ»¸ö¸ü¾ßÓÐÀ©Õ¹ÐÔµÄģʽ¡£ÀýÈ磬ʹÓûùÓÚbtnµÄ×é¼þ£¬½øÒ»²½Ìí¼ÓÁË5ÖÖ°´Å¥ÀàÐͺÍ3ÖÖ°´Å¥³ß´ç¡£Ê¹ÓÓ¶àÀà”ģʽ£¬×îÖÕÄãÐèÒª9¸öÀ࣬ͨ¹ý»ìºÍÆ¥Åä´ïµ½Ð§¹û¡£µ«ÊÇʹÓÓµ¥Àà”ģʽÄãÐèÒª24¸öÀà¡£
Èç¹ûÐèÒª£¬Ê¹ÓÃ×é¼þÐÞÊηûÒ²±È½ÏÈÝÒ׸ù¾ÝÉÏÏÂÎĵ÷ÕûÒ»¸ö×é¼þ¡£±ÈÈçÄã¿ÉÄÜÔÚÁíÒ»¸ö×é¼þÀï¶ÔbtnµÄÍâ¹ÛÒª×öЩϸ΢µÄµ÷Õû£¬¿ÉÒÔÕâô×ö£º
?
1
2
3
4
5
6
7
8
|
/* "multi-class" adjustment */
.thing .btn { /* adjustments */ }
/* "single-class" adjustment */
.thing .btn,
.thing .btn-primary,
.thing .btn-danger,
.thing .btn-etc { /* adjustments */ }
|
“¶àÀà”ģʽÒâζ×ÅÄãÖ»ÐèÒªÒ»¸öµ¥¶ÀµÄÄÚ²¿×é¼þÑ¡ÔñÆ÷ȥƥÅäÈÎÒâÀàÐ͵Äbtn——ÔÚÕâ¸ö×é¼þÀï±»Ó¦ÓÃÁËbtnµÄÑùÊ½ÔªËØ¡£“µ¥Àà”ģʽÒâζ×ÅÄãÐèҪд³öÈκοÉÄܵİ´Å¥ÀàÐÍ£¬²¢ÇÒÔÚÈκÎʱºò¸Ä±äÁËÒ»¸ö°´Å¥µÄÍâ¹Û£¬Äã¶¼ÐèÒªµ÷ÕûÕâ¸öÑ¡ÔñÆ÷¡£
½á¹¹»¯ÀàÃû
µ±´´½¨×é¼þʱ——²¢Ìí¼ÓÁË“Ö÷Ìâ“——һЩÀàÓÃÓÚÇø·Ö²»Í¬µÄ×é¼þ£¬Ò»Ð©ÀàÓÃÓÚ×é¼þÐÞÊηû£¬Ò»Ð©ÀàºÍDOM½áµã¹ØÁª£¬ËûÃDZ»°üº¬ÔÚÒ»¸ö½Ï´óµÄ³éÏó³ÊÏÖ×é¼þÀï¡£
ºÜÄÑÅжÏbtn£¨×é¼þ£©¡¢btn-primary(ÐÞÊηû)¡¢btn-group(×é¼þ)ºÍbtn-group-item£¨×é¼þ×Ó¶ÔÏó£©Ö®¼äµÄ¹ØÏµ£¬ÒòΪÕâЩÃû×Ö²»ÄÜÇå³þµÄʹÈËÃ÷°×ÕâЩÀàµÄÓÃ;¡£Ã»ÓÐÒ»ÖµÄģʽ¡£
ÔÚ¹ýÈ¥µÄÒ»ÄêÀïÎÒÒ»Ö±ÔÚ³¢ÊÔÃüÃûģʽ£¬ÕâÖÖģʽÄܹ»°ïÖúÎÒ¸ü¿ìµÄÀí½âDOMƬ¶ÎÀï½áµã¼äµÄ¹ØÏµ£¬¶ø²»ÊÇÊÔ×ÅÀ´»ØµÄÔÚHTML¡¢CSSºÍJSÎļþÖ®¼ä²é¿´£¬ Æ´´Õ³öÍøÕ¾µÄ¼Ü¹¹¡£ÕâÖÖģʽÖ÷ÒªÊÜBEMϵͳ·½·¨ÃüÃûµÄÓ°Ï죬µ«ÊÇ£¬±»ÎҸıà³ÉÒ»ÖÖ¸üÈÝÒ×ÔĶÁµÄÐÎʽ¡£
t-template-name t-template-name--modifier-name t-template-name__sub-object t-template-name__sub-object--modifier-name component-name component-name--modifier-name component-name__sub-object component-name__sub-object--modifier-name is-state-type js-action-name js-component-type
ÎÒ°ÑһЩ½á¹¹µ±×ö³éÏóµÄ“Ä£°å”£¬ÆäËüÔòµ±×÷¸üÇåÎúµÄ×é¼þ£¨Í¨³£½¨Á¢ÔÚ“Ä£°å”ÉÏ£©¡£µ«ÊÇÕâÖÖÇø·Ö²¢·Ç×ÜÊDZØÒªµÄ¡£
ÕâÖ»²»¹ýÊÇÎÒĿǰ·¢ÏÖµÄÒ»¸öÃüÃûģʽ¶øÒÑ¡£Ëü¿ÉÒÔ²ÉÈ¡ÈκÎÐÎʽ¡£µ«ÊÇÕâÖÖģʽµÄºÃ´¦ÔÚÓÚËüÏû³ýÁËÄÇЩֻÒÀÀµ£¨µ¥£©Á¬½Ó·û£¬»òÕßÏ»®Ïߣ¬»òÕßÊÇÍÕ·å¸ñʽµÄÄ£ºýµÄÀàÃû¡£
ÔʼÎļþ´óСºÍHTTPѹËõ
ÈκιØÓÚÄ£¿é»¯Óë¿ÉÀ©Õ¹µÄCSSµÄÌÖÂÛ¹ØÐĵÄÊÇÎļþ´óСºÍ“ÅòÕÍ“¡£Nicole SullivanµÄÑÔÂÛÖо³£»áÌáµ½Îļþ´óС´æ´¢£¨ÒÔ¼°Î¬»¤¸Ä½ø£©£¬²¢Ìáµ½ÁËÏñFacebookÕâÑùµÄ¹«Ë¾²ÉÓÃÕâÖÖ·½·¨µÄ¾Àú¡£½øÒ»²½µÄ£¬ÎÒÏëÎÒ»á·ÖÏíÎÒÔÚÔ¤´¦ÀíÊä³öʱµÄHTTPѹËõЧ¹û£¬ÒÔ¼°´óÁ¿Ê¹ÓÃHTMLÀàµÄһЩÊÂÇé¡£
µ±Twitter µÄBootstrap¸ÕÃæÊÀʱ£¬ÎÒÖØÐ´Á˱àÒëºÃµÄCSS£¬ÒÔ±ã¸üºÃµØÓëÊÖ¶¯²Ù×÷µÄÎļþ±È½Ï´óС¡£ÔÚ×îС»¯Á½¸öÎļþÖ®ºó£¬ÊÖ¶¯²Ù×÷µÄCSSÎļþ±ÈÔ¤´¦Àí³ÌÐòÊä³öµÄС10%¡£µ«Êǵ±Á½¸öÎļþ¶¼Í¨¹ýgzipѹËõºó£¬Ô¤´¦Àí³ÌÐòÊä³öµÄCSSÎļþ±ÈÊÖ¶¯²Ù×÷µÄСÁË5%¡£
ÕâÇ¿µ÷Á˱ȽÏHTTPѹËõºóÎļþ´óСµÄÖØÒªÐÔ£¬ÒòΪ¼õСÎļþ´óС²¢²»ÄÜ˵Ã÷Ò»ÇС£Ëü°µÊ¾ÁËÓоÑéµÄCSS¿ª·¢ÕßÔÚÓÃÔ¤´¦Àí³ÌÐòʱ²»±ØÌ«¹ý¹ØÐıàÒëºóµÄCSSÖÐÓÐÒ»¶¨³Ì¶ÈµÄÖØ¸´£¬ÒòΪ¾¹ýHTTPѹËõºó£¬Îļþ½«±äµÃ¸üС¡£Í¨¹ýÔ¤´¦Àí³ÌÐò´¦Àí¸üÒ×ÓÚά»¤µÄCSS´úÂëËù´øÀ´µÄºÃ´¦£¬ÒªÊ¤¹ý¹Ø×¢ÔʼCSSºÍѹËõºóÊä³öµÄCSSµÄÃÀ¹Û»òÎļþ´óС¡£
ÔÚÁíÒ»¸öʵÑéÖУ¬ÎÒ´ÓÍøÕ¾ÉÏŪÁËÒ»¸ö60KBµÄHTMLÎļþ£¨Óɺܶà¿ÉÖØÓõÄ×é¼þ×é³É£©£¬É¾³ýÁËËüµÄÿһ¸öclassÊôÐÔ£¨attribute£©¡£ÕâÑù´¦ÀíÖ®ºó£¬Îļþ¼õСµ½25KB¡£µ±ÔʼÎļþÓëÐ޸ĹýµÄÎļþ¶¼Í¨¹ýgzipѹËõºó£¬ËüÃǵĴóС·Ö±ð±äΪ7.6KBºÍ6KB——Ö»Ïà²î1.6KB¡£×ÔÓÉʹÓÃclassËùµ¼ÖµÄʵ¼ÊÎļþ´óСµÄ½á¹ûÒѾ²»ÖµµÃÔÙȥǿµ÷ÁË¡£
ÎÒÈçºÎѧ»áÍ£Ö¹µ£Óǵą
¶àÄêÀ´£¬Ðí¶à¼¼ÊõÊìÁ·µÄ¿ª·¢ÈËÔ±µÄ¾Ñ飬ÒѾ¸Ä±äÁË´óÐÍÍøÕ¾ºÍÓ¦ÓóÌÐòµÄ¿ª·¢·½Ê½¡£¾¡¹ÜÈç´Ë£¬¶ÔÓÚ¸öÈËÀ´Ëµ£¬·ÅÆú“ÓïÒ廯µÄHTML”µÄ¹ÛÄÒâζ׎«ÓÉÄÚÈÝÀ´¾ö¶¨ÀàÃû£¨¼´Ê¹·ÇÒªÕâô×ö£¬Ò²Ö»ÄÜ×÷Ϊ×îºóµÄÊÖ¶ÎÀ´Ê¹Óã©£¬Õâͨ³£ÐèÒªÄ㿪·¢ÍêÒ»¸ö´óÐ͵ÄÓ¦ÓóÌÐòºó£¬²ÅÄܹ»Ç¿ÁÒµØÒâʶµ½ÕâÖÖ×ö·¨²»¿¿Æ×µÄÒ»Ãæ¡£Äã±ØÐë×¼±¸ºÃÅׯúÀϹÛÄѰÕÒÌæ´ú·½°¸£¬ÉõÖÁÖØÐÅÉóÊÓÒÔǰÒѱ»ÄãÞðÆúµÄ·½·¨¡£
Ò»µ©Ä㿪ʼд´óÐ͵ÄÍøÕ¾ºÍÓ¦Óã¬ÄãºÍÆäËûÈ˲»½ö±ØÐëȥά»¤Ëü£¬¶øÇÒ»¹µÃ»ý¼«µØµü´ú¸Ä½ø¡£ÄãºÜ¿ì»áÒâʶµ½¼´Ê¹Ä㾡ÁË×î´óµÄŬÁ¦£¬ÄãµÄ´úÂëÈÔÈ»¿ªÊ¼±äµÃÔ½À´Ô½ÄÑÒÔά»¤¡£ÒѾÓÐһЩÈËÌá³öÁËËûÃÇ×Ô¼ºµÄ·½·¨À´½â¾öÕâЩÎÊÌ⣺NicoleµÄ²©¿ÍºÍÃæÏò¶ÔÏóµÄCSSÏîÄ¿£¬Jonathan SnookµÄ¿ÉÀ©Õ¹µÄÄ£¿é»¯½á¹¹CSS£¬ÒÔ¼°Yandex¿ª·¢µÄBEM·½·¨¡£ÕâЩ·½·¨ÖµµÃÎÒÃÇ»¨Ê±¼äȥ̽Ë÷¡£
µ±ÄãÑ¡ÔñÁËÒÔ¼õÉÙ±àдºÍ±à¼CSSµÄʱ¼äΪĿµÄµÄ·½Ê½À´±àдHTMLºÍCSSʱ£¬ÄÇôÈç¹ûÄãÏë¸Ä±äËüÃǵÄÑùʽ£¬Äã¾Í±ØÐë½ÓÊÜ»¨¸ü¶àµÄʱ¼äÈ¥¸Ä±äHTMLÔªËØµÄclass¡£ÎÞÂÛÊÇǰ¶Ë»¹ÊǺó¶Ë¿ª·¢Õß —— ÈκÎÈ˶¼¿ÉÒÔÖØÐÅÅÅÁÐÔ¤½¨µÄ“Àָ߻ýã唣¬Õ⽫ÊÇÏ൱ʵÓõģ»ÊÂʵ֤Ã÷£¬Ã»ÓÐÈË»áCSSħ·¨¡£
|