本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.3节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.3 使用HTML 5的新元素对页面进行分栏设计
实例说明
本实例的目的是编写一段基本的HTML 5程序，将页面内容实现分栏显示。分栏功能是页面布局的基础，本实例将页面分为上、下、中3个部分。在大多数情况下，设计师们通常对这3部分进行如下规划。
上部分：显示导航。
中部分：又分成两个部分，其中左边设置菜单；右边显示文本内容。
下部分：显示页面版权信息。
本实例还有另外一个目的，让读者体会传统HTML标记元素和全新HTML 5标记元素的关系。
具体实现
使用Dreamweaver创建一个名为“003.html”的文件，具体代码如下所示：
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>页面结构</title>
<style type="text/css">
header,nav,article,footer
{border:solid 1px #666;padding:5px}
header{width:500px}
nav{float:left;width:60px;height:100px}
article{float:left;width:428px;height:100px}
footer{clear:both;width:500px}
</style>
</head>
<body>
<header class="bgColor">导航部分</header>
<nav>菜单部分</nav>
<article>内容部分</article>
<footer>底部说明部分</footer>
</body>
</html>
在上述代码中，使用HTML 5的全新元素对页面进行分栏设计，执行后的效果如图1-4所示。
其实对于上述代码中的全新HTML 5元素来说，可以使用传统的HTML元素进行修改，也可以实现上述分栏效果，具体代码如下所示：
<!DOCTYPE html PUBLIC n_//W3C//DTD XHTML l.0 Transitional//EN¨ "http://www.w3.org/
TR/xhtmll/DTD/xhtmll - transitional.dtd">
<html xmlns=”http://www.w3. org/199 9/xhtml”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"／>
<title>页面结构(/title>
<style type="text/css¨>
#header, #siderLeft, #siderRight, #footer
( border: solid lpx #666; padding: 5px)
#header{ width:500px)
#siderLeft{ float:left;width:6 0px; height:10 0px)
#siderRight{ float:left; width:428px; height:10 0px)
#footer( clear:both; width: 500px)
</style>
</head>
<body>
<div id="header">导航部分</div>
<div id="siderLeft">菜单部分</div>
<div id="siderRight”>内容部分</div>
<div id="footer">底部说明部分</div>
</body>
</html>
接下来开始分析新旧标记元素的关系，例如，原来的代码为：
<header>导航部分</header>
修改后的代码为：
<div id="header">导航部分</div>
由此可以看出，使用如下标记元素没有任何意义，因为浏览器不能根据标记的ID号属性来推断这个标记的真正含义。这是因为ID号是可以变化的，不利于寻找。
< div id="header" >。
< div id="siderLeft" >。
< div id="siderRight" >。
< div id="footer" >。
通过HTML 5中的新增元素< header >，可以明确地告诉浏览器此处是页头，使用< nav >标记来构建页面的导航，< article >标记用于构建页面内容的一部分，< footer >表明页面已到页脚或根元素部分，并且这些标记都可以重复使用，这样提高了开发者的工作效率。
除此之外，有些新增的HTML 5元素还可以单独成为一个区域，例如下面的代码：
<header>
<article>
<hl>内容l</hl>
</article>
</header>
<header>
<article>
<h2>内容2 </h2>
</article>
</header>
在HTML 5中，通过< article >标记元素可以创建一个新的节点，并且每个节点都可以有自己的单独元素，这和< hl >或< h2 >标记元素的原理一样。这样做不仅可以使内容区域各自分段，便于维护，而且代码简单，方便对局部进行修改。
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)