å端é¢è¯çH5é®é¢æ±æ»ï¼
1.HTML5 为ä»ä¹åªéè¦å <!DOCTYPE HTML>ï¼
çæ¡è§£æï¼
HTML5ä¸åºäºSGMLï¼å æ¤ä¸éè¦å¯¹DTDè¿è¡å¼ç¨ï¼ä½æ¯éè¦DOCTYPEæ¥è§èæµè§å¨çè¡ä¸ºï¼è®©æµè§å¨æç
§ä»ä»¬åºè¯¥çæ¹å¼æ¥è¿è¡ï¼èHTML4.01åºäºSGMLï¼æ以éè¦å¯¹DTDè¿è¡å¼ç¨ï¼æè½åç¥æµè§å¨ææ¡£æ使ç¨çæ档类åã
2ãè¡å
å
ç´ æåªäºï¼å级å
ç´ æåªäºï¼ 空(void)å
ç´ æé£äºï¼
çæ¡è§£æï¼
è¡å
å
ç´ ï¼a b span img input select strong
å级å
ç´ ï¼div ul ol li dl dt dd h1 h2 h3 h4 p ç
空å
ç´ ï¼<br> <hr> <img> <link> <meta>
3ã页é¢å¯¼å
¥æ ·å¼æ¶ï¼ä½¿ç¨linkå@importæä»ä¹åºå«ï¼
çæ¡è§£æï¼
1ï¼linkå±äºXHTMLæ ç¾ï¼è@importæ¯cssæä¾çï¼
2ï¼é¡µé¢è¢«å è½½æ¶ï¼linkä¼åæ¶è¢«å è½½ï¼è@importå¼ç¨çcssä¼çå°é¡µé¢è¢«å è½½å®åå è½½ï¼
3ï¼@importåªå¨IE5以ä¸æè½è¯å«ï¼èlinkæ¯XHTMLæ ç¾ï¼æ å
¼å®¹é®é¢ï¼
4ï¼linkæ¹å¼çæ ·å¼çæéé«äº@importçæéã
4ãhtml5æåªäºæ°ç¹æ§ã移é¤äºé£äºå
ç´ ï¼å¦ä½å¤çHTML5æ°æ ç¾çæµè§å¨å
¼å®¹é®é¢ï¼
çæ¡è§£æï¼
æ°ç¹æ§ï¼æ°å¢å
ç´ ï¼
1ï¼å
容å
ç´ ï¼articleãfooterãheaderãnavãsection
2ï¼è¡¨åæ§ä»¶ï¼calendarãdateãtimeãemailãurlãsearch
3ï¼æ§ä»¶å
ç´ ï¼webworkerï¼websocktï¼Geolocation
移é¤å
ç´ ï¼
1ï¼æ¾ç°å±å
ç´ ï¼basefontï¼bigï¼centerï¼fontï¼sï¼strikeï¼ttï¼u
2ï¼æ§è½è¾å·®å
ç´ ï¼frameï¼framesetï¼noframes
å¤çå
¼å®¹é®é¢æ两ç§æ¹å¼ï¼
1ï¼IE6/IE7/IE8æ¯æéè¿documentæ¹æ³äº§ççæ ç¾ï¼å©ç¨è¿ä¸ç¹æ§è®©è¿äºæµè§å¨æ¯æHTML5æ°æ ç¾ã
2ï¼ä½¿ç¨æ¯html5shimæ¡æ¶
å¦å¤ï¼DOCTYPE声æçæ¹å¼æ¯åºåHTMLåHTML5æ å¿çä¸ä¸ªéè¦å ç´ ï¼æ¤å¤ï¼è¿å¯ä»¥æ ¹æ®æ°å¢çç»æï¼åè½å
ç´ æ¥å 以åºåã
5ãå¦ä½åºå HTML å HTML5ï¼
çæ¡è§£æï¼
1ï¼å¨æ档类å声æä¸ä¸åï¼
HTMLæ¯å¾é¿çä¸æ®µä»£ç ï¼å¾é¾è®°ä½ï¼èHTML5å´åªæç®ç®ååç声æï¼æ¹ä¾¿è®°å¿ã
2ï¼å¨ç»æè¯ä¹ä¸ä¸åï¼
HTMLï¼æ²¡æä½ç°ç»æè¯ä¹åçæ ç¾ï¼é常é½æ¯è¿æ ·æ¥å½åç<div id="header"></div>ï¼è¿æ ·è¡¨ç¤ºç½ç«ç头é¨ã
HTML5ï¼å¨è¯ä¹ä¸å´æå¾å¤§çä¼å¿ãæä¾äºä¸äºæ°çæ ç¾ï¼æ¯å¦ï¼<header><article><footer>
6ãç®è¿°ä¸ä¸ä½ 对HTMLè¯ä¹åçç解ï¼
çæ¡è§£æï¼
1ï¼ç¨æ£ç¡®çæ ç¾åæ£ç¡®çäºæ
ï¼
2ï¼htmlè¯ä¹å让页é¢çå
容ç»æåï¼ç»ææ´æ¸
æ°ï¼ä¾¿äºå¯¹æµè§å¨ãæç´¢å¼æ解æï¼
3ï¼å³ä½¿å¨æ²¡ææ ·å¼cssæ
åµä¸ä¹ä»¥ä¸ç§ææ¡£æ ¼å¼æ¾ç¤ºï¼å¹¶ä¸æ¯å®¹æé
读çï¼
4ï¼æç´¢å¼æçç¬è«ä¹ä¾èµäºHTMLæ è®°æ¥ç¡®å®ä¸ä¸æåå个å
³é®åçæéï¼å©äºSEOï¼
5ï¼ä½¿äºé½æºä»£ç ç人对ç½ç«æ´å®¹æå°ç½ç«ååï¼ä¾¿äºé
读维æ¤ç解ã
7ãHTML5ç离线å¨åæä¹ä½¿ç¨ï¼å·¥ä½åçè½ä¸è½è§£éä¸ä¸ï¼
çæ¡è§£æï¼
localStorage é¿æåå¨æ°æ®ï¼æµè§å¨å
³éåæ°æ®ä¸ä¸¢å¤±ï¼
sessionStorage æ°æ®å¨æµè§å¨å
³éåèªå¨å é¤ã
8ãiframeæé£äºç¼ºç¹ï¼
çæ¡è§£æï¼
1ï¼å¨ç½é¡µä¸ä½¿ç¨æ¡æ¶ç»ææ大çå¼ç
æ¯æç´¢å¼æçâèèâç¨åºæ æ³è§£è¯»è¿ç§é¡µé¢ï¼
2ï¼æ¡æ¶ç»æææ¶ä¼è®©äººæå°è¿·æï¼é¡µé¢å¾æ··ä¹±ï¼
9ãDoctypeä½ç¨? ä¸¥æ ¼æ¨¡å¼ä¸æ··æ模å¼å¦ä½åºåï¼å®ä»¬æä½æä¹?
çæ¡è§£æï¼
1ï¼<!Doctype>声æä½äºææ¡£ä¸çæåé¢ï¼å¤äº<html>æ ç¾ä¹åãåç¥æµè§å¨ç解æå¨ï¼ç¨ä»ä¹æ档类åè§èæ¥è§£æè¿ä¸ªææ¡£ã
2ï¼ä¸¥æ ¼æ¨¡å¼çæçåJSè¿ä½æ¨¡å¼æ¯ä»¥è¯¥æµè§å¨æ¯æçæé«æ åè¿è¡ã
3ï¼å¨æ··æ模å¼ä¸ï¼é¡µé¢ä»¥å®½æ¾çååå
¼å®¹çæ¹å¼æ¾ç¤ºã模æèå¼æµè§å¨çè¡ä¸ºä»¥é²æ¢ç«ç¹æ æ³å·¥ä½ã
4ï¼DOCTYPEä¸åå¨ææ ¼å¼ä¸æ£ç¡®ä¼å¯¼è´æ档以混æ模å¼åç°ã
10ã常è§å
¼å®¹æ§é®é¢ï¼
1ï¼png24ä½çå¾çå¨IE6æµè§å¨ä¸åºç°èæ¯ï¼
解å³æ¹æ¡æ¯ï¼åæPNG8ï¼
2ï¼æµè§å¨é»è®¤ç margin å padding ä¸åã
解å³æ¹æ¡æ¯ï¼å ä¸ä¸ªå
¨å±ç*{margin:0;padding:0;}æ¥ç»ä¸ã
3ï¼IE6åè¾¹è·bugï¼åå±æ§æ ç¾floatåï¼åæ横è¡ç margin æ
åµä¸ï¼å¨ IE6 æ¾ç¤º margin æ¯è®¾ç½®ç大ãæµ®å¨IE产ççååè·ç¦» #box{float:left;width:10px;margin:0 0 0 100px;} è¿ç§æ
åµä¸IE6ä¼äº§ç200pxçè·ç¦»ã
解å³æ¹æ³ï¼å ä¸_displayï¼inlineï¼ä½¿æµ®å¨å¿½ç¥
4ï¼IEä¸ï¼å¯ä»¥ä½¿ç¨è·å常è§å±æ§çæ¹æ³æ¥è·åèªå®ä¹å±æ§ï¼ä¹å¯ä»¥ä½¿ç¨getAttribute()è·åèªå®ä¹å±æ§ï¼ Firefoxä¸ï¼åªè½ä½¿ç¨getAttribute()è·åèªå®ä¹å±æ§ã
解å³æ¹æ³ï¼ç»ä¸éè¿getAttribute()è·åèªå®ä¹å±æ§ã
5ï¼IEä¸ï¼even对象æxï¼yå±æ§ï¼ä½æ¯æ²¡æpageXï¼pageYå±æ§ï¼ä½æ¯æ²¡æxï¼yå±æ§ï¼
解å³æ¹æ³ï¼ï¼æ¡ä»¶æ³¨éï¼ç¼ºç¹æ¯å¨IEæµè§å¨ä¸å¯è½ä¼å¢å é¢å¤çHTTP请æ±æ°ã
6ï¼Chromeä¸æçé¢ä¸é»è®¤ä¼å°å°äº 12px çææ¬å¼ºå¶æç
§ 12px æ¾ç¤º
解å³æ¹æ³ï¼å¯éè¿å å
¥ CSS å±æ§ -webkt-text-size-adjust:none;解å³
7ï¼è¶
é¾æ¥è®¿é®è¿å hover æ ·å¼å°±ä¸åºç°äºï¼è¢«ç¹å»è®¿é®è¿çè¶
é¾æ¥æ ·å¼ä¸å¨å
·æ hover å active ï¼
解å³æ¹æ³ï¼æ¹åCSSå±æ§çæå顺åºï¼L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
11ãå¦ä½å®ç°æµè§å¨å
å¤ä¸ªæ ç¾é¡µä¹é´çéä¿¡ï¼
çæ¡è§£æï¼
è°ç¨localstorgeãcookiesçæ¬å°åå¨æ¹å¼
12ãwebSocketå¦ä½å
¼å®¹ä½æµè§å¨ï¼
çæ¡è§£æï¼
Adobe Flash Socket ã ActiveX HTMLFile (IE) ã åºäº multipart ç¼ç åé XHR ã åºäºé¿è½®è¯¢ç XHR
13ãæ¯æHTML5æ°æ ç¾
çæ¡è§£æï¼
1ï¼IE8/IE7/IE6æ¯æéè¿ document.createElement æ¹æ³äº§ççæ ç¾ï¼å¯ä»¥å©ç¨è¿ä¸ç¹æ§è®©è¿äºæµè§å¨æ¯æ HTML5 æ°æ ç¾ï¼æµè§å¨æ¯ææ°æ ç¾åï¼è¿éè¦æ·»å æ ç¾é»è®¤çæ ·å¼ï¼
2ï¼å½ç¶æ好çæ¹å¼æ¯ç´æ¥ä½¿ç¨æççæ¡æ¶ã使ç¨æå¤çæ¯ html5shim æ¡æ¶
<!--[if lt IE 9]>
<script> src="
http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
14ãå¦ä½åºåï¼DOCTYPE 声æ\æ°å¢çç»æå
ç´ \åè½å
ç´ ï¼è¯ä¹åçç解ï¼
çæ¡è§£æï¼
1ï¼ç¨æ£ç¡®çæ ç¾åæ£ç¡®çäºæ
ï¼
2ï¼htmlè¯ä¹åå°±æ¯è®©é¡µé¢çå
容ç»æåï¼ä¾¿äºå¯¹æµè§å¨ãæç´¢å¼æ解æï¼
3ï¼å¨æ²¡ææ ·å¼ CSS æ
åµä¸ä¹ä»¥ä¸ç§ææ¡£æ ¼å¼æ¾ç¤ºï¼å¹¶ä¸æ¯å®¹æé
读çï¼
4ï¼æç´¢å¼æçç¬è«ä¾èµäºæ è®°æ¥ç¡®å®ä¸ä¸æåå个å
³é®åçæéï¼å©ç¨ SEO ï¼
5ï¼ä½¿é
读æºä»£ç ç人对ç½ç«æ´å®¹æå°ç½ç«ååï¼ä¾¿äºé
读维æ¤ç解ã
15ãä»ç»ä¸ä¸ CSS ççå模åï¼
çæ¡è§£æï¼
1ï¼æ两ç§ï¼IE çå模åãæ å W3C çå模åï¼ IE ç content é¨åå
å«äº border å paddingï¼
2ï¼ç模åï¼å
容ï¼contentï¼ãå¡«å
ï¼paddingï¼ãè¾¹çï¼marginï¼ãè¾¹æ¡ï¼borderï¼ã
16ãCSS éæ©ç¬¦æåªäºï¼åªäºå±æ§å¯ä»¥ç»§æ¿ï¼ä¼å
级ç®æ³å¦ä½è®¡ç®ï¼ CSS3 æ°å¢ä¼ªç±»æåªäºï¼
çæ¡è§£æï¼
1ï¼id éæ©å¨ï¼#myidï¼
2ï¼ç±»éæ©å¨ï¼.myclassnameï¼
3ï¼æ ç¾éæ©å¨ï¼divï¼h1ï¼pï¼
4ï¼ç¸é»éæ©å¨ï¼h1 + pï¼
5ï¼åéæ©å¨ï¼ul > liï¼
6ï¼å代éæ©å¨ï¼li aï¼
7ï¼éé
符éæ©å¨ï¼* ï¼
8ï¼å±æ§éæ©å¨ï¼ a[rel = "external"]ï¼
9ï¼ä¼ªç±»éæ©å¨ï¼a: hover, li: nth - childï¼
17ãå¯ç»§æ¿çæ ·å¼ï¼ font-size font-family color, UL LI DL DD DT
18ãä¸å¯ç»§æ¿çæ ·å¼ï¼border padding margin width height
19ãä¼å
级就è¿ååï¼åæéæ
åµä¸æ ·å¼å®ä¹æè¿è
为å
20ãè½½å
¥æ ·å¼ä»¥æåè½½å
¥çå®ä½ä¸ºå;
解æçæ¡ï¼ä¼å
级为: !important > id > class > tag ï¼ important æ¯ å
èä¼å
级é«
21ãCSS3æ°å¢ä¼ªç±»ä¸¾ä¾ï¼
çæ¡è§£æï¼
p:first-of-type éæ©å±äºå
¶ç¶å
ç´ çé¦ä¸ª <p> å
ç´ çæ¯ä¸ª <p> å
ç´ ï¼
p:last-of-type éæ©å±äºå
¶ç¶å
ç´ çæå <p> å
ç´ çæ¯ä¸ª <p> å
ç´ ï¼
p:only-of-type éæ©å±äºå
¶ç¶å
ç´ å¯ä¸ç <p> å
ç´ çæ¯ä¸ª <p> å
ç´ ï¼
p:only-child éæ©å±äºå
¶ç¶å
ç´ çå¯ä¸åå
ç´ çæ¯ä¸ª <p> å
ç´ ï¼
p:nth-child(2) éæ©å±äºå
¶ç¶å
ç´ ç第äºä¸ªåå
ç´ çæ¯ä¸ª <p> å
ç´ ï¼
:enabled :disabled æ§å¶è¡¨åæ§ä»¶çç¦ç¨ç¶æï¼
:checked åéæ¡æå¤éæ¡è¢«éä¸ã
22ãå¦ä½å±
ä¸divï¼ å¦ä½å±
ä¸ä¸ä¸ªæµ®å¨å
ç´ ï¼
çæ¡è§£æï¼
ç»div 设置ä¸ä¸ªå®½åº¦ï¼ç¶åæ·»å margin:0 auto å±æ§ï¼div{width:200px; margin:0 auto; }
23ãå±
ä¸ä¸ä¸ªæµ®å¨å
ç´
çæ¡è§£æï¼
ç¡®å®å®¹å¨çå®½é« å®½500 é«300çå±ï¼è®¾ç½®å±çå¤è¾¹è·
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:greenï¼leftï¼50%ï¼å¤´ï¼50%}
24ãcss3æåªäºæ°ç¹æ§ï¼
çæ¡è§£æï¼
CSS3 å®ç°åè§ï¼border-radius:8px;ï¼ï¼é´å½±ï¼box-shadow:10pxï¼,对æåå ç¹æï¼text-shadowï¼,线æ§æ¸åï¼gradientï¼ï¼æ转ï¼transformï¼
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//æ转ï¼ç¼©æ¾ï¼å®ä½ï¼å¾æ
å¢å äºæ´å¤ç css éæ©å¨ å¤èæ¯ rgba
25ã为ä»ä¹è¦åå§å CSS æ ·å¼
çæ¡è§£æï¼
å 为æµè§å¨çå
¼å®¹é®é¢ï¼ä¸åæµè§å¨å¯¹æäºæ ç¾çé»è®¤å¼æ¯ä¸åçï¼å¦æ没对 CSS åå§åå¾å¾ä¼åºç°æµè§å¨ä¹é´ç页é¢æ¾ç¤ºå·®å¼ã
å½ç¶ï¼åå§åæ ·å¼ä¼å¯¹ SEO æä¸å®çå½±åï¼ä½é±¼åçæä¸å¯å
¼å¾ï¼ä½åæ±å½±åæå°çæ
åµä¸åå§åã
æç®åçåå§åæ¹æ³æ¯ï¼*{padding:0;margin:0} (ä¸å»ºè®®)
æ·å®çæ ·å¼åå§åï¼
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
26ãdisplay:inline-block ä»ä¹æ¶åä¼æ¾ç¤ºé´éï¼
çæ¡è§£æï¼
移é¤ç©ºæ ¼ï¼ä½¿ç¨margin è´å¼ãä½¿ç¨ font-size:0ãletter-spacing ãword-spacing
27ãä½¿ç¨ CSS é¢å¤çå¨åï¼å欢åªä¸ªï¼
çæ¡è§£æï¼SASS
28ãä»ä¹æ¯çå模åï¼
çæ¡è§£æï¼
å¨ç½é¡µä¸ï¼ä¸ä¸ªå
ç´ å æ空é´ç大å°ç±å 个é¨åææï¼å
¶ä¸å
æ¬å
ç´ çå
容ï¼contentï¼ï¼å
ç´ çå
è¾¹è·ï¼paddingï¼ï¼å
ç´ çè¾¹æ¡ï¼borderï¼ï¼å
ç´ çå¤è¾¹è·ï¼marginï¼å个é¨åãè¿å个é¨åå æç空é´ä¸ï¼æçé¨åå¯ä»¥æ¾ç¤ºç¸åºçå
容ï¼èæçé¨ååªç¨æ¥åéç¸é»çåºåæåºåã4个é¨åä¸èµ·ææäºcssä¸å
ç´ çç模åã
29ãCSSå®ç°åç´æ°´å¹³å±
ä¸
çæ¡è§£æï¼
ä¸éç»å
¸çé®é¢ï¼å®ç°æ¹æ³æå¾å¤ç§ï¼ä»¥ä¸æ¯å
¶ä¸ä¸ç§å®ç°ï¼
HTMLç»æï¼
<divclass="wrapper">
<divclass="content"></div>
</div>
CSSï¼
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position:absolute; //ç¶å
ç´ éè¦ç¸å¯¹å®ä½
top:50%;
left:50%;
margin-top:-100px; //äºåä¹ä¸çheightï¼width
margin-left:
-100px;
}
30ãç®è¿°ä¸ä¸srcä¸hrefçåºå«
çæ¡è§£æï¼
href æ¯æåç½ç»èµæºæå¨ä½ç½®ï¼å»ºç«åå½åå
ç´ ï¼éç¹ï¼æå½åææ¡£ï¼é¾æ¥ï¼ä¹é´çé¾æ¥ï¼ç¨äºè¶
é¾æ¥ã
srcæ¯æåå¤é¨èµæºçä½ç½®ï¼æåçå
容å°ä¼åµå
¥å°ææ¡£ä¸å½åæ ç¾æå¨ä½ç½®ï¼å¨è¯·æ±srcèµæºæ¶ä¼å°å
¶æåçèµæºä¸è½½å¹¶åºç¨å°ææ¡£å
ï¼ä¾å¦jsèæ¬ï¼imgå¾çåframeçå
ç´ ãå½æµè§å¨è§£æå°è¯¥å
ç´ æ¶ï¼ä¼æåå
¶ä»èµæºçä¸è½½åå¤çï¼ç´å°å°è¯¥èµæºå è½½ãç¼è¯ãæ§è¡å®æ¯ï¼å¾çåæ¡æ¶çå
ç´ ä¹å¦æ¤ï¼ç±»ä¼¼äºå°ææåèµæºåµå
¥å½åæ ç¾å
ãè¿ä¹æ¯ä¸ºä»ä¹å°jsèæ¬æ¾å¨åºé¨èä¸æ¯å¤´é¨ã
31ãç®è¿°åæ¥åå¼æ¥çåºå«
çæ¡è§£æï¼
åæ¥æ¯é»å¡æ¨¡å¼ï¼å¼æ¥æ¯éé»å¡æ¨¡å¼ã
åæ¥å°±æ¯æä¸ä¸ªè¿ç¨å¨æ§è¡æ个请æ±çæ¶åï¼è¥è¯¥è¯·æ±éè¦ä¸æ®µæ¶é´æè½è¿åä¿¡æ¯ï¼é£ä¹è¿ä¸ªè¿ç¨å°ä¼ä¸ç´çå¾
ä¸å»ï¼ç´å°æ¶å°è¿åä¿¡æ¯æ继ç»æ§è¡ä¸å»ï¼
å¼æ¥æ¯æè¿ç¨ä¸éè¦ä¸ç´çä¸å»ï¼èæ¯ç»§ç»æ§è¡ä¸é¢çæä½ï¼ä¸ç®¡å
¶ä»è¿ç¨çç¶æãå½ææ¶æ¯è¿åæ¶ç³»ç»ä¼éç¥è¿ç¨è¿è¡å¤çï¼è¿æ ·å¯ä»¥æé«æ§è¡çæçã
32ãpxåemçåºå«
çæ¡è§£æï¼
pxåemé½æ¯é¿åº¦åä½ï¼åºå«æ¯ï¼pxçå¼æ¯åºå®çï¼æå®æ¯å¤å°å°±æ¯å¤å°ï¼è®¡ç®æ¯è¾å®¹æãemå¾å¼ä¸æ¯åºå®çï¼å¹¶ä¸emä¼ç»§æ¿ç¶çº§å
ç´ çåä½å¤§å°ã
æµè§å¨çé»è®¤åä½é«é½æ¯16pxãæ以æªç»è°æ´çæµè§å¨é½ç¬¦å: 1em=16pxãé£ä¹12px=0.75em, 10px=0.625em
33ãæµè§å¨çå
æ ¸åå«æ¯ä»ä¹?
çæ¡è§£æï¼
IE: tridentå
æ ¸
Firefoxï¼geckoå
æ ¸
Safariï¼webkitå
æ ¸
Operaï¼ä»¥åæ¯prestoå
æ ¸ï¼Operaç°å·²æ¹ç¨Google ChromeçBlinkå
æ ¸
Chromeï¼Blink(åºäºwebkitï¼Googleä¸Opera Softwareå
±åå¼å)