HTML5 語意元素
Sep 04, 2024 pm 04:37 PM
以下的文章將為您提供HTML5中的各種語意元素。語義是關於不同類型的標籤，其功能將根據(jù)其標籤名稱描述並執(zhí)行相同的功能。標籤的功能很容易透過其名稱來理解，該名稱採用使用者可理解的名稱/格式。 HTML 中的大多數(shù)元素通常都是語意元素。
HTML5 中語意元素的優(yōu)點
語意元素的優(yōu)點如下：
- 輕鬆理解程式碼。
- 維護可以快速且適當?shù)剡M行。
- 無需專門為任何標籤添加任何描述。
HTML5 中的各種語意元素
現(xiàn)在讓我們進入語意元素：
1.
這個標籤讓我們知道這個標籤內(nèi)的資料是專門針對類似內(nèi)容的。這也取決於我們通常擁有的不同類型的文章。可以是部落格、論壇、報紙專欄文章等
代碼：
<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.
這個標籤是關於提供總資料的一個部分內(nèi)容。在了解如何使用文章標籤和章節(jié)標籤後，可以在每個標籤內(nèi)使用這些標籤。也就是說，節(jié)標籤可以在文章標籤內(nèi)使用，反之亦然。
代碼：
<html> <body> <section>The section here is about: <p><h4> Learning and practising</h4> </p> </section> </body> </html>
輸出：
3.
這個標籤給了所有的標題資料。我們想要放置在標頭格式中的任何資料都在此標頭標籤下使用。而這個標籤可以在整個 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ōu)惠下找到的一小部分，例如任何優(yōu)惠的「條件適用」。所以這些東西都是在頁腳標籤下定義的。
代碼：
<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.
這個標籤為我們提供了導航元素。任何 HTML 文件腳本中的 URL，我們通常希望透過此標籤從一個頁面導航到另一個頁面。此標籤下給出的任何數(shù)據(jù)都可以作為超連結提供。這些超連結可用於從一個部分導航到另一部分。
代碼：
<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>
輸出：
練習時，點擊這些連結並檢查點擊時超連結的顏色如何變化。
6.
這是一個用於在 HTML 文件兩側顯示資料的標籤。在許多網(wǎng)站上，我們可以找到側邊欄中存在的內(nèi)容，這些內(nèi)容是使用此aside標籤顯示的。此內(nèi)容應與文件中存在的其他數(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>
輸出：
無法用同樣的方式完全指定具體的內(nèi)容；只有使用整個 HTML 頁面才能清楚地記錄和理解它。
7.
此標籤指定我們要附加圖像。此標籤可用於指定圖像來源並顯示 gif 或圖像。
代碼：
<html> <body> <figure> <img src=""> </figure> </body> </html>
如上所述，這就是我們定義figure標籤的方式。在figure標籤內(nèi)，我們可以使用source標籤指定我們的映像指令。在這個圖形標籤內(nèi)，我們可以依序使用圖形標題標籤。
8.
此標籤用於在所提供的圖像下提供標題。它可以在figure標籤內(nèi)使用。其用法可以在下面的範例中看到。
<html> <body> <figure> <img src=""> <figcaption>This is description of the image attached.</figcaption> </figure> </body> </html>
您可以嘗試透過提供影像來源來執(zhí)行相同的操作，並檢查輸出的顯示方式。
9.
該標籤指定了 HTML 網(wǎng)站的所有屬性和完整內(nèi)容。它包含所有獨特的內(nèi)容。對於此特定標記需要注意的重要一點是，此標記在整個頁面建立中只能使用一次。我們發(fā)現(xiàn)其他標籤在建立網(wǎng)頁時可以多次使用，但這個主標籤是單次使用標籤。
代碼：
<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 語意元素的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
構建網(wǎng)頁的HTML元素是什麼？
Jul 03, 2025 am 02:34 AM
網(wǎng)頁結構需核心HTML元素支撐，1.頁面整體結構由、、構成，其中為根元素，存放元信息，展示內(nèi)容；2.內(nèi)容組織依賴標題（-）、段落（）及區(qū)塊標籤（如、）以提升條理與SEO；3.導航通過與實現(xiàn)，常用組織鏈接並輔以aria-current屬性增強可訪問性；4.表單交互涉及、、與，確保用戶輸入與提交功能完整。正確使用這些元素能提升頁面清晰度、維護性及搜索引擎優(yōu)化。
使用HTML5服務器序列事件處理重新連接和錯誤。
Jul 03, 2025 am 02:28 AM
使用HTML5SSE時，處理重連和錯誤的方法包括：1.了解默認重連機制，EventSource默認在連接中斷後3秒重試，可通過retry字段自定義間隔；2.監(jiān)聽error事件以應對連接失敗或解析錯誤，區(qū)分錯誤類型並執(zhí)行相應邏輯，如網(wǎng)絡問題依賴自動重連、服務器錯誤手動延遲重連、認證失效刷新token；3.主動控制重連邏輯，如手動關閉並重建連接、設置最大重試次數(shù)、結合navigator.onLine判斷網(wǎng)絡狀態(tài)以優(yōu)化重試策略。這些措施可提升應用穩(wěn)定性與用戶體驗。
為現(xiàn)代頁面宣布正確的HTML5 Doctype。
Jul 03, 2025 am 02:35 AM
Doctype是告訴瀏覽器用哪種HTML標準解析頁面的聲明，現(xiàn)代網(wǎng)頁只需在HTML文件最開頭寫。其作用是確保瀏覽器以標準模式而非怪異模式渲染頁面，且必須位於第一行，前面不能有空格或註釋；正確寫法僅有一種，不推薦使用舊版本或其他變體；其他如charset、viewport等應放在部分。
使用HTML屬性實現(xiàn)客戶端表單驗證。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationCanbedOnewithOutJavaScriptbyusinghtmlattributes.1）useRequiredToEnforCemandatoryField.2）validateMailsAndUrllSwithTyPeatTributesLikeEmailOrurl，orusepatternwithRegegexforCustomAlorurl
如何使用HTML將選項分組？
Jul 04, 2025 am 03:16 AM
在HTML中使用標籤可以對下拉菜單中的選項進行分組。具體方法是用包裹一組元素，並通過label屬性定義組名，如：1.包含蘋果、香蕉、橙子等選項；2.包含胡蘿蔔、西蘭花等選項；3.每個為一個獨立分組，組內(nèi)選項自動縮進。注意事項包括：①不支持嵌套；②可通過disabled屬性禁用整個組；③樣式受限需結合CSS或第三方庫美化；可使用Select2等插件增強功能。
使用HTML按鈕元素實現(xiàn)可點擊按鈕
Jul 07, 2025 am 02:31 AM
要使用HTML的button元素實現(xiàn)可點擊按鈕，首先需掌握其基本用法與常見註意事項。 1.使用標籤創(chuàng)建按鈕，並通過type屬性定義行為（如button、submit、reset），默認為submit；2.通過JavaScript添加交互功能，可內(nèi)聯(lián)寫法或通過ID綁定事件監(jiān)聽器以提升維護性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強用戶體驗；4.注意常見問題：確保未啟用disabled屬性、正確綁定JS事件、避免佈局遮擋，並藉助開發(fā)者工具排查異常。掌握這
將CSS和JavaScript與HTML5結構有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript應通過語義化標籤、合理加載順序與解耦設計高效結合。 1.使用HTML5語義化標籤如、提升結構清晰度與可維護性，利於SEO和無障礙訪問；2.CSS應置於中，使用外部文件並按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強依賴，通過data-*屬性驅動行為、類名控制狀態(tài)，統(tǒng)一命名規(guī)範提升協(xié)作效率。這些方法能有效優(yōu)化頁面性能與團隊協(xié)作。
使用新的HTML5方法（FormData）提交表單數(shù)據(jù)
Jul 08, 2025 am 02:28 AM
使用HTML5的FormDataAPI提交表單數(shù)據(jù)更方便，1.它可自動收集帶name屬性的表單字段或手動添加數(shù)據(jù)；2.支持通過fetch或XMLHttpRequest以multipart/form-data格式提交，適合文件上傳；3.處理文件時只需將文件附加到FormData並發(fā)送請求即可；4.注意同名字段會被覆蓋、需處理JSON轉換及無嵌套結構等問題。
