网页制作07-html,css,javascript初认识のhtml添加多媒体

news/2025/2/24 5:54:04
htmledit_views">

在网页中,,除了可以添加文本和图像之外还可以插入动画声音视频等媒体元素,如滚动效果、 Flash、 Active x以及midi声音文件等

一、设置滚动效果

1、滚动标记marquee

1)简介:使用marquee标记不仅可以滚动文字,也可以移动图片表格等

2)语法:

<marquee>……</marquee>

2、滚动方向direction

滚动方向有4个取值:up,down,left,right

<marquee direction="方向">

3、滚动方式behaviour

1)、循环滚动默认效果:scroll

2)、只滚动一次就停止:slide

3)、来回交替进行滚动:alternate

<marquee behavior="方式">

4、滚动速度scrollamount

滚动的速度实际上是设置每次滚动时移动的长度以像素为单位

<marquee scrollamount="像素单位">

1-4演示:

1-4代码示例:

html"><marquee>how are you CSDN,&emsp;have a good day~</marquee>
	<p><marquee direction="down" scrolldelay="200">how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~</marquee></p>
<marquee behavior="alternate">how are you CSDN,&emsp;have a good day~</marquee>
<marquee scrollamount="3">how are you CSDN,&emsp;have a good day~</marquee>

5、滚动延迟scrolldelay

设置滚动的时间间隔,单位是毫秒

6、滚动循环loop

默认情况下的滚动是无限循环,如果想设置滚动次数则用loop

7、滚动范围width、height

默认的情况下水平滚动的文字背景与文字同高与浏览器窗口同宽,宽度和高度参数可以调整其水平和垂直的范围

8、滚动背景颜色bgcolor

为了突出滚动某部分内容,可以使用bg color设置滚动背景颜色

9、空白空间hspace、vspace

默认情况下滚动对象周围的文字和图像是与滚动背景紧密连接的,使用空白空间可以设置他们之间的空白空间

5-9演示:

 

 5-9代码示例:

html"><hr>
1、<marquee scrolldelay="200">how are you CSDN,&emsp;——这是滚动延迟_scrolldelay——&emsp;have a good day~</marquee>
2、<marquee scrollamount="50" loop="2">how are you CSDN,&emsp;——这是循环2次_loop——&emsp;have a good day~</marquee>
3、<marquee width="300" height="100" direction="up" bgcolor="#E197F0">how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~</marquee><br>
4、<marquee height="100" direction="up" bgcolor="#E197F0" hspace="50" vspace="50">how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~</marquee>

二、插入多媒体文件

1、插入flash动画

 Flash是一种动画技术,它可以实现一些较为复杂的动态效果

<embed src="小院灯光.swf" width="200"></embed>

 兼容会出现左侧动画,不兼容出现右侧提示,

 

2、插入音频和视频文件

html"><embed src="落叶.mp3"width="200"></embed>
<embed src="QQ2025223-144356.mp4" width="200"></embed>

 运行结果:

三、设置背景音乐

<bgsound src="落叶.mp3" loop="2"></bgsound>

 tips:正常的代码应该如上,但是现在大多数浏览器已经不兼容了.

但是<embed标签的音乐不能循环播放,所以我们可以采取以下方法:在head中插入以下代码

<audio id="music" controls="controls" autoplay="autoplay" loop="loop"> 
  <source src="落叶.mp3" type="audio/mpeg"> 
    </audio>


http://www.niftyadmin.cn/n/5864002.html

相关文章

2025雅森北京展今天开幕,全景展现新能源汽车时代

推动汽车后市场全产业链向新向优转型升级 在2月21日举行的第36届中国国际汽车服务用品及设备展览会&#xff0c;中国国际新能源汽车技术、零部件及服务展览会&#xff08;雅森北京展CIAACE&#xff09;上&#xff0c;雅森国际总裁谢宇表示&#xff0c;当前正处在汽车行业新旧动…

鸿蒙5.0实战案例:基于ArkUI的验证码实现

往期推文全新看点&#xff08;文中附带全新鸿蒙5.0全栈学习笔录&#xff09; ✏️ 鸿蒙&#xff08;HarmonyOS&#xff09;北向开发知识点记录~ ✏️ 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ ✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景&#…

使用Adobe Premiere Pro 2024软件实现多图片水平划出切换

使用Adobe Premiere Pro 2024软件实现多图片水平划出切换 步骤总结 纯PR新手操作&#xff0c;有误见谅。目标&#xff1a;试图使用PR2024实现图片间的水平滑入滑出切换&#xff0c;以对比相同内容不同图片之间的质量。实现效果&#xff1a;例如&#xff0c;有AB两图像&#xff…

【JavaEE进阶】Spring DI

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗 如有错误&#xff0c;欢迎指出~ 依赖注⼊是⼀个过程&#xff0c;是指IoC容器在创建Bean时,去提供运⾏时所依赖的资源&#xff0c;⽽资源指的就是对象. 在上⾯程序案例中&#xff0c;我们使⽤了 Autowired 这…

libwebsockets交叉编译全流程

libwebsocket中的webscoket加密功能需要依赖于Openssl库因此需要提前准备好openssl开源库。 交叉编译openssl 下面演示源码方式交叉编译OpenSSL为动态库。 创建个Websocket文件夹&#xff0c;把后续的成果物均放在这个文件中&#xff0c;文件夹中创建子文件夹OpenSSL和libWeb…

TIKTOK矩阵系统的软件服务

TikTok矩阵系统的技术服务概述 随着TikTok平台的发展&#xff0c;越来越多的内容创作者和企业选择通过矩阵系统来优化他们的内容管理和推广。TikTok矩阵系统是一种旨在高效管理多个账户、提升内容曝光、增强互动和加速推广的技术工具。以下是该系统提供的主要功能和技术服务&a…

jmeter 与大数据生态圈中的服务进行集成

以下为你详细介绍 JMeter 与大数据生态圈中几种常见服务&#xff08;Hadoop HDFS、Spark、Kafka、Elasticsearch&#xff09;集成的方法&#xff1a; 与 Hadoop HDFS 集成 实现思路 HDFS 是 Hadoop 的分布式文件系统&#xff0c;JMeter 可模拟客户端对 HDFS 进行文件读写操作…

云原生(五十七) | 阿里云CDN基本概念

文章目录 阿里云CDN基本概念 一、阿里云CDN概述 二、为什么选择阿里云CDN 三、阿里云CDN应用场景 四、总结 阿里云CDN基本概念 一、阿里云CDN概述 阿里云内容分发网络CDN是建立并覆盖在承载网之上&#xff0c;由遍布全球的边缘节点服务器群组成的分布式网络。阿 里云CDN…