我已经看过这个网站和这个网站,但是要消化的东西很多。与常规的旧(X)HTML / CSS相比,HTML5的主要区别是什么?

#1 楼

HTML5既巨大又很棒。

在我看来,这主要是关于互操作性。该规范甚至指定了极端的情况,以尝试确保所有浏览器都以相同的方式读取标记。

其次,HTML5具有视频和音频,其功能完全符合其名称所说的。如果要包含视频或音频,HTML5应该减少对插件的需求。

第三,HTML5包含许多可访问性和语义帮助。例如,诸如<section><article>之类的元素可以帮助机器确定应该包含的内容。出于相同的原因,诸如<input type=email>之类的新输入类型也可能有用,尽管新输入类型包括自定义UI,这些自定义UI即使对于“普通”读者也是如此。

请注意,新的Forms功能非常多不仅仅是新的输入类型。它还包含对占位符文本和其他几个属性的支持。 />现在已经规范了旧行为,例如Internet Explorer的古代<canvas>

DOCTYPE终于很不错了!您现在可以真正记住它了! contentEditable

使用<!DOCTYPE html>来指定编码也更加容易。

如果要将数据发送到客户端并将其与元素相关联,现在可以使用自定义属性来进行编码。例如,现在终于允许<meta charset=utf-8>。请注意,自定义属性名称必须带有<div data-status=open>Open</div>前缀。

您现在可以在HTML文档中包括SVG和MathML。以前,您只能使用XHTML文档。

在HTML5定义的多个新功能和字段中,最令人印象深刻的是classList,它使您可以更轻松地操作class属性。不必获取getAttribute / setAttribute并使用复杂的技巧来确定元素具有哪些类并从该元素中删除特定的类,而使这些困难的情况变得非常简单。

也有多个相关的规范,例如Web Workers,Web Sockets和IndexedDB,它们并不是HTML5的真正组成部分,但每个人都像在谈论它们一样。它们对于利用多核计算机,与服务器进行通信以及在本地存储数据非常有用。

对于CSS3,它包括对动画,过渡,圆角边框和灵活框模型的支持。 br />
CSS3中还新增了选择器,可以更轻松地匹配页面上的特定元素(例如表中的奇数行或偶数行)。

不透明度,新的单位,选取框和红宝石也是CSS3的一部分。

我认为几乎涵盖了所有重要部分。

评论


出色的磨损。

–乔治·爱迪生(George Edison)
2010年7月15日在23:16

在达到所有主要方面都做得很好。

–格兰特·佩林
2010年7月17日在6:16

值得一提的是,HTML5目前只是一个工作草案,尚未完全定稿。

– Django Reinhardt
2010-10-8 13:14

@Django Reinhardt正如WHATWG所说,并非所有HTML5功能都处于同一阶段。有些已经被广泛实施,另一些则需要更多时间。开发网站时真正重要的是实施,而规范状态并不能很好地衡量这一点。您可能还需要查看WHATWG常见问题解答。

–luiscubal
2010-10-10 22:08

他们是否摆脱了为有效XHTML属性使用引号的麻烦?

–莲花笔记
2010年11月2日,17:33

#2 楼

要跟踪功能和规格支持,可以检查何时可以使用。它包括HTML5和CSS3功能以及诸如SVG,PNG,CSS2.1和CSS2之类的功能。它还跟踪其批准状态(推荐,提议的建议,候选推荐,工作草案,IETF标准)。 FindMeByIP仅通过浏览器维护受支持的CSS3功能的矩阵。

某些改动和语法简化发生在螺母和螺栓中: <!DOCTYPE html>

