初探HTML5框架的基本结构

出处: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/ 看看,手册是个好老师。


你可能感兴趣的:(html5)