Html5新元素-html教學-PHP中文網

十大 HTML5 新元素

10. <summary>

Conclusion

首頁

web前端

html教學

Html5新元素

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:36 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML5是HTML 4.01版本的全新升級，具有許多新功能、高級功能特性、更好的頁面瀏覽量以及許多其他改進，以滿足不斷增長的技術需求。 HTML5 最常用、最需要的元素是

、

、、

Html5新元素

十大 HTML5 新元素

HTML5 提供了新元素來增強文件的佈局。

1.

;元素指定頁面的一部分，其中包括文件、部分或網站中的單獨結構，建議廣泛分發或使用。這可以是群組貼文、期刊或日報報告、線上時事通訊的提交、客戶發送的評論或任何其他不含物質的對象。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Article Element</title>
</head>
<body>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>

登入後複製

輸出：

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

Html5新元素

2.

;元素表示單一內容，例如分類、地圖、圖像、程式碼文章等

範例：

<!DOCTYPE html>
<html>
<head>
<title>Figure Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
</figure>
</body>
</html>

登入後複製

輸出：

上面的程式碼將產生如下圖所示的輸出，

Html5新元素

3.

;元素添加圖像的描述。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Figure Caption Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>
</body>
</html>

登入後複製

輸出：

上面的程式碼顯示的結果如下圖所示，

Html5新元素

4.

;元素指定文件或頁面上的部分的標題。您可以在單一文件中定義多個標題。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Header Element</title>
</head>
<body>
<article>
<header>
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>
</body>
</html>

登入後複製

輸出：

上面的程式碼顯示的結果如下圖所示，

Html5新元素

5.

元素指定作者資訊、版權資訊、聯絡資訊、相關文件連結、網站地圖等資訊。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Footer Element</title>
</head>
<body>
<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:[email&#160;protected]">[email protected]</a>
</footer>
</body>
</html>

登入後複製

輸出：

上面的程式碼顯示的結果如下圖所示，

Html5新元素

6.

;元素用於顯示文檔的主要信息，即重要信息。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Main Element</title>
</head>
<body>
<header>
<p>Header information</>
</header>
<main>
<p>Main Information</p>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information</>
</footer>
</body>
</html>

登入後複製

輸出：

上面的程式碼將產生如下圖所示的輸出，

Html5新元素

7.

;元素以背景顏色突出顯示或標記文本，以吸引使用者到文件上的特定文本。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Mark Element</title>
</head>
<body>
<article>
<p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>

登入後複製

輸出：

上面的程式碼顯示的結果如下圖所示，

Html5新元素

8.

;元素用於指定頁面上的導航連結。這些連結提供到文件中其他頁面的連接。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Nav Element</title>
</head>
<body>
<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>
</body>
</html>

登入後複製

輸出：

上面的程式碼將產生如下圖所示的輸出，

Html5新元素

9.

;元素定義文件的獨立部分或特定區域。

範例：

<!DOCTYPE html>
<html>
<head>
<title>Section Element</title>
</head>
<body>
<article>
<h2> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2>Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2>Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>
</body>
</html>

登入後複製

輸出：

上面的程式碼顯示的結果如下圖所示，

10.

The

tag is a subpart of the

tag which provides the text that can be displayed or hidden when the user clicks the heading.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Summary Element</title>
</head>
<body>
<details>
<summary>
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
</summary>
<p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p>
</details>
</body>
</html>

登入後複製

Output:

When you run the above code, it will display the result as shown below,

Html5新元素

As shown in the image, click on the heading, and it will display the hidden text shown below the image,

Html5新元素

Conclusion

So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.

以上是Html5新元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn