Answers:
HTML5 巨大,但也很棒。
我认为,这主要是关于互操作性。该规范甚至指定了极端情况,以尝试确保所有浏览器都以相同的方式读取标记。
其次,HTML5拥有视频和音频,其功能恰如其名。如果要包含视频或音频,HTML5应该减少您的插件需求。
第三,HTML5包含许多可访问性和语义帮助。例如,诸如<section>
和<article>
帮助机之类的元素可以确定应该包含的内容。<input type=email>
出于相同的原因,像这样的新输入类型也可能有用,尽管新输入类型包括自定义UI,这使它们即使对于“普通”读者也很有用。
请注意,新的窗体功能比新的输入类型要多得多。它还包括对占位符文本和其他几个属性的支持。
HTML5包含<canvas>
,它允许绘制2D(以及WebGL和3D)形状的图表,甚至渲染游戏。
现在,旧行为已被标准化,例如Internet Explorer的Ancient contentEditable
。
DOCTYPE终于不错了!您现在可以真正记住它了!<!DOCTYPE html>
使用指定编码也更加容易<meta charset=utf-8>
。
如果要向客户端发送数据并将其与元素关联,则现在可以使用自定义属性来进行处理。例如,<div data-status=open>Open</div>
现在终于被允许了。请注意,自定义属性名称必须以开头data-
。
您现在可以在HTML文档中包含SVG和MathML。以前,您只能使用XHTML文档来做到这一点。
在HTML5定义的多个新功能和字段中,最令人印象深刻的是classList,它使您可以更轻松地操作class属性。使用classList可以使那些困难的情况变得非常简单,而不是必须获取getAttribute / setAttribute并使用复杂的技巧来确定元素具有哪些类并从该元素中删除特定的类。
还有许多相关规范,例如Web Workers,Web Sockets和IndexedDB,它们并不是HTML5的真正组成部分,但每个人都像在谈论它们一样。它们对于利用多核计算机,与服务器进行通信以及在本地存储数据非常有用。
至于CSS3,它包括对动画,过渡,圆角边框和灵活框模型的支持。
CSS3中还新增了新的选择器,这些选择器使匹配页面上的特定元素(例如仅表中的奇数行或偶数行)更加容易。
不透明度,新单位,选取框和红宝石也是CSS3的一部分。
我认为这几乎涵盖了所有重要部分。
要跟踪功能和规格支持,可以检查何时可以使用。它包括HTML5和CSS3功能以及诸如SVG,PNG,CSS2.1和CSS2之类的内容。它还跟踪其批准状态(推荐,提议的建议,候选推荐,工作草案,IETF标准)。FindMeByIP仅通过浏览器维护支持的CSS3功能的矩阵。
具体的语法变化和简化发生在:
<!DOCTYPE html>
language
属性<html>
:(<html lang="en">
xmlns
,xml:lang
如果您希望XML符合性)<meta>
标签charset
:<meta charset="utf-8" />
script
不再接受type
属性,需要charset
远程脚本:(<script src="/media/js/jquery.js" charset="utf-8"></script>
内联脚本根本不需要其他属性)HTML5使您的标记具有更大的语义能力,并且整体上更易于读取/写入并且具有较小的文件大小。而不是拥有<div id="nav">
,而是拥有<nav>
。看起来好像不多,但是加起来。
不推荐使用XHTML1和HTML4中的许多元素。下列元素不支持HTML5的:<acronym>
,<applet>
,<basefont>
,<big>
,<center>
,<dir>
,<font>
,<frame>
,<frameset>
,<noframes>
,<s>
,<strike>
,<tt>
,<u>
和<xmp>
。
HTML5中的几个新元素旨在仅添加更多语义标记,并且除了提供更有意义的替代之外,什么也不会做<div>
。这些新的元素包括:<article>
,<section>
,<aside>
,<hgroup>
,<header>
,<footer>
,<nav>
,<time>
,<mark>
,<figure>
,和<figcaption>
。
HTML5表单得到了极大的改进。
新输入类型
新属性:
新元素
我们可以整日使用表格,但是这里有一些资源可以更好地解释所有这些新内容。
CSS3带来了精彩的媒体查询。媒体查询是如此出色。在IE8及以下版本中不可用,但IE9将支持。
CSS3具有递增计数器。当有序列表或编号在语义上不正确时,您可以使用这些方法使用:before
伪选择器和content
样式为没有编号列表的元素自动编号。(例如,对填写表单字段的步骤进行编号。)
如果您是CSS重置的粉丝,那么HTML5 Doctor可以提供HTML5 CSS重置。我为个人页面对此重设做了三个补充:
text-rendering: optimizeLegibility;
在定义中添加到样式 <body>
label
包含在定义中,input
并select
由于需要vertical-align: middle;
ins
和:focus
从Eric Meyer的CSS复位加回可以使用一个称为reset5的竞争性重置,但是我个人尚未对其进行评估。它是基于双方的埃里克迈耶和HTML5医生复位。
在HTML5安全的cheatsheet跟踪错误的HTML5功能在各种浏览器中实现,而且还包括那些好现有功能的bug跟踪为好。
但是,使用HTML5元素不会自动使您的代码具有语义。WHATWG写了一篇名为<section>的文章,它不仅仅是一个“语义<div>”,它解释了它不仅仅是一个容器元素。
在HTML 5中,有一种用于构造文档轮廓视图的算法。例如,AT可以使用它来帮助用户浏览文档。并且<section>和朋友是该算法的重要组成部分。每次嵌套一个<section>时,都会将轮廓深度增加1(以防万一您想知道该模型与传统的<h1>-<h6>模型相比有什么优势,请考虑使用基于Web的feedreader将联合发布内容的文档结构与周围站点的文档结构进行集成。在HTML 4中,这意味着解析所有内容并重新编号所有标题。在HTML5中,标题以正确的深度免费显示)。
...
如果仅将页面上的所有<div>盲目地转换为<sections>,则页面不太可能具有预期的轮廓。而且,除了是语义上的伪装外,这还会使依赖标题导航的人们感到困惑。
像这个世界上的所有其他事物一样,有一个名为SproutCore的 HTML5 Web应用程序框架,由前苹果工程师 Charles Jolley 构建。
除了html5rocks.com之外,您还可以了解html5doctor.com和html5gallery.com。
(这是我对webapps.stackexchange.com上类似问题的回答)
对于我来说,Canvas和Web Worker线程是HTML5最令人兴奋的方面。我编写了一些利用这些功能的Web应用程序:
GioAUTHor [sic]广泛使用画布,可让您在地图上绘制路径,然后找到从起点到终点的最短路线(通过JavaScript中Dijkstra的算法)。
JavaScript Thread Demo有限地使用了画布,但显示了Worker Threads的用法,并附带了演示代码。它还利用HTML5 输入type =“ range”滑块控件。
HTML5浏览器支持与浏览器本身一样多。有一个不错的网站(在HTML5中,natch)有关HTML5准备情况,该网站显示谁准备好了。
关于CSS3-请访问http://css3please.com/,看看您能做什么。
浏览器越晚,您越有可能看到效果。
杰里米·基思(Jeremy Kieth)刚刚发布了一本非常不错的书,主题为“ Web设计人员的HTML5”。您可能想检查一下。
这是《 A Book Apart》的第一本书。强烈建议中级到高级设计师使用。A ++
注意:您可能需要等待获得纸质副本
这没有提供关于重要性的意见,但是这是HTML 4和HTML 5之间的有用差异。
我对主要改进的2美分:
<section>
和新的标头概述算法(我确实说过,这只是我的 2美分)<input type=email>
data-*
属性<audio>
和<video>
因为还没有人提出这一点:
HTML5非常适合所有人列出的内容,但是它还包括标准地理位置,Web工作人员,Web套接字,画布和localStorage。所有这些工具都是HTML5规范的一部分,该规范在幕后使用了大量JavaScript来实现它。