video標(biāo)簽

• 作用: 播放視頻

• 格式1:

<video src="">
</video>

• video標(biāo)簽的屬性

  • 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)簽中的一模一樣

    image

• 格式2

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

• 第二種格式存在的意義

  • 由于視頻數(shù)據(jù)非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導(dǎo)致了沒有一種視頻格式是所有瀏覽器都支持的這個(gè)時(shí)候W3C為了解決這個(gè)問題, 所以推出了第二個(gè)video標(biāo)簽的格式
  • ideo標(biāo)簽的第二種格式存在的意義就是為了解決瀏覽器適配問題. video 元素支持三種視頻格式, 我們可以把這三種格式都通過(guò)source標(biāo)簽指定給video標(biāo)簽, 那么以后當(dāng)瀏覽器播放視頻時(shí)它就會(huì)從這三種中選擇一種自己支持的格式來(lái)播放

• 注意點(diǎn):

  • 當(dāng)前通過(guò)video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過(guò)video標(biāo)簽播放視頻還有一個(gè)前提條件, 就是瀏覽器必須支持HTML5標(biāo)簽, 否則同樣無(wú)法播放
  • 在過(guò)去的一些瀏覽器是不支持HTML5標(biāo)簽的, 所以為了讓過(guò)去的一些瀏覽器也能夠通過(guò)video標(biāo)簽來(lái)播放視頻, 那么我們以后可以通過(guò)一個(gè)JS的框架叫做html5media來(lái)實(shí)現(xiàn)

audio標(biāo)簽

• 作用: 播放音頻

• 格式:

<audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>

• 注意點(diǎn):
  • audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣, video中能夠使用的屬性在audio標(biāo)簽中大部分都能夠使用, 并且功能都一樣. 只不過(guò)有3個(gè)屬性不能用, height/width/poster

image

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

• 作用:利用summary標(biāo)簽來(lái)描述概要信息, 利用details標(biāo)簽來(lái)描述詳情信息
  默認(rèn)情況下是折疊展示, 想看見詳情必須點(diǎn)擊

• 格式:

<details>
    <summary>概要信息</summary>
    詳情信息
</details>

image

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, 也就是無(wú)限滾動(dòng)
  • behavior: 設(shè)置滾動(dòng)類型 slide滾動(dòng)到邊界就停止, alternate滾動(dòng)到邊界就彈回

• 注意點(diǎn):

  • marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無(wú)法查詢這個(gè)標(biāo)簽, 但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好

image

image

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

-- 由于HTML現(xiàn)在只負(fù)責(zé)語(yǔ)義而不負(fù)責(zé)樣式.但是HTML一開始有一部分標(biāo)簽連樣式也包攬了, 所以這部分標(biāo)簽都被廢棄了

• b、u、i、s
• 以上標(biāo)簽自己帶有樣式, 有濃厚的樣式作用, 今后一般都只作為CSS鉤子使用
• 原則: 不到萬(wàn)不得已,切記不要使用如上標(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ū)別, 但是在語(yǔ)義上卻有重大區(qū)別

  • strong作用: 著重內(nèi)容

    • 格式:<strong>著重內(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>

  • 其它更多詳見維基百科

    image

HTML實(shí)體

• 我們想在頁(yè)面上輸出<h1>這些字符敌呈，但是HTML認(rèn)為這是一個(gè)標(biāo)簽, 所以如果需要輸出一些特殊的字符需要通過(guò)字符實(shí)體來(lái)實(shí)現(xiàn)

• lt是英語(yǔ)less than 小于的意思, <可以在頁(yè)面上輸出一個(gè)小于符號(hào)

• gt是英語(yǔ)greater than 大于的意思, >可以在頁(yè)面上輸出一個(gè)大于符號(hào)

• html中對(duì)空格神妹，縮進(jìn)浆兰，換行不敏感磕仅，如果同時(shí)出現(xiàn)多個(gè)空格縮進(jìn)或者執(zhí)行珊豹，頁(yè)面只會(huì)把它們當(dāng)作一個(gè)空格來(lái)解析。所以想要在html中輸出空格必須使用來(lái)實(shí)現(xiàn), 一個(gè)就代表一個(gè)空格

  • html對(duì)中文空格敏感, 也就是說(shuō)可以顯示中文空格, 但是不推薦這樣使用
  • 是英語(yǔ)non-breaking spacing, 翻譯為不打斷空格的意思

作者：極客江南
來(lái)源：簡(jiǎn)書