82_h5筆記6_多媒體標籤 +棄用和新增標籤 + meta標籤詳解
阿新 • • 發佈：2018-11-19
一，video標籤
作用: 播放視訊
格式1:
<video src="">
</video>video標籤的屬性
- src: 告訴video標籤需要播放的視訊地址
- autoplay: 告訴video標籤是否需要自動播放視訊
- controls: 告訴video標籤是否需要顯示控制條
- poster: 告訴video標籤視訊沒有播放之前顯示的佔位圖片
- loop: 告訴video標籤迴圈播放視訊. 一般用於做廣告視訊
- preload: 告訴video標籤預載入視訊, 但是需要注意preload和autoplay相沖, 如果設定了autoplay屬性, 那麼preload屬性就會失效
- muted:告訴video標籤視訊靜音
- width/height: 和img標籤中的一模一樣
格式2
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
- 由於視訊資料非常非常的重要, 所以五大瀏覽器廠商都不願意支援別人的視訊格式, 所以導致了沒有一種視訊格式是所有瀏覽器都支援的這個時候W3C為了解決這個問題, 所以推出了第二個video標籤的格式
- ideo標籤的第二種格式存在的意義就是為了解決瀏覽器適配問題. video 元素支援三種視訊格式, 我們可以把這三種格式都通過source標籤指定給video標籤, 那麼以後當瀏覽器播放視訊時它就會從這三種中選擇一種自己支援的格式來播放
- 當前通過video標籤的第二種格式雖然能夠指定所有瀏覽器都支援的視訊格式, 但是想讓所有瀏覽器都通過video標籤播放視訊還有一個前提條件, 就是瀏覽器必須支援HTML5標籤, 否則同樣無法播放
- 在過去的一些瀏覽器是不支援HTML5標籤的, 所以為了讓過去的一些瀏覽器也能夠通過video標籤來播放視訊, 那麼我們以後可以通過一個JS的框架叫做html5media來實現
二，audio標籤
作用: 播放音訊
格式:
<audio src="">
</audio><audio>
<source src="" type="">
</audio>
注意點:
audio標籤的使用和video標籤的使用基本一樣, video中能夠使用的屬性在audio標籤中大部分都能夠使用, 並且功能都一樣. 只不過有3個屬性不能用, height/width/poster
三，marquee標籤
作用: 跑馬燈效果
格式:<marquee>內容</marquee>
屬性:
- direction: 設定滾動方向 left/right/up/down
- scrollamount: 設定滾動速度, 值越大就越快
- loop: 設定滾動次數, 預設是-1, 也就是無限滾動
- behavior: 設定滾動型別 slide滾動到邊界就停止, alternate滾動到邊界就彈回
注意點:
- marquee標籤不是W3C推薦的標籤, 在W3C官方文件中也無法查詢這個標籤, 但是各大瀏覽器對這個標籤的支援非常好
四，summary標籤
作用:利用summary標籤來描述概要資訊, 利用details標籤來描述詳情資訊
預設情況下是摺疊展示, 想看見詳情必須點選格式:
<details>
<summary>概要資訊</summary>
詳情資訊
</details>
五，HTML中被廢棄的標籤
- -- 由於HTML現在只負責語義而不負責樣式.但是HTML一開始有一部分標籤連樣式也包攬了, 所以這部分標籤都被廢棄了
- - 標籤有： b、u、i、s
- - 以上標籤自己帶有樣式, 有濃厚的樣式作用, 今後一般都只作為CSS鉤子使用
- b(Bold)作用: 將文字字型加粗
- 格式:<b>將文字字型加粗</b>
- u(Underlined)作用: 為文字新增下劃線
- 格式:<u>為文字新增下劃線</u>
- i(Italic)作用: 顯示斜體文字效果
- 格式:<i>顯示斜體文字效果</i>
- s(Strikethrough)作用: 為文字新增刪除線
- 格式:<s>為文字新增刪除線</s>
六， HTML新增的標籤
- 為了彌補 b、u、i、s標籤的不足, W3C又推出了一組新的標籤, 這些標籤在顯示上看似和buis沒什麼區別, 但是在語義上卻有重大區別
- strong作用: 著重內容
- 格式:<strong>著重內容</strong>
- ins(Inserted)作用: 新插入的文字
- 格式:<ins>新插入的文字</ins>
- em(Emphasized)作用:強調內容
- 格式:<em>強調內容</em>
- del(Deleted)作用: 已刪除的文字
- 格式:<del>已刪除的文字</del>
七，meta標籤
- Keywords型別
- 作用: 告訴搜尋引擎當前網頁的關鍵詞, 在SEO中非常重要, 能夠提高搜尋命中率, 讓別人更容易找到你
- 格式: <meta name="keywords" content="IT前言技術、iOS技術、HTML5技術、Android技術" />
- Descriiption型別
- 作用: 告訴搜尋引擎當前網頁的主要內容, 在SEO中非常重要, 當別人在搜尋引擎中搜索到你的網站時會自動作為對你網站的描述資訊展示給使用者, 能夠提高搜尋命中率, 讓別人更容易找到你
- 格式: <meta name="description" content="江哥熱愛於IT前言技術、iOS技術、HTML5技術、Android技術研究" />
- Author型別
- 作用: 告訴搜尋引擎當前網頁的作業, install B專用
- 格式: <meta name="author" content="Jonathan_Lee" />
- Refresh型別
- 作用: 告訴瀏覽器多久自動重新整理一次頁面並指向新頁面, 常用於新老域名交替時, 訪問老域名自動跳轉到新域名, 或用語一些需要定時重新整理的聊天室等.
- 格式: <meta http-equiv="Refresh" content="2；URL=http://www.baidu.com/">
- Robots型別
- 作用: 告訴搜尋引擎當前網頁的作業, 寫給網路爬蟲看的內容
- 格式: <meta name="robots" content="all|none|index|follow|noindex|nofollow" />
- index: 告訴搜尋引擎允許抓取當前頁面
- noindex:告訴搜尋引擎不允許抓取當前頁面
- follow: 告訴搜尋引擎可以從當前頁面上找到連結，然後繼續訪問抓取下去
- nofollow:告訴搜尋引擎不允許從當前頁面上找到連結, 拒絕其繼續訪問
- all: 告訴搜尋引擎允許抓取當前頁面, 並且允許從此頁找到連結繼續訪問
- none: 告訴搜尋引擎不允許抓取這個頁面,並且不允許從此頁找到連結、拒絕其繼續訪問
- 常見組合
- <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">：可以抓取本頁，而且可以順著本頁繼續索引別的連結
- 有可以寫成<META NAME="ROBOTS" CONTENT="ALL">
- <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">：不許抓取本頁，但是可以順著本頁抓取索引別的連結
- <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">：可以抓取本頁，但是不許順著本頁抓取索引別的連結
- <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">：不許抓取本頁，也不許順著本頁抓取索引別的連結。
- 注意事項:
- 不要把兩個對立的反義詞寫到一起，例如
- 例如<META NAME="ROBOTS" CONTENT="INDEX,NOINDEX">