首頁 > web前端 > H5教程 > 主體

HTML5新增標籤使用方法

小云云
發布: 2017-11-29 10:07:08
原創
2980 人瀏覽過

HTML5提供了一些新的元素和屬性,例如nav(網站導航區塊)和footer。這種標籤將有利於搜尋引擎的索引整理,同時更好的幫助小螢幕裝置和視障人士使用,除此之外,還為其他瀏覽要素提供了新的功能,如audio和video標記。下面我們就跟大家一起學習HTML5新增標籤使用方法。

<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>
登入後複製

以上內容就是HTML5新增標籤的使用方法教學,比較適合剛接觸HTML5的朋友們,希望對大家有幫助。

相關推薦:

最完整的HTML5標籤

#HTML5標籤選擇方法指引

HTML5標籤大全

#

以上是HTML5新增標籤使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!