h5的新增標簽和廢棄標簽有哪些

小編給大家分享一下h5的新增標簽和廢棄標簽有哪些，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

<strong>一.video標簽</strong>

什么是video標簽?
作用: 播放視頻
a.第一種格式:

<video src=""></video>

video標簽的屬性
src: 用于告訴video標簽需要播放的視頻地址
autoplay: 用于告訴video標簽是否需要自動播放視頻
controls: 用于告訴video標簽是否需要顯示控制條
poster: 用于告訴video標簽視頻沒有播放之前顯示的占位圖片
loop: 一般用于做廣告視頻, 用于告訴video標簽視頻播放完畢之后是否需要循環播放
preload: 預加載視頻, 但是需要注意preload和autoplay相沖, 如果設置了autoplay屬性, 那么preload屬性就會失效
muted:靜音
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>

b.第二種格式

2.1.格式:

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

2.2.第二種格式存在的意義:
由于視頻數據非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導致了沒有一種視頻格式是所有瀏覽器都支持的
這個時候W3C為了解決這個問題, 所以推出了第二個video標簽的格式

video標簽的第二種格式存在的意義就是為了解決瀏覽器適配問題

video 元素支持三種視頻格式, 我們可以把這三種格式都通過source標簽指定
給video標簽, 那么以后當瀏覽器播放視頻時它就會從這三種中選擇一種自己支持的格式來播放

2.3.注意點:

2.3.1當前通過video標簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標簽播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標簽, 否則同樣無法播放

2.3.2在過去的一些瀏覽器是不支持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>

<strong>二. audio標簽</strong>

1.什么是audio標簽?
作用: 播放音頻

2.格式:

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

3.注意點:
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>

<strong>三. 詳情和概要標簽</strong>

什么是詳情和概要標簽?
作用:利用summary標簽來描述概要信息, 利用details標簽來描述詳情信息
默認情況下是折疊展示, 想看見詳情必須點擊

格式:

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

示例代碼

<details>
    <summary>鄭伊健</summary>簡介：鄭伊健，1967年10月4日出生于中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。1991年...</details>

概要詳情.gif

<strong>四. marquee標簽</strong>

1.什么是marquee ([mɑr'ki])標簽?
作用: 跑馬燈

2.格式:

<marquee>內容</marquee>

3.屬性:
direction: 設置滾動方向 left/right/up/down
scrollamount: 設置滾動速度, 值越大就越快
loop: 設置滾動次數, 默認是-1, 也就是無限滾動
behavior: 設置滾動類型 slide滾動到邊界就停止, alternate滾動到邊界就彈回

4.注意點:
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>
    ![](images/NJ.jpg)</marquee>

marquee滾動方向

<strong>五. 廢棄標簽</strong>

1.為什么HTML中有一部分標簽會被廢棄?
因為當前的HTML中的標簽只有一個作用, 就是用來添加語義
而早期的HTML標簽中有一部分標簽是沒有語義的,
有一部分標簽是用來修改樣式的
所以這部分標簽就被淘汰了

<strong>被廢棄標簽</strong>
<br> <hr> <font>
<b> <u> <i> <s>以上標簽都是沒有語義的,都是用來修改樣式的
b(bold) 加粗文本, 沒有任何語義的
u(underline) 給文本天津下劃線, 沒有任何語義的
i(italic) 將文本傾斜, 沒有任何語義的
s(strikethourgh) 給文本添加刪除線, 沒有任何語義的

注意點:
以后在企業開發中, 不到萬不得已一定不要使用這些被廢棄掉的標簽 如果一定要使用, 一般情況下都是用來作為CSS的鉤子來使用

<strong>推出的新標簽</strong>
strong == b
ins == u
em == i
del == s
strong語義: 定義重要性強調的文字
ins語義(inseted): 定義插入的文字
em語義(emphasized  音標:['?mf?,sa?z]): 定義強調的文字
del語義(deleted): 定義被刪除的文字

看完了這篇文章，相信你對h5的新增標簽和廢棄標簽有哪些有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！