如何开始使用HTML5？[关闭]

42

建议学习HTML5的工作流程是什么？我应该安装什么工具？什么SDK？从哪儿开始？怎么测试？如何调试？我读什么？

我知道通常被标记为“ HTML5开发”的实际上是HTML，CSS，JS和更多内容的混合体，但是我不认为在记事本中开发更大的项目。这就是为什么我要您透露有关工作流程的提示和技巧。

— 丹尼尔·塞德莱切克
source

我肯定会建议研究divinetohtml5，但同时也请查看html5rocks htm5rocks，这可能是很多人不知道的，但Facebook正在推动大量HTML5：在此处查看其html5页面facebook.com/html5

— VJth 2012年

做敏捷的事情。<html>Hi</html>让您开始工作，因为您不需要DOCTYPE。重复。

— Michael Durrant 2014年

42

如果我现在要从头开始一个新的HTML5项目，则可能会执行以下操作：

下载并使用HTML5 Boilerplate。这将为您提供一个全新的页面，其中包含已初始化并可以进行测试的大多数重要内容。还包括一些您应该与Firebug一起使用的不错的调试功能

查看Dive in HTML5以查看代码的历史记录和用法。

在Mac上，我使用Coda，在工作中，我在代码视图中使用Dreamweaver。他们不会为您构建页面，但是代码完成，提示和颜色编码效果很好。我敢肯定Aptana之类的工具提供了很棒的功能，但是我总是发现在使用html时，越简单越好。

一定要从“ A Book Apart”（HTML3 和CSS3）中挑选HTML5和CSS3（CSS3本月晚些时候发布）

最后-尝试找出整个问题，然后检查：

Opera开发人员网络-http://dev.opera.com/articles/view/html-5-canvas-the-basics/

画布速查表-http: //blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

如何使用HTML5画布进行绘制http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

— 格雷格B
source

我还建议您学习JavaScript，我为此推荐的书是JavaScript：David Flanagan的权威指南，之后jQuery很棒。至于编辑，我认为Aptana和DreamWeaver太恐怖了。我建议使用Emacs。

在确定性指南之后，您应该阅读Crockford撰写的JavaScript：The Good Parts。

— 2011年

所提到的HTML5书可以在其主页上免费阅读：html5forwebdesigners.com

— user16764 2012年

52

HTML5不是一件集成的事情。它是HTML扩展的集合，其中一些扩展已被广泛实现并且可以安全地使用，其中一些还没有实现，其间还有很多。如果您尝试将HTML5视为一个统一的单一开发平台并“全面学习”，那么您将度过非常艰难的时期。

相反，您需要学习的是整个Web：基本的HTML，CSS，JavaScript，Core DOM，HTML DOM，基本的Browser Object Model。然后可以在需要的地方添加新Web的功能，并且浏览器支持允许：HTML5扩展，CSS3属性，画布绘图，websocket，从HTML5工作中衍生出来的其他DOM和BOM扩展...

网络功能集在不断发展，没有一个参考点。W3Schools（与W3C 无关）尝试，但是充满了很多错误。不要相信它所说的福音。

您可能需要参考的权威HTML4，CSS2。确保DOM Core和DOM HTML规范。您可能还需要查看MDC的DOM参考和MSDN的DOM参考，以了解Firefox和IE支持的内容。在HTML5规范中含有大量的多了最新DOM东西太多，以及新的HTML扩展，但它是一个漫长而笨重的文件，挺难的标准文档的标准，甚至使用。尽管还不及难以理解的ECMAScript规范那么糟糕。（非常感谢，如果您习惯使用ActionScript，那么您可能已经很熟悉了。）

您不需要SDK或IDE即可开发HTML / CSS / JS。如果愿意，可以使用IDE，但我很高兴在自己喜欢的文本编辑器中进行所有操作。无需担心构建/编译步骤，只需保存文件并单击重新加载即可完成工作。大多数现代的Web浏览器都有内置的调试器和其他开发工具（例如IE8）或易于使用的扩展程序（例如Firebug）。

— 博宾斯
source

1

我了解通常被称为“ HTML5开发”的内容实际上是HTML，CSS，JS和更多内容的混合……但是，我不认为可以在记事本中开发更大的项目。这就是为什么我要您透露有关工作流程的提示和技巧。

2

+1 “众所周知，HTML5将在Blade Runner中描述的事件发生三年后，于2022年完成。” - tiny.cc/standards-bloat-and-html5

8

不，更大的项目不会在记事本中开发。那太疯狂了。记事本是一个可怕的文本编辑器。它们将在Notepad ++中开发。:-)

— bobince

11

@daniel：至少我认为这是一个有用的答案，无论它对您是否有用。他建议使用（好的）文本编辑器。我也喜欢Notepad ++，尽管我通常使用Emacs（无意使用编辑器）。他说，只要坚持使用普遍支持的功能，然后在您的网页（当时已经正常工作）的顶部构建HTML 5 / CSS 3（及Co.）特定的新词即可。HTML 5并不是一个崭新的事物。如果您可以驾驶汽车，则可以驾驶一辆具有混合动力发动机，空调和所有新功能的闪亮新车；但是，它仍然是汽车，您可以使用它来开车。

5

@daniel：这个答案在这里很容易用到，对您来说是最有用的，因为它包含了您需要的建议，而没有告诉我这不会阻止我投票。

9

