<!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{ 1200px; margin:0 auto; }
ul{ height:40px; background-color: #fff; list-style: none; display: inline-block; 1200px; padding: 0px; }
li{ line-height: 40px; text-align: center; float: left; 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>
