HTML5方式: 语义化结构
语义化常用标签(元素):
<h1> ~ <h6> : 划分段落(标题)
<header> : 页眉(位于网站的顶部)
<nav> : 常用于网站的导航条
<main> : 位于网站的主体内容
<aside> : 边栏(常用于广告位, 推荐位, 热门信息等....)
<section> : 区块(定义文档某区域, 如: 章节,页眉, 页脚)
<footer> : 页脚(位于网站的底部)
<article> : 文章内容专用标签
实例
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5方式: 语义化结构</title>
<style>
/* 初始化外边距和内边距为: 0 */
* {margin: 0;padding: 0;}
/* 页眉header标签样式 */
header {width: 800px;background: lightcoral;height: 40px;margin: 10px auto;border-radius: 4px;}
header > nav > a {line-height: 40px;margin-left: 10px;text-decoration: none;}
header > nav > a:hover {background: yellowgreen;}
/* 主体内容样式 */
.container {width: 780px;height:510px;background: wheat;margin: 0 auto;border-radius: 4px;padding: 10px;}
/* aside左边栏与aside右边栏 */
.container > aside:first-child,
.container > aside:last-child {float:left;width: 160px;height: 510px;background: lightsalmon;}
.container > aside > section {text-align: center;margin-top: 220px;}
/* 主体区 */
.container > main {float: left;width: 440px;height: 508px;margin: 0px 10px;border-top: 1px solid #ccc;}
.container > main > header {background: red;width: 140px;height: 140px;
transform: rotate(50deg);margin: 30px auto;}
.container > main > header > h3 {text-align: center;line-height: 140px;transform: rotate(130deg);
font-size: 80px;}
.container > main > article {margin-top: 0px;}
/* footer标签页脚样式 */
footer {width: 800px;height: 80px;margin: 0 auto;background: lightpink;margin-top: 10px;border-radius: 4px;}
footer > .links {margin: 0 auto;text-align: center;}
footer > .links > a {line-height: 80px;margin-left: 10px;text-decoration: none;}
</style>
</head>
<body>
<!-- 利用header标签作为网站的页眉 -->
<header>
<nav>
<a href="">万事如意</a>
<a href="">事事顺心</a>
<a href="">福寿安康</a>
<a href="">笑口常开</a>
<a href="">吉祥如意</a>
<a href="">步步高升</a>
<a href="">登峰造极</a>
<a href="">一帆风顺</a>
<a href="">身体健康</a>
<a href="">学习进步</a>
</nav>
</header>
<!-- 内容主体区 -->
<div class="container">
<!-- aside标签作为边栏_左边 -->
<aside>
<section>区块1</section>
</aside>
<!-- 利用main标签定义主体区 -->
<main>
<header>
<h3>福</h3>
</header>
<hr>
<article>
传说明太祖朱元璋当年用“福”字作暗记准备杀人。好心的马皇后为消除这场灾祸，
令全城大小人家必须在天明之前都在自家门上贴上一个“福”字。
马皇后的旨意自然没人敢违抗，于是家家门上都贴了“福”字。其中有户人家不识字，
把“福”字贴倒了。第二天，皇帝派人上街查看，发现家家都贴了“福”字，还有一家把“福”字贴倒了。
皇帝听了禀报大怒，立即命令御林军把那家满门抄斩。马皇后一看事情不好，
忙对朱元璋说：“那家人知道您今日来访，故意把福字贴倒了，这不是'福到'的意思吗？”
皇帝一听有道理，便下令放人，一场大祸终于消除了。从此，人们便将“福”字倒贴起来，
一求吉利，二为纪念马皇后。
</article>
</main>
<!-- aside标签作为边栏_右边 -->
<aside>
<section>区块2</section>
</aside>
</div>
<!-- 利用footer标签页脚 -->
<footer>
<section class="links">
<a href="">links1</a>
<a href="">links2</a>
<a href="">links3</a>
<a href="">links4</a>
<a href="">links5</a>
</section>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图:
