范仁义html+css课程---8、新元素布局

一、总结

一句话总结：

推荐用新标签（语义化的标签）来布局：header（头部），footer（尾部），aside（侧边栏），nav（导航），article（独立内容），section（区域）

1、article标签和section标签的区别？

1、article元素是独立完整的内容（强调内容独立性），section元素页面内容分块（强调内容关联性）

2、本质上都是带有语义的div块元素，分别可以看作<div id="section">和<div id="article">

二、页面布局

博客对应视频课程位置：8、页面布局
https://fanrenyi.com/video/2/14

1、一般的布局方式

给div标签加上不同的id或者class来区别不同的板块

2、新布局标签介绍

header标签：定义一个头部

footer标签：定义一个底部

aside标签：定义侧边栏

nav标签：定义目录导航

article标签：定义一个独立内容区块：一篇文章、一个视频文件等

section标签：定义一个区域，如文章的章节等

header元素（标签）

用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等
通常会放在文章的头部

footer元素（标签）

通常用于设置一个网页的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
通常会放在页面的页脚

aside元素

aside元素通常用来设置侧边栏。
用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。

nav元素

用来定义目录、导航栏、超链接
并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
在文章页面中，nav还可以用来给一个文字做一个目录的超链接

article元素（标签）

用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等.
article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素，如果只是一段内容的话应该使用section元素。

section元素（标签）

用来定义文章中的章节(通常应该有标题和段落内容)
用来定义文档中特定内容的区块，可视为一个区域分组元素，用来给页面上的内容分块。
section元素可以定义文档的主体内容。
用一句话来概括它的作用就是给内容分段，给页面分区
注意他与div的区别，div强调在形式上的独立性，section强调的是内容上的独立性，注意它的语义。

article元素和section元素的区别

语义不同

article元素更强调内容的独立性
section元素更强调内容的关联性
article元素是独立完整的内容，section元素页面内容分块

相同点

本质上都是带有语义的div块元素
分别可以看作<div id="section">和<div id="article">

三、新标签布局实例

1、div布局示例

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>div布局示例</title>
 6     <style type="text/css">
 7         *{margin: 0;}
 8         body{height: 508px;}
 9         #header{width: 100%;height: 10%;background-color:coral;}
10         #section{width: 80%;height: 80%;background-color: aquamarine;float: left;}
11         #aside{width: 20%;height: 80%;float: left;background-color: darkseagreen;}
12         #footer{width: 100%;height: 10%;float: left;background-color: burlywood;}
13         #nav{width: 100%;height: 50%;background-color: darkkhaki;}
14     </style>
15 </head>
16 <body style="margin: 0;height: 508px">
17 <div id="header">div id="header"
18     <div id="nav">div id="nav"</div>
19 </div>
20 <div id="section">div id="section"</div>
21 <div id="aside">div id="aside"</div>
22 <div id="footer">div id="footer"</div>
23 
24 </body>
25 </html>

2、新元素布局示例

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>新元素布局</title>
 6     <style type="text/css">
 7         *{margin: 0;}
 8         body{height: 508px;}
 9         header{width: 100%;height: 10%;background-color:coral;}
10         section{width: 80%;height: 80%;background-color: aquamarine;float: left;}
11         aside{width: 20%;height: 80%;float: left;background-color: darkseagreen;}
12         footer{width: 100%;height: 10%;float: left;background-color: burlywood;}
13         nav{width: 100%;height: 50%;background-color: darkkhaki;}
14     </style>
15 </head>
16 <body>
17 <header>header
18     <nav>nav</nav>
19 </header>
20 <section>
21     section
22 </section>
23 <aside>
24     aside
25 </aside>
26 <footer>footer</footer>
27 </body>
28 </html>