html中的替换元素

最新推荐文章于 2022-12-02 13:29:44 发布

原创最新推荐文章于 2022-12-02 13:29:44 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML中的替换元素，包括图片标签`<img>`的详细属性如src、alt、width和height，以及常见的图片格式如jpeg、png、gif和webp。此外，还提及了内联框架`<iframe>`和音频、视频标签，强调了它们的属性和兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    图片标签 img

它是一种替换元素。即有块元素的特性又有行内元素的特性

属性：
src      图片的路径,，可以引用本地图片，也可以引用网络图片
alt	      图片的描述，默认情况下不会显示，当浏览器无法加载图片时，会显示该文本
width	  图片的宽度
height	 图片的高度

一般情况下只改宽度或高度其中一个。<img src="./girl.jpg" alt="美女图片" width="800">
<img src="http://pic1.win4000.com/cover/2019-11-27/20191127143233_57495_250_300.jpg" alt="">

常用图片格式
jpeg

网络中使用最多的图片格式。颜色丰富，不支持透明图片，不支持动画
png

可以保存透明图片，不支持动画。压缩没有jpeg好
gif

图片带有动画效果，支持简单透明，支持颜色少。
webp

谷歌推出的新一代图片格式

有上面图片所有的优点，兼容性差。但在国内用的不多
base64

将图片编码成base64,用于需要图片与网页同时加载时使用。

内联框架	iframe

在当前页面引入另一个页面，用得不多。不会被搜索引擎爬取

属性：

src			          另一个页面的路径

frameborder		    有无边框<iframe src="http:\\www.baidu.com" width="800px" height="600px" frameborder="0"></iframe>

音频标签

在当前位置插入一个音乐组件

属性：

controls     允许用户控制播放

autoplay    自动播放（一般浏览器都不支持）

src                 音乐文件地址<audio src="./source/ラムジ-PLANET.mp3" controls="controls"></audio> 

为了兼容老版本浏览器一般这样写    <audio controls>
        <!-- 对不起，当前浏览器不支持播放，请升级您的浏览器！ -->
        <source src="./source/ラムジ-PLANET.mp3"></source>
        <source src="./source/ラムジ-PLANET.ogg"></source>
        <embed src="./source/ラムジ-PLANET.mp3" type="audio/mp3">
    </audio>

视频标签

在当前位置插入一个视频组件<video src="./source/01.mp4" controls="controls"></video> 

为了兼容老版本浏览器一般这样写<video controls>
        <source src="./source/01.mp4">
        <source src="./source/01.webm">
        <embed src="./source/01.mp4" type="video/mp4">
</video>