Html5新元素

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

、

、

、

、

、、

、

、和。 HTML 5 的這些標籤/元素可實現更用戶友好的介面，具有更高的效能、高效的結果，並且更易於編碼和實現，並有助於即興設計整體佈局。

十大 HTML5 新元素

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

1.

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

範例：

<title>Article Element</title>


<article>
<h2 id="EDUCBA">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>

輸出：

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

2.

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

範例：

<title>Figure Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Html5新元素" >
</figure>

輸出：

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

3.

;元素添加圖像的描述。

範例：

<title>Figure Caption Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Html5新元素" >
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>

輸出：

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

4.

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

範例：

<title>Header Element</title>


<article>
<header>
<h1 id="Header-One">Header One</h1>
<h2 id="Header-Two">Header Two</h2>
<h3 id="Header-Three">Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>

輸出：

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

5.

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

範例：

<title>Footer Element</title>


<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:%5Bemail%C2%A0protected%5D">[email protected]</a>
</p></footer>

輸出：

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

6.

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

範例：

<title>Main Element</title>


<header>
<p>Header information>
</p></header>
<main>
<p>Main Information</p>
<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information>
</p></footer>

輸出：

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

7.

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

範例：

<title>Mark Element</title>


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

輸出：

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

8.

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

範例：

<title>Nav Element</title>


<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>

輸出：

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

9.

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

範例：

<title>Section Element</title>


<article>
<h2 id="Main-Article"> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2 id="Section-One">Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2 id="Section-Two">Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>

輸出：

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

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:

<title>Summary Element</title>


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

Output:

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

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

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中文網其他相關文章！