Html5新增標籤總結
- 巴扎黑原創
- 2017-08-08 16:35:021594瀏覽
這篇文章為大家整理了html5新增的九個標籤，非常不錯，需要的朋友參考下
今天新學習了9個標籤、
b97864c2e0ef2353a16c4d64c7734e92簡單的說就是一個音訊標籤，他主要的常用屬性有src=""音訊的路徑controls="controls" 控制參數，他就是可以讓其在頁面顯示一個播放器的效果autoplay="autoplay"自動播放屬性loop="loop"循環次數
39000f942b2545a5315c57fa3276f220同audio標籤一樣。是一個視訊標籤。主要常用的屬性同上面一樣
fc86e7b705049fc9d4fccc89a2e80ee3定義選項清單。這個其實是比較大的改進，不過也有不足，這個標籤其實組合了《input標籤中的text》和select標籤、生產的一個可以輸入和下拉選項的輸入組合框》。缺點在於如果不透過JS控制，只有當輸入框中為空，定義的下拉選項中才會生效
a5e9d42b316b6d06c62de0deffc36939定義文件細節。這個標籤其實用的地方也比較多，常和summary標籤用。 summary標籤裡面寫文檔的標題。 p標籤寫文檔的細節
f920514e6447cf1d171079d1371f007f一個高亮的顯示標籤，再也不用標記某一段文字要用font屬性了。
5c0e96d12fc7501cef2ae2efde646ee0快速建立一個list清單。用法是menu li結合
208700f394e4cf40a7aa505373e0130b存放位址的標籤
6ecb87e5318a36c03c59e25d55f43372這個是進度條標籤。他的主要屬性有value和max。 value表示當前進度條位置，max表示進度條的總共長度。
46dd80ba616c57a652514755c74c4211標籤放時間的標籤。
初步接觸html5的標籤。給人的第一個感覺就是望文知義。這個標籤能夠很容易讓人記住。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Html5学习之路</title>
</head>
<body>
<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>
<br/>
<br/>
<font color="red">这里我发现了两者一个不同之处在于，datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>
<br/>
而这个select选项框是不管什么内容它都会存在的
<select>
<option>IPhone</option>
<option>华为 </option>
<option>小米 </option>
<option>三星</option>
</select>
<br>
<br>
<br>
------------------------
<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>
</body>
</html>以上是Html5新增標籤總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！