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

為鳩江等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及鳩江網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、鳩江網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

<strong>一.video標(biāo)簽</strong>

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

<video src=""></video>

video標(biāo)簽的屬性
src: 用于告訴video標(biāo)簽需要播放的視頻地址
autoplay: 用于告訴video標(biāo)簽是否需要自動播放視頻
controls: 用于告訴video標(biāo)簽是否需要顯示控制條
poster: 用于告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片
loop: 一般用于做廣告視頻, 用于告訴video標(biāo)簽視頻播放完畢之后是否需要循環(huán)播放
preload: 預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會失效
muted:靜音
width/height: 和img標(biāo)簽中的一模一樣

//設(shè)置 自動播放 + 控制條<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ù)非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導(dǎo)致了沒有一種視頻格式是所有瀏覽器都支持的
這個時候W3C為了解決這個問題, 所以推出了第二個video標(biāo)簽的格式

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

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

2.3.注意點(diǎn):

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

2.3.2在過去的一些瀏覽器是不支持HTML5標(biāo)簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標(biāo)簽來播放視頻, 那么我們以后可以通過一個JS的框架叫做html5media來實(shí)現(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標(biāo)簽</strong>

1.什么是audio標(biāo)簽?
作用: 播放音頻

2.格式:

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

3.注意點(diǎn):
audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣, video中能夠使用的屬性在audio標(biāo)簽中大部分都能夠使用, 并且功能都一樣
只不過有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>三. 詳情和概要標(biāo)簽</strong>

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

格式:

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

示例代碼

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

概要詳情.gif

<strong>四. marquee標(biāo)簽</strong>

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

2.格式:

<marquee>內(nèi)容</marquee>

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

4.注意點(diǎn):
marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無法查詢這個標(biāo)簽, 但是各大瀏覽器對這個標(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><hr><!--設(shè)置滾動速度--><marquee scrollamount="1">隨便寫點(diǎn)內(nèi)容</marquee><marquee scrollamount="100">隨便寫點(diǎn)內(nèi)容</marquee><hr><!--設(shè)置滾動次數(shù)--><marquee loop="1">隨便寫點(diǎn)內(nèi)容</marquee><hr><!--設(shè)置滾動類型--><!--滾動到邊停止--><marquee behavior="slide">隨便寫點(diǎn)內(nèi)容</marquee><!--往返滾動--><marquee behavior="alternate">隨便寫點(diǎn)內(nèi)容</marquee><!--滾動圖片--><marquee>
    ![](images/NJ.jpg)</marquee>

marquee滾動方向

<strong>五. 廢棄標(biāo)簽</strong>

1.為什么HTML中有一部分標(biāo)簽會被廢棄?
因?yàn)楫?dāng)前的HTML中的標(biāo)簽只有一個作用, 就是用來添加語義
而早期的HTML標(biāo)簽中有一部分標(biāo)簽是沒有語義的,
有一部分標(biāo)簽是用來修改樣式的
所以這部分標(biāo)簽就被淘汰了

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

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

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

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

網(wǎng)頁題目：h5的新增標(biāo)簽和廢棄標(biāo)簽有哪些
鏈接URL：http://www.aaarwkj.com/article36/ijhdpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、商城網(wǎng)站、Google、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、建站公司

廣告

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