html5 初探1

最新推荐文章于 2024-11-06 15:47:31 发布

xufei110

最新推荐文章于 2024-11-06 15:47:31 发布

阅读量137

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/xufei110/article/details/84414966

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个是最简单的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