最新版本的 HTML 和 CSS 提供了许多新特性。例如,HTML5 包含了让 Web 页面更有语义的新元素;现在,您可以离线储存数据、创建可编辑的内容区和使用拖放功能等等。使用 CSS3 可以创建未使用图像的圆角效果、添加阴影和渐变。尽管有许多新特性已经可用,但是并不是所有新特性能够跨浏览器工作。对于本文提供的特定 HTML5 和 CSS3 技巧,您现在就可以在所有主流浏览器的最新版本上使用它们,包括 Apple Safari、Windows® Internet Explorer®、Mozilla Firefox 和 Google Chrome。
尤其是某些版本的 Internet Explorer,它们需要一些帮助才能识别新的 HTML5 元素。幸运的是,一个名为 html5shim 的公开可用 JavaScript 文件(一个支持 HTML5 Internet Explorer 的脚本)能够帮助 Internet Explorer 识别和呈现 HTML5 元素,这是 Internet Explorer 本身无法实现的功能。要包含这个 JavaScript 文件,仅需将 清单 1 中的代码放入到 HTML 文件中正在使用的 CSS 之上的<head>
部分中。
清单 1. html5shim,一个支持 HTML5 Internet Explorer 的脚本
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
这段代码还能够防止不需要该代码的浏览器加载它,因此仅 Internet Explorer 8 或更早的版本能够加载该代码。您可以通过访问项目的网站更多地了解这个 JavaScript 库(参考资料 部分提供相关链接)。
HTML5
HTML5 除了引入许多新元素之外,它的新功能也格外引人注目。这个小节将讨论 HTML5 的一些新元素,并展示如何创建可编辑的内容区和在多个页面之间发布消息。
页面结构
如果您花大量时间来设计 HTML 网站的结构,您将发现有许多部分是重复使用的。常见的是用于显示 logo 或其他标识信息的页头、列出网站板块的导航部分和用于显示版权信息的页脚。在以前的 HTML 版本中,通常使用 id
属性来识别这些元素;例如,页头包含在 id
设置为 "header"
的 <div>
中,即 <div id="header">
。
对于 HTML5 时,您可以使用新的标记来等义这些特定的区域,而不需要编写额外的标识属性。例如,使用新的 header
元素代替带有页头 id
的 <div>
。这不仅是更加合理的代码使用方法,而且还对查看其他开发人员的 Web 页面非常有用,因为许多开发人员都使用不同的代码编写方式。当然,在许多情况下 id
属性仍然很有用,但这些常用的元素不必要再使用它。清单 2 是一个基础的 HTML5 页面例子,它使用了 header
、nav
、section
、article
、aside
和 footer
元素。
清单 2. 基础的 HTML5 页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cross-browser HTML5 and CSS3</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav>
<!--Navigation-->
</nav>
</header>
<section id="intro">
<header>
<h2>Cross-browser HTML5 and CSS3</h2>
</header>
<div>Lorem ipsum</div>
</section>
<section id="content">
<section id="articles">
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">
September 4th 2009
</time></p>
</header>
<div>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.</div>
<h2>Comments</h2>
<form id="comment-form">
<input type="text" name="comment" id="comment" />
<input type="submit" value="submit" />
</form>
</article>
</section>
<aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo.</p>
</aside>
</section>
<footer>Copyright notice</footer>
</body>
</html>
每个元素的意思都相当简明易懂,但有几点需要说明:
- HTML5 仅有一个 doctype:
<!doctype html>
。
-
header
、nav
和 footer
都是我们能意料到的。
- 可以使用
section
元素来帮助定义 Web 页面布局的各个部分,例如一篇文章或一则介绍。
- 可以使用
article
元素来标识单独的博客帖子和评论等。
- 可以使用
aside
元素作为侧栏;其主要作用是将主页面内容包围起来。
要让 aside
元素出现在主页面内容旁边,请确保它们的宽度都适合当前页面的宽度,然后调整元素的位置。使用浮点数是以前让元素紧挨着排列的常用方式,但有了 section
和 aside
元素之后,您可以使用能够显示值的表格和表单元格代替浮点数,如 图 1 所示。
图 1. HTML5 页面布局
清单 2 展示了如何设置 content
部分使其显示为表,以及如何设置 articles
部分和 <aside>
标记使其显示为表格的单元格。这样这个结构就成为一个表而不需要使用额外的表代码,并且表单元格像列一样彼此紧挨着。清单 3 是一个例子,它展示了如何编写 CSS 来让这些元素紧挨着显示。
清单 3. 显示用的表格值
#content {
display: table;
}
#articles {
display: table-cell;
width: 620px;
padding-right: 20px;
}
aside {
display: table-cell;
width: 300px;
}
创建可编辑内容区
另一个有趣的 HTML5 特性是 ContentEditable
。如 清单 4 所示,任何使用 ContentEditable
属性的元素都变得可编辑。这意味着您可以在元素内部编辑任何文本,而不需要使用繁琐的 form
元素。图 2 是演示 ContentEditable
属性的实际使用的例子。
图 2. 可编辑内容区
您可以借助 Ajax 轻松地将任何更新保存到数据库,并且通过 HTML5 的跨浏览器本地存储功能,您可以在离线时使用这个强大的功能。
清单 4. 创建可编辑的 HTML 元素
<div id="editable" contenteditable="true">
Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</div>
发布消息
消息发布是一个带来诸多可能性的新特性。清单 5 和 清单 6 通过例子展示了如何从主 Web 页面将消息发布到该页面的 iframe 中。
清单 5. 发布消息
<form id="comment-form">
<input type="text" name="comment" id="comment" />
<input type="submit" value="submit" />
<iframe id="comment-iframe" src="post-message.html"></iframe>
</form>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript">
var win = document.getElementById("comment-iframe").contentWindow;
addEvent(document.getElementsByTagName('form')[0], 'submit', function (e) {
if (e.preventDefault) e.preventDefault();
win.postMessage(document.getElementById("comment").value,
"http://studiosedition.com");
// otherwise set the returnValue property of the original event to false (IE)
e.returnValue = false;
return false;
});
</script>
一个名为 postMessage
JavaScript 的函数处理实际发布的消息;您可以在 iframe 中使用名为 message
的新事件来获取事件和相关的属性。
清单 6. 获取已发布的消息
<p id="post-comment"></p>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript"> addEvent(window, "message", function(e){
if(e.origin !== "http://studiosedition.com") { document.getElementById("post-
comment").innerHTML = 'Message from ' + e.origin; } else {
document.getElementById("post-comment").innerHTML = e.origin + " : " + e.data; }
}); </script>
这个例子使用了一个定制的 JavaScript 事件函数,它作为外部文件 event.js 包含进来。清单 7 显示了该文件的脚本。
清单 7. 定制的事件函数
var addEvent = (function () { if (document.addEventListener) {
return function (el, type, fn) { if (el && el.nodeName || el === window)
{ el.addEventListener(type, fn, false); } else if (el && el.length) {
for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; }
else { return function (el, type, fn) { if (el && el.nodeName || el ===
window) { el.attachEvent('on' + type, function () { return fn.call(el,
window.event); }); } else if (el && el.length) { for (var i = 0; i
< el.length; i++) { addEvent(el[i], type, fn); } } }; } })();
分享到:
相关推荐
IMOS平台跨浏览器播放SDK包含了跨浏览器播放接口文档及Demo示例(html)。用户可以使用这些接口实现基础视频监控业务中实况、回放和云台控制等功能的二次开发。 以JS接口的形式提供SDK开发包。 适用的产品: 1、...
然而并不是所有这些新特性都能够跨浏览器使用。通过本文学习一些能够在所有主要浏览器的最新版本上使用的HTML5和CSS3技巧,这些浏览器包括Safari、InternetExplorer、Firefox和Chrome。最新版本的HTML和CSS提供了...
转载而来:jquery.zclip.1.1.1.zip 利用zclip插件完成跨浏览器复制粘贴板功能。 自己之前有找很久,但发现零碎,而后也算千辛万苦找到一个合适并测试成功的(zclip转载而来并不是自己写的), 附上之前我所参考的例子 ...
HTML5有非常有用和令人意想不到的功能,但也有少数浏览器并不支持HTML5,因此我们需要基于HTML5的前端响应式框架做跨浏览器的支持。这些HTML5的框架有很多,大多支持响应式布局,干净的代码,跨浏览器兼容,内置按钮...
AMUI专注于现代浏览器(支持HTML5),不再为过时的浏览器耗费资源,为更有价值的用户提高更好的体验。5、本地化支持相比国外的前端框架,Amaze UI专注解决中文排版优化问题,根据操作系统调整字体,实现最佳中文排版...
HTML5+MVC3整合实例源码 ...虽然与Silverlight等基于浏览器插件的解决方案相比,未免显得繁琐,但毕竟这是“真正”地浏览器端应用,真正的跨平台跨浏览器 注意:源码运行需要ie9或支持html5的浏览器 数据库为SQL2008
9、浏览器占用内存资源极少,不需要改动任何注册表,就可以实现安装,比类似功能强大需要改变注册表的浏览器更实用,是简单快捷的上选。而且一些硬件配置较低的朋友,完全可以实现电脑的良性运行。 10、安全...
使用JS的Window对象的Print方法实现兼容性强的分页打印功能,可直接运行,代码直接复制即可用。
就视频而言,HTML5 新增了 video 来实现在线播放视频的功能。 使用 HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等,功能十分强大,同时代码比较少加快加载速度。此外跨平台性比较好,特别是...
Cocos2d-html5 已经发展到 ,新一代 Cocos 游戏引擎,具有全功能的编辑器和内容创建友好的工作流程。 它支持所有主流平台,让游戏可以快速发布到网页、iOS、Android、Windows、Mac 和各种小游戏平台。 纯 JavaScript...
现在开发人员可以在浏览器中创建出具有丰富交互功能的内容,并实现跨平台部署。 HTML5多媒体开发指南 一书对此进行了详细介绍。本书将介绍如何使用HTML5革命性的新特性,包括原生的<audio>、<video>和...
播放器是主要以HTML5技术为平台开发,同时兼容flash技术,实现了跨平台各浏览器兼容的视频播放。使用Sewise Player您可以在Windows, MacOS, Linux,Windows Phone, Android, IOS等任意平台上,通过对应的浏览器播放...
本代码主要应用的是jsp技术,而实现的文件上传功能,这个功能也是比较常见的,也是比较常用的,更是在网络中比较流行的。 技术为创建显示动态生成内容的Web页面提供了一个简捷而快速的方法。JSP技术的设计目的是...
要实现可编辑的表格功能,我们要解决以下问题: 1.明确要修改的数据在表格中是哪些列(如何找到这些单元格); 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题。 我们通过jQuery...
Klynt Player是一个跨浏览器JavaScript引擎,用于播放富媒体序列,可以使用。 演示和文档 二手图书馆 播放器使用以下库: :SMIL-Timing和SMIL-Timesheets的实现 :具有Flash和Silverlight垫片HTML5 <audio>...
(4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台性,实现了“认我测”在线认证检测系统。 综上所述,“认我测”在线认证检测系统,率先填补了认证检测领域移动端的空缺,提供了Web浏览器+...
默认浏览器功能 可默认所有网页在Webso打开。 标签置底功能 可随意设置标签置上或置。 实现了内存优化,真正节约内存,最小化时只占3M多内存。 多种标签关闭方式。 您可以选择关闭当前标签后 跳到上一活动...
Zero Clipboard实现简单跨浏览器复制 var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); // 设置鼠标为手型 clip.setText("哈哈"); // 设置要复制的文本。 // 注册一个 button,...