010 HTML标签图文详解（三）

真是低调le · 发表于 2021-9-14 22:12:20

多媒体标签

声明：
多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
上述格式视频一般文件较大，不利于网络下载播放。
一般情况下，是将其它的视频格式，转成Flash来在网页上播放。转换软件：格式工厂等。
Flash格式的视频兼容性非常好，Flash格式的文件很小。

<bgsound>标签：播放背景音乐
属性：
 - src="音乐文件的路径"
 - loop="-1"：属性值代表播放次数，-1代表循环播放。

举例：

<body>
<bgsound src="王菲 - 清风徐来.mp3"></bgsound>
</body>

复制代码

运行效果：
打开网页后，在IE 8中播放正常，播放时网页上显示一片空白。在google浏览器中无法播放。

<embed>标签：播放多媒体文件（音频、视频等）

主要应用Netscape浏览器，它不是W3C规范。

 > 备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。

属性：
 - src="多媒体文件的路径"
 - loop="-1"：属性值代表播放次数，-1代表循环播放。
 - autostart="false"：打开网页时，禁止自动播放。默认值是true。
 - volume="100"：设置默认的音量大小，测试发现这个值好像不起作用哦。
 - width：指Flash文件的宽度
 - height：指Flash文件的高度
 - quality：指Flash的播放质量，质量有高有低 hight  low
 - pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
 - type：指定Flash的文件格式类型
 - wmode：指Flash的背景是否可以透明，取值：transparent是透明的

<embed>标签播放音频举例：

<body>
<embed src="王菲 - 清风徐来.mp3"></embed>
</body>

复制代码

IE 8中的运行效果：

google浏览器中的运行效果：

注：在HTML5中新增了<video>标签播放视频。

<object>标签：播放多媒体文件（音频、视频等）

主要应用IE浏览器，它是W3C规范。

属性：
 - classid：指定Flash插件的ID号，一般存在于注册表中。
 - codebase：如果Flash插件不存在，则从codebase指定的地址下载。
 - <param>标签的主要作用：设置具体的详细参数。

总结：在网页中插入Flash时，为了同时兼容多种浏览器，需要将<object>标签和<embed>标签标记一起使用，但使用的顺序是：<object>中嵌套<embed>标记。

举例：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
<param name="movie" value="images/banner.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

复制代码

<marquee>：滚动字幕标签

如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。
属性：
 - direction="right"：移动的目标方向。属性值可以是：left（从右向左移动，默认值）、right（从左向右移动）、up（从下向上移动）、down（从上向下移动）。

 - behavior="slide"：行为方式。属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）、。
alternate和scroll属性值都是循环移动，区别在于：假设在direction="right"的情况下，behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右···

 - scrollamount="30"：移动的速度
 - loop="3": 循环多少圈。负值表示无限循环
 - scrolldelay="1000"：移动一次休息多长时间。单位是毫秒。

举例：

<marquee behavior="alternate" direction="down"  width="300" height="200" bgcolor="#8c5dc1">我来了</marquee>

复制代码

效果：

html废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。这些样式的标签，都已经被废弃。

2004年之前的东西：

<font size="9" color="red">哈哈

复制代码

下面这些标签都是css钩子，而不是原意：

加粗
下划线
倾斜
<del>删除线</del>
强调
强调

复制代码

这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。

类似的还有水平线标签：

<hr />

复制代码

换行标签：

<br />

复制代码

但是，网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，而不要用<br />。不到万不得已，不要用br标签。

标准的div+css页面，只会用到种类很少的标签：

div  p  h1  span   a   img   ul   ol    dl    input

知道每个标签的特殊用法、属性。比如a标签，img的属性。

		自动登录	找回密码
密码			注册

[前端开发] 010 HTML标签图文详解（三）

站点统计| 举报| Archiver| 手机版| 黑屋 |

备案号：冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

[前端开发] 010 HTML标签图文详解（三）

站点统计| 举报| Archiver| 手机版| 黑屋 | pgvMain({"discuzParams":{"r2":"3503899","ui":0,"rt":"forum","md":"viewthread","fi":"6","ti":"100","pn":1,"qq":"000"},"extraParams":""});

备案号：冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

站点统计| 举报| Archiver| 手机版| 黑屋 |