cari

Rumah >hujung hadapan web >html tutorial >Tag Marquee HTML

Tag Marquee HTML

王林
王林asal
2024-09-04 16:23:041150semak imbas

Teg Marquee dalam HTML digunakan untuk membuat tatal ke atas teks atau imej dalam halaman web, yang membenarkan semua jenis tatal seperti kiri ke kanan, kanan ke kiri, atas ke bawah dan bawah ke atas. Sintaks untuk teg ini dalam HTML ialah Ini ialah menatal teks…< /marquee>, di mana teg 'marquee' digunakan untuk menerangkan sifat tatal yang diperlukan. Beberapa atribut marquee lain yang biasa digunakan ialah kelakuan, hspace, scrollamount, scrolldelay, truespeed, vspace, dll.

Sintaks:

Marquee boleh digunakan dengan menggunakan unsur. Sintaks boleh ditulis seperti yang ditunjukkan di bawah:

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

Atribut HTML Marquee Tag

Berikut ialah atribut yang disokong oleh tag.

  1. tingkah laku: Tindakan menatal teks yang boleh menjadi salah satu nilai, termasuk berselang-seli, tatal dan slaid.
  2. bgcolor: Ia memberikan warna latar belakang.
  3. arah: Ia menentukan arah untuk menatal teks dengan nilai kiri, kanan, atas dan bawah. Nilai arah lalai ditinggalkan.
  4. ketinggian: Ia mentakrifkan ketinggian untuk tenda.
  5. hspace: Atribut ini menyediakan ruang mendatar di sekeliling elemen marquee.
  6. gelung: Ia mentakrifkan berapa kali teks boleh ditatal. Marquee akan gelung secara berterusan jika nilai lalai ialah -1.
  7. jumlah tatal: Ia menentukan jumlah tatal untuk setiap selang waktu. Jika tiada jumlah tatal ditentukan, maka nilai lalai ialah 6.
  8. kelewatan tatal: Ia memberikan kelewatan penatalan dalam milisaat. Jika tiada jumlah tatal ditentukan, maka nilai lalai ialah 6.
  9. truespeed: Ia digunakan untuk menunjukkan nilai tunda tatal 60.
  10. vspace: Atribut ini menyediakan ruang menegak di sekeliling elemen marquee.
  11. lebar: Ia mentakrifkan lebar untuk tenda.

Contoh HTML Marquee Tag

Berikut ialah contoh teg tenda HTML yang diterangkan di bawah:

Contoh #1 – Marquee Kiri

Jenis tenda ini boleh digunakan untuk mengalihkan kandungan dari sebelah kiri.

Kod:

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

Output:

  • Simpan kod di atas dalam fail dengan sambungan .html
  • Jalankan fail HTML dalam penyemak imbas, dan anda akan mendapat output seperti yang ditunjukkan dalam imej di bawah

Tag Marquee HTML

Contoh #2 – Marquee Right

Jenis tenda ini boleh digunakan untuk mengalihkan kandungan ke sebelah kanan.

Kod:

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

Output:

Tag Marquee HTML

Contoh #3 – Marquee Up

Jenis marquee ini boleh digunakan untuk mengalihkan kandungan ke bahagian atas.

Kod:

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

Output:

Tag Marquee HTML

Contoh #4 – Marquee Down

Jenis marquee ini boleh digunakan untuk mengalihkan kandungan ke bahagian bawah.

Kod:

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

Output:

Tag Marquee HTML

Contoh #5 – Nested Marquee

Marquee jenis ini boleh digunakan untuk menyarangkan kandungan.

Kod:

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

Output:

Tag Marquee HTML

Contoh #6 – Perbandingan Kelajuan untuk Marquee

Kelajuan elemen marquee boleh ditentukan dengan menggunakan atribut tunda tatal.

Kod:

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

Output:

Tag Marquee HTML

Contoh #7 – Warna dan Ruang Latar Belakang Marque

Jenis marquee ini boleh digunakan untuk menetapkan warna latar belakang dan ruang untuk elemen marquee.

Kod:

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

Output:

Tag Marquee HTML

Kesimpulan

Setakat ini, kami telah mengkaji bagaimana teg marquee akan digunakan untuk membuat teks menatal pada halaman web. Pengguna boleh dengan mudah membuat teks menatal secara mendatar atau menegak dengan mudah di tapak web. Elemen ini telah ditamatkan dan tidak akan digunakan lagi. Untuk membuat kesan penatalan, CSS atau JavaScript akan digunakan.

Atas ialah kandungan terperinci Tag Marquee HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html if for using Attribute default this background
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：peta Tag dalam HTMLArtikel seterusnya：peta Tag dalam HTML

Artikel berkaitan

Lihat lagi

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved