以下的文章將為您提供HTML5中的各種語(yǔ)意元素。語(yǔ)義是關(guān)於不同類型的標(biāo)籤,其功能將根據(jù)其標(biāo)籤名稱描述並執(zhí)行相同的功能。標(biāo)籤的功能很容易透過(guò)其名稱來(lái)理解,該名稱採(cǎi)用使用者可理解的名稱/格式。 HTML 中的大多數(shù)元素通常都是語(yǔ)意元素。
HTML5 中語(yǔ)意元素的優(yōu)點(diǎn)
語(yǔ)意元素的優(yōu)點(diǎn)如下:
- 輕鬆理解程式碼。
- 維護(hù)可以快速且適當(dāng)?shù)剡M(jìn)行。
- 無(wú)需專門為任何標(biāo)籤添加任何描述。
HTML5 中的各種語(yǔ)意元素
現(xiàn)在讓我們進(jìn)入語(yǔ)意元素:
1.
這個(gè)標(biāo)籤讓我們知道這個(gè)標(biāo)籤內(nèi)的資料是專門針對(duì)類似內(nèi)容的。這也取決於我們通常擁有的不同類型的文章。可以是部落格、論壇、報(bào)紙專欄文章等
代碼:
<html>
<body>
<article>
<h2>HTML5</h2>
<p>New Updated version of HTML</p>
</article>
<article>
<h2>Learning HTML</h2>
<p> We are learning through EDUCBA</p>
</article>
</body>
</html>
輸出:

2.
這個(gè)標(biāo)籤是關(guān)於提供總資料的一個(gè)部分內(nèi)容。在了解如何使用文章標(biāo)籤和章節(jié)標(biāo)籤後,可以在每個(gè)標(biāo)籤內(nèi)使用這些標(biāo)籤。也就是說(shuō),節(jié)標(biāo)籤可以在文章標(biāo)籤內(nèi)使用,反之亦然。
代碼:
<html>
<body>
<section>The section here is about:
<p><h4> Learning and practising</h4> </p>
</section>
</body>
</html>
輸出:

3.
這個(gè)標(biāo)籤給了所有的標(biāo)題資料。我們想要放置在標(biāo)頭格式中的任何資料都在此標(biāo)頭標(biāo)籤下使用。而這個(gè)標(biāo)籤可以在整個(gè) HTML 腳本中使用多次。
代碼:
<html>
<body>
<header>
<h3>This is header #1</h3>
<p> First one</p>
</header>
<p> next one ...</p>
<header>
<h3>This is header #2</h3>
<p> Second one </p>
</header>
</body>
</html>
輸出:

4.
這是 HTML 腳本中的頁(yè)腳部分。一般來(lái)說(shuō),我們會(huì)看到所有版權(quán)資料以及我們?cè)谌魏蝺?yōu)惠下找到的一小部分,例如任何優(yōu)惠的「條件適用」。所以這些東西都是在頁(yè)腳標(biāo)籤下定義的。
代碼:
<html>
<body>
<p> Inside Body and above footer tag</p>
<footer>
<p> Inside footer tag.</p>
</footer>
<footer>
<p><h4> Another footer tag</h4></p>
<p><h6>Conditions Apply</h6> </p>
</footer>
</body>
</html>
輸出:

5.
這個(gè)標(biāo)籤為我們提供了導(dǎo)航元素。任何 HTML 文件腳本中的 URL,我們通常希望透過(guò)此標(biāo)籤從一個(gè)頁(yè)面導(dǎo)航到另一個(gè)頁(yè)面。此標(biāo)籤下給出的任何數(shù)據(jù)都可以作為超連結(jié)提供。這些超連結(jié)可用於從一個(gè)部分導(dǎo)航到另一部分。
代碼:
<html>
<body>
<h4> About </h4>
<nav><a href="#"> About link 1</a>
<a href="#"> About link 1</a>
</nav>
<h4> Contact </h4>
<nav>
<a href="#"> Contact Link 1</a>
<a href="#"> Contact Link 2</a>
</nav>
</body>
</html>
輸出:

練習(xí)時(shí),點(diǎn)擊這些連結(jié)並檢查點(diǎn)擊時(shí)超連結(jié)的顏色如何變化。
6.
這是一個(gè)用於在 HTML 文件兩側(cè)顯示資料的標(biāo)籤。在許多網(wǎng)站上,我們可以找到側(cè)邊欄中存在的內(nèi)容,這些內(nèi)容是使用此aside標(biāo)籤顯示的。此內(nèi)容應(yīng)與文件中存在的其他數(shù)據(jù)一致。
代碼:
<html>
<body>
<p>How aside tag is used </p>
<aside>
<h4>Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>
</body>
</html>
輸出:

