HTML5的结构元素
【摘要】 HTML5定义了一组新的语义化标记来描述元素的内容，如article、header、section、footer、aside等标签，明确表示网页的结构，这样搜索引擎就能轻易抓到网页的重点。
元素名称说明header标记头部区域的内容footer标记脚部区域的内容section独立的文章内容aside相关内容或者引文nav导航类辅助内容
<!DOCTYPE html>
...
HTML5定义了一组新的语义化标记来描述元素的内容，如article、header、section、footer、aside等标签，明确表示网页的结构，这样搜索引擎就能轻易抓到网页的重点。
| 元素名称 | 说明 |
|---|---|
| header | 标记头部区域的内容 |
| footer | 标记脚部区域的内容 |
| section | 独立的文章内容 |
| aside | 相关内容或者引文 |
| nav | 导航类辅助内容 |
<!DOCTYPE html>
<meta charset="UTF-8"/>
<title>HTML5结构元素</title>
<style>
body{
background-color:#cccccc;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin:0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}
header{
background-color:#F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2{margin:0px;}
h1{
font-size:72px;
margin:0px;
}
h2{
font-size:24px;
margin:0px;
text-align:center;
color:#F47D31;
}
h3{
font-size:18px;
margin:0px;
text-align:center;
color:#F47D31;
}
h4{
color:#F47D31;
background-color:#FFFFFF;
-webkit-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-45deg);
-moz-box-shadow:2px 2px 20px #888;
-moz-transform:rotate(-45deg);
position:absolute;
padding:0px 150px;
top:50px;
left:-120px;
text-align:center;
}
nav{
display:block;
width:25%;
float:left;
}
nav a:link,nav a:visited{
display:block;
border-bottom:3px solid #fff;
padding:10px;
text-decoration:none;
font-weight:bold;
margin:5px;
} nav h3{
margin:15px;
color:white;
}
#container{
background-color:#888;
}
section{
display:block;
width:50%;
float:left;
}
article{
background-color:#eee;
display:block;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-10deg);
-moz-box-shadow:2px 2px 20px #888;
-mox-transform:rotate(-10deg);
}
article header{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px;
}
article footer{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px;
}
article h1{
font-size:18px;
}
aside{
display:block;
width:25%;
float:left;
}
aside h3{
margin:15px;
color:white;
}
aside p{
margin:15px;
color:white;
font-weight:bold;
font-style:italic;
}
footer{
clear:both;
display:block;
background-color:#F47D31;
color:#FFFFFF;
text-align:center;
padding:15px;
}
footer h2{
font-size:14px;
color:white;
}
a{
color:#F47D31;
}
a:hover{
text-decoration:underline;
}
</style>
<header>
<h1>网页标题</h1>
<h2>次级标题</h2>
<h4>提示信息</h4>
</header>
<div id="container">
<nav>
<h3>导航</h3>
<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
</nav>
<section>
<article> <header> <h1>文章标题</h1> </header> <p>文章内容...... <footer> <h2>文章注脚</h2> </footer>
</article>
</section>
<aside>
<h3>相关内容</h3>
<p>相关辅助信息或者服务......
</aside>
<footer>
<h2>页脚</h2>
</footer>
</div>
运行效果：
谢谢阅读！
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/89319654
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）