前端图片标签，内联框架，音视频

ゝ一世哀愁。 2022-08-31 06:50 119阅读 0赞

## 图片标签： ##

图片标签img是一种介于行内元素和块元素之间的替换元素,自结束标签，即用图片去替换源码的标签。

## 图片标签的属性： ##

src: 图片地址，<img src = "1.png">

alt:图片的描述标签，<img src = "1.png" alt = "这是图片"> ，通常是用于搜索引擎的查找，有些浏览器会在图片不能显示时显示图片的描述。

width/height，图片的宽和高，图片会根据设置的宽高，自动等比例缩放，不建议自己修改图片大小。

## 图片格式： ##

1.  jpg(jpeg)，色彩丰富，不支持透明效果，不支持动图
2.  gif，色彩单一，支持简单透明效果，支持动图
3.  png，色彩丰富，支持复杂透明效果，不支持动图
4.  webp，色彩丰富，支持复杂透明效果，支持动图，兼容性比较差
5.  base64，图片转文本格式，用在网页中可以加快网页图片生成，不建议过多使用

--------------------

## 内联框架iframe ##

内敛框架iframe，用于在网页里面嵌套其他网页，

用法：<iframe src = "https://www.baidu.com" frameboder = ''0'' width = "100" height = ''100''>

frameboder的取值是0和1，0表示没有边框，1表示有边框，

注意：内联框架的网页不会被搜索引擎搜索的

--------------------

## 音视频标签audio，video ##

注意：音视频在引入时，默认不允许用户控制，只有添加controls属性，才可以控制播放与暂停

用法：<audio src="1.mp3" controls aotuplay loop></audio>

<audio controls > <source src="1.mp3"> </audio>

属性：controls ：控制播放与停止

aotuplay：自动播放，很多浏览器都不会自动播放，属性效果比较差

loop：自动循环播放，

三个属性都是只有属性名没有属性值的，设置大小使用属性width和height

video标签和audio标签的用法一样

### 音视频兼容性，主要考虑ie8，ie8需要使用embed标签 ###

音视频都是embed标签，<embed src="1.mp3" type = "audio/mp3" width = "100" height = "100">

兼容性代码（兼容新版浏览器和旧版浏览器）:

<audio  controls >
    
    <source src="1.mp3"> 
    
    <embed src="1.mp3" type = "audio/mp3" width = "100" height = "100">
    
    </audio>

旧版浏览器不支持audio会忽略1，2，4行，直接运行第三行，

新版浏览器会运行第二行，忽略第三行（但也是支持第三行的写法）

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue给标签绑定内联样式

html代码直接在行内使用v-bind写入一个对象，属性名如果有 - 字符，必须用引号括起来 <h1 :style="styleObj1">我是一个字符串</h

朱雀/ 2023年07月11日 11:20/ 0 赞/ 26 阅读

相关 H5音视频标签

音视频标签音频audio 视频video <audio src="1.mp3" controls autoplay> 当前浏览器不支持aud

Love The Way You Lie/ 2023年05月31日 03:05/ 0 赞/ 16 阅读

相关 ⑮HTML5 音视频标签的简单使用，状态标签，列表标签

Html5 音频 & 视频 H5中对音视频的设计初次使用音视频兼容性写法音视频js相关属性音视频

ゞ浴缸里的玫瑰/ 2023年02月15日 07:57/ 0 赞/ 256 阅读

相关 html-css自学笔记3（图片标签、相对路径、图片的格式、_meta标签、xHtml语法规范、内联框架）

图片标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

向右看齐/ 2022年12月01日 01:22/ 0 赞/ 105 阅读

相关前端图片标签，内联框架，音视频

图片标签：图片标签img是一种介于行内元素和块元素之间的替换元素,自结束标签，即用图片去替换源码的标签。图片标签的属性： src: 图片地址，<img src

ゝ一世哀愁。/ 2022年08月31日 06:50/ 0 赞/ 120 阅读

相关 iframe内联框架

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。注：是HTML5 中的新属性。 <table style="margin:10px 0px 0px

落日映苍穹つ/ 2022年08月19日 08:47/ 0 赞/ 149 阅读

相关内联函数

内联函数是指编译时，内联函数在调用的地方类似宏定义展开，避免了函数调用的开销。一般用关键字inline来修饰内敛函数。如：static inline int test\

悠悠/ 2022年08月03日 12:54/ 0 赞/ 227 阅读

相关 Data URL 图片内联简介

参考文章：[https://www.cnblogs.com/yzhihao/p/6400680.html][https_www.cnblogs.com_yzhihao_p_64

你的名字/ 2022年04月22日 13:24/ 0 赞/ 208 阅读

相关内联函数

转自 [https://blog.csdn.net/andrew\_yau/article/details/7687356][https_blog.csdn.net_andr

柔光的暖阳◎/ 2022年03月27日 10:45/ 0 赞/ 362 阅读

相关 HTML内联框架iframe

什么是 iframe？ iframe 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 iframe 基本用法 <ifra

柔光的暖阳◎/ 2022年03月08日 07:20/ 0 赞/ 275 阅读