logo标签列表

正确的HTML元素样式设置方法

htmlcss
4

我知道你能做到这个：

<img style="position: absolute;" src="test.png" alt="Test image" width="50" height="50" />

我不使用第一种方法，因为我知道外部样式表的作用是将CSS与HTML代码分离。而且我喜欢保持这种分离。

<img id="foobar" src="test.png" alt="Test image" width="50" height="50" />

有时我会使用这种方法，但是当我查看一些大型网站（如Facebook、Instagram或Twitter）的专业HTML编码时，我发现它们使用了很多容器div，这让我不确定我是否做得正确。
<div id="foobar">
    <img src="test.png" alt="Test image" width="50" height="50" /> //use 'src' in place of 'sc'
</div>

我发现我主要出于某些我实际上并不清楚的原因使用这种方法。但在这种情况下，我只是向div添加样式，而不是直接向img添加样式。或者当我这样做时，我会直接通过使用CSS中的#foobar img{ ... }选择它并向img元素添加样式。

<div id="foo">
    <img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>

如果只需容器来完成任务，通常我会这样做，其中img上会有一些样式，而div#foo元素上会有一些其他的样式。

我知道可能还有其他方式，但主要是这最后两种方法，我不确定何时使用它们。我知道还有其他HTML元素，但我只选了一个div和一个img作为演示。

话虽如此，我想知道每种方法的优缺点，并且哪种方法应该是一个好的实践？

这样的元素最好放在容器中，就像你在示例中引用的那样，因为具有不同容器的图像可能具有不同的样式。 - Drixson Oseña
不同的人和方法论会推广不同的最佳实践，以便您如何为元素设置样式。不幸的是，没有“正确的方式”。通常要考虑一下你想做什么，以及非常重要的是，将来可能需要做什么。例如，“我只需要为这个图像设置样式，它只会存在于这一页上吗？”意味着“我可以使用ID。”但是，“我需要为一系列图像设置样式，这些图像可能在未来的某个地方被替换？”意味着“我可以通过将其包围在div中轻松解决这个问题。”做#foobar img { }很好。 - Ming
注意：您应该从图像中删除高度和宽度声明，并将其放在CSS中 :) - Chris Baker
@Chris 这篇帖子 https://dev59.com/vnE95IYBdhLWcg3wMrAB#2414940 让我在图像标签本身上声明图像的尺寸，而不是从CSS中获取。当图像是设计/布局的一部分时，我只会在CSS中声明尺寸，而在这种情况下它不是。无论我是对还是错，我都不知道。但再说一遍，没有对错之分。所以我想这是主观的，应该按规范做。 - Kid Diamond
@KidDiamond 我看到那里的答案了：我不知道我是否同意他的前提，但是嗯。我很少编写代码，事先知道原始图像文件的实际高度和宽度，所以我想对我来说这不是一个问题，99％的时间。 - Chris Baker
3个回答
4
许多不必要的标签会导致所谓的“标记汤”问题（参见此处）。这是手写HTML时的一个问题；您的目标是最大限度地利用CSS样式，避免使用过多和无意义的标签。
在创建文档时，“正确”的做法是从文档大纲的角度开始。想象页面是一份报告，将从顶部到底部阅读，并且左对齐且简洁。设计这种层次结构时，需要使用最少的标记，并充分利用标题、部分、文章和页脚标记。在“旧日子”里，您会使用div代替。
接下来，应用样式来影响外观，包括相对于文档中其他元素的元素位置。这就是可以添加任何非语义div以促进定位和组织的位置。同样，仍然尽量保持包装或非语义标记最少。
考虑到所有这些因素，通常大型网站不会由干净而严格的语义文档大纲组成。最常见的情况是，这些站点由代码组装而成，将动态内容的各个部分构建成整个页面。在这些情况下，更多的非语义包装标记通常作为动态、自包含代码生成的HTML片段的副产品而涉及到。此外，Web应用程序可能需要包装标记以帮助通过AJAX或其他JavaScript操作重新绘制动态内容。
CSS的作用也是添加非语义包装标签的因素之一。由于CSS特异性（参见这里），有时希望具有某些额外的“钩子”，可以使用它们来获取非常具体的标记组合。
结论是在项目中编写尽可能清洁、最具语义的代码。除了最小和语义化之外，没有“正确的方式”。 进一步阅读
很棒的文章！关于特异性的许多重要信息让我更好地理解了语义化HTML。+1 - Kid Diamond
0

在我看来，没有绝对的答案。这取决于你的设计。

如果你的网站有很多类似的部分需要使用相同的样式，那么你应该使用 div 容器（或其他元素，如 <nav>, <header> 等）。

这种方法的优点是，你可以在部分内部样式化其他元素，而不必给每个元素添加一个 class 属性或 id，从而使你的代码更加清晰易于维护。

如果你想要样式化一个唯一的元素，我认为最好使用 id 属性并将 CSS 添加到此 id 中。

请记住，id 是唯一的，因此，如果你在同一页中有两个具有相同 CSS 的元素，你将不得不复制你的 CSS 代码，这永远不是一个好主意。

0
使用样式表的主要原因是能够在网站中缓存它，从而使加载时间更快，一旦最初加载完成。你看到一些元素在html本身上有样式的原因可能是因为它是通过服务器端代码或客户端脚本注入的。FB开发人员无法看到代码的那部分，他们只会看到几行服务器代码，因此在他们这边，样式是如何实现的并不重要，无论每个元素是在样式表上还是在html本身上进行处理。
另一个原因可能是当有太多的类被嵌套在一起时，最终的选择可能是将其用于html元素本身，因为它具有最高的优先级，并覆盖了由类或任何其他形式设置的任何样式。
有许多使用样式的原因，但通常对于开发人员来说，保持干净的html/css/script并尽可能地分离是更容易的，但当事情变得复杂时，打破正常的做法实际上会使它更容易...
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接