當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【HTML】嵌入

發布時間：2024/8/1 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了【HTML】嵌入小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在無法找到對應的語義時，再使用div塊級元素，否則是沒有感情的工具🐶
map 映射

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圖像映射</title> </head> <body><img src="pic.jpg" alt="XXX" usemap="#book"><map name="=book"><area shape="circle" coords="784,241,163" alt="" href="httpsXXX" target="_blank"><area shape="poly" coords="784,241,163" alt="" href="httpsXXX" target="_blank"><area shape="rect" coords="784,241,163" alt="" href="httpsXXX" target="_blank"></map><picture><source media="(min-width:1024px)" srcset="big.jpg"><source media="(min-width:512px)" srcset="small.jpg"><img src="normal.jpg" alt="" style="width: auto;"></picture><figure src=".png" alt=""><figcaption>XXXX</figcaption></figure></body> </html>

在網頁中嵌入視頻/音頻

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>在網頁中嵌入視頻</title> </head> <body><video src="XXX.mp4" width="640" height="352" poster="XXX.jpg" preload="metadata" controls autoplay >sorry,the video loading failed<source src="XXX.mp4" type="video/mp4"><source src="XXX.ogv" type="video/ogg"></video><track src="XXX.vtt" srclang="zh" label="中文字幕" kind="subtitles" default>  </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>在網頁中嵌入音頻</title> </head> <body><audio src="XX.mp3" controls>音頻不存在</audio>   </body> </html>

在網頁中嵌入網頁

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>在網頁中嵌入網頁</title> </head> <body><p>在網頁中嵌入一個網頁</p><iframe src="url" width="1024px" height="800px">抱歉。您的瀏覽器不支持iframe</iframe><p>在網頁中嵌入一個百度地圖+坐標</p><iframe src="https://map.baidu.com/@12959238.56,4825347.47,12z" width="1024px" height="800px" sandbox="allow-popups">抱歉。您的瀏覽器不支持iframe</iframe> </body> </html>

meter和progress

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用meter元素顯示一個范圍內的值</title> </head> <body><p>energy</p><meter id="energy" high="0.8" low="0.2" optimum="0.6" value="0.2" min="0" max="1"></meter><p><button type="button" value="0.1">10%</button><button type="button" value="0.6">60%</button><button type="button" value="0.9">90%</button></p><p>s使用progress元素顯示進度條</p><progress max="1" value="0.4"></progress><script>var buttons=document.getElementsByTagName("BUTTON");var meter=document.getElementById("energy");for(var i=0;i<buttons.length;i++){buttons[i].onclick=function (e){meter.value=e.target.value;};}</script> </body> </html>

總結

以上是生活随笔為你收集整理的【HTML】嵌入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html

上一篇： uploadify 302 php,jQ
下一篇：安全技巧：映像劫持与反劫持技术

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

HTML

【HTML】嵌入

總結