HTML5學習筆記3

7.文檔元素html

文檔元素的主要做用是劃分各個不一樣的內容,讓整個頁面佈局清晰明快,讓整個佈局具備語義,進一步替代div。
基本上沒有什麼實際做用效果,主要目的是在頁面佈局時區分各個主題和概念。

h1~h6 表示標題
header 表示標題
footer 表示尾部
nav 表示有意集中在一塊兒的導航元素
section 表示重要概念或主題
article 表示一段獨立的內容 通常博客裏博文都用
address 表示文檔或article的聯繫信息
aside 表示與周邊內容少有牽涉的內容
hgroup 將一組標題組織在一塊兒
details 生產一個區域,用戶將其展開能夠得到更多細節
summary 用在details元素中,表示該元素內容的標題或說明web

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8"
 5     <title>文檔元素</title>
 6 </head>
 7 <body>
 8 <header>
 9     <hgroup>
10         <h1>這是主標題</h1>
11         <h4>這是副標題</h4>
12     </hgroup>
13 </header>
14 <aside>這是側邊欄內容</aside>
15 <section>
16     <nav>這是導航</nav>
17     <details>生成一個區域</details>
18 
19 </section>
20 <article>
21     這是對立的內容
22 </article>
23 <footer>
24     <h4>這是副標題</h4>
25     <address>這是聯繫信息</address>
26 </footer>
27 </body>
28 </html>
View Code

8.嵌入元素
img 嵌入圖片
屬性:
    src 嵌入圖像的URL
    alt 當圖片不加載時顯示的備用內容
    width 定義圖片寬度(像素)
    height 定義圖片高度(像素)
    ismap 建立服務器端分區響應圖
    usemap 關聯<map>元素
map 定義客戶端分區響應圖
area 表示一個用戶端分區響應圖的區域算法


iframe 嵌入一個HTML文檔
embed 用插件在HTML中嵌入內容 flash

meter 嵌入數值在許可值範圍背景中的圖形表示 value在10和100之間 min最小是10 max是100 IE不支持
progress 嵌入目標進展或任務完成狀況的圖形表示 IE9如下不支持canvas

object 在HTML文檔中嵌入內容 html4標準
param 表示將經過object元素傳遞給插件的參數瀏覽器

audio 表示一個音頻資源
video 表示一個視頻資源
canvas 生成一個動態的圖形畫布服務器

source 表示媒體資源
svg 表示結構話矢量內容
track 表示媒體的附加軌道(例如字幕)

ide

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>嵌入元素</title>
 6 </head>
 7 <body>
 8 <a href="index8.html"><img ismap="" src="img.jpg" alt="圖片" width="320" height="443"  usemap="#Map"></a>
 9 <map name="Map">
10     <area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形"></area>
11     <area shape="circle" coords="187,142,47" href="http://www.ibm.com" target="_blank" alt="圓形"></area>
12 </map>
13 <br>
14 <a href="http://www.haosou.com" target="in">好搜</a>
15 <br>
16 <iframe src="http://www.baidu.com" width="400" height="300" name="in"></iframe>
17 <br>
18 <embed src="http://images.cnblogs.com/cnblogs_com/chaowei119/23694/o_cwlogo.gif"></embed>
19 <br>
20 <progress value="30" max="100"></progress>
21 <br>
22 <meter value="30" min="10" max="100"></meter>
23 </body>
24 </html
View Code

 9.音頻和視頻
a.視頻容器(container)
音頻文件或視頻文件,都只是一個容器文件,視頻文件包含了音頻軌道,視頻軌道和其餘一些元素。視頻播放時,音頻軌道和視頻軌道是綁定在一塊兒的,元數據包含了視頻的封面,標題,子標題,字幕等相關信息。主流視頻容器支持的格式爲:avi,flv,mp4,mkv,ogg,webm
b.編解碼器(codec)
音頻和視頻編碼/解碼是一組算法,用來對一段特定音頻或視頻進行解碼和編碼,以便音頻和視頻可以播放,原始的媒體文件體積很是巨大,若是不對其進行編碼,那麼數據量是很是驚人的,在互聯網上播放則要耗費沒法忍受的時間,若是不對其進行解碼,就沒法將編碼後的數據重組爲原始的媒體數據。主流的音頻編解碼器:AAC,MPEG-3,Ogg Voribs 視頻編解碼器:H.264,VP8,Ogg Theora
c.瀏覽器支持狀況
大部分支持MP4,OGG webM是發展主流方向,免費,高清
d.video視頻
以往的視頻播放,須要藉助flash插件才能實現,但flash插件的不穩定性常常讓瀏覽器崩潰。
屬性:
    src 視頻資源的URL
    width 視頻寬度
    heigth 視頻高度
    controls 設置後,表示顯示播放控件
    autoplay 設置後,bioassay馬上開始播放視頻
    loop 設置後,表示反覆播放視頻
    muted 設置後,表示視頻處於靜音狀態
    poster 指定視頻數據載入時顯示的圖片
    preload 設置後,表示預先載入視頻 有三個屬性(none,metadata,auto)
e.audio音頻
和視頻一個道理,只有src,controls autoplay loop屬性svg

 1 <audio controls>
 2     <source src="test.mp3">
 3 </audio>
 4 <br>
 5 <video src="test.webm" controls autoplay loop muted></video>
 6 <video src="test.webm" controls poster="img.jpg"></video>
 7 <video src="test.webm" controls proload="none"></video>
 8 <video src="test.webm" controls>
 9     <source src="test.webm">
10     <source src="test.mp4">
11     <object>實現flash插件的播放,若是屏蔽IE9如下的瀏覽器則不須要</object>>
12 </video>
View Code
相關文章
相關標籤/搜索