这个是最简单的html5的一个布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xufei html5</title> <link href="../css/index.css" rel="stylesheet" type="text/css"> </head> <body> <div id='div1' class='content'> <header> <h1>Welcome to my homepage</h1> <p>My name is xufei</p> </header> <nav style='text-align: left'> <a href=''>test1</a> <a href=''>test2</a> <a href=''>test3</a> </nav> <div class='content'> content </div> <footer>This document was written in 2013/4/2</footer> </div> </body> </html>
?
@CHARSET "UTF-8";
body {
text-align: center;
}
.content {
width : 800px;
height: 400px;
border: 1px solid;
margin-right: auto;
margin-left: auto;
}
?
?
说明：
? ? 1，在 HTML5 中，文档类型声明 ?<!DOCTYPE html> 没有以前那么多了
? ? 2，引入外部css?<link href="../css/index.css" rel="stylesheet" type="text/css">
? ? ?可以没有 type, 但是必须有rel
? ? 3，<header> 页面上部<footer>页面下部，<nav>导航
? ? 4，body的样式 text-align:center 对 3的标签都起作用，但对div没有作用
? ? 5，<footer>虽然在 <div id='div1'>的内部，但却显示在他的外面
? ? 6，<nav style='text-align: left'> 在div1的内部 左侧，如果没有div1他就会在页面的左侧
?
?
?
这四个新元素：section、article、aside和nav，之所以说它们强大，原因在于它们代表了一种新的内容模型，一种HTML中前所未有的内容模型——给内容分区。迄今为止，我们一直都在用div来组织页面中的内容，但与其他类似的元素一样，div本身并没有语义。但section、article、aside和nav实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容，都可以拥有自己的概要、标题，自己的脚部。 其中最为通用的section，可以说是与内容最相关的一个。而article则是一种特殊的section。Aside呢，是一种特殊的section。最后，Nav也是一种特殊的section。
以上转自这个链接
?http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html
?
?
