標籤：
Article元素
以下為對應代碼:
<!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>
:
總結：article可以做為引入外部頁面的語義化元素.article可以使頁面代碼結構更清晰.
Section元素
以下為對應代碼:
<!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字型卻還是一樣.
article通常做為一個頁面的獨立部分存在，而section強調對頁面內容的劃分.
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>
總結：個人感覺該標籤的文檔語義大於功能語義
html5學習筆記(3)--主題結構元素-1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
