HTML 字幕標籤-html教學-PHP中文網

HTML中的Marquee標籤用於在網頁中的文字或圖像上建立滾動，它允許所有類型的滾動，例如從左到右，從右到左，從上到下和從下到上。 HTML 中該標籤的語法為

這是文字的捲動…，其中“marquee”標籤用於描述所需滾動的屬性。其他一些常用的選取框屬性有behavior、hspace、scrollamount、scrolldelay、truespeed、vspace 等

文法：

選取框可以透過使用來使用元素。文法可以寫成如下圖：

<html>
<body>
<marquee direction="up" height="150" width="250" bgcolor="white">This is scrolling of the text...</marquee>
</body>
</html>

登入後複製

HTML Marquee 標籤的屬性

以下是支援的屬性標籤。

behavior：捲動文字的動作，可以是其中一個值，包括alternate、scroll、slide。
bgcolor:它提供背景顏色。
direction: 指定文字捲動的方向，有左、右、上、下值。預設方向值為左。
高度：它定義了選取框的高度。
hspace: 此屬性提供選取框元素周圍的水平空間。
loop: 它定義文字可以捲動多少次。如果預設值為-1，選取框將連續循環。
scrollmount: 指定每個間隔的滾動量。如果沒有定義scrollamount，則預設值為6。
scrolldelay: 它給出滾動延遲（以毫秒為單位）。如果沒有定義scrollamount，則預設值為6。
truespeed:用來表示scrolldelay值為60。
vspace: 此屬性提供選取框元素周圍的垂直空間。
寬度：它定義選取框的寬度。

HTML Marquee 標籤範例

以下是 HTML marquee 標籤的範例：

範例 #1 – 選框左側

這種類型的選取框可用於從左側移動內容。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Left Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "left" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登入後複製

輸出：

將以上程式碼儲存在副檔名為.html的檔案中
在瀏覽器中執行 HTML 文件，您將得到如下圖所示的輸出

HTML 字幕標籤

範例 #2 – 右側選框

這種類型的選取框可用於將內容移至右側。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Right Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "right" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登入後複製

輸出：

HTML 字幕標籤

範例 #3 – 選框向上

這種類型的選取框可用來將內容移至上方。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Up Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "up" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登入後複製

輸出：

HTML 字幕標籤

範例 #4 – 字幕向下

這種類型的選取框可用於將內容移至下方。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Down Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登入後複製

輸出：

HTML 字幕標籤

範例 #5 – 巢狀選取框

這種類型的選取框可用於巢狀內容。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee behavior="alternate"><div class="txt">Welcome to EDUCBA...</div></marquee>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登入後複製

輸出：

HTML 字幕標籤

範例 #6 – Marquee 的速度比較

marquee元素的速度可以透過使用scrolldelay屬性來指定。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee scrolldelay="80" scrollamount="7">Welcome to EDUCBA...(normal speed)</marquee>
<marquee scrolldelay="60" scrollamount="12" truespeed>Welcome to EDUCBA...(This is very speed)</marquee>
<marquee scrolldelay="250" scrollamount="4">Welcome to EDUCBA...(This is very slow)</marquee>
</marquee>
</body>
</html>

登入後複製

輸出：

HTML 字幕標籤

範例 #7 – Marque 背景顏色與空間

這種類型的選取框可用來設定選取框元素的背景顏色和空間。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1"  bgcolor="#d9d9ff" hspace="50" vspace="20">
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登入後複製

輸出：

HTML 字幕標籤