Rumah > Artikel > hujung hadapan web > Semantik HTML5

Semantik HTML5

PHPzasal: 2024-09-04 16:37:031170semak imbas

Elemen Semantik HTML5 mempunyai nama penting yang mencerminkan jenis komponen. Mari ambil contoh jadual, pengepala, pengaki dsb.

Untuk HTML4, pembangun menggunakan nama id/kelas mereka sendiri untuk mereka bentuk elemen seperti bahagian atas, pengepala, bahagian bawah, menu, pengaki, utama, navigasi, bahan, objek, topnav, bar sisi, dsb., dan sebagainya. Walau bagaimanapun, disebabkan ini, enjin carian tidak dapat mengenal pasti kandungan halaman web yang betul.

Contoh Semantik HTML5

Sekarang mari lihat beberapa contoh elemen Semantik HTML5:

Contoh #1 –

Ia merujuk kepada pengepala segmen pengenalan halaman, seperti namanya. Banyak pengepala boleh ditemui pada satu halaman.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:23px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body>
<article>
<header>
<h1>Educba learning bridge</h1>
<h3>Become a techinal learner with EDUCBA</h3>
<p>Hey the best online training institute in ASIA </p>
</header>
</article>
</body>
</html>

Output:

Semantik HTML5

Contoh #2 –

Koleksi pautan navigasi digunakan untuk menerangkan menu navigasi atau bar navigasi.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Navigation Element</title>
<style>
h1 {
color:#Grey;
}
</style>
</head>
<body>
<h1>Navigation Bar for EduCBA</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
</body>
</html>

Output:

Semantik HTML5

Contoh #3 –

Halaman boleh dipecahkan kepada bahagian seperti Pengenalan, Hubungan, Butiran, dll., dengan elemen untuk setiap bahagian.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Have a look for Section Element in EduCBA</title>
<style>
h1 {
color:#Grey;
}
p {
font-size:20px;
text-align:left;
margin-top:2px;
}
</style>
</head>
<body>
<section>
<h1>AWS Tutorials for EduCBA</h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1>Data Mining</h1>
<p>AThrough technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
</body>
</html>

Output:

Semantik HTML5

Contoh #4 –

Elemen tanda ini digunakan untuk menyerlahkan teks.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>EduCBA mark Element</title>
<style>
h2 {
color:#Grey;
}
</style>
</head>
<body>
<h1>How to mark text </h1>
<p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
</body>
</html>

Output:

Semantik HTML5

Contoh #5 –

Ia adalah aspek blok atau bahagian segmen. Ia digunakan sebagai pakej.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>div Element</title>
<style>
.edu {
color:#grey;
}
</style>
</head>
<body>
<h1>div Element for educba </h1>
<div class="EduCBA">
<h1>Data Science</h1>
<p>Data analatics computer Science nachine learning </p>
</div>
</body>
</html>

Output:

Semantik HTML5

Contoh #6 – dan

Elemen ini digunakan untuk menentukan butiran tambahan yang boleh dilihat atau disembunyikan oleh pengguna.
Elemen ini digunakan untuk menentukan tajuk yang boleh dilihat untuk unsur

Program untuk melaksanakan dan

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Details for the EduCBA Summery</title>
<style>
.GFG {
Color:#red;
font-size:60px;
Text-align:left;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:left;
margin-top:3px;
}
</style>
</head>
<body>
<details>
<summary class="EDUCBA">Make your Study easily with us</summary>
<p>One of the best Data Science and web portal
where you can learn good skills of programming.
</p>
</details>
</body>
</html>

Output:

Semantik HTML5

: Elemen ini digunakan untuk menentukan kandungan selain daripada kandungan halaman.
: Elemen ini digunakan untuk menentukan masa atau tarikh.
: Elemen ini digunakan untuk menentukan kandungan utama dokumen.

Bagaimana untuk Melaksanakan semua Kod elemen dalam satu Contoh?

Di sini kita lihat cara melaksanakan kod elemen dalam satu contoh.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
color:red;
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:20px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body style="background-color:LightCyan;">
<article>
<header>
<h1>Educba learning bridge</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
<details>
<h3>Become a technicall learner with EDUCBA</h3>
<section>
<h1><mark>AWS Tutorials for EduCBA</mark></h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1><mark>Data Mining</mark></h1>
<p>Through technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
<p><em>EduCBA is the best online training institute in ASIA</em></p>
</details></header>
</article>
</body>
</html>

Output:

Semantik HTML5

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

html5 define for date class Collection this table

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：Teg HTML5Artikel seterusnya：Teg HTML5

Artikel berkaitan

Lihat lagi