分离内容和演示文稿的实际含义是什么？
避免内联css是否意味着什么？
这是否意味着设计应该能够在不改变HTML的情况下进行操作？
我们真的可以从CSS中进行任何设计更改吗？
我们应该避免使用哪个X / HTML标记来保持内容和演示文稿的分离？
内容和演示文稿的分离是否也对辅助功能/屏幕阅读器用户有帮助？ ......还是程序员/开发人员/设计师？
答案 0 :(得分：12)
在定义内容和演示文稿时，请将HTML文档视为数据容器。然后在每个元素和属性上问自己以下内容：
属性/元素是否代表我的数据中有意义的实体？
例如，<b>标记之间的单词是否以粗体显示仅用于显示目的，还是我想强调该数据？
我是否使用适当的属性/元素属性来表示我想要表示的数据类型？
由于我想强调特定部分，我应该使用<em>（它不是指斜体，它意味着强调并且可以变得粗体）或<strong>取决于所需的强调程度。
我是否仅将属性/元素用于显示目的？如果是，可以删除元素并使用CSS设置父元素的样式吗？
有时，表示标记可以简单地替换为父元素上的CSS规则。在这种情况下，需要删除表示标签。
在问自己这三个简单问题后，您通常可以做出明智的决定。一个例子：
原始代码：
<label for="name"><b>Name:</b></label>检查
<b>代码...属性/元素是否代表我的数据中有意义的实体？
不，标签不代表数据节点。它纯粹是为了展示。我使用属性的正确属性/元素表示我想要表示的数据类型吗？
<b>用于表示粗体元素。我是否仅将属性/元素用于显示目的？如果是，可以删除元素并使用CSS设置父元素的样式吗？
由于<b>是表现性的，我正在使用它进行演示，是的。由于<b>元素影响整个<label>，因此可以删除它并将样式应用于<label>。
语义HTML的目标不是简化设计和重新设计或避免内联样式，而是帮助解析器了解文档中特定标记的含义。这样，可以创建应用程序（即。：搜索引擎）智能地决定你的内容表示什么，并相应地对其进行分类。
因此，使用CSS属性content:在<q>标记中的文本周围添加引号是有意义的（它对文档中包含的其他演示文稿中包含的数据没有任何价值），但是没有意义使用相同的CSS属性在页脚中添加©符号，因为它在数据中有值。
同样适用于属性。使用代表16x16大小的图标的width标记上的height和<img>属性具有语义意义，因为了解<img>标记的含义非常重要（图标可以有不同的表示形式，具体取决于它显示的大小）。在表示较大图像缩略图的<img>标记上使用相同的属性不会。
有时您需要添加非语义元素才能实现您想要的演示文稿，但通常这些元素是可以避免的。
没有错误的元素。特定元素的使用有误。添加重点时不应使用<b>。 <small>应该用于合法的子文本，而不是用于缩小文本（请参阅HTML5 - Section 4.6.4了解原因）等等...所有元素都有特定的使用场景，它们都代表数据（减去表示元素） ，但在某些情况下它们确实有用）。不应该留下任何元素。
属性是另一回事。大多数属性都是表现性的。 <img border>和<body fgcolor>等属性很少在您所代表的数据中具有意义，因此您不应使用它们（除非在极少数情况下）。
搜索引擎是一个很好的例子，说明为什么语义文档如此重要。 Microformats是一组预定义的元素和类，您可以使用它们来表示搜索引擎将以某种方式理解的数据。 The product price information in Google Searches是工作中语义的一个例子。
通过使用设定标准中的预定义规则将信息存储在文档中，第三方程序可以在不使用可能容易出现故障的启发式算法的情况下理解文本墙。它还有助于屏幕阅读器和其他辅助功能应用程序更容易理解信息的呈现环境。它还极大地帮助了标记的可维护性，因为所有内容都与设定定义相关联。
答案 1 :(得分：5)
最好的例子可能是CSS Zen Garden。
本网站的目标是展示基于CSS的设计可能实现的目标，并严格将内容与设计分离。由各种图形设计师提供的样式表用于改变视觉呈现of a single HTML file，产生数百种不同的设计。 HTML标记本身永远不会在不同的设计之间发生变化。
在每个设计页面上，您都有一个链接来查看该设计的CSS文件。
答案 2 :(得分：2)
分离内容和演示文稿的实际含义是什么？
这是一种设计哲学，而不是具体的。一般来说，这意味着您应该保留内容的语义，将您的内容视为一段结构化信息。这也意味着你应该保留所有美学细节远离这种结构化信息。
是否只是为了避免内联css？
如上所述，内联样式与内容的语义无关，应不惜一切代价避免使用。但它不是只是。
是否只是意味着如果根据设计编写html然后如果我们想要做任何设计更改那么它应该只用css，不需要html
不幸的是，在不修改基础标记的情况下，并不总是能够实现一些具体的美学目标; CSS3试图解决这些问题。
我们应该避免使用哪个X / HTML标记来保持内容和演示文稿的分离？
在W3C HTML 4.01 / XHTML 1.0 Reference
中查找已弃用的代码内容和演示文稿的分离是否也对辅助功能/屏幕阅读器用户有帮助？
当然。即使某些浏览器错误地呈现样式（或根本不呈现它们），更好的结构化信息通常仍然可读。这样的内容在印刷媒体上也可能看起来更合适（虽然可以应用印刷样式来实现更好的美学 - 它们再次与内容语义无关）。
内容和表示的分离对程序员/开发人员/设计师有帮助吗？
当然。内容和表达的分离源于更普遍的哲学，即关注点的分离。每个人都从分离中受益：内容供应商不必是一个好的设计师，反之亦然。
答案 3 :(得分：1)
在某些点放置换行符是不可避免的，演示文稿和内容通常会有一些重叠。你应该始终瞄准完美的分离。
采取另一种极端：包含仅用于布局目的的表的加载和加载的页面。这是应该不惜一切代价避免的明确的反模式。在布局后，内容播放第二小提琴;它通常不是正确的顺序，因此几乎没有机器可读性。不是机器可读的内容不利于可访问性，也不利于页面的搜索引擎排名。
通过标记内容而不关心演示，您首先要使其具有机器可读性。您也可以以不同的格式向不同的客户提供相同的内容，例如在移动优化版本中。您还可以轻松更改演示文稿，而无需弄乱HTML文件，比如重新设计。
通过分离内容和演示文稿（HTML-CSS文件）自然而然地带来的另一个好处是，您可以减少打字和维护，而且您的页面可以非常轻松地应用一致的样式。在一个CSS文件中对比成千上万的内联样式与一个样式定义，这“自然地”应用于具有相同“含义”（标记）的所有元素。
理想情况下，您的（X）HTML仅包含有意义的语义标记以及使用此标记为其选择器设置的样式CSS。在现实世界中，您经常将类和ID混合到您的标记中，这不会增加额外的意义，因为您需要这些额外的“钩子”来按照您想要的方式设置所有内容。但即使在这里，class="blue right-aligned"和class="contact-info secondary"之间也存在差异。始终尝试将含义添加到内容中，而不是样式。平衡这本身就是一门艺术。 ：）