分享、学习、提高
2011/01/14 14:34
文章作者:Enjoy 转载请注明原文链接。
今天化了点时间,了解了下HTML5,并且试验性的把已有的一个页面转换成html5,其实还是蛮方便的。因为HTML5几乎支持原有的所有内容,只需要调整一下文档申明,结构就行了。IE要支持html5的话,只需要加一段代码。
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

国内几乎没有IE9的用户,因此,taobao是这样写的:
<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js" type="text/javascript"></script>
<![endif]-->

两个JS的内容是一样的,代码都来自:http://remysharp.com/2009/01/07/html5-enabling-script/

以下是我整理的由原来的html转换到HTML5一些注意点:

文档申明:
<!DOCTYPE html>

原来的根本记不住,每次都需要copy。这种写法还向前向后兼容。

设置页面编码:
旧:<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
新:<meta charset="utf-8">

链接样式表CSS
<link href="/css/comm_v3.css" rel="stylesheet" type="text/css">

可以不写type="text/css"了,浏览器只要看到rel=”stylesheet”就知道你是链接样式表了。
<link href="/css/comm_v3.css" rel="stylesheet">


加载JS
<script src="/js/html5.js" type="text/javascript"></script>

可以不写 type="text/javascript",浏览器默认的脚本语言就是javascript。
<script src="/js/html5.js"></script>



可以简单的把所有内容都包装在一个链接元素中
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

可以改写为:
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>


HTML5支持已有的内容,原来的div,img,p不做任何改动,都可以在HTML5里正常使用。

原结构:
<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>


可以更改为:
<body>
<header>...</header>
<nav>...</nav>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
</body>


更多推荐阅读:《HTML5设计原理》http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html



参考:
拥抱HTML5,《HTML5设计原理》读后随记
发表评论
表情
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写