html5學習筆記(3)--主題結構元素-1

時間 2019-11-07

標籤 html5 html 學習筆記主題結構元素欄目 HTML5 简体版

原文原文鏈接

Article元素html

如下爲對應代碼:html5

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>極客學院</h1> </header> <article> <header>頁面頭部1</header> <p>評論</p> <footer>底部1</footer> </article> <footer><p>頁面底部</p></footer> </article> <article> <object> <embed src="test.html" width="600" height="700"></embed> </object> </article> </body> </html>

效果圖:css3

總結：article能夠作爲引入外部頁面的語義化元素.article能夠使頁面代碼結構更清晰.ide

Section元素post

如下爲對應代碼:學習

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <section> <h1>test</h1> <p>這是水果</p> </section> <article> <h1>這是一個水果類</h1> <p>這是水果</p> <section> <h1>這是一個紅富士</h1> <p>這是紅富士</p> </section> <section> <h1>這是一個國光</h1> <p>這是國光</p> </section> </article> <section> <h1>玩具類</h1> <article> <h2>這是玩具1</h2> <p>玩具1</p> </article> <article> <h2>這是玩具2</h2> <p>玩具2</p> </article> </section> </body> </html>

效果圖:字體

總結：article嵌套section時字體大小發生了變化，可是section嵌套article字體卻仍是同樣.ui

article一般作爲一個頁面的獨立部分存在，而section強調對頁面內容的劃分.url

NAV導航

如下爲對應代碼：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <nav> <ul> <li><a href="#">主頁</a></li> <li><a href="#">開發文檔</a></li> </ul> <article> <header> <h1>頁面導航</h1> <nav> <ul> <li><a href="#1">html5</a></li> <li><a href="#">css3</a></li> </ul> </nav> </header> <section id="#1"> <h1>html5</h1> <p>......</p> </section> <section> <h1>css3</h1> <p>......</p> </section> <footer> <a><p>版權</p></a> </footer> </article> </nav> </body> </html>

效果圖

總結：我的感受該標籤的文檔語義大於功能語義

Aside元素

如下爲對應代碼:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <title> </title> <body> <header> <h1>test</h1> </header> <article> <h1>語法</h1> <p>文章的正文</p> <aside> <h1>名詞解釋</h1> <p>語法：這是一個對語言來講很重要的內容體</p> </aside> </article> <aside> <nav> <h2>評論</h2> <ul> <li><a href="#">2015-3-10</a></li> <li><a href="#">元素1</a></li> </ul> </nav> </aside> </body> </html>