HTML5

html5是最新版的html的標簽和標簽屬性，雖然是最新版的，也過了好多年了

》》html5之新標簽

div語義化
只是看起來更整齊，可讀性，語義化

• Header
• nav（導航）
• article（區域）
• section（主題）
• aside（廣告）
• footer

視頻標簽video和一個音頻標簽audio和一個畫布canvas
視頻標簽也就是html播放器，這個標簽的出現直接秒殺了flash播放器
這三個標簽有很多的api，很強大

<!-- canvas畫布 -->
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>

<!-- video視頻 -->
<video id="mp4">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  您的瀏覽器不支持 HTML5 video  標簽。
</video>

<!-- audio視頻 -->
<audio src="someaudio.wav" id="mp3">
您的瀏覽器不支持 audio 標簽。
</audio>

還有input出了新的type，有date，color

<input type="date">
<input type="datetime">
<input type="color">
<input type="range">
...

input-file的屬性
accept表示打開的系統文件目錄
capture表示的是系統所捕獲的默認設備，camera：照相機；camcorder：攝像機；microphone：錄音；
其中還有一個屬性multiple，支持多選，當支持多選時，multiple優先級高於capture

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
<input type="file" accept="image/*" multiple>

iframe

<!-- 去除iframe自帶的滾動條 -->
<iframe id="iframe" src="xxx" frameborder="0" scrolling="no" style="width: 100%;"></iframe>

》》html5之新屬性

1. hidden的隱藏屬性
2. input的pattern=/reg/ 用於表單內容判斷（示例查看css的藝術）
3. input的placeholder 是提示語
4. input的required 是必填，但只能在form標簽提交時生效
5. 在標簽內加上contenteditable="true" 可以讓標簽變成可編輯的區域，富文本編輯器就是用這個屬性做的
6. input的list屬性（實現下拉帶搜索的功能）

<input type="text" list="names" multiple />
<datalist id="names">
   <option value="kris">
   <option value="陳大魚頭">
   <option value="深圳金城武">
</datalist>

<input type="email" list="emails" multiple />
<datalist id="emails">
   <option value="[e-mail]" label="kris">
   <option value="[e-mail]" label="kris">
</datalist>

<input type="date" list="dates" />
<datalist id="dates">
   <option value="2019-09-03">
</datalist>