http://www.digimantra.com/technology/html5/html5-page-structure/
标签： HTML5
代码片段(1)
[代码] [HTML]代码
01 |
<!DOCTYPE HTML> |
02 |
03 |
<html> |
04 |
05 |
<head> |
06 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
07 |
<title>Website Title</title> |
08 |
</head> |
09 |
10 |
<body> |
11 |
12 |
<header> |
13 |
<nav> |
14 |
<ul> |
15 |
<li>Home</li> |
16 |
<li>Contact</li> |
17 |
</ul> |
18 |
</nav> |
19 |
</header> |
20 |
21 |
<section> |
22 |
23 |
<article> |
24 |
<header> |
25 |
<h2>Title Goes here</h2> |
26 |
<p>Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time> by <a href="#">Author</a> - <a href="#comments">12 comments</a></p> |
27 |
</header> |
28 |
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> |
29 |
</article> |
30 |
31 |
<article> |
32 |
<header> |
33 |
<h2>Article title</h2> |
34 |
<p>Posted on <time datetime="2012-07-26T13:00:24+01:00">July 26th 2012</time> by <a href="#">Author</a> - <a href="#comments">9 comments</a></p> |
35 |
</header> |
36 |
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> |
37 |
</article> |
38 |
39 |
</section> |
40 |
41 |
<aside> |
42 |
<h2>Contact Us</h2> |
43 |
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> |
44 |
</aside> |
45 |
46 |
<footer> |
47 |
<p>Copyright 2012 DigiMantra Labs ©</p> |
48 |
</footer> |
49 |
50 |
</body> |
51 |
52 |
</html> |
发表回复