06HTML基礎(chǔ)--多媒體標(biāo)簽

video標(biāo)簽

作用: 播放視頻

格式1:

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: 告訴video標(biāo)簽預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會(huì)失效

muted:告訴video標(biāo)簽視頻靜音

width/height: 和img標(biāo)簽中的一模一樣

格式2

?

第二種格式存在的意義

由于視頻數(shù)據(jù)非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導(dǎo)致了沒有一種視頻格式是所有瀏覽器都支持的這個(gè)時(shí)候W3C為了解決這個(gè)問題, 所以推出了第二個(gè)video標(biāo)簽的格式

ideo標(biāo)簽的第二種格式存在的意義就是為了解決瀏覽器適配問題. video 元素支持三種視頻格式, 我們可以把這三種格式都通過source標(biāo)簽指定給video標(biāo)簽, 那么以后當(dāng)瀏覽器播放視頻時(shí)它就會(huì)從這三種中選擇一種自己支持的格式來播放

注意點(diǎn):

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

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

audio標(biāo)簽

作用: 播放音頻

格式:

```html

- 注意點(diǎn):? ? - audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣, video中能夠使用的屬性在audio標(biāo)簽中大部分都能夠使用, 并且功能都一樣. 只不過有3個(gè)屬性不能用, height/width/poster![](http://upload-images.jianshu.io/upload_images/647982-e8633d268a8fd3fc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

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

marquee標(biāo)簽

作用: 跑馬燈效果

格式:

內(nèi)容

屬性:

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)到邊界就彈回

注意點(diǎn):

marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無法查詢這個(gè)標(biāo)簽, 但是各大瀏覽器對這個(gè)標(biāo)簽的支持非常好

HTML中被廢棄的標(biāo)簽

-- 由于HTML現(xiàn)在只負(fù)責(zé)語義而不負(fù)責(zé)樣式.但是HTML一開始有一部分標(biāo)簽連樣式也包攬了, 所以這部分標(biāo)簽都被廢棄了

-b球拦、u坎炼、i谣光、s-以上標(biāo)簽自己帶有樣式, 有濃厚的樣式作用, 今后一般都只作為CSS鉤子使用-原則: 不到萬不得已,切記不要使用如上標(biāo)簽. 大家可以到BAT的網(wǎng)站查看源代碼, 幾乎看不到以上標(biāo)簽

b(Bold)作用: 將文本字體加粗

格式:將文本字體加粗

u(Underlined)作用: 為文本添加下劃線

格式:為文本添加下劃線

i(Italic)作用: 顯示斜體文本效果

格式:顯示斜體文本效果

s(Strikethrough)作用: 為文本添加刪除線

格式:為文本添加刪除線

為了彌補(bǔ) b萄金、u媚朦、i询张、s標(biāo)簽的不足, W3C又推出了一組新的標(biāo)簽, 這些標(biāo)簽在顯示上看似和buis沒什么區(qū)別,但是在語義上卻有重大區(qū)別

strong作用: 著重內(nèi)容

格式:著重內(nèi)容

ins(Inserted)作用: 新插入的文本

格式:新插入的文本

em(Emphasized)作用:強(qiáng)調(diào)內(nèi)容

格式:強(qiáng)調(diào)內(nèi)容

del(Deleted)作用: 已刪除的文本

格式:已刪除的文本

其它更多詳見維基百科

HTML實(shí)體

我們想在頁面上輸出

這些字符,但是HTML認(rèn)為這是一個(gè)標(biāo)簽, 所以如果需要輸出一些特殊的字符需要通過字符實(shí)體來實(shí)現(xiàn)

lt是英語less than 小于的意思,<可以在頁面上輸出一個(gè)小于符號(hào)

gt是英語greater than 大于的意思,>可以在頁面上輸出一個(gè)大于符號(hào)

html中對空格半火,縮進(jìn)钮糖,換行不敏感酌住,如果同時(shí)出現(xiàn)多個(gè)空格縮進(jìn)或者執(zhí)行,頁面只會(huì)把它們當(dāng)作一個(gè)空格來解析酪我。所以想要在html中輸出空格必須使用來實(shí)現(xiàn), 一個(gè)就代表一個(gè)空格

html對中文空格敏感, 也就是說可以顯示中文空格, 但是不推薦這樣使用

是英語non-breaking spacing, 翻譯為不打斷空格的意思

顯示結(jié)果描述實(shí)體名稱

空格

<小于號(hào)<

>大于號(hào)>

?版權(quán)?

?注冊商標(biāo)?

?商標(biāo)?

&和號(hào)&

"引號(hào)"

'撇號(hào)'

¢分¢

£鎊£

¥日圓¥

€歐元€

§小節(jié)§

×乘號(hào)×

÷除號(hào)÷

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末都哭,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子纱新,更是在濱河造成了極大的恐慌穆趴,老刑警劉巖未妹,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件络它,死亡現(xiàn)場離奇詭異酪耕,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)看尼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進(jìn)店門躏结,熙熙樓的掌柜王于貴愁眉苦臉地迎上來媳拴,“玉大人兆览,你說我怎么就攤上這事√剑” “怎么了子巾?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵小压,是天一觀的道長线梗。 經(jīng)常有香客問我怠益,道長仪搔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任烤咧,我火速辦了婚禮,結(jié)果婚禮上孩饼,老公的妹妹穿的比我還像新娘髓削。我一直安慰自己镀娶,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著好啰,像睡著了一般框往。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上许溅,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天茬祷,我揣著相機(jī)與錄音,去河邊找鬼并蝗。 笑死祭犯,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的滚停。 我是一名探鬼主播沃粗,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼键畴!你這毒婦竟也來了陪每?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤镰吵,失蹤者是張志新(化名)和其女友劉穎檩禾,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體疤祭,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡盼产,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了勺馆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片戏售。...
    茶點(diǎn)故事閱讀 39,764評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖草穆,靈堂內(nèi)的尸體忽然破棺而出灌灾,到底是詐尸還是另有隱情,我是刑警寧澤悲柱,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布锋喜,位于F島的核電站,受9級(jí)特大地震影響豌鸡,放射性物質(zhì)發(fā)生泄漏嘿般。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一涯冠、第九天 我趴在偏房一處隱蔽的房頂上張望炉奴。 院中可真熱鬧,春花似錦蛇更、人聲如沸瞻赶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽砸逊。三九已至虑灰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痹兜,已是汗流浹背穆咐。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留字旭,地道東北人对湃。 一個(gè)月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像遗淳,于是被迫代替她去往敵國和親拍柒。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容