h5的新增標(biāo)簽和廢棄標(biāo)簽有哪些

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

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

一.video標(biāo)簽

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

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: 預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會(huì)失效
muted:靜音
width/height: 和img標(biāo)簽中的一模一樣

//設(shè)置 自動(dòng)播放 + 控制條<video src="images/sb1.webm" autoplay="autoplay" controls="controls"></video>//控制條 + 占位圖<video src="images/sb1.webm"  controls="controls" poster="images/NJ.jpg"></video>//廣告視頻 : 自動(dòng)播放 + 無限循環(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)致了沒有一種視頻格式是所有瀏覽器都支持的
這個(gè)時(shí)候W3C為了解決這個(gè)問題, 所以推出了第二個(gè)video標(biāo)簽的格式

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

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

2.3.注意點(diǎn):

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

2.3.2在過去的一些瀏覽器是不支持HTML5標(biāo)簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標(biāo)簽來播放視頻, 那么我們以后可以通過一個(gè)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>

二. audio標(biāo)簽

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個(gè)屬性不能用, 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>

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

什么是詳情和概要標(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

h5的新增標(biāo)簽和廢棄標(biāo)簽有哪些

四. marquee標(biāo)簽

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

2.格式:

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

4.注意點(diǎn):
marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無法查詢這個(gè)標(biāo)簽, 但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好

示例代碼:

<!--滾動(dòng)方向--><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è)置滾動(dòng)速度--><marquee scrollamount="1">隨便寫點(diǎn)內(nèi)容</marquee><marquee scrollamount="100">隨便寫點(diǎn)內(nèi)容</marquee><hr><!--設(shè)置滾動(dòng)次數(shù)--><marquee loop="1">隨便寫點(diǎn)內(nèi)容</marquee><hr><!--設(shè)置滾動(dòng)類型--><!--滾動(dòng)到邊停止--><marquee behavior="slide">隨便寫點(diǎn)內(nèi)容</marquee><!--往返滾動(dòng)--><marquee behavior="alternate">隨便寫點(diǎn)內(nèi)容</marquee><!--滾動(dòng)圖片--><marquee>
    ![](images/NJ.jpg)</marquee>

marquee滾動(dòng)方向

h5的新增標(biāo)簽和廢棄標(biāo)簽有哪些

五. 廢棄標(biāo)簽

1.為什么HTML中有一部分標(biāo)簽會(huì)被廢棄?
因?yàn)楫?dāng)前的HTML中的標(biāo)簽只有一個(gè)作用, 就是用來添加語義
而早期的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): 定義被刪除的文字

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

網(wǎng)頁題目：h5的新增標(biāo)簽和廢棄標(biāo)簽有哪些
鏈接URL：http://bm7419.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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容