shangrila-xiu

112
文章
101
分类
33
标签

headerAndFooter

header和footer元素（页首和页尾）

header和footer的基本含义

header：可以用来标记网页或区段的页首，里面包含标题、标志图案、区段目录、搜索窗体等。

footer：可以用来标记网页或区段的页尾，里面可以包含网站的拥有这信息。建议浏览器分辨率、浏览人数、版权声明，以及连接至隐私权政策、网站安全政策、服务条款等内容的超链接。

父区段内容元素和区段根元素

父区段内容元素：包括< article>、< section>、< nav>、< aside>等。

区段根元素：包括< body>、< blockquote>、< fieldset>、< figure>、< details>等。

下面是关于上面元素的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>	<head>
<meta charset="UTF-8">
<title>中国文学欣赏</title>
<style type="text/css">
	header,footer{
		display: block;
		clear: both;
		padding: 5px;
		text-align: center;	
		}
	nav{
		display: block;
		float: left;
		width: 20%;
		height: 50%;
		background:yellow ;
		padding: 5px;
	}
	article{
		display: block;
		float: right;
		width: 78%;
		height: 50%;
		background: silver;
		padding: 5px;
	}
	</style>
	<script type="text/javascript">
	document.createElement("header");
	document.createElement("nav");
	document.createElement("article");
	document.createElement("footer");	
	</script>
	</head>
	<body>
	<header>
	<h1>中国文学欣赏</h1>
	</header>
	<nav>
		<ul>
       	<li><a href="">唐诗</li>
		<li><a href="">宋词</li>				
		<li><a href="">元曲</li>	
		</ul>
		</nav>
		<article>
	<p>中国文化博大精深，尤以唐诗、宋词、元曲最为精妙,中国文化博大精深，尤以唐诗、宋词、元曲最为精妙中国文化博大精深，尤以唐诗、宋词、元曲最为精妙中国文化博大精深，尤以唐诗、宋词、元曲最为精妙</p>
	</article>
	<footer>
	 <p><small>快乐工作室版权所有&copy;2018</small></p>
	</footer>
	</body>
</html>