1. 程式人生 > >H5新增標簽

H5新增標簽

clas audio 選項 pre 底部 文本框 iphone tex ade

<header style="text-align: center; color: blue;">歡迎來到Html5的學習之路,我是header標簽。</header>

這是一個定義選項列表的標簽datalist 這個的作用就是將text文本框與select標簽結合起來

技術分享圖片
<input type="text" list="phone">
<datalist id="phone">
    <option></option>
    <option>IPhone</option>
    <option>華為 </option>
    <option>小米 </option>
    <option>三星</option>
</datalist>    
技術分享圖片

<font color="red">這裏我發現了兩者一個不同之處在於,datalist只有在輸入框為空的時候才會有自己定義下拉的內容!</font>
<br/>
而這個select選項框是不管什麽內容它都會存在的

<select>
<option>IPhone</option>
<option>華為 </option>
<option>小米 </option>
<option>三星</option>
</select>


------------------------
<br><br><br>
這是一個定義文檔細節的標簽。detail標簽。它的主要作用很簡單。

技術分享圖片
<details>
<summary>這是一個detail標簽,下面就是他的使用方法</summary>
<p>detail標簽是什麽?</p>
<p>detail標簽有什麽作用?</p>
<p>detail標簽能幹什麽?</p>
<p>detail標簽我改怎麽用它?</p>
</details>
技術分享圖片

<br>
detail標簽常與sunmmary標簽用在一起。比如這個標簽是高亮標簽<mark>mark</mark>比重不一樣。
<br><br>


接下來這個標簽是定義列表標簽。menu。

<menu>
    <li>西遊記</li><li>水滸傳</li><li>紅樓夢</li><li>三國演義</li>
</menu>

<br><br>
進度條標簽我們用的比較多。比如這個。

<mark>progress</mark>
<progress value="5" max="10">value=5 max=10</progress>
<br>


<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>

<footer>我是底部footer標簽</footer>

H5新增標簽