html5--2.3新的佈局元素(2)-article

weixin_33686714發表於2017-11-28
原文網址 : https://blog.csdn.net/weixin_33686714/article/details/85958703
HTML

html5--2.3新的佈局元素(2)-article

學習要點

  1. 瞭解article元素的語義和用法
  2. 完成一個簡單的例項
  1. article元素（標籤）
  • 用於定義一個獨立的內容區塊，比如一篇文章，一篇部落格，一個帖子，論壇的一段使用者評論，一篇新聞訊息等.
  • article元素內可以巢狀其他元素，它可以有自己的頭、尾、主體等內容。使用時要特別注意內容的獨立性，一般對於獨立完整的內容才使用article元素，如果只是一段內容的話應該使用section元素。
section元素（標籤）
  • 用來定義文章中的章節
  • 用來定義文章中特定區塊，可視為一個區域分組元素。
  • section元素可以定義文件的主體內容，其內部可以包含article元素等內容。
article元素和section元素的區別 article元素更強調內容的獨立性 section元素更強調內容的關聯性

 

例項

 

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文件</title>
 6 </head>
 7 <body>
 8     <article style="background: #DDFFAA">
 9         <header>
10             <h3>文章標題</h3>
11             <h5>作者：***</h5>
12         </header>
13         <p>我是正文<br>**************88888</p>
14         <article style="background: #987898">
15             <header><h4>網友A的評論</h4></header>
16             <p>評論內容..............</p>
17             <footer><h6>釋出評論時間：2017/11/28</h6></footer>
18         </article>
19         <article style="background: #89FF65">
20             <header><h4>網友B的評論</h4></header>
21             <p>評論內容..............</p>
22             <footer><h6>釋出評論時間：2017/11/28</h6></footer>
23         </article>
24         <footer>
25             <p>尾部：閱讀：300：評論：80</p>
26         </footer>
27     </article>
28 </body>
29 </html>
View Code

 

相關文章