HTML5新元素

<!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>

 

posted @ 2020-04-06 19:23  sjslove  阅读(325)  评论(0编辑  收藏  举报