Html5新增標籤的學習。

來源:互聯網
上載者:User

標籤:記錄   hone   tle   odi   一段   foo   auto   紅樓夢   phone   

隨筆,記錄的比較隨便。

今天新學習了9個標籤、

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

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

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

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

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

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

<address>存放地址的標籤

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

<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>

  

Html5新增標籤的學習。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.