Milestone新布局HTML5

这些天除去其他项目的维护的工作，主要精力还是放在了迈石网站建设上，上一篇提到了两个方向这篇开始我用Milestone来代表迈石科技。
进度如下：
完成了对整个站点的HTML5标签重构，由于HTML5、CSS3目前还处于定义草案阶段，这里仅做参考；

W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。
通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

Milestone的HTML5页面框架：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>迈石科技领先的商务E化综合服务商</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
</head>
 
<body>
<!-- 页面容器 -->
<div id="container">
 
	<!-- 页面头部 -->
    <header id="header">
    	头部内容...
    </header>
 
    <!-- 页面内容 -->
    <div id="content">
 
        <!-- 主内容 -->
    	<section class="main">
        	主内容...
        </section>
 
        <!-- 侧栏 -->
        <aside class="sidebar">
        	侧栏内容...
        </aside>
 
    </div>
 
    <!-- 页面尾部 -->
    <footer id="footer">
    	底部版权...
    </footer>
</div>
</body>
</html>

先看下这段Js引用代码：

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

针对IE版本浏览器，创建新标签：abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video等。

紧跟着是条件判断对CSS的引用：

<!--[if lte IE 7]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

ie.css看到这个就知道是为IE浏览器写的，方便维护，方便过W3C(大多HACK是为IE写的)。

哦，对了还有需要把长长的DTD换成简短的，

小时候的故事：08年到上海找工作时，所面试的一家单位要求我用记事本来写代码，写完之后，
难题来了，面试官要求我把这段长长的DTD声明用记事本写出来，当时就杯具了

长长的DTD：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

替换成短短的DTD：

<!DOCTYPE HTML>

框架搭建好了，就这么简单。

HTML5标记看起来是如此富含语意，DIV将来似乎会较少存在了：

在标记里，语义与一个元素的含义有关，并且关系到这个元素怎样描述它所包含的内容。

——Molly E. Holzschlag

UECSS.COM

Milestone新布局HTML5

6 thoughts on “Milestone新布局HTML5”

Leave a comment