Html5新增標籤的學習。

隨筆,記錄的比較隨便。html

今天新學習了9個標籤、html5

<audio> 簡單的說就是一個音頻標籤,他的主要經常使用屬性有src=""音頻的路徑 controls="controls" 控制參數,他就是可讓其在頁面顯示一個播放器的效果autoplay="autoplay"自動播放屬性 loop="loop"循環次數java

<video>同audio標籤同樣。是一個視頻標籤。主要經常使用的屬性同上面同樣ide

<datalist>定義選項列表。這個實際上是一個比較大的改進,不過也有不足,這個標籤其實組合了《input標籤中的text》和select標籤、生產的一個能夠輸入和下拉選項的輸入組合框》。不足之處在於若是不經過JS控制,只有當輸入框中爲空,定義的下拉選項中才會生效oop

<details>定義文檔細節。這個標籤其實用的地方也比較多,常和summary標籤用。summary標籤裏面寫文檔的標題。p標籤寫文檔的細節學習

<mark>一個高亮的顯示標籤,不再用標記某一段文字要用font屬性了。ui

<menu>快速建立一個list列表。用法是menu li結合視頻

<address>存放地址的標籤htm

<progress>這個是一個進度條標籤。他的主要屬性有value和max。value表示當前進度條位置,max表示進度條的總共長度。blog

<time>標籤放時間的標籤。

初步接觸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>
相關文章
相關標籤/搜索