HTML5是HTML 4.01版本的全新升級,具有許多新功能、高級功能特性、更好的頁面瀏覽量以及許多其他改進(jìn),以滿足不斷增長的技術(shù)需求。 HTML5 最常用、最需要的元素是 、、、、、、、、和。 HTML 5 的這些標(biāo)籤/元素可實(shí)現(xiàn)更用戶友好的介面,具有更高的效能、高效的結(jié)果,並且更易於編碼和實(shí)現(xiàn),並有助於即興設(shè)計(jì)整體佈局。
十大 HTML5 新元素
HTML5 提供了新元素來增強(qiáng)文件的佈局。
1.
;元素指定頁面的一部分,其中包括文件、部分或網(wǎng)站中的單獨(dú)結(jié)構(gòu),建議廣泛分發(fā)或使用。這可以是群組貼文、期刊或日報(bào)報(bào)告、線上時(shí)事通訊的提交、客戶發(fā)送的評論或任何其他不含物質(zhì)的對象。
範(fàn)例:
<!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 的檔案中。
在瀏覽器中執(zhí)行html文件,您將得到下圖所示的輸出。
2.
;元素表示單一內(nèi)容,例如分類、地圖、圖像、程式碼文章等
範(fàn)例:
<!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>
輸出:
上面的程式碼將產(chǎn)生如下圖所示的輸出,
3.
;元素添加圖像的描述。
範(fàn)例:
<!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>
輸出:
上面的程式碼顯示的結(jié)果如下圖所示,
4.
;元素指定文件或頁面上的部分的標(biāo)題。您可以在單一文件中定義多個(gè)標(biāo)題。
範(fàn)例:
<!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>
輸出:
上面的程式碼顯示的結(jié)果如下圖所示,
5.
元素指定作者資訊、版權(quán)資訊、聯(lián)絡(luò)資訊、相關(guān)文件連結(jié)、網(wǎng)站地圖等資訊。
範(fàn)例:
<!DOCTYPE html>
<html>
<head>
<title>Footer Element</title>
</head>
<body>
<footer>
<p>Copyright ? 2019 www.educba.com</p>
<p>Contact: <a href="mailto:[email protected]">[email?protected]</a>
</footer>
</body>
</html>
輸出:
上面的程式碼顯示的結(jié)果如下圖所示,
6.
;元素用於顯示文檔的主要信息,即重要信息。
範(fàn)例:
<!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>
輸出:
上面的程式碼將產(chǎn)生如下圖所示的輸出,
7.
;元素以背景顏色突出顯示或標(biāo)記文本,以吸引使用者到文件上的特定文本。
範(fàn)例:
<!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>
輸出:
上面的程式碼顯示的結(jié)果如下圖所示,
8.
;元素用於指定頁面上的導(dǎo)航連結(jié)。這些連結(jié)提供到文件中其他頁面的連接。
範(fàn)例:
<!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>
輸出:
上面的程式碼將產(chǎn)生如下圖所示的輸出,
9.
;元素定義文件的獨(dú)立部分或特定區(qū)域。
範(fàn)例:
<!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>
輸出:
上面的程式碼顯示的結(jié)果如下圖所示,
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,
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新元素的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!