- <!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>
来源: http://www.bubuko.com/infodetail-3495196.html