<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0%;padding: 0%;}
header{height: 200px; background-color: cadetblue;text-align: center;}
footer{height: 200px; background-color: cadetblue;text-align: center;}
section{height: 250px;background-color: rgb(155, 204, 241);text-align: center;}
nav,aside{width: 20%;height: 250px; background-color: antiquewhite;float: left;}
main{width: 60%;height: 250px;float: left;}
</style>
</head>
<body>
<!-- h5标准中添加了几个文本结构标签<header><section><footer>-->
<!-- 它们的配合使用可以带给文本内容部分鲜明的结构感和分区效应 -->
<header>头部区域</header>
<section>
<!-- <nav><main><aside>配合<section>进行嵌套可以明确的分割内容详情部分的区域 -->
<!-- 比h4时单纯用div分割块级单位从结构上更易读，也更易于seo优化 -->
<nav>左边导航列表</nav>
<main>中间主题内容区</main>
<aside>右边导航列表</aside>
</section>
<section>
<nav>左边导航列表</nav>
<main>中间主题内容区</main>
<aside>右边导航列表</aside>
</section>
<section>
<nav>左边导航列表</nav>
<main>中间主题内容区</main>
<aside>右边导航列表</aside>
</section>
<section>
<nav>左边导航列表</nav>
<main>中间主题内容区</main>
<aside>右边导航列表</aside>
</section>
<footer>尾部区域</footer>
</body>
</html>
Html5中新增的文本结构标签用法
下面是一些网上查找到的一部分新增标签具体详情
一、新增的语义化布局标签：
- header和footer标签：页面中一个内容区块的头部和尾部布局；
- nav：导航区域；
- article标签：页面中独立的内容部分布局；
- aside标签：在独立内容之外，但是又与article有关联的部分布局；
二、新增媒体标签
- audio（音频）；2. video（视频）；
三、新增canvas和svg绘画元素
canvas表示位图区域；
svg定义矢量图；
四、新增表单增强元素
表单元素 input 的 type 属性扩充：
date（输入日期）；
email（输入邮件）；
url（输入url地址）；
search（呈现搜索常规的文本域）；
range（输入一定范围内的数值）；
month（输入月份）；
color（颜色）；
number（输入数值）；
以及表单元素 input 通过属性进行表单验证：required（必填项）、pattern（验证表单输入）。
