HTML5 語意-html教學-PHP中文網

HTML5 語意範例

範例 #3 –

範例 #4 –

如何在一個範例中實作所有元素程式碼？

首頁

web前端

html教學

HTML5 語意

PHPz

Sep 04, 2024 pm 04:37 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML5 語意元素具有反映組件類型的重要名稱。讓我們以表格、頁首、頁尾等為例

對於 HTML4，開發人員使用自己的 id/類別名稱來設計元素，例如頂部、頁首、底部、選單、頁尾、主要、導覽、材質、物件、頂部導覽、側邊欄等。然而，正因為如此，搜尋引擎無法辨識網頁的正確內容。

HTML5 語意範例

現在讓我們來看一些 HTML5 語意元素的範例：

範例 #1 –

顧名思義，它指的是頁面介紹段的標題。一頁上可以找到許多標題。

代碼：

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

登入後複製

輸出：

HTML5 語意

範例 #2 –

導覽連結的集合，用於描述導覽功能表或導覽列。

代碼：

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

登入後複製

輸出：

HTML5 語意

範例 #3 –

頁面可以分為簡介、聯絡方式、詳細資訊等部分，每個部分都有一個元素。

代碼：

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

登入後複製

輸出：

HTML5 語意

範例 #4 –

此標記元素用於突出顯示文字。

代碼：

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

登入後複製

輸出：

HTML5 語意

範例 #5 –

它是區塊或段劃分的一個面向。它被用作一個包。

代碼：

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

登入後複製

輸出：

HTML5 語意

範例 #6 – 和

此元素用於定義使用者可以查看或隱藏的其他詳細資訊。
此元素用於定義
的可見標題。元素

實施的計畫和

代碼：

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

登入後複製

輸出：

HTML5 語意

：
此元素用於指定頁面內容以外的內容。
：此元素用於指定時間或日期。
：
此元素用於指定文件的主要內容。

如何在一個範例中實作所有元素程式碼？

這裡我們透過一個範例來了解如何實作元素程式碼。

代碼：

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

登入後複製

輸出：

HTML5 語意