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

最新推荐文章于 2021-06-17 05:36:02 发布

weixin_33877092

最新推荐文章于 2021-06-17 05:36:02 发布

阅读量1k

点赞数

文章标签： xhtml

原文链接：https://yq.aliyun.com/articles/97673

版权

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.3节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。

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

af9a745c7ea3fbb2881fd8a383cc0177328547c8

实例说明

本实例的目的是编写一段基本的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所示。

d607444017524175ec51481d2369d8ea8fa5b29e

其实对于上述代码中的全新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 >标记元素的原理一样。这样做不仅可以使内容区域各自分段，便于维护，而且代码简单，方便对局部进行修改。

weixin_33877092

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
《HTML5 开发实例大全》——1.3 使用HTML 5的新元素对页面进行分栏设计

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.3节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。1.3 使用HTML 5的新元素对页面进行分栏设计实例说明本实例的目的是编写一段基本的HTML 5程序，将页面内容实现分栏显示。分栏功能是页面布局的基础，本实例将页面分为上、下、中3个部分。在大多数...
复制链接

扫一扫