常见的 html5 新增语义化标签
header 页面头部
footer 页脚
article 定义页面独立的内容区域一般为文章
aside 定义页面的侧边栏内容
details 文档某个部分的细节
summary 是 details 中的标题
time 定义日期或时间
ruby
mark 标记
nav 导航链接
例子:
html 代码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- header{
- height: 100px;
- background: blue;
- }
- nav{
- height: 50px;
- background: aqua;
- }
- .left{
- height: 600px;
- background: coral;
- width: 30%;
- display: inline-block;
- }
- .right{
- height: 600px;
- background: deeppink;
- width: 60%;
- display: inline-block;
- }
- footer{
- height: 200px;
- background: yellow;
- }
- </style>
- </head>
- <body>
- <header> <!-- 页面头部 -->
- <h1 > 页面标题 </h1>
- </header>
- <nav></nav>
- <div class="content">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- <footer> <!-- 页面底部 -->
- <address > 联系方式 </address>
- </footer>
- </body>
- </html>
来源: http://www.qdfuns.com/article/24007/1702c659654a32e529f11b1549419c74.html