内容推荐
在我的博客里面,我发表了几篇关于HTML5的文章,希望能够帮到你。
- HTML5框架
- 编写HTML+CSS必备的插件Emmet(大名鼎鼎的zen coding改进)
- placeholder占位符兼容性及拓展
- HTML5新增属性--推荐阅读
- 22 个常见的HTML5技巧和实际应用---推荐阅读
- HTML5的嵌套与HTML4的嵌套标准对比
更多内容请关注我们的博客
HTML5特性
语义特性(Class:Semantic)
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性(Class: OFFLINE & STORAGE)
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。
连接特性(Class: CONNECTIVITY)
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
三维、图形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。
性能与集成特性(Class: Performance & Integration)
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。
检测浏览器支持
在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走:
其他检测
Javascript:用Javascript 检测浏览器特性
检测 HTML5/CSS3 本地支持的 Javascript 库Modernizr
如果你选择用 Mootools可以使用MooModernizr
html5 变更的标签
- 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:<!DOCTYPE html>。它有意不使用版本,因此文档将会适用所有版本的HTML。
- 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang=”en”> 将对 HTML5 有效。
- 简单易记的编码类型 你现在可以在 meta 标签中使用 “charset”:<meta charset=”utf-8″ />
- 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。
- 新增标签 新增的语义化标签
header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby, - 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>[删除线]、<strike>[删除线]、<tt>[定义打字机文本]、<u>[下划线文本]; 和 <xmp>[和pre类似];
- 新增属性 在 HTML5 中,增加了很多form表单属性,当然还有其他属性。
required, from, pattern, placeholder, email, range[min, max, step], url, date, time, datetime, datetime-local, month, week, tel, number, search, --, contentcontenteditableable, contextmenu, data-yourvalue, draggable, item, itemprop, spellcheck, subject
简单代码示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Document</title>
</head>
<body>
<header> </header>
<section> </section>
<footer> </footer>
</body>
</html>