1、圖片和多媒體
（1） 圖片：img元素
src 屬性：圖片路徑；
alt 屬性：圖片無法顯示時使用的替代文字；
title：滑鼠懸停時顯示的文字 ；
1 <img src="圖片路徑" alt="圖片無法顯示時使用的替代文本"title="滑鼠懸停時出現的文字">
（2） 視頻：video元素
src 屬性：視頻路徑 ；
controls 屬性：【布爾屬性】指定后，會顯示播放控制元件；
autoplay ：【布爾屬性】指定后，視頻在頁面顯示后立即進入播放狀態；
muted ：靜音，某些瀏覽器強制提升用戶體驗自動播放時需設定該屬性；
loop ：【布爾屬性】指定后，視頻將回圈播放；
height：設定視頻播放器的高度；
width：設定視頻播放器的寬度；
poster：規定視頻下載時顯示的影像，或者是在當用戶點擊播放按鈕前顯示的影像，
Preload：如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放，如果使用“autoplay”則忽略該屬性，
<video src="img/herocute.mp4" controls width="100%" muted autoplay poster="img/gallery-img3.png"></video>
（3） 音頻：audio元素
src 屬性：音頻路徑；
controls 屬性：【布爾屬性】指定后，會顯示播放控制元件；
autoplay ：【布爾屬性】指定后，視頻在頁面顯示后立即進入播放狀態；
muted ：靜音 某些新瀏覽器強制提升用戶體驗 自動播放時需設定該屬性；
loop ：【布爾屬性】指定后，視頻將回圈播放；
（4） figure元素
（5） 可替換元素和非可替換元素
可替換元素：元素的顯示內容，由其屬性決定，比如img、video、audio；
非可替換元素：元素的顯示內容，由元素內容決定，絕大部分元素都是非可替換元素，
2、嵌入式元素
嵌入式元素用于向網頁中嵌入外部資源，
（1） 向網頁中嵌入圖片資源，img元素、area元素、map元素；
（2） 向網頁嵌入視瞥澩，video元素；
（3） 向網頁中嵌入音瞥澩，audio元素；
（4） 向網頁嵌入flash程式 data相當于路徑，embed元素、object元素；
（5） Iframe元素向網頁嵌入圖另一個頁面
<ul> <li> <a target="all" href="https://www.baidu.com/">百度一下</a> </li> <li><a target="all" href="https://www.wikizero.com/">維基百科</a></li> <li><a target="all" href="https://w3.org/">W3C</a></li> </ul> <iframe id="all" name="all" src="https://www.baidu.com/" frameborder="1"></iframe>
效果圖：
3、圖片地圖 map元素劃分圖片細小區域
子元素 area區域 sharp區域形狀（rectangle矩形 兩個坐標點對角 circle圓 一個坐標 半徑 ）coords區域坐標范圍 id 和name兼容 在 img 上使用 usemap=“#id名”
<figure> <img usemap="#a" src="img/gallery-img3.png" alt=""> <figcaption>綠色的蘋果</figcaption> </figure> <map id="a" name="a"> <area shape="circle" coords="79,119,75" href="https://baike.sogou.com/v5228.htm?fromTitle=%E8%8B%B9%E6%9E%9C%EF%BC%88%E6%B0%B4%E6%9E%9C%EF%BC%89" alt="" target="_blank"> <area shape="rectangle" coords="98,43,145,177" href="https://baike.sogou.com/v5228.htm?fromTitle=%E8%8B%B9%E6%9E%9C%EF%BC%88%E6%B0%B4%E6%9E%9C%EF%BC%89" alt=""> </map>
當點擊圖片上的源泉部分，網頁就會跳轉到https://baike.sogou.com/v5228.htm?fromTitle=蘋果（水果）這個網頁，
4、行盒和塊盒
（1） 行盒：display屬性為inline（默認值）的元素；
（2） 常見的行盒：大部分文字元素：span、abbr、em、i、strong、b；
圖片和多媒體：img、video、audio，
（3） 行盒的特征：
l 行盒可被折斷，因為內容可被折斷換行；
l 同一個包含塊中，連續的多個行盒水平依次排列；
l 空白折疊的規則僅適用于行盒內部和行盒之間；
l 行盒與行盒之間的距離可使用水平方向上的margin和padding進行設定，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/121981.html
標籤：Html/Css
上一篇：1.html基礎知識