最开始我们页面布局用的是table标签，然后演变成div+css布局，直到现在我们进行布局用新增的结构性元素。
div+css布局
新增的结构性元素
常见的新增结构性元素
1.header元素：一般用于网页的头部，定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<h1>前端依赖的常见浏览器</h1>
<a href="http://www.baidu.com">百度</a>
<nav>
<ul>
<li><a href="#">谷歌</a></li>
<li><a href="#">火狐</a></li>
<li><a href="#">360</a></li>
</ul>
</nav>
</header>
</body>
</html>
2.footer元素：与header元素基本一致，但是footer元素一般定义网页的底部内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<footer>
<ul>
<li>关于我们</li>
<li>联系客服</li>
<li>合作招商</li>
<li>隐私政策</li>
</ul>
</footer>
</body>
</html>
3.nav元素：可以用来定义导航栏，目录，超链接等；并不是需要把所有的连接组都放进nav元素中，只需要将主要的，基本的连接组放进nav元素即可
4.Article元素：用于定义一个独立的内容区块:可以是一篇博客，一篇文章或者是独立的插件；可以嵌套使用，也可以表示插件。类似于div元素
例子1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>Article元素</h1>
<p>欢迎学习Article元素</p>
</header>
<footer>
<p>这是底部</p>
</footer>
</article>
</body>
</html>
例子2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<h1>这是一个内嵌页面</h1>
<object data="#" type="" width="600px" height="600px"></object>
</article>
</body>
</html>
5.section元素：用来定义页面中的内容进行分块；强调分块。一般用于页面中具有明显独立的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<section>
<h1>第一章：桃园三结义</h1>
<p>桃园三结义最初是小说《三国演义》里记载的故事，述说当年刘备、关羽和张飞三位仁人志士，为了共同干一番大事业的目标，意气相投，
言行相依，选在一个桃花盛开的季节、选在一个桃花绚烂的园林，举酒结义，对天盟誓，有苦同受，有难同当，有福同享，共同实现自己人生的美好理想。</p>
</section>
<section>
<h1>第二章：</h1>
<p>草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭)，机智的诸葛亮一眼识破是一条害人之计，
却淡定表示“只需要三天”。后来，有大雾天帮忙，诸葛亮再利用曹操多疑的性格，调了几条草船诱敌，终于借足十万支箭，立下奇功。</p>
</section>
</article>
</body>
</html>
6 aside元素：1.通常用来设置侧边栏。
2.同时也可以嵌套在article元素内部使用，作为主要内容的附属信息，比如参考资料，名词解释等
3.也可以定义article元素之外的内容，，前提是这些内容与article元素内容相关联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article class="film_review">
<header>
<h2>侏罗纪公园</h2>
</header>
<section class="main_review">
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<p>Way too scary for me.</p>
<footer>
<p>
Posted on <time datetime="2021-2-11 19:00">Feb 11</time> by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on <time datetime="2021-02-19 19:00">Feb 19</time> by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on <time datetime="2021-02-15 19:00">Feb 15</time> by Staff.
</p>
</footer>
</body>
</html>
7.time元素： 1.表示24小时中的某个时刻或某个日期，，表示时刻允许带时差
2.datetime属性中日期与时间要用”T“文字分隔 使用”z“表示UTC标准时间
3.pubbdate属性是一个可选标签，可以让搜索引擎很方便就识别出文章日期，新闻的发表日期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<time datetime="2019-4-27">2019-4-27</time>
<time datetime="2019-4-27T20:00">2019-4-27</time>
<time datetime="2019-4-27T20:00Z">2019-4-27</time>
<time datetime="2019-4-27+09:00">2019-4-27</time>
</section>
</body>
</html>
8.progress和meter元素：1.progress元素：是HTML5新增的元素，用来建立一个进度条；通常用来与JavaScript结合使用，来显示任务的进度
2. meter元素：是HTML5新增的元素，用来建立一个度量条，用来表示度量衡的评定；通常与JavaScript结合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<!--max:规定当前进度条的最大值 ； value属性：设定进度条当前显示的默认值 form：规定进度条所属的一个或多个表单-->
<p>当前下载进度：</p>
<progress value="30" max="100">
</progress>
<meter value="40" max="100" min="10">
</meter>
</form>
</body>
</html>