無(wú)法用同樣的方式完全指定具體的內(nèi)容;只有使用整個(gè) HTML 頁(yè)面才能清楚地記錄和理解它。
7.
此標(biāo)籤指定我們要附加圖像。此標(biāo)籤可用於指定圖像來(lái)源並顯示 gif 或圖像。
代碼:
<html>
<body>
<figure>
<img src="">
</figure>
</body>
</html>
如上所述,這就是我們定義figure標(biāo)籤的方式。在figure標(biāo)籤內(nèi),我們可以使用source標(biāo)籤指定我們的映像指令。在這個(gè)圖形標(biāo)籤內(nèi),我們可以依序使用圖形標(biāo)題標(biāo)籤。
8.
此標(biāo)籤用於在所提供的圖像下提供標(biāo)題。它可以在figure標(biāo)籤內(nèi)使用。其用法可以在下面的範(fàn)例中看到。
<html>
<body>
<figure>
<img src="">
<figcaption>This is description of the image attached.</figcaption>
</figure>
</body>
</html>
您可以嘗試透過(guò)提供影像來(lái)源來(lái)執(zhí)行相同的操作,並檢查輸出的顯示方式。
9.
該標(biāo)籤指定了 HTML 網(wǎng)站的所有屬性和完整內(nèi)容。它包含所有獨(dú)特的內(nèi)容。對(duì)於此特定標(biāo)記需要注意的重要一點(diǎn)是,此標(biāo)記在整個(gè)頁(yè)面建立中只能使用一次。我們發(fā)現(xiàn)其他標(biāo)籤在建立網(wǎng)頁(yè)時(shí)可以多次使用,但這個(gè)主標(biāo)籤是單次使用標(biāo)籤。
代碼:
<html>
<body>
<main>
<h1>Learning HTML Semantic Tags</h1>
<article>
<h4>Studying</h4>
<p> Reading would help to understand different topics</p>
</article>
<article>
<h4>Practising</h4>
<p> With Studying , Practising is a must thing to do in learning</p>
</article>
</main>
</body>
</html>
輸出:

10.
This tag is for highlighting specific content or data. In other words, this tag is helpful in marking data.
Code:
<html>
<body>
<p> In this whole text which I am writing now, <mark> I want to mark this text </mark></p>
</body>
</html>
Output:

11.
This tag contains additional details that users can hide any details on their wish. Through this tag, users can open/close any content which they need. If we want that tag to disclose its details at the start itself, then the attribute “open” can be used.
Code:
<html>
<body>
<details open="true">
<p>Is this displayed?</p>
</details>
</body>
</html>
Output:

Now, what would be the output if we did not use the open attribute?
Code:
<html>
<body>
<details>
<p>Is this displayed?</p>
</details>
</body>
</html>
Output 1:

Output 2:

12.
This tag is used inside the details tag. Under the details tag, we can have a summary tag that specifies the entire summary of the web page or the HTML document. An important thing to note here is that the summary tag is the first child tag that has to come under the details tag.
Code:
<html>
<body>
<details>
<summary> Have written this inside summary tag which is inside details tag</summary>
<p>This text only comes under details tag</p>
</details>
<p> This text data is written after completion of details tag</p>
</body>
</html>
Output 1:

We had highlighted the arrow in the above output, as we get our output 2 once we expand it.
Output 2:

This tag might not be giving out any difference
13.
This tag defines date/time in such a format that users can easily understand. But a thing to note is that this tag may not give us a changed output in many of the browsers.
Code:
<html>
<body>
<p>At present time is <time>11:00</time> pm in the night.</p>
</body>
</html>
Output:

14.
As the name already suggests, this tag is for writing any content in a box. This tag should have an open attribute for displaying the dialog box once the source code is executed.
Code:
<html>
<body>
<dialog open=true>
<p> The data written here gets displayed in a dialog box </p>
</dialog>
</body>
</html>
Output:

15.
This tag gives the progress of a certain task in a graphical representation. We here need to have the maximum number for which the progress has to be represented. This tag mainly consists of two attributes. Max and value are the two attributes. Max represents the total count that has to be completed, and Value gives us the count percent that is finished with respect to the maximum count value.
Code:
<html>
<body>
<h1 style="color:red;">EDUCBA</h1>
Your learning progress is:
<progress value="72" max="100">
</progress>
</body>
</html>
Output:

16.
This tag is for measurement. This can be utilized for the space taken by a query or usage of disk space also. There are a few attributes that are to be used with this tag. The attributes are max, min, and value. Based on their usage, we can definitely figure out their purpose and usage.
Code:
<html>
<body>
<h2>EDCUBA</h2>
<p>Usage of Meter tag</p>
In a 6 floors apartment, I live in 2nd floor:
<meter value="2" min="0" max="6">2 out of 6</meter>
</body>
</html>
Output:

17.
This is a tag that has been introduced to add video files to our HTML page. Until this tag was introduced, developers used plugins to introduce video files into HTML page content. There are a few attributes that can be used along with the tag. Autoplay, Preload, Muted are some of these.
Code:
<html>
<body>
<video>
<source src="video_name.mp4" type="video/mp4">
</video>
</body>
</html>
We just need a source tag to give the source from where we need to upload the video content to our page.
18.
This tag is for adding audio files to our Html page. The usage and the source tag would be the same as that of the video tag. As an exercise, try using all the semantic elements and create e HTML 5 version web page to learn better and faster.
Conclusion
In this article, we have got to see many semantic elements and their usage in HTML5. One important thing to note here is, many of these tags are supported by internet explorer versions greater than 9 and chrome versions greater than 3.
以上是HTML5 語(yǔ)意元素的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!