滚动字幕原样显示用HTML处理CSS样式插入声音

最新推荐文章于 2023-07-19 16:54:04 发布

转载最新推荐文章于 2023-07-19 16:54:04 发布 · 3.6k 阅读

HTML 滚动字幕专栏收录该内容

0 篇文章

订阅专栏

本文介绍了HTML中滚动字幕的使用方法，包括其标签及属性应用；阐述了如何利用<pre>标签实现文本的原样显示；并详细解释了如何创建和应用自定义CSS样式，以及如何在HTML中插入声音。

滚动字幕分类： HTML
滚动字幕能使页面生动活泼，增加视觉效果，被广泛应用于网页制作中
1、滚动字幕的标签
滚动字幕由标签<marquee>……</marquee>生成。

2、滚动字幕标签的属性
<marquee>标签有如下几个常用属性
(1).bgcolor，用于指定文字的背景色。
(2).derection，用于指定文字的移动方向，属性值有：left（向左）、right（向右）、up（向上）。
(3).behavior，指定文字移动方式。属性值有：scroll（绕着圈走）、slide（只走一次）、alternate（横向来回走）。
(4).loop，由于指定循环次数，若不指定循环次数，默认循环不止。
(5).scrollamount，用于指定文字移动速度。
例题：滚动字幕练习
<html>
<head><title>滚动字幕练习</title></head>
<body text="#ff0000">
<p><marquee bgcolor="#0000ff">默认滚动，背景为蓝色</marquee></p>
<p><marquee direction="left">从右往左滚动</marquee></p>
<p><marquee direction="right" behaviour="scroll">从左往右绕着圈滚动</marquee></p>
<p><marquee scrollamount="18">速度较快的滚动</marquee></p>
<p><marquee loop="3">循环3次即停止的滚动</marquee></p>
</body>
</html>

**************************************************

原样显示分类： HTML
    HTML在没有标签定义的情况下一般忽略文本中的空白和换行，如果想按照输入的原始样子显示文本，可以使用<pre>和</pre>标签。举例如下：
例题:原样显示练习
<html>
<head><title>原样显示练习</title></head>
<body>
<pre>
        年轻的妙处   在于
你的经验
      不足以让你知道
                    你不能做
你现在正在做的事
</pre>
</body>
</html>

***************************************************
用HTML处理CSS样式分类： HTML
1.创建自定义的CSS式
自定义的CSS样式通常在HTML文档的头部，样式代码由标签<style>引导，包容在HTML的注释标记之间。自定义CSS样式语法格式如下：
<style type="text/css">

</style>
说明：""是HTML的注释标签，浏览时位于""之间的语句将不显示。

2.使用自定义样式
使用自定义样式的常用方法为：<p class="样式名">………</p>，下面用一个例子来说明在HTML文档中如何定义和使用自定义的CSS样式。
例题：自定义CSS样式练习
<html>
<head><title>自定义样式练习</title>
<style type="text/css">

</style>
</head>
<body>
<p class="ys1">使用自定义样式</p>
</body>
</html>

***************************************************

用HTML插入声音分类： HTML
插入声音最简单的方法是链接声音文件，下面用一个例子来说明如何实现。
<html>
<head><title>插入声音练习</title></head>
<body>
<p>
<a href="cloud.mid">单击这里可以欣赏乐曲“白云”</a>
</p>
</body>
</html>
说明：
href="cloud.mid"，链接了一个声音文件，若该文件不在当前目录，文件名前要加上文件的URL路径。
补充：也可以使用标签<bgsound src="声音文件URL">来插入背景音乐。
----------------------