如题所述
ããæ¬ææ é¢çè¿å¯å¾çï¼æ¯ç¨Phosotshopå¶ä½çãä½æ¯ï¼å¨æç´¢å¼æä¸ä½ å´æ æ³æç´¢å°å®ï¼æç´¢å¼æè¿æ²¡æ强大å°è½å¤è¯å«å¾çéé¢çæåã并ä¸ç±äºå¾ççä½ç§¯ä¸ç®å¤ªå°ï¼å¯è½ç½éæ
¢çç½åå¨æµè§çæ¶åä¸å¾ä¸èå¿ççå¾
å¾ççå·æ°ãé£ä¹ï¼æ没æä¸ç§æ°çæ¹æ³å¯ä»¥é¿å
è¿äºç¼ºç¹å¢?
ããæçï¼HTML5åCSS3å°±å¯ä»¥æ»¡è¶³ä½ çéæ±ãçè³ï¼å®å¯ä»¥åçæ´å¤ï¼æ´å¥½ãä½ä¸ºä¸å设计å¸ï¼æ们åºå½äºè§£å®ä»¬æ¯ä»ä¹ä¸è¥¿ï¼æä»ä¹ç¹æ§ï¼ä»èè¿ä¸æ¥æèéè¿HTML5åCSS3æ们è½åäºä»ä¹ã
ããä»ä¹æ¯HTML5åCSS3
ããHTMLåCSS并ä¸é¾ç解ãHTML为ææç½é¡µç主è¦è¯è¨ãéè¿è¿ç§è¯è¨ï¼æ们å¯ä»¥å计ç®æºè¯´æç½é¡µæ ¼å¼ãå 容ãæ¾ç¤ºææççãèCSSåæ¯ä¸é¨ç¨æ¥æ§å¶ç½é¡µæ¾ç¤ºææçè¯è¨ãè¿æ¶åé®é¢åºæ¥äºï¼ä¸ºä»ä¹æ们è¦åç¬ä½¿ç¨CSSå¢ï¼HTMLä¸æ¯ä¸æ ·å¯ä»¥æ§å¶Web页é¢çæ¾ç¤ºææä¹?为äºåçè¿ä¸ªé®é¢ï¼æ举个ç®åçä¾åï¼
ããæ没æåç°å¦æä¸æ¦å½¢å®¹çäºæ è¿å¤ï¼æ³è¦æäºæ æè¿°æ¸ æ¥çæ¶åï¼æ们ä¸å¾ä¸éå¤å¤§éçä¿¡æ¯?页é¢è¯è¨ä¹æ¯ä¸æ ·ï¼å¨è¿ç§æ åµä¸æ¾å¾æä¹±æ ç« ï¼é常é¾ä»¥çåºå¤´ç»ªãéè¿å°æ§å¶æ¾ç¤ºææçè¯è¨éæå°CSSéï¼æ们ä¸ä½å¯ä»¥ä¿è¯é¡µé¢è¯è¨ä¸»ä½é¨åçç®æ´ï¼èä¸å¯ä»¥é常æ¹ä¾¿çå¤ç¨åç§è¯è¨éåã
ããHTML5åCSS3æ¯HTMLåCSSçææ°çæ¬ï¼å®ä»¬ç®ååæªç¡®å®æ åï¼ä½æ¯å·²ç»å ¬å¸çæ°ç¹å¾å·²ç»è®©æ们å¿å¨ä¸å·²ã
ããHTML 5çæ°ç¹æ°
ãã1. æ°çå 容æ ç¾
ããHTML4ä¸çå 容æ ç¾çº§å«ç¸åï¼æ æ³åºååé¨åå 容ãèHTML5ä¸çå 容æ ç¾äºç¸ç¬ç«ï¼çº§å«ä¸åï¼æç´¢å¼æ以åç»è®¡è½¯ä»¶çåå¯å¿«éè¯å«åé¨åå 容ã
ãã2. æ´å¥½çè¡¨æ ¼ä½ç³»
ããç°å¨ï¼ä½ å¯ä»¥æå¼JavaScriptæè æ¯PHPï¼åªéè¿HTML5æ¥å®ä¹è¡¨æ ¼ãä½ å¯ä»¥å®ä¹æ¯ä¸ªè¡¨æ ¼åå çè¾å ¥æ ¼å¼ï¼ä¹å¯ä»¥å®ä¹è¿ä¸ªåå æ¯å¦æ¯å¿ å¡«çççã
ãã3. é³é¢ãè§é¢API
ããHTML5ä¸ä½å è®¸ä½ å¨ç½é¡µä¸ç´æ¥æ´åè§é¢ãé³é¢ï¼åæ¶æ´æä¾äºä¸å¥åè½ä¸°å¯çAPIç¨æ¥æ§å¶åªä½ææ¾ï¼èè¿äºç¨æ¥æ§å¶åªä½ææ¾çå ç´ ä¹é½æ¯å¯ä»¥è¢«ç¼è¾çãå æ¤ï¼HTML5å¨è§é¢ä»¥åé³é¢å±é¢ä¸å®é å·²ç»å¯ä»¥æ¿ä»£å¸¸ç¨çflashæ件äºã
ãã4. ç»å¸(Canvas) API
ããå¨ç½é¡µä¸ç»å¶å¾å½¢ä¸ç´æ¯ä¸ªå¤§é¾é¢ï¼æ们ä¸å¾ä¸åå©flashãsilverlightçæ件ãç¶èHTML5å è®¸ä½ ç´æ¥å¨ç½é¡µä¸è¿è¡ç»å¾ï¼çè³å è®¸ä½ ä¸ç½é¡µçææ´å¤ç交äºï¼ä¾å¦ç»å¶å¾å½¢ãæ¾å¤§ç¼©å°ï¼ççãå¾ä¾æ¯ä¸ä¸ªç¨HTML5å¶ä½çå°æ¸¸æã
ãã5. å°ç(Geolocation) API
ããHTML5æä¾äºå°çä¿¡æ¯çåºç¨æ¥å£Geolocation APIãéè¿è¿ä¸ªAPIï¼ç½é¡µå¯ä»¥éè¿IPï¼GPSçæ¹å¼æ¥è·å¾ç¨æ·çå°çä¿¡æ¯;åæ¶ç¨æ·ä¹å¯ä»¥éæ©æ¯å¦å ³éè¿ä¸ªåè½ã
ãã6. ç½é¡µåå¨(Web storage) API
ããHTML5æä¾äºç½é¡µåå¨çAPIï¼æ¹ä¾¿Webåºç¨ç离线使ç¨ãé¤æ¤ä¹å¤ï¼æ°çAPIç¸å¯¹äºcookieä¹æçé«å®å ¨æ§ï¼é«æçï¼æ´å¤§ç©ºé´çä¼ç¹ã
ãã7. ææ½éæ¾(Drag and drop) API
ããæ们å¯ä»¥éè¿HTML5çDrag and drop APIæ¥å®æç½é¡µä¸çææ½éæ¾ææï¼é¿å äºä»¥å¾çç½é¡µå¨ææ½éæ¾è¿ç¨ä¸éè¦ä¸åä¿®æ¹å ç´ çä½ç½®ï¼ä»£ç ç¹å¤çå¼ç«¯ã
ããCSS3 æ°ç¹æ§
ãã1. RGBa
ããCSS3çRGBaæ°ç¹æ§å è®¸ä½ å¯¹æ¯ä¸ªå ç´ è¿è¡è²å½©ä»¥åéæ度ç设置ãèåæ¥å¸¸ç¨çopacityå½ä»¤åªè½å¯¹å ç´ åå ¶åå ç´ è¿è¡è®¾ç½®ã
ãã2. Multi-column layout
ããCSS3æ°æä¾çå¤æ å¸å±éæ©å¨æ éHTMLå¸å±æ ç¾å³å¯çæå¤æ å¸å±ï¼åæ¶âæ æ°âãâæ 宽â以åâæ é´è·âé½æ¯å¯ä»¥å®ä¹çã
ãã3. Round corners
ããåè§åè½å¯è½æ¯CSS3æä¾çæå®ç¨çåè½äºãéè¿Border-radiusï¼ä½ å¯ä»¥æ²¡æä»»ä½é¾åº¦çç»æå®çHTMLå ç´ æ·»å åè§ã并ä¸ä½ è¿å¯ä»¥å®ä¹åè§ç大å°ï¼ä»¥ååªä¸ªè§æ¯åè§ï¼åªä¸ªè§ä¸æ¯åè§ã
ãã4. @font-face
ããå½ç½é¡µæ¾ç¤ºæç§ç¨æ·æ²¡æå®è£ çåä½æ¶ï¼CSS3æä¾ç@font-faceåè½ä¼èªå¨çãé»é»å°å¸®ç¨æ·ä»ç½ç»ä¸ä¸è½½ç¸åºåä½ãä»è让设计å¸æ´å èªç±çåæ¥ï¼èä¸ç¨èèç¨æ·çæºå¨æ¯å¦å®è£ äºç¸åºåä½ã
ãã5. å ¶ä»ç¹æ§
ããæ¤å¤ï¼CSS3è¿ç»æ们带æ¥äºæ¸åãé²æ¢å符串è¿é¿æº¢åºãå¤éèæ¯ä»¥åç¨å¾çæ¥ä½ä¸ºå ç´ è¾¹æ¡çåè½ã
ããå©ç¨å¥½CSS3ï¼ä½ å¯ä»¥æ´å¿«æ·çå¾å°ä»¥å¾ç¨å¾å¤æ件æè½å¾å°çææãåè¿ä½¿ç¨å ç´ æ¬èº«æ¥å代大é¨åå¾çï¼ç½é¡µçå è½½é度ä¼å¾å°æåï¼è¿äºåæ¬æ¯å¾ççå 容ï¼ä¹å¯ä»¥è¢«æç´¢å¼ææ£ç´¢å°ã
ããæçï¼HTML5åCSS3å°±å¯ä»¥æ»¡è¶³ä½ çéæ±ãçè³ï¼å®å¯ä»¥åçæ´å¤ï¼æ´å¥½ãä½ä¸ºä¸å设计å¸ï¼æ们åºå½äºè§£å®ä»¬æ¯ä»ä¹ä¸è¥¿ï¼æä»ä¹ç¹æ§ï¼ä»èè¿ä¸æ¥æèéè¿HTML5åCSS3æ们è½åäºä»ä¹ã
ããä»ä¹æ¯HTML5åCSS3
ããHTMLåCSS并ä¸é¾ç解ãHTML为ææç½é¡µç主è¦è¯è¨ãéè¿è¿ç§è¯è¨ï¼æ们å¯ä»¥å计ç®æºè¯´æç½é¡µæ ¼å¼ãå 容ãæ¾ç¤ºææççãèCSSåæ¯ä¸é¨ç¨æ¥æ§å¶ç½é¡µæ¾ç¤ºææçè¯è¨ãè¿æ¶åé®é¢åºæ¥äºï¼ä¸ºä»ä¹æ们è¦åç¬ä½¿ç¨CSSå¢ï¼HTMLä¸æ¯ä¸æ ·å¯ä»¥æ§å¶Web页é¢çæ¾ç¤ºææä¹?为äºåçè¿ä¸ªé®é¢ï¼æ举个ç®åçä¾åï¼
ããæ没æåç°å¦æä¸æ¦å½¢å®¹çäºæ è¿å¤ï¼æ³è¦æäºæ æè¿°æ¸ æ¥çæ¶åï¼æ们ä¸å¾ä¸éå¤å¤§éçä¿¡æ¯?页é¢è¯è¨ä¹æ¯ä¸æ ·ï¼å¨è¿ç§æ åµä¸æ¾å¾æä¹±æ ç« ï¼é常é¾ä»¥çåºå¤´ç»ªãéè¿å°æ§å¶æ¾ç¤ºææçè¯è¨éæå°CSSéï¼æ们ä¸ä½å¯ä»¥ä¿è¯é¡µé¢è¯è¨ä¸»ä½é¨åçç®æ´ï¼èä¸å¯ä»¥é常æ¹ä¾¿çå¤ç¨åç§è¯è¨éåã
ããHTML5åCSS3æ¯HTMLåCSSçææ°çæ¬ï¼å®ä»¬ç®ååæªç¡®å®æ åï¼ä½æ¯å·²ç»å ¬å¸çæ°ç¹å¾å·²ç»è®©æ们å¿å¨ä¸å·²ã
ããHTML 5çæ°ç¹æ°
ãã1. æ°çå 容æ ç¾
ããHTML4ä¸çå 容æ ç¾çº§å«ç¸åï¼æ æ³åºååé¨åå 容ãèHTML5ä¸çå 容æ ç¾äºç¸ç¬ç«ï¼çº§å«ä¸åï¼æç´¢å¼æ以åç»è®¡è½¯ä»¶çåå¯å¿«éè¯å«åé¨åå 容ã
ãã2. æ´å¥½çè¡¨æ ¼ä½ç³»
ããç°å¨ï¼ä½ å¯ä»¥æå¼JavaScriptæè æ¯PHPï¼åªéè¿HTML5æ¥å®ä¹è¡¨æ ¼ãä½ å¯ä»¥å®ä¹æ¯ä¸ªè¡¨æ ¼åå çè¾å ¥æ ¼å¼ï¼ä¹å¯ä»¥å®ä¹è¿ä¸ªåå æ¯å¦æ¯å¿ å¡«çççã
ãã3. é³é¢ãè§é¢API
ããHTML5ä¸ä½å è®¸ä½ å¨ç½é¡µä¸ç´æ¥æ´åè§é¢ãé³é¢ï¼åæ¶æ´æä¾äºä¸å¥åè½ä¸°å¯çAPIç¨æ¥æ§å¶åªä½ææ¾ï¼èè¿äºç¨æ¥æ§å¶åªä½ææ¾çå ç´ ä¹é½æ¯å¯ä»¥è¢«ç¼è¾çãå æ¤ï¼HTML5å¨è§é¢ä»¥åé³é¢å±é¢ä¸å®é å·²ç»å¯ä»¥æ¿ä»£å¸¸ç¨çflashæ件äºã
ãã4. ç»å¸(Canvas) API
ããå¨ç½é¡µä¸ç»å¶å¾å½¢ä¸ç´æ¯ä¸ªå¤§é¾é¢ï¼æ们ä¸å¾ä¸åå©flashãsilverlightçæ件ãç¶èHTML5å è®¸ä½ ç´æ¥å¨ç½é¡µä¸è¿è¡ç»å¾ï¼çè³å è®¸ä½ ä¸ç½é¡µçææ´å¤ç交äºï¼ä¾å¦ç»å¶å¾å½¢ãæ¾å¤§ç¼©å°ï¼ççãå¾ä¾æ¯ä¸ä¸ªç¨HTML5å¶ä½çå°æ¸¸æã
ãã5. å°ç(Geolocation) API
ããHTML5æä¾äºå°çä¿¡æ¯çåºç¨æ¥å£Geolocation APIãéè¿è¿ä¸ªAPIï¼ç½é¡µå¯ä»¥éè¿IPï¼GPSçæ¹å¼æ¥è·å¾ç¨æ·çå°çä¿¡æ¯;åæ¶ç¨æ·ä¹å¯ä»¥éæ©æ¯å¦å ³éè¿ä¸ªåè½ã
ãã6. ç½é¡µåå¨(Web storage) API
ããHTML5æä¾äºç½é¡µåå¨çAPIï¼æ¹ä¾¿Webåºç¨ç离线使ç¨ãé¤æ¤ä¹å¤ï¼æ°çAPIç¸å¯¹äºcookieä¹æçé«å®å ¨æ§ï¼é«æçï¼æ´å¤§ç©ºé´çä¼ç¹ã
ãã7. ææ½éæ¾(Drag and drop) API
ããæ们å¯ä»¥éè¿HTML5çDrag and drop APIæ¥å®æç½é¡µä¸çææ½éæ¾ææï¼é¿å äºä»¥å¾çç½é¡µå¨ææ½éæ¾è¿ç¨ä¸éè¦ä¸åä¿®æ¹å ç´ çä½ç½®ï¼ä»£ç ç¹å¤çå¼ç«¯ã
ããCSS3 æ°ç¹æ§
ãã1. RGBa
ããCSS3çRGBaæ°ç¹æ§å è®¸ä½ å¯¹æ¯ä¸ªå ç´ è¿è¡è²å½©ä»¥åéæ度ç设置ãèåæ¥å¸¸ç¨çopacityå½ä»¤åªè½å¯¹å ç´ åå ¶åå ç´ è¿è¡è®¾ç½®ã
ãã2. Multi-column layout
ããCSS3æ°æä¾çå¤æ å¸å±éæ©å¨æ éHTMLå¸å±æ ç¾å³å¯çæå¤æ å¸å±ï¼åæ¶âæ æ°âãâæ 宽â以åâæ é´è·âé½æ¯å¯ä»¥å®ä¹çã
ãã3. Round corners
ããåè§åè½å¯è½æ¯CSS3æä¾çæå®ç¨çåè½äºãéè¿Border-radiusï¼ä½ å¯ä»¥æ²¡æä»»ä½é¾åº¦çç»æå®çHTMLå ç´ æ·»å åè§ã并ä¸ä½ è¿å¯ä»¥å®ä¹åè§ç大å°ï¼ä»¥ååªä¸ªè§æ¯åè§ï¼åªä¸ªè§ä¸æ¯åè§ã
ãã4. @font-face
ããå½ç½é¡µæ¾ç¤ºæç§ç¨æ·æ²¡æå®è£ çåä½æ¶ï¼CSS3æä¾ç@font-faceåè½ä¼èªå¨çãé»é»å°å¸®ç¨æ·ä»ç½ç»ä¸ä¸è½½ç¸åºåä½ãä»è让设计å¸æ´å èªç±çåæ¥ï¼èä¸ç¨èèç¨æ·çæºå¨æ¯å¦å®è£ äºç¸åºåä½ã
ãã5. å ¶ä»ç¹æ§
ããæ¤å¤ï¼CSS3è¿ç»æ们带æ¥äºæ¸åãé²æ¢å符串è¿é¿æº¢åºãå¤éèæ¯ä»¥åç¨å¾çæ¥ä½ä¸ºå ç´ è¾¹æ¡çåè½ã
ããå©ç¨å¥½CSS3ï¼ä½ å¯ä»¥æ´å¿«æ·çå¾å°ä»¥å¾ç¨å¾å¤æ件æè½å¾å°çææãåè¿ä½¿ç¨å ç´ æ¬èº«æ¥å代大é¨åå¾çï¼ç½é¡µçå è½½é度ä¼å¾å°æåï¼è¿äºåæ¬æ¯å¾ççå 容ï¼ä¹å¯ä»¥è¢«æç´¢å¼ææ£ç´¢å°ã
温馨提示:答案为网友推荐,仅供参考
第1个回答 2015-06-27
这里面有很详细的html5和css3的一些教程