it-swarm.cn

HTML5 / CSS3有哪些新功能?

我见过 这个网站这个网站 ,但这要消化很多。 HTML5的主要内容是什么使它与普通的旧(X)HTML/CSS不同/更好?

23
Jason

HTML5是巨大,但也很棒

在我看来,它主要是关于互操作性。规范和指定甚至边缘情况尝试并确保所有浏览器以相同的方式读取标记

第二,HTML5具有视频和音频,它完全按照名称所做的那样做。如果您想要包含视频或音频,HTML5应该会降低您的插件需求。

第三,HTML5包含许多可访问性和语义帮助。例如,<section><article>等元素帮助机器确定应该是什么内容。像<input type=email>这样的新输入类型也可能因为相同的原因而有用,尽管新的输入类型包括自定义UI,这使得它们甚至对于“常见的”人类读者也很有用。

请注意,新的Forms功能不仅仅是新的输入类型。它还包括对占位符文本和其他几个属性的支持。

HTML5包括<canvas>,它允许绘制2D(和WebGL,3D)形状,如图表甚至渲染游戏。

旧行为现在已标准化,例如Internet Explorer的古老contentEditable

DOCTYPE终于体面了!你现在可以记住它了! <!DOCTYPE html>

使用<meta charset=utf-8>指定编码也更容易。

如果要将数据发送到客户端并将其与元素关联,现在可以使用自定义属性执行此操作。例如,现在终于允许<div data-status=open>Open</div>。请注意,自定义属性名称必须以data-为前缀。

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

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

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

至于CSS3,它包括对动画过渡圆角的支持和 灵活的盒子模型

CSS3中还有新的选择器,它可以更简单地匹配页面上的特定元素(例如,只有表格中的奇数或偶数行)。

不透明度,新单位,Marquee和Ruby也是CSS3的一部分。

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

33
luiscubal

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

语法的一些重新调整和简化发生在以下几个方面:

  • 简化的doctype字符串:<!DOCTYPE html>
  • <html>标签的简化language属性:<html lang="en">
    (如果你想要XML兼容,仍然可以包含xmlnsxml:lang
  • charset的专用<meta>标签:<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 Resets的粉丝,可以从HTML5 Doctor获得 HTML5 CSS Reset 。我为我的个人页面重置了三次:

  • text-rendering: optimizeLegibility;添加到<body>定义中的样式
  • label包含在inputselect的定义中,因为它需要vertical-align: middle;
  • ins:focus的样式来自 Eric Meyer的CSS重置 添加回来

可以使用名为 reset5 的竞争重置,但我尚未对其进行个人评估。它基于两个Eric Meyer和HTML5 Doctor重置。

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

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

在HTML 5中,存在用于构造文档的轮廓视图的算法。这可以例如由AT用于帮助用户浏览文档。 <section>和朋友是这个算法的重要组成部分。每次嵌套<section>时,都会将轮廓深度增加1(如果您想知道此模型与传统<h1> - <h6>模型相比的优势,请考虑基于Web的Feedreader将联合内容的文档结构与周围站点的文档结构集成在一起。在HTML 4中,这意味着解析所有内容并重新编号所有标题。在HTML5中,标题最终在正确的深度免费)。

...

如果您只是盲目地将页面上的所有<div>转换为<sections>,那么您的页面就不太可能具有您期望的大纲。而且,除了作为一种语义错误之外,这将使那些依赖标题导航的人感到困惑。

就像这个世界上的其他一切一样,HTML5网络应用程序的框架名为 SproutCore ,由 前Apple工程师 命名为Charles Jolley。

除了 html5rocks.com 你可以跟上 html5doctor.comhtml5gallery.com

18
Bryson

有一些基本的布局,比如border-radius,shadow(box/text),rgba支持等等;这就是CSS3最为人所知的。更有趣的是canvas标签,视频标签,本地存储,websockets等,这将在纯HTML/JS/CSS中创建更丰富的用户体验。这些功能有可能成为Web上Flash的绝佳替代品,而无需额外的插件。

4
D4V360

我发现新的HTML元素相当有趣......其中一些是通用divs的有前途的语义替换。有希望的新元素包括articlesectionasidefigurenavheaderfooter等等。我非常喜欢用语义元素代替无意义的容器的想法。

哦,是的,一个相关的项目:大大简化的doctype - 最后我可以从记忆中输入的东西!

4
Grant Palin

这是 我的回答 关于webapps.stackexchange.com的类似问题

CanvasWeb Worker Threads是HTML5最激动人心的方面我。我编写了一些使用这些功能的网络应用程序:

GioAUTHor [sic]广泛使用画布让你在地图上绘制路径,然后找到从开始到结束的最短路径(通过JavaScript中的Dijkstra算法)。

JavaScript Thread Demo 限制使用画布但显示使用工作线程,并附带演示代码。它还使用HTML5input type =“range”滑块控件。


HTML5浏览器支持与浏览器本身一样多种多样。有一个 不错的网站 (在HTML5,natch中)关于 HTML5准备就绪 这表明谁准备好了。

4
Alan

关于CSS3 - 已经考虑 http://css3please.com/ 看看你能做些什么。

浏览器越晚,您就越有可能看到效果。

2
Sniffer

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

我对主要改进的2¢:

  • <section>和新的标题大纲算法(我确实说它只是我的2¢)
  • 新的表单元素,例如<input type=email>
  • data-*属性
  • 客户端存储
  • native <audio><video>
1
Paul D. Waite

音频和视频标签允许在不需要Flash或Silverlight等插件的情况下呈现媒体,最重要的是可以在iPhone和iPad浏览器上使用。关于编解码器和数字版权管理,有一些问题需要解决。

1
Steve Tranby

Jeremy Kieth刚刚发表了一本关于这个主题的非常好的书,“HTML5 for Web Designers”。你可能想检查出来。

这是A Book Apart的第一本书。强烈推荐给中级到高级设计师。 A ++

http://books.alistapart.com/

NOTE:您可能需要等待获得硬拷贝

1
Kevin

因为还没有人提出这个问题:

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

0
Ilan Biala