HTML5 / CSS3的新功能是什么?


Answers:


33

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的一部分。

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


1
出色的磨损。
乔治·爱迪生

在达到所有主要方面都做得很好。
格兰特·佩林

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

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

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

18

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

具体的语法变化和简化发生在:

  • 简化的文档类型字符串: <!DOCTYPE html>
  • 标签的简化language属性<html>:(<html lang="en">
    仍可以包括xmlnsxml: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包含在定义中,inputselect由于需要vertical-align: middle;
  • 样式ins:focusEric 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.comhtml5gallery.com


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

+1感谢您对浏览器兼容性表的链接!FindMeByIP特别整洁。此外,除了SproutCore的,ExtJS的只是重新启动为煎茶,他们似乎是投掷重量背后的HTML 5
记号笔

4

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


4

我发现新的HTML元素相当有趣...其中一些是有前途的语义替换通用divs。有前途的新元素包括articlesectionasidefigurenavheader,和footer,等等。我真的很喜欢语义元素代替无意义的容器的想法。

哦,是的,还有一个相关的项目:简化了doctype-终于可以从内存中键入内容了!


4

这是对webapps.stackexchange.com上类似问题的回答

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

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

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


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


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


1

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


1

杰里米·基思(Jeremy Kieth)刚刚发布了一本非常不错的书,主题为“ Web设计人员的HTML5”。您可能想检查一下。

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

http://books.alistapart.com/

注意:您可能需要等待获得纸质副本


1

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

我对主要改进的2美分:

  • <section>和新的标头概述算法(我确实说过,这只是我的 2美分)
  • 新的表单元素,例如 <input type=email>
  • data-* 属性
  • 客户端存储
  • 本机<audio><video>

0

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.