logo标签列表

学习HTML5和CSS3

htmlcssweb-standards
18

假设有人今天，也就是2011年3月1日，从未编写过网页，想知道如何开始构建网页。他们不关心向后兼容性，但希望使用Web标准进行构建，以便在尽可能多的浏览器间具备可移植性（是的，我不在意我的网页不能与IE 4-8、Opera、Netscape、Mozilla等浏览器一起使用，因为我从未使用过它们，对于那些将使用我正在构建的工具的人来说，情况很可能也是如此）。

这个人没有任何偏见或坏习惯，因为他们以前从未这样做过。他们也非常活跃，所以如果他们必须阅读200页才能“了解为什么要使用Web标准”或“为什么Web标准比‘旧方法’更好”，他们会感到沮丧、分心并放弃阅读，转而去游泳。说到这里，我的头发还湿着呢。

他们正在寻找引人入胜且简洁明了的参考资料。他们并不傻，这个人是一个真正的工程师，曾经进行过少量的开发工作，数十年的系统管理，甚至建立过一两个成功的公司。他们只是没有上过大学，因为他们真的不是书本学习者，而且他们更擅长实践性的动手学习，而不是吸收一堆无用的数据以获取他们真正需要的两三个东西。

考虑到所有这些关于个人的数据，我知道这是很多关于那个人的信息（当然，这个人就是我），你会推荐哪些书籍或资源呢？

（Zeldman的书已经被我扔掉了，今天我去游泳了。）

4
我建议的一件事是确保你熟悉jsfiddle.net。 - Pointy
1
游泳？天啊，外面太冷了！（NLD） - user142019
4个回答
29

一些不错的资源：

  • Mozilla开发者网络: 适用于HTML、CSS、Javascript和DOM。
  • 《深入浅出HTML5》: 学习HTML5的最佳指南。
  • JSfiddle: 可以轻松地进行JavaScript代码测试。
  • HTML验证器: 确保你编写的HTML是有效的。
  • CSS3预览: 深入了解CSS3的新功能。
  • 官方HTML5规范: 当你需要从源头获取所有详细信息时使用。
  • jQuery: 可能是使编写网站Javascript更加容易的最好的框架。
  • A List Apart: “为创造网站的人而生。” 绝对不适合初学者，但定期阅读很有好处。
  • Firebug: 如果你在使用Firefox浏览器，这是必备的工具。
  • 开发者工具: 内置于Chrome和Safari (基本上是WebKit的Firebug)。

另外，请不要使用W3 Schools。请参考W3 Fools列举的大量原因。虽然W3 Schools经常出现在搜索结果的顶部，但请抵制使用它的诱惑。

@Sean Vieira 我对编程非常着迷，以至于我甚至没有注意到你的评论中缺少断词符号。我花了一分钟以上才注意到。 :p - user142019
3

对于从未编写过网页的人，请确保您不要被HTML5和CSS3的炒作所吸引。虽然它们具有很多出色的功能，但它们都假定了对之前版本的相当多知识，并且所有的“预览”都将向您展示与增强交互相关的片段，而不是支持结构元素。

坚持学习CSS2.1和HTML4.01 / XHTML，这将为您提供良好的基础，以便稍后应用新内容。

我相信人们会对这个答案给出一些负面反馈，但如果您需要在代码开头使用JS片段来启用主流浏览器中的新HTML5元素，则目前还不应该用于商业用途。

“主流浏览器”之一，特别是那个不应该被使用的。随着IE9即将准备就绪，更多的理由证明没有人应该使用旧版本的IE。 - generalhenry
1
非常正确，但我已经在这个行业太久了，不抱希望人们会采用最新的浏览器版本。 - sweetroll
1
如果在主流浏览器中不支持HTML5元素，那么目前就不应该将其用于商业用途。 - Galaxy
2
2
我自学了网页设计和开发，并有工程背景。你对电脑很熟悉，所以你很适合这个领域。为了开始学习，我参加了一些在线课程，来自http://www.hwg.org/。这些课程是自定进度的，但是有指导老师，你可以立即获得很多实践经验并与在线社区互动交流想法。
我学过HTML课程，几乎所有的CSS课程和一些JavaScript。一旦你掌握了基本经验和基础知识，你就可以决定需要多少其他内容，例如PHP / MySQL，或者是否需要一些设计课程来美化页面。
我认为，你需要投入大约80小时的练习才能掌握基础知识，所以给自己一个月的时间进行自学。达到这个水平的原因是你将会流利地提出好问题，从而使你达到更高的水平。
关于书籍，去当地图书馆浏览一些书籍，找到你喜欢的一本，购买它，浏览它并跳过不感兴趣的部分。
最后，如果你真的想学习如何构建网页，请获取一个好的文本编辑器，并手动编写HTML和CSS。从长远来看，手动编码更有效率，而且不用购买像Dreamweaver这样昂贵的工具可以节省很多钱。然而，请记住，像Dreamweaver这样的工具通常被专业人士使用，并在商业网页设计公司中发挥着重要作用。我实际上在代码视图中使用Dreamweaver手动编写我的页面，但是根据项目的不同，我还使用其他几个编辑器。
祝你在一个新的、令人兴奋的领域中前进，并记得享受其中的乐趣！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接