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

創(chuàng)新互聯(lián)主營新化網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,重慶APP軟件開發(fā),新化h5成都微信小程序搭建,新化網(wǎng)站營銷推廣歡迎新化等地區(qū)企業(yè)咨詢

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

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

<video src=""></video>

video標簽的屬性
src: 用于告訴video標簽需要播放的視頻地址
autoplay: 用于告訴video標簽是否需要自動播放視頻
controls: 用于告訴video標簽是否需要顯示控制條
poster: 用于告訴video標簽視頻沒有播放之前顯示的占位圖片
loop: 一般用于做廣告視頻, 用于告訴video標簽視頻播放完畢之后是否需要循環(huán)播放
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>//廣告視頻 : 自動播放 + 無限循環(huán) + 靜音 + 寬度<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.第二種格式存在的意義:
由于視頻數(shù)據(jù)非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導致了沒有一種視頻格式是所有瀏覽器都支持的
這個時候W3C為了解決這個問題, 所以推出了第二個video標簽的格式

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

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

2.3.注意點:

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

2.3.2在過去的一些瀏覽器是不支持HTML5標簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標簽來播放視頻, 那么我們以后可以通過一個JS的框架叫做html5media來實現(xiàn)

//示例代碼:
<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>內(nèi)容</marquee>

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

4.注意點:
marquee標簽不是W3C推薦的標簽, 在W3C官方文檔中也無法查詢這個標簽, 但是各大瀏覽器對這個標簽的支持非常好

示例代碼:

<!--滾動方向--><marquee>隨便寫點內(nèi)容</marquee><marquee direction="right">隨便寫點內(nèi)容</marquee><marquee direction="up">隨便寫點內(nèi)容</marquee><marquee direction="down">隨便寫點內(nèi)容</marquee><hr><!--設置滾動速度--><marquee scrollamount="1">隨便寫點內(nèi)容</marquee><marquee scrollamount="100">隨便寫點內(nèi)容</marquee><hr><!--設置滾動次數(shù)--><marquee loop="1">隨便寫點內(nèi)容</marquee><hr><!--設置滾動類型--><!--滾動到邊停止--><marquee behavior="slide">隨便寫點內(nèi)容</marquee><!--往返滾動--><marquee behavior="alternate">隨便寫點內(nèi)容</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) 給文本添加刪除線, 沒有任何語義的

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

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

看完了這篇文章，相信你對h5的新增標簽和廢棄標簽有哪些有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

標題名稱：h5的新增標簽和廢棄標簽有哪些-創(chuàng)新互聯(lián)
分享URL：http://chinadenli.net/article30/cohipo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設、ChatGPT、網(wǎng)站改版、網(wǎng)站策劃、小程序開發(fā)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)