<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>
<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>
</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): 定義被刪除的文字廢棄的標簽
<b>我是文字</b>
<u>我是文字</u>
<i>我是文字</i>
<s>我是文字</s>
- 新標簽
<strong>我是文字</strong>
<ins>我是文字</ins>
<em>我是文字</em>
<del>我是文字</del>
- css樣式控制,同樣可以獲得一樣的效果
<p class="one">我是文字</p>
<p class="two">我是文字</p>
<p class="three">我是文字</p>
<p class="four">我是文字</p>
css
部分
<style type="text/css">
.one {
font-weight: bold;
}
.two {
text-decoration: underline;
}
.three {
font-style: italic;
}
.four {
text-decoration: line-through;
}
</style>
<strong>六. 字符實體</strong>
- 1.在HTML中對空格/回車/tab不敏感, 會把多個空格/回車/tab當做一個空格來處理
2.什么是字符實體?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含義的, 是不能在瀏覽器中直接顯示出來的, 那么這些東西要想顯示出來就必須通過字符實體列如
空格, 一個 就是一個空格, 有多少個 就有多少個空格
<小于符號 <
(less than)
>大于符號 >
(greater than)
©版權符號 ?
還有很多字符實體,可以查看w3c官方文檔示例代碼:
<p>我 愛你</p>`
<p>到此為止我們的HTML的基礎標簽就學習完畢了, 例如我們學習了<h1>標簽, <table>標簽, <img>標簽....</p>
©