language标签的简化<html>属性:<html lang="en">(如果希望符合XML标准,仍可以包含xmlnsxml:lang
<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>
HTML5中的HTML只能添加更多语义标记,除了提供<xmp>的更有意义的替代方法之外,什么也不会做。这些新元素包括:<div><article><section><aside><hgroup><header><footer><nav><time><mark><figure>

HTML5格式得到了很大的改进。

新输入类型



颜色,电子邮件,日期,月份,星期,时间,日期时间,本地日期时间,数字,范围,搜索,电话和url


新属性:



,需要自动对焦,样式,列表,自动完成和占位符


新元素



<figcaption><keygen><datalist><output><meter>


我们可以整日使用表格,但是这里有一些资源可以更好地解释所有这些新东西。


一种疯狂的形式
网络的未来:我们将如何在HTML5中创建表单
HTML5输入类型
使用HTML5表单度过美好的一天

重新思考HTML5中的表单
HTML5表单即将问世

CSS3带来了精彩的媒体查询。媒体查询是如此出色。在IE8及更低版本中不可用,但在IE9中将受支持。

CSS3具有递增计数器。当有序列表或编号在语义上不正确时,可以使用<progress>伪选择器和:before样式使用这些元素自动编号无序列表的元素。 (例如,对填写表单字段的步骤进行编号。)

如果您是CSS重置的粉丝,那么HTML5 Doctor可以提供HTML5 CSS重置。我为个人页面对此重置做了三处补充:



content已添加到text-rendering: optimizeLegibility;定义的样式中


<body>label包含在定义中,因为它需要input
从Eric Meyer的CSS Reset中获取selectvertical-align: middle;的样式。
但我尚未对其进行个人评估。它基于Eric Meyer和HTML5 Doctor重置。

HTML5安全备忘单跟踪在各种浏览器中实现的HTML5功能中的错误,并且还包括现有功能中的错误,可以很好地跟踪也是。

但是,使用HTML5元素不会自动使您的代码具有语义。 WHATWG写了一篇名为
的文章,它不仅仅是一个“语义
”,它解释了它不仅仅是一个容器元素。

在HTML 5中,有一种构造轮廓的算法文件视图。例如,AT可以使用它来帮助用户浏览文档。并且
和朋友是该算法的重要组成部分。每次嵌套一个
时,都会将轮廓深度增加1(以防万一您想知道该模型与传统的

-

模型相比有什么优势,请考虑使用一个基于Web的feedreader将联合内容的文档结构与周围站点的文档结构进行集成。在HTML 4中,这意味着解析所有内容并重新编号所有标题。在HTML5中,标题以正确的深度免费显示)。

...

如果仅将页面上的所有
盲目转换为,则页面不太可能具有预期的轮廓。而且,除了语义上的假冒伪装外,这还会使依赖标题导航的人们感到困惑。


像这个世界上的所有其他事物一样,还有一个HTML5框架由名为Apple的前工程师Charles Jolley构建的名为SproutCore的Web应用程序。

除了html5rocks.com,您还可以了解html5doctor.com和html5gallery.com。

评论


+1好答案!认为您可能在某处的某个代码段中缺少结尾。

–JasonBirch
10年7月16日在2:23

+1感谢您对浏览器兼容性表的链接! FindMeByIP特别整洁。另外,除了SproutCore之外,ExtJS刚刚重新推出为Sencha,他们似乎正在大力支持HTML 5。

–夏皮
2010年7月16日,下午3:56

#3 楼

有一些基本的布局内容,例如边框半径,阴影(框/文本),rgba支持等等。这就是CSS3最著名的。更加有趣的是canvas标记,视频标记,本地存储,websocket等,它们将在纯HTML / JS / CSS中创建更丰富的用户体验。这些功能有可能成为Web上Flash的绝佳替代品,而无需其他插件。

#4 楼

我发现新的HTML元素相当有趣...其中一些元素有望替代通用div s。有前景的新元素包括articlesectionasidefigurenavheaderfooter等。我真的很喜欢用语义元素替换无意义的容器的想法。

哦,是的,一个相关的项目:大大简化了的doctype-最后我可以从内存中键入内容!

#5 楼

(这是我对webapps.stackexchange.com上类似问题的回答)。

Canvas和Web Worker线程对我来说是HTML5最令人兴奋的方面。我编写了一些利用这些功能的网络应用程序:

GioAUTHor [sic]广泛使用画布来让您在地图上绘制路径,然后找到从起点到终点的最短路线。完成(通过JavaScript中Dijkstra的算法)。

JavaScript Thread Demo有限地使用了画布,但显示了Worker Threads的用法,并附带了演示代码。它还使用HTML5输入type =“ range”滑块控件。


HTML5浏览器支持与浏览器本身一样多样。有一个不错的网站(在HTML5中,natch)有关HTML5准备情况,该网站显示了谁准备好了。

评论


我之前曾经看过HTML5 Readiness网站,但不记得在哪里-感谢您的链接!确实很整洁,该网站具有双重目的。

–格兰特·佩林
2010年7月9日下午6:38

#6 楼

关于CSS3-请访问http://css3please.com/,看看您可以做什么。

浏览器的版本越晚,您越有可能看到效果。

#7 楼

音频和视频标签无需使用Flash或Silverlight之类的插件即可呈现媒体,最重要的是可在iPhone和iPad浏览器上使用。关于编解码器和数字版权管理,需要解决一些问题。

#8 楼

杰里米·基思(Jeremy Kieth)刚刚发布了一本非常不错的书,主题为“面向Web Designer的HTML5”。您可能需要检查一下。

这是A Book Apart的第一本书。强烈建议中级到高级设计师使用。 A ++

http://books.alistapart.com/

注意:您可能必须等待获得纸质版

#9 楼

这没有提供关于重要性的意见,但它是HTML 4和HTML 5之间的有用变量。


http://www.w3.org/TR/2010/WD-html5 -diff-20100624 /

我的2美分主要改进之处:



<section>和新的标头概述算法(我确实说过只是我的2¢)
新的表单元素,例如<input type=email>


data-*属性
客户端存储
本机<audio><video>



#10 楼

因为还没有人提出这一点:

HTML5非常适合所有人列出的内容,但是它还包括标准地理位置,Web工作者,Web套接字,画布和localStorage。所有这些工具都是HTML5规范的一部分,该规范在幕后使用了大量JavaScript来实现它。