《HTML5 开发实例大全》——1.3 使用HTML 5的新元素对页面进行分栏设计

2021-08-19 07:24:26

本节书摘来自异步社区《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 >标记元素的原理一样。这样做不仅可以使内容区域各自分段，便于维护，而且代码简单，方便对局部进行修改。

码农公寓

1.3 使用HTML 5的新元素对页面进行分栏设计

相关文章