出处：http://www.funme.net/study/227.html
HTML+CSS3已经到来很久了 似乎已经开始发霉 但是我最近才开始关注
觉得还是很新鲜的 至少发现很多浏览器至今不能很好的支持HTML5+CSS3
在沉寂的这N年中 我回来的第一感觉就是DIV+CSS非常的那啥，这个怎么说？ 算是流行吧。今天在w3school上瞄了一会HTML5 感觉很强大，我的感觉不是功能的强大，是语义强大。一个完全的HTML5构架WEB应该通过代码就可以顺利读通，当然DIV+CSS控例外，那个代码实在是不敢恭维。
现在简单整理下我学到的HTML5 布局结构。
就像以往一样 开始的时候需要一个HTML声明，它不同于以往的HTML4.01。
1
2
3
4
<!-- html5 样式 -->
<!DOCTYPE HTML>
<!--html4.01 样式 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
然后开始非常熟悉的 HEAD META TITLE 直至 BODY
HTML5可以用在Head中的标签 [ base | link | meta | scrīpt | style | title ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<base href="" />
<!-- 规定页面中所有链接的基准 url,一般在Head下面第一个位置。 -->
<meta charset="utf-8" />
<!-- charset 是新增属性，它使字符集的定义更加容易 -->
<meta name="revised" content="定义页面的最新版本" />
<!-- name的值允许 [ author | descrīption | keywords | generator | revised | others ] -->
<meta http-equiv="refresh" content="定义页面刷新时间" />
<!-- http-equiv的值允许 [ content-type | expires | set-cookie | refresh ] -->
<!-- 在 HTML 5 中，meta不再支持 scheme 属性 -->
<scrīpt type="text/javascrīpt">document.write("Hello HTML5!")</scrīpt>
<!-- 如果使用 "src" 属性，则 <scrīpt> 元素必须是空的 -->
<!-- 在 HTML 4 中，"type" 属性是必需的，但在 HTML5 中是可选的 -->
<title>HTML5!</title>
<link rel="stylesheet" href="" type="text/css" />
<!-- link 中charset、rev、target 在HTML5中不再支持 -->
<!-- sizes 是HTML5的新增属性，规定被链接资源的尺寸。仅适用于 rel="icon"。 -->
<style type="text/css">html5{color:red}</style>
</head>
然后开始盼望已经的body， 主体框架依旧
1
2
<body> ............ </body></html>
<!-- 在 HTML 5 中，删除了所有 <body> 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的 -->
到目前为止看起来似乎和以往一样，但是下面马上开始不同了。最后来看WEB中的具体部分。
在body中 HTML5 可用的新标签 以及和HTML4.01 的区别。这些新标签不知道是不是为了替换DIV和SPAN而出现，但是确实是起到了替换的作用，并且代码更友好易读。还有一些过时的 HTML 4 标记将取消，其中包括纯粹用作显示效果的标记，如 font 和 center，因为它们已经被 CSS 取代。
首先是WEB头部
1
2
3
4
5
6
7
8
9
10
11
<header id="" class="">
<hgroup>
<h1>hgroup扮演着一个可以包含一个或者更多标题相关的容器的角色,这些标题可能在header元素中。</h1>
<h2>它只能包含从h1-h6的标题元素，这些标题可能是副标题、二选一的标题或者标记标题。</h2>
<h3>如果你只有一个标题元素（h1-h6中的一个），你并不需要hgroup</h3>
</hgroup>
<nav><ul>
<li class="">标签定义导航链接的部分</li>
<li class="">如果文档中有“前后”按钮，则应该把它放到 nav 元素中</li>
</ul></nav>
</header>
接下来是WEB的BODY了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<section id="" class="">
<ol id="" class="">
<li>
<article class="">
<header>
<h2 class="">其实这个Header可以在很多地方用</h2>
</header>
article的具体内容 ，当然可以另外加DIV标记或者其他标记。
<footer class="">
<abbr class="" title="www.Funme.net">FunMe</abbr>
<address class="">标签定义文档作者或拥有者的联系信息</address>
</footer>
</article>
</li>
<li><article class="">...</article></li>
<li><article class="">...</article></li>
</ol>
</section>
最后是WEB底部
1
2
3
4
5
<footer id="" class="">
<abbr class="" title="www.Funme.net">FunMe</abbr>
<address class="">标签定义文档作者或拥有者的联系信息</address>
.... <div>这里很随意了 随便折腾吧</div>
</footer>
还有很多HTML5新标签，以上只是一个WEB的流程，当然可以有很多种方式。
具体HTML5标记用法可以去 http://www.w3school.com.cn/ 看看，手册是个好老师。
