个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
内容和表现分离的实际意义是什么？
这只是意味着避免内联 css 吗？
这是否意味着设计应该能够在不更改 HTML 的情况下进行操作？
我们真的可以只从 CSS 改变设计吗？
我们应该避免使用哪个 X/HTML 标记来保持内容和表示的分离？
内容和呈现的分离是否也对辅助功能/屏幕阅读器用户有帮助？ ...对于程序员/开发人员/设计师？
最佳答案
定义什么是内容和表示时，将 HTML 文档视为数据容器。然后针对每个元素和属性问自己以下问题:
属性/元素是否表示我的数据中有意义的实体？
例如，<b> 之间的词是标记以粗体显示只是为了显示目的，还是我想强调该数据？
我是否使用了正确的属性/元素来表示我想要表示的数据类型？
因为我想强调那个特定的部分，所以我应该使用 <em> (不是斜体，是强调，可以加粗)或者<strong>取决于所需的强调程度。
我是否仅将属性/元素用于显示目的？如果是，是否可以删除该元素并使用 CSS 设置父元素的样式？
有时，展示标签可以简单地用父元素上的 CSS 规则替换。在这种情况下，需要删除展示标签。
问自己这三个简单的问题后，您通常能够做出非常明智的决定。一个例子:
Original Code:
<label for="name"><b>Name:</b></label>Checking the
<b>tag...Does the attribute/element represent a meaningful entity in my data?
No, the tag doesn't represent a data node. It is there purely for presentation.Am I using the proper attribute/element to property represent the type of data I want to represent?
<b>is used for presentation of bold elements.Am I using the attribute/element only for display purposes? If yes, can the element be removed and the parent element styled using CSS?
Since<b>is presentational and I am using it for presentation, yes. And since the<b>element affects the whole of<label>, it can be removed and style be applied to the<label>.
语义 HTML 的目标不是简化设计和重新设计或避免内联样式，而是帮助解析器理解特定标记在您的文档中代表什么。这样，可以创建应用程序(即.: 搜索引擎)智能地决定你的内容意味着什么，并相应地对其进行分类。
因此，使用 CSS 属性 content: 是有意义的在位于 <q> 中的文本周围添加引号标记(除了演示文稿之外，它对文档中包含的数据没有任何值(value))，但是使用相同的 CSS 属性在页脚中添加 © 符号是没有意义的，因为它在您的数据中确实具有值(value)。
同样适用于属性。使用 width和 height <img> 上的属性表示大小为 16x16 的图标的标签具有语义意义，因为理解 <img> 的含义很重要标记(一个图标可以有不同的表示，具体取决于它显示的大小)。在 <img> 上使用相同的属性表示较大图像缩略图的标签则不然。
有时您需要添加非语义元素才能实现您想要的呈现，但通常这些是可以避免的。
没有错误的元素。特定元素的使用有误。 <b>添加重点时不应使用。 <small>应该用于合法的子文本，而不是使文本变小(参见 HTML5 - Section 4.6.4 为什么)等...所有元素都有特定的使用场景，它们都代表数据(减去表示元素，但它们确实有用途在某些情况下)。不应保留任何元素。
属性是另一回事。大多数属性本质上都是表象性的。 <img border> 等属性和 <body fgcolor>您所代表的数据很少有意义，因此您不应使用它们(除非在极少数情况下)。
搜索引擎是语义文档为何如此重要的一个很好的例子。 Microformats是一组预定义的元素和类，您可以使用它们来表示搜索引擎将以某种方式理解的数据。 The product price information in Google Searches是工作中语义的一个例子。
通过使用设定标准中的预定义规则在您的文档中存储信息，第三方程序可以理解看似文本墙的内容，而无需使用可能容易出错的启发式算法。它还有助于屏幕阅读器和其他辅助功能应用程序更轻松地理解呈现信息的上下文。它还极大地有助于标记的可维护性，因为一切都与一组定义相关联。
关于html - 内容和表现分离的实际意义是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2260391/
24
4
0
我有一张 table People (First_Name, Last_Name)。此表包含与示例中一样重复的记录(并非所有行都重复): First_Name Last_Name John
我用 Java 编写过很多程序，之前也涉足过 C++。我在各种 C++ 书籍中阅读了有关指针的内容，并完成了书籍中的各种示例。 我了解指针的基础知识，但有一件事我一直不清楚。指针在现实世界中的应用是什
线 .Mappings(m => m.FluentMappings.AddFromAssemblyOf() 它有什么作用？它会在派生自 ClassMap 的 Product 类的程序集中查找任
我有用于打印数字的自定义打印功能。我制作了一个 ASCII 版本和一个 UTF-16LE 版本。 UTF-16LE 版本对 0-9 使用全角代码/字符，对十六进制使用 A-F。在调试我的函数时，我注意
这是我的代码片段: float ab(float); 以后 if(ab(temp)
我在一个项目文件中包含以下代码: //begin of the file ((window) => { 'use strict'; class View extends GSM.Event
我一直在到处寻找关于 ? 用法的正确解释。和 *。我注意到我可以使用以下方法拒绝所有用户的访问: 如果我想允许某个组，我应该在其上方添加下一行: 但是当我看到人们使用 ? 时，我开始忘记什么意思，
我正在关注 melon js tutorial .这是在我的 HUD.js 文件的顶部。 game.HUD = game.HUD || {} 我以前在其他例子中见过这个。 namespace.some
我正在处理一个包含数千行代码的文件。我正在第 700 行实现一个算法。我经常不得不离开这些行来检查文件中的其他方法。 导航回到我实际编码的地方通常很痛苦。如果我可以在第 700 行设置一个航路点并为其
我遇到了这段代码 do { if (higherQuality && w > targetWidth) { w /= 2; if (w &
uint8_t * const LCDMem = (uint8_t *) &LCDM3; 此代码在 msp430fg4618 培训套件中用于 lcd 配置。谁能解释一下上述代码的含义？ 它允许使用 a
上下文 阅读一些内核代码。 问题 我不明白这行是什么意思 *(void **) &(int[2]){0,PAGE_SIZE}; 还有更多，这是什么意思 {0,PAGE_SIZE} 对我来说，它看起来不
我正在查看 Underscore.js 的源代码库，专门用于 map方法(该页面第 85 行左右，并复制到此处): _.map = function(obj, iterator, context)
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 9
我是一名优秀的程序员,十分优秀！