玩轉HTML5+跨平臺開發[6] H5多媒體標簽
阿新 • • 發佈：2017-12-03
sch -s play 框架 none 加粗 都是 特殊 class summary標簽和
匯總
1. video標簽
2. audio標簽
3. summary標簽和details標簽-詳情和概要標簽
4. marquee標簽-跑馬燈效果
5. HTML中被廢棄的標簽
6. HTML實體
video標簽
-
作用: 播放視頻
-
格式1:
<video src=""> </video>
- video標簽的屬性
src: 用於告訴video標簽需要播放的視頻地址；
autoplay: 用於告訴video標簽是否需要自動播放視頻；
controls: 用於告訴video標簽是否需要顯示控制條；
poster: 用於告訴video標簽視頻沒有播放之前顯示的占位圖片；
loop: 一般用於做廣告視頻, 用於告訴video標簽視頻播放完畢之後是否需要循環播放；
preload: 預加載視頻, 但是需要註意preload和autoplay相沖突, 如果設置了autoplay屬性, 那麽preload屬性就會失效；
muted:告訴video標簽視頻靜音；
width/height: 和img標簽中的一模一樣。
<!--<video src="images/sb1.webm" autoplay="autoplay" controls="controls"></video>--> <!--<video src="images/sb1.webm" controls="controls" poster="images/NJ.jpg"></video>--><video src="images/sb1.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>
- 格式2：
<video> <source src="" type=""></source> <source src="" type=""></source> </video>
-
第二種格式存在的意義
- 由於視頻數據非常非常的重要, 所以五大瀏覽器廠商都不願意支持別人的視頻格式, 所以導致了沒有一種視頻格式是所有瀏覽器都支持的這個時候W3C為了解決這個問題, 所以推出了第二個video標簽的格式；
- video標簽的第二種格式存在的意義就是為了解決瀏覽器適配問題. video 元素支持三種視頻格式, 我們可以把這三種格式都通過source標簽指定給video標簽, 那麽以後當瀏覽器播放視頻時它就會從這三種中選擇一種自己支持的格式來播放
-
註意點:
- 當前通過video標簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標簽播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標簽, 否則同樣無法播放
- 在過去的一些瀏覽器是不支持HTML5標簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標簽來播放視頻, 那麽我們以後可以通過一個JS的框架叫做html5media來實現
<video autoplay="autoplay" controls="controls"> <source src="images/sb1.webm" type="video/webm"></source> <source src="images/sb1.mp4" type="video/mp4"></source> <source src="images/sb1.ogg" type="video/ogg"></source> </video>
audio標簽
-
作用: 播放音頻
-
格式:
<audio src=""> </audio> <audio> <source src="" type=""> </audio>
- 註意點:
audio標簽的使用和video標簽的使用基本一樣, video中能夠使用的屬性在audio標簽中大部分都能夠使用, 並且功能都一樣
只不過有3個屬性不能用, height/width/poster
<audio src="images/yinyue.mp3" autoplay="autoplay" controls="controls"></audio> <audio autoplay="autoplay" controls="controls"> <source src="images/yinyue.mp3" type="audio/mp3"> </audio>
summary標簽和details標簽-詳情和概要標簽
- 作用
利用summary標簽來描述概要信息, 利用details標簽來描述詳情信息。
默認情況下是折疊展示, 想看見詳情必須點擊。 - 格式:
<details> <summary>概要信息</summary> 詳情信息 </details>
<details> <summary>鄭伊健</summary> 簡介：鄭伊健，1967年10月4日出生於中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。1991年... </details>
marquee標簽
- 作用: 跑馬燈效果
- 格式:
<marquee>內容</marquee>
-
屬性:
- direction: 設置滾動方向 left/right/up/down
- scrollamount: 設置滾動速度, 值越大就越快
- loop: 設置滾動次數, 默認是-1, 也就是無限滾動
- behavior: 設置滾動類型 slide滾動到邊界就停止, alternate滾動到邊界就彈回
-
註意點:
- marquee標簽不是W3C推薦的標簽, 在W3C官方文檔中也無法查詢這個標簽, 但是各大瀏覽器對這個標簽的支持非常好
<!--滾動方向--> <marquee>隨便寫點內容</marquee> <marquee direction="right">隨便寫點內容</marquee> <marquee direction="up">隨便寫點內容</marquee> <marquee direction="down">隨便寫點內容</marquee> <hr> <!--設置滾動速度--> <marquee scrollamount="1">隨便寫點內容</marquee> <marquee scrollamount="100">隨便寫點內容</marquee> <hr> <!--設置滾動次數--> <marquee loop="1">隨便寫點內容</marquee> <hr> <!--設置滾動類型--> <marquee behavior="slide">隨便寫點內容</marquee> <marquee behavior="alternate">隨便寫點內容</marquee> <marquee> <img src="images/NJ.jpg" width="50px"> </marquee>
HTML中被廢棄的標簽
- 為什麽HTML中有一部分標簽會被廢棄?
因為當前的HTML中的標簽只有一個作用, 就是用來添加語義，而早期的HTML標簽中有一部分標簽是沒有語義的,是用來修改樣式的，所以這部分標簽就被淘汰了。 - 被廢棄的部分標簽
<br> <hr> <font>
<b> <u> <i> <s>以上標簽都是沒有語義的,都是用來修改樣式的。
b(bold) 加粗文本, 沒有任何語義的
u(underline) 給文本天津下劃線, 沒有任何語義的
i(italic) 將文本傾斜, 沒有任何語義的
s(strikethourgh) 給文本添加刪除線, 沒有任何語義的 - 註意點:
以後在企業開發中, 不到萬不得已一定不要使用這些被廢棄掉的標簽；
如果一定要使用, 一般情況下都是用來作為CSS的鉤子來使用。 - 為了彌補 b、u、i、s標簽的不足, W3C又推出了一組新的標簽, 這些標簽在
顯示上看似和buis沒什麽區別,但是在語義上卻有重大區別strong語義: 定義重要性強調的文字
ins語義(inserted): 定義插入的文字
em語義(emphasized): 定義強調的文字
del語義(deleted): 定義被刪除的文字
strong == b
ins == u
em == i
del == s
- 其它更多詳見維基百科
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-HTML中被廢棄的標簽</title> <style type="text/css"> .one { font-weight: bold; } .two { text-decoration: underline; } .three { font-style: italic; } .four { text-decoration: line-through; } </style> </head> <body> <b>我是文字</b> <u>我是文字</u> <i>我是文字</i> <s>我是文字</s> <hr> <strong>我是文字</strong> <ins>我是文字</ins> <em>我是文字</em> <del>我是文字</del> <hr> <p class="one">我是文字</p> <p class="two">我是文字</p> <p class="three">我是文字</p> <p class="four">我是文字</p> </body> </html>
HTML實體
- 什麽是字符實體?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含義的, 是不能在瀏覽器中直接顯示出來的, 那麽這些東西要想顯示出來就必須通過字符實體 - html中對空格，縮進，換行不敏感，如果同時出現多個空格縮進或者執行，頁面只會把它們當作一個空格來解析。
- html對中文空格敏感, 也就是說可以顯示中文空格, 但是不推薦這樣使用
nbsp是英語non-breaking spacing, 翻譯為不打斷空格的意思
空格, 一個 就是一個空格, 有多少個 就有多少個空格 < 小於符號 < (less than) > 大於符號 > (greater than) © 版權符號
<p>我 愛你</p> <p>到此為止我們的HTML的基礎標簽就學習完畢了, 例如我們學習了<h1>標簽, <table>標簽, <img>標簽....</p>
更多HTML實體參考
http://www.w3school.com.cn/tags/html_ref_entities.html
參考：極客江南-06HTML基礎--多媒體標簽
玩轉HTML5+跨平臺開發[6] H5多媒體標簽