語意學是研究語言中單字和片語的意思。語意元素=具有意義的元素。 語意元素清楚地描述了它對瀏覽器和開發人員的意義。 非語意元素的範例:<div>和<span>-
對其內容一無所知。 語意元素的範例:<form>,<table>和<article>- 清楚定義其內容。 所有現代瀏覽器都支援HTML5語意元素。
許多網站都包含HTML程式碼,例如:<div id =nav> <div class =header> <div id =footer>
以指示導航,頁首和頁尾。 HTML5提供了新的語意元素來定義網頁的不同部分:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>HTML5 <section>元素
<section>元素定義了一個文件中的一個部分。 根據W3C的HTML5文件:一個部分是內容的主題分組,通常有標題。 主頁通常可以分為幾個部分,用於介紹,內容和聯絡資訊。
<!DOCTYPE html> <html> <body> <section> <h1>Java</h1> <p>Java是一種廣泛使用的電腦程式語言,具有跨平台、物件導向、泛型程式設計的特性,廣泛應用於企業級Web應用開發與行動應用開發。 </p> </section> <section> <h1>PHP</h1> <p>PHP(全名為:PHP:Hypertext Preprocessor,即PHP:超文本預處理器)是一種開源的通用電腦腳本語言,尤其適用於網頁開發並可嵌入HTML中使用。 </p> </section> </body> </html>HTML5 <article>元素
<article>元素指定獨立的包含內容。 一篇文章本身應該有意義,應該可以從網站的其他部分獨立閱讀。 <article>可以使用元素的範例:
<!DOCTYPE html> <html> <body> <article> <h1>Java</h1> <p>Java是一種廣泛使用的電腦程式語言,具有跨平台、物件導向、泛型程式設計的特性,廣泛應用於企業級Web應用開發與行動應用開發。 </p> </article> </body> </html>HTML5 <header>元素
<header>元素指定為一個檔案或部分標題。 <header>元素應該用來當作介紹內容的容器。 您可以在一個<header>中包含多個元素。 以下範例定義文章的標題:
<!DOCTYPE html> <html> <body> <article> <header> <h1>Java</h1> <p>Java是什麼:</p> </header> <p>Java是一種廣泛使用的電腦程式語言,擁有跨平台、物件導向、泛型程式設計的特性,廣泛應用於企業級Web應用開發與行動應用開發。 </p> </article> </body> </html>HTML5 <footer>元素
<footer>元素指定為一個文件或部分頁尾。 <footer>元件應包含有關它的包含單元資訊。 頁腳通常包含文檔的作者,版權信息,使用條款的鏈接,聯繫信息等。 您可在一個<footer>中有多個元素。
<!DOCTYPE html> <html> <body> <footer> <p>版權所有</p> <p>聯絡資訊: <a href=mailto:[email protected]> [email protected]</a> .</p> </footer> </body> </html>HTML5 <nav>元素
<nav>元素定義了一組導覽連結。
<!DOCTYPE html> <html> <body> <nav> <a href=#>Java</a> | <a href=#>CSS</a> | <a href=#>HTML</a> | <a href=#>jQuery</a> </nav> </body> </html>HTML5 <aside>元素
<aside>元件從它被放置在(如側欄)的內容定義了一些內容。 <aside>內容應是周圍的內容。
<!DOCTYPE html> <html> <body> <p>Java是一種廣泛使用的電腦程式語言,具有跨平台、物件導向、泛型程式設計的特性,廣泛應用於企業級網路應用開發和行動應用開發。 </p> <aside> <h4>PHP</h4> <p>PHP是世界上最好的語言。 </p> </aside> </body> </html>總結
以上所述是小編給大家介紹的HTML5語意化元素你真的用對了嗎,希望對大家有幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!