日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

HTML

【HTML】嵌入

發布時間：2024/8/1 HTML 49 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【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"><!--circle提供圓心坐標和半徑，oply提供多邊形每個點的坐標，rect提供左上角和右下角的坐標，點擊打開跳轉到相應的新標簽頁--><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"><!--上面的src就可以不要啦--></video><!--添加幾個備胎--><track src="XXX.vtt" srclang="zh" label="中文字幕" kind="subtitles" default><!--controls autoplay可以實現視頻自動播放，Chrome必須muted以后才能直接播放（瀏覽器有自己的想法哦），預加載為元數據--> <!--poster為封面，標簽中間為不可播放時的備注信息--> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>在網頁中嵌入音頻</title> </head> <body><audio src="XX.mp3" controls>音頻不存在</audio> <!--controls控制條，src為音頻地址--> <!--poster為封面，標簽中間為不可播放時的備注信息--> </body> </html><!--WEBVTT--><!--00：00：09.250&ndash;&gt;00：00：11.270--> <!--大家好--> <!--00：00：11.270&ndash;&gt;00：00：12.270--> <!--我是XXX-->

在網頁中嵌入網頁

<!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】嵌入的全部內容，希望文章能夠幫你解決所遇到的問題。

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