<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5語義化</title> <style type="text/css"> header, section, footer, aside, nav, ar ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5語義化</title> <style type="text/css"> header, section, footer, aside, nav, article, figure { display: block; } nav,header,p,article{ width: 1200px; margin:0 auto; }
ul{ height:40px; background-color: #fff; list-style: none; display: inline-block; width: 1200px; padding: 0px; }
li{ line-height: 40px; text-align: center; float: left; width: 400px; margin:0 auto; } li:hover{ background: pink; }
a{ text-decoration: none; } .post{ border:1px dashed #000; padding: 0 0 20px 20px; margin-bottom: 40px; padding-top: 10px; background-color: #fff; } #content{ border:1px solid #ccc; padding:30px 40px; background-color: rgb(247,244,255); margin-top: 20px; } </style> </head> <body> <!-- 放在body中，這個頁面的相關信息 --> <aside style="background-color: rgb(244,247,255)"> <h4 style="padding-top: 20px;padding-left: 20px;">頁面導航</h4> <nav> <ul> <li><a href="#">查看相關內容</a></li> <li><a href="#">返迴首頁</a></li> <li><a href="#">返回本頁</a></li> </ul> </nav> </aside> <!-- <article> 標簽定義獨立的內容部分 --> <article id="content"> <!-- <header>元素主要用於定義內容的介紹展示區域：引導、導航. --> <!-- 帖子的頭部 --> <header> <h1>馬上要去工作了，也不知道會怎麼樣</h1> <div>作者，初級碼農</div> <p><time datetime="2020-03-15"></time></p> </header> <p>培訓的，大概培訓了半年，js、jquery、bootstrap、angular、vue、Ajax、資料庫、php、面向對象、Web伺服器、移動端</p> <br><br> <!-- <section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。 --> <!-- 回覆部分 --> <section> <!-- 每個article代表一個回覆 --> <!-- <article>定義獨立的內容部分 --> <article class="post"> <!-- 回覆的頭部 --> <header> <h4>我覺得還行</h4> <div>作者：Amy</div> <p><time datetime="2020-04-01"></time></p> </header> <p>工作機會還多的，php是輕量級網站開發最好的選擇</p> </article> <!-- 每個article代表一個回覆 --> <!-- <article>定義獨立的內容部分 --> <article class="post"> <!-- 回覆的頭部 --> <header> <h4>不錯了</h4> <div>作者：鍵盤俠</div> <p><time datetime="2020-04-06"></time></p> </header> <p>學歷本科、信息專業、會這麼多，不會找不到的，對自己有信心一點</p> </article> </section> <br><br> <!-- 描述了文檔的底部區域 --> <!-- 一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯繫信息等 --> <!-- 腳註 附加信息--> <footer> <p style="color: pink;padding-left: 40px;">我的帖子我做主</p> </footer> <br><br> <!-- <aside> 標簽定義頁面主區域內容之外的內容（比如側邊欄）。 --> <!-- 文章的額外的信息 --> <aside style="padding-left: 40px;"> <h4>關於樓主</h4> <section> <div>用戶組：菜鳥初級</div> <div>閱讀量：20</div> <div>發表時間：2020-03-18</div> </section> </aside> <!-- <figcaption> 標簽定義 <figure> 元素的標題. --> <!-- <figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。 --> <figure> <img src="https://p0.ssl.qhimg.com/t013feee31537e51f3b.png" height="96px" width="96px" alt="xiangmao" /> <figcaption style="padding-left: 20px">my logo</figcaption> </figure> </article> </body> </html>