我强烈建议您使用JetBrains的WebStorm（或它们的任何基于IntelliJ的产品，如PHPStorm，RubyMine，PyCharm，因为它们都支持HTML）。您将获得CSS，HTML自动完成功能并实时（在键入时）检查正确性。重构对Javascript的支持（我没有在其他地方看到过），甚至还具有在IDE中调试Javascript的能力（如果您缺少Firebug或Chrome开发者工具）。它具有项目支持以及SVN，Git，Perforce和CVS支持。以及大量其他功能，强烈建议...

— 克里斯·埃里克森
source

+1，听起来令人兴奋。我想我会尝试45天的免费试用。

我已经使用IntelliJ IDEA进行Java开发，就其提供的功能而言，丝毫没有改变。Jetbrains还为Visual Studio创建ReSharper插件。如果我正在寻找纯粹的基于Web的IDE，请确定尝试WebStorm。单靠重构是值得的。

8

几种宝贵的工具

FireBug-Firefox开发人员插件。允许调试JS，HTML，样式。
IE开发人员工具栏，用于旧版本的IE（6,7）。虽然那里没有太多的HTML5。新的IE具有F12工具。
Chrome拥有开发人员工具

这些工具主要用于Javascript调试以及弄清楚有关元素定位和所应用CSS样式的事情。

谢谢，如果我理解正确，浏览器兼容性始终是一个问题。

是的，但现代浏览器会变得更好。在这方面，IE 6-7和8相当糟糕。

为了测试的Internet Explorer的各种版本，无论是使用IETester（my-debugbar.com/wiki/IETester）或微软（提供虚拟机go.microsoft.com/fwlink/?LinkId=70868）

6

如果您正在寻找IDE的推荐，Eclipse是相当不错的。如果您正在寻找Javascript工具，Firebug非常适合调试。

但是，您实际上不需要任何“工具”。我认为“在记事本中不能/不能开发更大的项目”这一概念很简单，是错误的。我使用Notepad ++编写了所有HTML / CSS / Javascript，我认为这是一种非常常见的方法，即使对于专业的Web设计人员也是如此。Notepad ++具有针对HTML，CSS和Javascript的语法高亮显示以及自动完成功能。如果您想要功能更多的软件，请具体说明哪些功能对您很重要。（顺便说一句，如果您是Mac用户，请尝试BBEdit）。

较大的站点通常使用Django或Ruby on Rails之类的框架编写，但实际上与使用或学习HTML5无关。

— 杰夫
source

有趣的...您会推荐哪种Eclipse JS开发插件？

从未使用过，但是此链接可能有用。我相信Aptana也可以作为独立程序使用（Eclipse的替代品）。很多人推荐了它，但我从未真正尝试过。可能是值得研究的东西。 stackoverflow.com/questions/613988/…–

— Jeff

只需记住Notepad 与Notepad ++ 完全不同，我也不会在Notepad中开发网站（任何网站）。

同意，我的评论不是严格意义上的“ MS Notepad”，而是“文本编辑器”，但如果是这样，那么您是完全正确的

— Jeff

5

我相信Adobe（Flash的创建者）实际上正在发布Flash到HTML5转换工具的过程中，值得一看。

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

从那时起有效地，Flash成为开发HTML5的工具。

截止到本周，微软已经宣布他们与Silverlight的发展方向相似，因此看起来现在一切都在使用HTML5。

我有一个问题是，这两个工具生成的HTML5代码有多好？在它们真正发布之前，我们不会知道答案，但是我从未发现生成的代码质量特别好。希望我们不会以现代的MS Front Page结尾。

— 斯普德利
source

7

坦率地说，我不相信转换工具，代码会是次优的。我知道Flash是一个不错的工具，即使不被滥用，它将在我们身边长期存在。但是我宁愿使用适当的工具来编写JS和CSS :)

1

@daniel-同意转换工具通常不是那么好，我也这么说。但是，如果您要转换现有的闪存，这可能是一个不错的起点。即使您随后去手动重新处理生成的HTML代码，至少也可以使用一些东西。

— Spudley

4

nitpick：Adobe已购买Flash（由Macromedia收购），但尚未创建。

— Kornel

4

我强烈建议为您的Javascript代码建立一个构建系统，并在每次构建时都对照JSLint进行检查。我发现这在早期就拾取了很多错误并促进了良好的编码（如果过于严格，则可以使用选项）。看看GitHub上 jQuery的构建系统，这是一个很好的例子。

除了用于编辑之外，我还是Notepad ++的忠实拥护者，因为我还没有找到一种可提供有用功能而又不会产生大量膨胀和GUI欺骗的IDE。

不过，您可以看一下最新的Dreamweaver，它的代码编辑器还不错，并且它们的小部件库包含许多HTML5 小部件，您可以直接插入。

— 亚当·希思
source

2

我不认为可以在记事本中开发更大的项目

你在那里错了。我是记事本的长期用户，我认为这是最好的方法。对于调试，我使用IE的开发人员工具，Firefox的FireBug和Chrome的Inspector。

就HTML5而言，它基本上只是带有一些其他玩具的常规HTML。此外，没有什么可以阻止您声明HTML5文档，而是仅使用旧版HTML中的内容。

我建议不惜一切代价避免的一件事就是Dreamweaver之类的程序。使用图形设计工具，它们使事情看起来很容易，但是当您想做自己的工作时，会变得非常困难。（我说这话时正在看我正在做的课程中的其他学生）

— Santosh Kumar
source

定义大。记事本甚至没有语法高亮显示，并且维护可能是记事本的一个问题...我至少会选择Notepad ++ ...甚至是VIM！:)

我现在使用Notepad ++ ，但是很长一段时间以来，我只是使用普通的Notepad。“大”的意思是“足够大，可以赚到足够的钱来支付我的生活费用并有一些余地”。