HTML5 æ°å¢å¸¸ç¨å
ç´
HTML5ç声æ为ï¼<!DOCTYPE html>
å®ä¸ç¨ååä¹åççæ¬ä¸æ ·å¨å£°æä¸å¼ç¨DTDãDTD(document type definition)å®ä¹åæ³çXMLææ¡£æ建模åï¼å®ä½¿ç¨ä¸ç³»ååæ³çå
ç´ æ¥å®ä¹ææ¡£çç»æãå¨HTMLä¸ï¼DTDè§å®äºæ è®°è¯è¨çè§åï¼ä½¿æµè§å¨è½æ£ç¡®å°åç°å
容ãèHTML5ä¸åºäºSGMLï¼æ以ä¸éè¦å¼ç¨DTDã
ææ¡£ç»æå
ç´
<article>: å®ä¹å¯ä»¥ç¬ç«äºå
容å
¶ä½é¨åçå®æ´ç¬ç«å
容åã
<header>: 页é¢é¡¶é¨ã
<nav>: 导èªæ (边导èª,页é¢å¯¼,åºé¨å¯¼)æ ç¾ã
<hgroup>: å®ä¹å¤ä¸ªæ é¢æ¶ã
<section>: å
容åå.å¯è®¾ç½®citeå±æ§ã
<aside>: 侧边æ ï¼å®ä¹å页é¢å
容å
³è度è¾ä½çå
容ââå¦æ被å é¤ï¼å©ä¸çå
容ä»ç¶å¾åçã
<figure>: 代表ä¸ä¸ªåææ¡£æå
³çå¾ä¾ã
<figcaption>: 代表ä¸ä¸ªå¾ä¾ç说æï¼æ é¢ï¼ã
<footer>: 页é¢åºé¨ã
<dialog>:å®ä¹å¯¹è¯æ¡ã
åµå
¥å
ç´
<video> 代表ä¸æ®µè§é¢ åå
¶è§é¢æ件ååå¹ï¼å¹¶æä¾äºææ¾è§é¢çç¨æ·çé¢ãå±æ§æï¼
src
autoplayï¼æ§å¶èªå¨ææ¾ï¼
loopï¼ææ¾å®åæ¯å¦éæ°ææ¾ï¼
controlsï¼æ¾ç¤ºç¨æ·çé¢ï¼
width
height
<audio> 代表ä¸æ®µå£°é³ ï¼æé³é¢æµã æ ç¾å
çæåä¼å¨æ ç¾ä¸è¢«æ¯ææ¶åç°ãå±æ§æï¼
src
autoplay
loopï¼ææ¾æ¬¡æ°ï¼ä¸º-1æ¶å¾ªç¯ææ¾ï¼
controls
volume(é³é)
<source> 为 <video> æ <audio> è¿ç±»åªä½å
ç´ æå®åªä½æºãå±æ§æsrc\typeï¼æå®èµæºçMIMEç±»åï¼ã
<track>为 <video> æ <audio> è¿ç±»åªä½å
ç´ æå®ææ¬è½¨éï¼åå¹ï¼ ãå±æ§æï¼
kindï¼æ°æ®ç±»åï¼
src
srclangï¼trackææ¬æ°æ®çè¯è¨ï¼
label å½ååºå¯ç¨çtext tracksæ¶ï¼ç»æµè§å¨ä½¿ç¨çtext trackçæ é¢ï¼è¿ç§æ é¢æ¯ç¨æ·å¯è¯»çã
注æï¼ä¸ä¸ªmedia å
ç´ çä»»æ两个 track åå
ç´ ä¸è½æç¸åç kind, srclang, å labelå±æ§ã
<canvas> 代表ä½å¾åºåï¼å¯ä»¥éè¿èæ¬å¨å®ä¸é¢å®æ¶åç°å¾å½¢ï¼å¦å¾è¡¨ã游æç»å¾çã
<embed> 代表ä¸ä¸ªåµå
¥çå¤é¨èµæºï¼å¦åºç¨ç¨åºæ交äºå
容ãå±æ§æï¼
width
height
src
type ç¨äºéæ©æ件å®ä¾åç MIME ç±»åã
表åå
ç´
<meter>代表æ»å¨æ¡ãæ¾ç¤ºå®æ¶ç¶æãå±æ§æ:
value å½åæ°å¼ï¼å¦æç»å®çå¼ä¸å¨æå°å¼åæ大å¼ä¹é´ï¼å®çå¼å°±çäºå®ææ¥è¿çä¸ç«¯çå¼ã
min å¼åçæå°è¾¹çå¼ï¼é»è®¤ä¸º0
max å¼åçæ大边çå¼ï¼é»è®¤ä¸º1
low å®ä¹äºä½å¼åºé´çä¸éå¼ï¼å½æ°å¼å¤äºlow-minæhigh-maxæ¶å°±ä¼åç°ä¸åçæ ·å¼ã
high å®ä¹äºé«å¼åºé´çä¸éå¼ã
optimum æä¼å¼
<output>代表计ç®å¼ ã
for å
¶å®å½±å计ç®ç»æçæ ç¾çIDï¼å¯ä»¥å¤ä¸ªã
form ä¸å½åæ ç¾æå
³èçformï¼ä»å±ç表åï¼ã该å±æ§çå¼å¿
é¡»æ¯å½åææ¡£å
ç表åå
ç´ çIDãå¦ææªææ该å±æ§ï¼outputæ ç¾å¿
é¡»æ¯ä¸ä¸ªformçå代æ ç¾ã该å±æ§çç¨å¤å¨äºå¯ä»¥è®©outputæ ç¾è±ç¦»formæ ç¾ï¼åå¨äºä¸ä¸ªç½é¡µææ¡£çä»»æä½ç½®ã
name
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
1
2
3
4
5
<progress>代表è¿åº¦æ¡ï¼è¡¨ç¤ºä»»å¡è¿ç¨ï¼å±æ§æmaxï¼ä»»å¡æ»éï¼\valueã
<datalist>为Inputæ è®°å®ä¹ä¸ä¸ªä¸æå表ï¼é
åoptionæ ç¾ã
å
¶ä»
<details>å建ä¸ä¸ªæ件ï¼ä»
å¨è¢«åæ¢æå±å¼ç¶ææ¶ï¼å®æä¼æ¾ç¤ºå
å«çä¿¡æ¯ã
<summary> æ¯details å
ç´ çåå
ç´ ï¼è¡¨ç¤ºå
¶ç»¼è¿°ææ é¢ ã
<mark>代表ä¸æ®µéè¦è¢«é«äº®çå¼ç¨æåã
<ruby>表示éè¦è¢«ruby 注é æ è®°çææ¬ï¼å¦ä¸ææ±ååå®çæ¼é³ã
<rt> 表示ruby 注é ï¼å¦ä¸ææ¼é³ã
<rp> å¨ruby 注é两边çé¢å¤æå
¥ææ¬ ï¼ç¨äºå¨ä¸æ¯æ ruby 注éæ¾ç¤ºçæµè§å¨ä¸æä¾å好ç注éæ¾ç¤ºã
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
1
顺便ä¸æï¼html5å é¤äºçå
ç´ ï¼
纯表ç°çï¼basefont\big\center\font\s\strike\tt\u
对å¯ç¨æ§æè´é¢å½±åçï¼frame\frameset\noframes
产çæ··æ·çï¼acronym\applet\isindex\dir
åæ¶HTML5ä¹å¯¹æäºå
ç´ è¿è¡äºéå®ä¹ï¼æ¹åäºå®ä»¬çè¯è¨å
容ä½è¡¨ç°ä¸åãå¦bæ ç¾ãiæ ç¾ï¼ä»ç¶è¡¨ç¤ºä¸ºç²ä½ãæä½ï¼ä½ä»£è¡¨äºä¸æ®µéè¦è¢«å
³æ³¨çæåãä¸æ®µä¸åæ§è´¨çæåï¼å¦ææ¯æ¯è¯ãå¤æçè¯çã
HTML5å±æ§åå
æ°å¢ç±»å
email \ url \ tel \ number
Datepickers:date \ month \ weekï¼iphoneä¸å
¼å®¹ï¼ \ time \ datetime(UTCæ ¼å¼ï¼å®åãi6+ãPC端ä¸å
¼å®¹) \ datetime-local
é对PC端ï¼range(æ°´å¹³æï¼ä¸¤è¾¹ä¸ºminåmax) \ searchï¼æå
容æ¶å³è¾¹åºç°Ãï¼\ colorï¼é¢è²éæ©æ¡ï¼
表åå±æ§
autocompleteå±æ§ï¼èªå¨å®æåè½ï¼éç¨äºæ ç¾ï¼ä»¥å以ä¸ç±»åçinputæ ç¾ï¼text \ search \ url \ tel \ email \ password \ datepickers \ range \ color
<form autocomplete="on"> //on为æå¼ï¼Off为å
³é
</form>
1
2
autofocuså±æ§ï¼åèªå¨å°è·å¾ç¦ç¹ï¼éç¨äºææçæ ç¾çç±»å
<input autofocus="autofocus"/>
1
multipleå±æ§ï¼è§å®è¾å
¥åä¸å¯éæ©å¤ä¸ªå¼ï¼éç¨äºemail \ fileç±»åçæ ç¾
<input type="file" multiple="multiple" />
1
placeholderå±æ§ï¼æä¾ä¸ç§æ示ï¼æè¿°è¾å
¥åææå¾
çå¼ï¼éç¨äºtext \ search \ url \ tel \ email \ password ç±»åçæ ç¾
<input type="text" placeholder="please input your name!"/>
1
requiredå±æ§ï¼è§å®å¿
é¡»å¨æ交ä¹åå¡«åè¾å
¥åï¼ä¸å¿
é¡»æç
§ç¸åºåçæ ¼å¼ï¼å¦ï¼emailåå¿
é¡»è¦æ@ãé®ä»¶åãéç¨äºtext \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file ç±»åçæ ç¾
<input type="email" requried="required" />
1
é¾æ¥å±æ§
sizes
<link rel="icon" href="icon.gif" type="image/gif" sizes="16*16" >
//ç½é¡µå¤´é¨æ é¢çlogoï¼å¯æ ¹æ®ä¸åå辨çå¼ç¨ä¸åçsizes
//type为该å¾æ çç±»åï¼è¯´æ该å¾æ æ ¼å¼ä¸ºgif
1
2
3
target
<base href="......" target="_blank" >
1
baseæ ç¾åå¨headæ ç¾å
ãtargetå±æ§æ§å¶æ´ä¸ªé¡µé¢ææè¶
é¾æ¥çé»è®¤æå¼æ¹å¼ï¼æ¬æ¥æ¯_selfï¼ï¼hrefæå®é¡µé¢ä¸ææç¸å¯¹é¾æ¥çåºå URLï¼
è¶
é¾æ¥çå±æ§
media=âhandheldâï¼è¡¨ç¤ºå¯¹è®¾å¤è¿è¡ä¼åï¼handheld对âææâ设å¤è¿è¡æ¯æï¼tv对âçµè§â设å¤è¿è¡æ¯æï¼ï¼
hreflang=âzhâï¼è®¾ç½®è¯è¨ï¼zh表示æ¯ç®ä½ä¸æï¼
rel=âexternalâï¼è®¾ç½®è¶
é¾æ¥çå¼ç¨ï¼external表示å
¶ä¸ºå¤é¨é¾æ¥ï¼
å
¶ä»å±æ§
<script>çå±æ§
deferï¼å è½½å®èæ¬å并ä¸æ§è¡ï¼å»¶è¿æ§è¡ï¼ï¼èæ¯çæ´ä¸ªé¡µé¢å è½½å®ä¹ååæ§è¡ï¼åªæieå
¼å®¹
asyncï¼å¯¹èæ¬è¿è¡å¼æ¥å è½½ï¼å è½½å®èæ¬åç«å»æ§è¡ï¼èä¸ç¨çæ´ä¸ªé¡µé¢é½å è½½å®æè½æ§è¡ã
å¦æ async=âasyncâï¼èæ¬ç¸å¯¹äºé¡µé¢çå
¶ä½é¨åå¼æ¥å°æ§è¡ï¼å½é¡µé¢ç»§ç»è¿è¡è§£ææ¶ï¼èæ¬å°è¢«æ§è¡ï¼
å¦æä¸ä½¿ç¨ async ä¸ defer=âdeferâï¼èæ¬å°å¨é¡µé¢å®æ解ææ¶æ§è¡
å¦ææ¢ä¸ä½¿ç¨ async ä¹ä¸ä½¿ç¨deferï¼å¨æµè§å¨ç»§ç»è§£æ页é¢ä¹åï¼ç«å³è¯»å并æ§è¡èæ¬
<ol>çå±æ§
startï¼è®¾ç½®åºå·çèµ·å§å¼
reversedï¼ååæå reversed=âreversedâ
<html>çå±æ§ï¼manifest
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
1
2
3
4
éè¿å¨é¡µé¢ä¸è®¾ç½®manifestå±æ§æå¨manifestæ件ä¸å å
¥é¡µé¢ï¼å¯ä»¥å°æ¤é¡µé¢ç¼åï¼è¿æ ·æ们就å¯ä»¥ç¦»çº¿è®¿é®ï¼ä¸è·å¾æ´å¿«çé度ï¼å 为已ç¼åèµæºå è½½å¾æ´å¿«ãè¿å¯ä»¥åå°æå¡å¨è´è½½ã
ä¸æ¦æ件被ç¼åï¼åæµè§å¨ä¼ç»§ç»å±ç¤ºå·²ç¼åççæ¬ï¼å³ä½¿ä¿®æ¹äºæå¡å¨ä¸çæ件ã为äºç¡®ä¿æµè§å¨æ´æ°ç¼åï¼éè¦æ´æ° manifest æ件ã
styleçå±æ§scopedï¼å
åµCSS,å¯ä»¥åå¨ä»»ä½ä½ç½®ï¼èä¸æ¢æ¯headãä¸è¿è¿æ ·ä¼è¿åæ们ä½è¦åçååã
<style scoped>
...
<style>
温馨提示:答案为网友推荐,仅供参考