HTML 字幕標籤

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

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

文法：

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

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

HTML Marquee 標籤的屬性

以下是支援的屬性標籤。

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

HTML Marquee 標籤範例

以下是 HTML marquee 標籤的範例：

範例 #1 – 選框左側

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

代碼：

<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>


<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>

輸出：

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

範例 #2 – 右側選框

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

代碼：

<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>


<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>

輸出：

範例 #3 – 選框向上

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

代碼：

<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>


<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>

輸出：

範例 #4 – 字幕向下

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

代碼：

<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>


<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>

輸出：

範例 #5 – 巢狀選取框

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

代碼：

<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>


<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>

輸出：

範例 #6 – Marquee 的速度比較

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

代碼：

<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>


<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>

輸出：

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

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

代碼：

<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>


<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>

輸出：

結論

到目前為止，我們已經研究瞭如何使用 marquee 標籤在網頁上建立滾動文字。用戶可以輕鬆地在網站上建立水平或垂直滾動文字。該元素已被棄用，將不再使用。為了製作滾動效果，將使用 CSS 或 JavaScript。

以上是HTML 字幕標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！