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

2024-05-19 23:19:59

图片标签：

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

图片标签的属性：

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

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

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

图片格式：

jpg(jpeg)，色彩丰富，不支持透明效果，不支持动图
gif，色彩单一，支持简单透明效果，支持动图
png，色彩丰富，支持复杂透明效果，不支持动图
webp，色彩丰富，支持复杂透明效果，支持动图，兼容性比较差
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行，直接运行第三行，

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

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

图片-标签、格式\内联框架\音视频播放——HTML
图片标签图片标签用于向当前页面中引入一个外部图片使用img标签来引入外部图片,img标签是一个自结束标签 img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点) img 属性: src ...
图片标签，内联框架，音视频
图片标签图片标签用于向当前页面中引入一个外部图片使用img标签来引入外部图片,img标签是一个自结束标签 img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点) 属性: src 属性指 ...
内联框架和音视频的播放
内联框架的作用:用于向当前页面引入一个其他页面 <iframe src="指定引入网页的路径" frameborder="0"(指定内联框架的边框,0表示 ...
day11学习前端HTML网页基本结构、标签及超链接的使用、内联框架
前端  前端:三大技术 HTML:负责显示页面内容(文字.按钮.输入框等) CSS:负责页面内容的布局和样式 JavaScript:负责实现功能. 前 ...
图片标签，内联框架 css简介
目录一.图片标签: 属性: scr 属性指定的是外部图片的路径(路径规则和超链接是一样的) width 图片的宽度(单位是像素) height 图片的高度二.内联框架: src指定要引入的网页的路 ...
HTNL5列表，表格，音频，视频，iframe内联框架
一.列表: 无序列表: <ul> 特性:没有顺序,每个<li>标签独占一行(块级元素) <li>内容</li> 默认每一个li标签前有一个实心小圆点 & ...
HTML-基本语法、常用标签、列表、超链接、超链接定义锚点、表格、表单和内联框架
HTML基本语法  <!DOCTYPE html> <!-- <h ...
内联框架和音视频播放
内联框架用iframe标签表示,用于在一个网页中引入另一个网页 src:引入途径 frameborder:边框大小 <iframe src="http://baidu.com&quo ...
html中怎样播放本地视频教程,【Axure9基础教程】内联框架如何引入本地音频视频 HTML PDF等本地文件...
在[ 在讲解如何插入本地文件之前需要先讲两个概念,相对路径和绝对路径,了解了这两个概览后,才能顺利的插入本地文件并识别成功绝对路径和相对路径是什么? 相对路径:相对路径就是相对于当前文件的路径,以引 ...
前端学习 -- 内联框架iframe
内联框架iframe 可以向一个页面中引入其他的外部页面内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 <iframe></iframe> 属性: sr ...

最新文章

热门文章