Html 关注样式表和跨浏览器兼容性

让我先解释一下我的网页设计背景。我一直更像是一个后端程序员，使用PHP和SQL等等。不过，我对HTML和CSS的了解还很浅。问题是，我不完全知道。我所知道的是，当涉及到设计（而不是后端脏活）时，我了解基本的CSS属性，我也了解HTML，我通常可以创建一个包含两个和数百万个DIV标记的草率网页

无论如何

我经常遇到的问题是，当我在IE7这样的浏览器中设计一个网站（然后它在IE7上看起来很完美），然后在IE8、IE6或Mozilla（等等）上查看它时，它变得空旷丑陋，看起来与在IE7上应该看到的完全不同

问题一：

基本上，我要问的是，我应该采取什么样的途径来学习如何正确地构建网站？将CSS标准和HTML标准结合在一起，使我的网站在每个浏览器上看起来都一样。（不仅仅是学习标准，我在哪里可以学会正确编写代码？）哪里有强大的免费资源可以用来学习如何编写这些东西

问题二：

我如何正确地编码我的网站？我是使用所有外部样式表来简化动态页面设计，还是将某些内容硬编码到每个页面上的DIV标记中？什么是适当的

哦，如果有人有任何关于如何正确设计一个完整布局的教程，请随意把它放在某个地方作为回应

谢谢你花时间阅读我的问题，希望你能理解我想告诉大家的是什么。我需要在网络编程的设计方面走上正确的道路，这样我才能知道如何在未来创建成功的网站

谢谢,，

---

Sam Pardee

首先，我建议不要将IE作为“开发”浏览器。比如说，从Firefox开始（它让你拥有了和等工具的优势），然后在IE中实现它

第二，明确用户外部样式表；它产生了更干净的代码和更简单的样式更新方法。绝对推荐。此外，浏览器可以缓存外部CSS文件，因此当用户在站点或应用程序中从一页转到另一页时，它们不会增加页面下载大小

最后，从使用简单的HTML定义内容开始，结构基于内容的含义（通常称为“语义”HTML），而不是基于您希望它的外观。例如，即使您不想将其显示为“项目符号列表”（默认样式为

），也可以对项目列表中的内容使用

标记。然后开始添加样式，使其看起来正确。这将导致非常干净的HTML，可以支持多种格式和布局（看看CSS Zen Garden，了解我的意思），也将有助于推动您的布局，反映您的内容结构，这将更容易阅读和理解

---

就书籍而言，你不会错的。当然，HTML很简单，我不建议用HTML做一些花哨的事情，所以把你的学习精力放在CSS上（Eric是CSS大师）。

跨浏览器兼容性始终是个问题。遗憾的是，这是web开发的主要内容，没有什么灵丹妙药。幸运的是，罪魁祸首IE6终于开始消失了

A1

当在一个新网站上开始工作时，首先将需要在页面上的每一部分内容都粘贴到一个文本文件中。然后把它放在一个合理的顺序中（思考“如果我必须使用一个文本浏览器来使用这个页面，我希望它如何安排…”）

然后开始在每一部分内容周围包装HTML标记。对于每一篇文章，想一想“这是什么类型的信息？”一个标题<代码>h1/

h2

/etc标记。一段？引用？一张桌子<代码>p，

引用

，

表格

。本质上，使用HTML标记来描述每一部分内容的信息类型。当我这样做时，我没有注意到此时它在浏览器中的实际外观

一旦内容都标记好了，就开始编写CSS。如果可能，请在此步骤中尽量不要触摸标记。但有时这是不可能的，在某些元素周围抛出

div

或

span

是不可避免的。毫无意义的标记越少越好

根据我的经验，这种方法使事情非常干净整洁，并且使调试布局问题变得更加容易

A2

使用“style”属性将样式构建到标记中对于原型来说是很好的，但是要小心，一旦成功，就将样式留在标记中的诱惑是巨大的。最好的做法是将所有样式都放在外部样式表中。我很想听听其他观点

一些优秀的web标准/CSS资源：

• （有关选择器兼容性的有用参考）
• （css黑客兼容性的良好参考）

---

希望这有帮助

有太多的网站提供了非常棒的HTML和CSS教程。他们会给你所有你想要的信息。我将开始阅读HTML/CSS的伟大大师：

西蒙·科利森
安迪·巴德
莫莉·霍尔施扎格
丹·塞德霍尔姆
杰森·圣玛丽亚
埃里克·迈耶
杰弗里·泽德曼
卡梅隆·莫尔

任何你从这些人那里喜欢的书或文章都会引导你朝着正确的方向前进；你不会错的

对于将为您提供符合web标准的网站的适当方法/概念/培训的网站：

这是迄今为止我为帮助HTML和CSS合作而买的最好的书之一