HTML基础学习（四）

最新推荐文章于 2023-03-06 17:15:50 发布

对不起该昵称已存在

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量124

点赞数

分类专栏：自学

本文链接：https://blog.csdn.net/qq_43326818/article/details/88682479

版权

自学专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML的多媒体插入技术：

图片的插入：

使用标签，该标签是空标签，其只有属性，没有闭合的标签，其一般为:

<img src="url" alt="programmer" title="hello" width="xxpx" height="xxpx"/>

各属性的作用：

src	图像文件的URL
alt	当图片显示不成功的时候应该出现的文字
title	设置鼠标悬停的时候显示的内容
width 和 height	设置图片的宽和高，其单位是px，也就是应该填的是像素

实例：

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="同级生.jpeg" allt="图片找不到了" title="草壁和佐条" width="700px" height="600px" />
</body>
</html>

自适应图片的插入:

其中如果设置width=100%则说明宽度会随着窗口宽度的变化而变化，height也是这样的性质，例如：

<html>
<head>
<meta charset="UTF-8:
<style type="text/csss">
img{
-moz-background-size: contain|cover;
-webkit-background-size: contain|cover;
background-size: contain|cover;
}
</style>
<body>
<img src="url" alt="programmer" title="' />//不用再设置高度和宽度了
</body>
</html>

视频使用的是标签，其性质有:

属性	值	描述
autoplay	autoplay	出现该属性，则视频会马上播放
controls	controls	向用户显示控件，比如播放按钮
height	px,其值为相应的像素	设置视频播放器的高度
loop	loop	循环播放视频
preload	preload	视频在页面加载的时候进行加载，并预备播放，如果使用autoplay,那么就忽略该属性
src	url	路径
widht	px	设置视频播放器的宽度

插入音频文件的示例:

<audio controls>
            <source src="url" type="audio/mp3">
                平凡之路
</audio>

使用iframe框架插入其他的网页:

使用iframe标签，是属性为:

align	left right top middle bottom	不赞成使用，一般使用样式代替，规定如何使用周围的元素来对齐次框架
frameborder	1 0	是否显示框架周围的边框
height	px 或者 %	iframe的高度
longsedc	URL	规定一个页面，该页面包含了有关iframe的较长的描述
marginheight	px	规定iframe的顶部和底部的边距
marginwidth	px	iframe的左侧和右侧的边距
name	frame_name	iframe的名称
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	对iframe中的内容的一些额外的限制
scrolling	yes no auto	是否在iframe中显示滚动条
seamless	seamless	规定< iframe>看上去像是文档的一部分
src	url	规定iframe中显示的文档的url
srcdoc	HTML_code	在iframe中显示的页面的HTML的页面的内容
width	px	iframe的宽度

对不起该昵称已存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习（四）

HTML的多媒体插入技术：图片的插入自适应图片的插入插入视频和音频插入网页的iframe框架图片的插入：使用标签，该标签是空标签，其只有属性，没有闭合的标签，其一般为:<img src="url" alt="programmer" title="hello" width="xxpx" height="xxpx"/>各属性的作用：src图像文件...
复制链接

扫一扫