html图片、视频、音频标签详解

链接

链接到网页：

<a href="https://www.baidu.com">在当前标签打开百度</a>
<br>
<a href="https://www.weibo.com" target="_blank" rel="noopener noreferrer">在新标签页打开微博主页</a>
<br>
<a href="web/html/index.html">链接到本网站某页面</a>

链接到书签：

<a id="mark1">首先应创建一个书签命名为mark1</a>    <!-- 在页面是不显示的，对浏览者隐藏 -->

<a href="#mark1">跳转到mark1</a>

<a href="https://www.a.com/index.html#mark2">打开其他网站页面并跳转到mark2书签</a>

链接到邮箱：

<a href="mailto:tom@example.com?Subject=Hello%20World" target="_top">邮箱：tom@exapmle.com</a>

图片

<img src="static/i.png" alt="替补文案" width="304" height="228">

• img标签无需闭合
• src指source，图片来源的意思。
• alt是说当图片没有加载或加载失败时，替换成什么文字。
• 如果指定了宽高，页面加载时会先保留指定尺寸。

音频

<audio controls>
    <source src="demo.mp3" type="audio/mpeg">
    <source src="demo.wav" type="audio/wav">
    <source src="demo.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
</audio>

• controls：添加控制播放暂停的面板
• mp3格式音频支持的最好

视频

<video id="video1" width="320" height="240" controls>
    <source src="demo.mp4" type="video/mp4">
    <source src="demo.ogg" type="video/ogg">
    <source src="demo.webm" type="video/webm">
    您的浏览器不支持Video标签。
</video>

<script>
    // 通过js控制视频播放功能
    const myVideo = document.getElementById("video1")
    function playPause() {
        if (myVideo.paused) myVideo.play() else myVideo.pause()
    }
    function makeBig() { myVideo.width=560 }
    function makeSmall() { myVideo.width=320 }
    function makeNormal() { myVideo.width=420 }
</script>

• controls：添加控制播放暂停的面板
• 如果指定了宽高，页面加载时会先保留指定尺寸。
• mp4格式音频支持的最好

框架

<iframe loading="lazy" src="https://www.360.com" width="200" height="200" name="iframe_demo"></iframe>
<p><a href="https://www.baidu.com" target="iframe_demo" rel="noopener">在iframe中打开百度</a></p>

• 有些网页在iframe中拒绝访问是因为网站服务器在Response响应头加个这个字段：X-Frame-Options: DENY