HTML多媒體標(biāo)簽

video標(biāo)簽

  • 格式1:
    <video src="">
    </video>
  • 作用: 播放視頻
  • 屬性:
  • src: 告訴video標(biāo)簽需要播放的視頻地址
  • autoplay: 告訴video標(biāo)簽是否需要自動(dòng)播放視頻
  • controls: 告訴video標(biāo)簽是否需要顯示控制條
  • poster: 告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片
  • loop: 告訴video標(biāo)簽循環(huán)播放視頻. 一般用于做廣告視頻
  • preload: 告訴video標(biāo)簽預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會(huì)失效
  • muted:告訴video標(biāo)簽視頻靜音
  • width/height: 和img標(biāo)簽中的一模一樣,設(shè)置視頻的寬高
  • 格式2:
    <video>
    <source src="路徑" type="video/格式">
    </video>
    *例如:
    <video>
    <source src="images/a.webm" type="video/webm">
    </video>
  • 作用:
  • video標(biāo)簽的第二種格式存在的意義就是為了解決瀏覽器適配問題.
  • 注意:
  • 當(dāng)前通過video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標(biāo)簽播放視頻還有一個(gè)前提條件, 就是瀏覽器必須支持HTML5標(biāo)簽, 否則同樣無法播放
  • 在過去的一些瀏覽器是不支持HTML5標(biāo)簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標(biāo)簽來播放視頻, 那么我們以后可以通過一個(gè)JS的框架叫做html5media來實(shí)現(xiàn)

audio標(biāo)簽

  • 格式:
    <audio src="">
    </audio>
  • 作用:播放音頻
  • audio屬性:
  • src: 告訴audio標(biāo)簽需要播放的音頻地址
  • autoplay: 告訴audio標(biāo)簽是否需要自動(dòng)播放音頻
  • controls: 告訴audio標(biāo)簽是否需要顯示控制條
  • loop: 告訴audio標(biāo)簽循環(huán)播放音頻.
  • preload: 告訴audio標(biāo)簽預(yù)加載音頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會(huì)失效
  • muted:告訴audio標(biāo)簽音頻靜音
    *格式2:
    <audio>
    <source src="路徑" type="audio/格式">
    </audio>
  • 作用:同上
  • 注意:
  • audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣,只不過有3個(gè)屬性不能用, height/width/poster

詳情和概要標(biāo)簽

  • 格式:
    <details>
    <summary>概要信息</summary>
    詳情信息
    </details>
  • 作用:
  • 利用summary標(biāo)簽來描述概要信息, 利用details標(biāo)簽來描述詳情信息
  • 默認(rèn)情況下是折疊展示, 想看見詳情必須點(diǎn)擊
事例.png

marquee標(biāo)簽

  • 格式;
    <marquee>內(nèi)容</marquee>
  • 作用:跑馬燈效果
  • 屬性:
  • direction: 設(shè)置滾動(dòng)方向 left/right/up/down
  • scrollamount: 設(shè)置滾動(dòng)速度, 值越大就越快
  • loop: 設(shè)置滾動(dòng)次數(shù), 默認(rèn)是-1, 也就是無限滾動(dòng)
  • behavior: 設(shè)置滾動(dòng)類型 slide滾動(dòng)到邊界就停止, alternate滾動(dòng)到邊界就彈回
  • 注意:
  • marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無法查詢這個(gè)標(biāo)簽, 但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好
  • 例子:

    <marquee>隨便寫點(diǎn)內(nèi)容</marquee>
    <marquee direction="right">隨便寫點(diǎn)內(nèi)容</marquee>
    <marquee direction="up">隨便寫點(diǎn)內(nèi)容</marquee>
    <marquee direction="down">隨便寫點(diǎn)內(nèi)容</marquee>

    <marquee scrollamount="1">隨便寫點(diǎn)內(nèi)容</marquee>
    <marquee scrollamount="100">隨便寫點(diǎn)內(nèi)容</marquee>

    <marquee loop="1">隨便寫點(diǎn)內(nèi)容</marquee>

    <marquee behavior="slide">隨便寫點(diǎn)內(nèi)容</marquee>
    <marquee behavior="alternate">隨便寫點(diǎn)內(nèi)容</marquee>
    滾動(dòng)圖片:
    <marquee>



    </marquee>

HTML中被廢棄的標(biāo)簽

  • 由于HTML現(xiàn)在只負(fù)責(zé)語義而不負(fù)責(zé)樣式.但是HTML一開始有一部分標(biāo)簽連樣式也包攬了, 所以這部分標(biāo)簽都被廢棄了
    - b、u、i、s
    - 以上標(biāo)簽自己帶有樣式, , 有濃厚的樣式作用,今后一般都只作為CSS鉤子使用
    - 原則: 不到萬不得已,切記不要使用如上標(biāo)簽. 大家可以到BAT的網(wǎng)站查看源代碼, 幾乎看不到以上標(biāo)簽
  • b(Bold)作用: 將文本字體加粗
    格式:<b>將文本字體加粗</b>
  • u(Underlined)作用: 為文本添加下劃線
    格式:<u>為文本添加下劃線</u>
  • i(Italic)作用: 顯示斜體文本效果
    格式:<i>顯示斜體文本效果</i>
  • s(Strikethrough)作用: 為文本添加刪除線
    格式:<s>為文本添加刪除線</s>
  • 為了彌補(bǔ) b、u、i、s標(biāo)簽的不足, W3C又推出了一組新的標(biāo)簽, 這些標(biāo)簽在顯示上看似和buis沒什么區(qū)別, 但是在語義上卻有重大區(qū)別
  • strong作用: 著重內(nèi)容
    格式:<strong>重要性強(qiáng)調(diào)的內(nèi)容</strong>
  • ins(Inserted)作用: 新插入的文本
    格式:<ins>新插入的文本</ins>
  • em(Emphasized)作用:強(qiáng)調(diào)內(nèi)容
    格式:<em>強(qiáng)調(diào)內(nèi)容</em>
  • del(Deleted)作用: 已刪除的文本
    格式:<del>已刪除的文本</del>

HTML字符實(shí)體

  • 在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含義的, 是不能在瀏覽器中直接顯示出來的, 那么這些東西要想顯示出來就必須通過字符實(shí)體,例如我們想在頁面上輸出h1這些字符,但是HTML認(rèn)為這是一個(gè)標(biāo)簽, 所以如果需要輸出一些特殊的字符需要通過字符實(shí)體來實(shí)現(xiàn)
%P})1MGYA1CGBH87_PI7I@9.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容