我知道你可以这样做：
<img style="position: absolute;" src="test.png" alt="Test image" width="50" height="50" />
我不使用第一种方法，因为我知道外部样式表是为了从HTML代码中分离CSS。我喜欢这样做。
<img id="foobar" src="test.png" alt="Test image" width="50" height="50" />
有时我会使用这种方法，但是当我查看Facebook，Instagram或Twitter等大型网站的一些专业HTML编码时，我发现他们使用很多的容器div s，这让我不确定我是否做得对。
<div id="foobar">
<img src="test.png" alt="Test image" width="50" height="50" /> //use 'src' in place of 'sc'
</div>
我发现我大部分时间都使用这种方法，因为我实际上并不知道。但在这种情况下，我只是将样式添加到div而不是直接添加到img。或者当我这样做时，我直接在img元素中添加样式，方法是在CSS中使用#foobar img{ ... }选择它。
<div id="foo">
<img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>
通常我会这样做，如果只需要一个容器来完成工作，我会在img和div#foo元素上有一些样式。
我知道可能有更多的方法，但主要是后两种方法，我不太确定何时使用它们。我知道还有其他HTML元素，但我只是用div和img进行演示。
话虽如此，我想知道每种方法的优点和缺点是什么，哪种方法应该是一种好的做法？
答案 0 :(得分：4)
许多不必要的标签会产生一个称为“标签汤”（ref）的问题。这是手写HTML中的一个问题;你的目标是使用CSS样式发挥最大潜力，并避免使用多余和无意义的标签。
在“正确”创建文档时，您应该从文档大纲的角度出发。想象一下，该页面是一个报告，它将从上到下阅读，并且左对齐且风格简单。您使用最少的标记设计此层次结构，充分利用标题，部分，文章和页脚标记。在“过去的日子”中，你会使用div代替。
接下来，应用样式来影响外观，包括文档中元素相对于彼此的定位。这是可以添加任何非语义div的地方，以便于在盒子模型中进行定位和组织。同样，您仍尝试将包装或非语义标签保持在最低限度。
考虑到所有这些因素，通常，大型网站不会由干净且严格的语义文档大纲组成。通常，这些站点由代码组装，在整个页面中构建动态内容。在这些场景中，更多的非语义包装标签通常作为生成HTML片段的模块化，自包含代码的副产品。此外，Web应用程序可能需要包装标签以帮助通过AJAX或其他JavaScript操作重新绘制动态内容。
CSS进入游戏的地方也是添加非语义包装标签的一个因素。由于CSS特异性（magic!），有时需要一些额外的“句柄”，您可以使用这些句柄来真正地，特定地识别特定标记组合。
外卖是编写您可以在项目中管理的最干净，最语义的代码。除了最小化和语义之外，本身并没有“正确的方法”。
进一步阅读
答案 1 :(得分：0)
在我看来，没有绝对的答案。这取决于你的设计。
如果您的网站中有很多类似的部分要设置相同的样式，则应使用div容器（或其他元素，如<nav>, <header>等...）。
此方法的优点是您可以设置部分内的其他元素，而不会为每个元素设置class属性或id，从而使代码更清晰，更易于维护。
如果你想设计一个独特的元素，我最好使用id属性并将CSS添加到这个id。
请记住，id是唯一的，因此，如果您在同一页面中有两个具有相同CSS的元素，则必须复制CSS代码，这绝不是一个好主意。
答案 2 :(得分：0)
使用样式表的主要原因是能够将其缓存在网站中，从而使初始加载后的加载时间更快。你在html上看到一些带有样式的元素的原因可能是因为它是通过服务器端代码或客户端脚本注入的。那些代码部分对于FB开发人员来说实际上是不可见的，而他们只会看到几行服务器代码，所以在他们这一方面，无论是否在样式表上或在HTML本身。
另一个原因可能是当许多类在彼此之上（嵌套类）完成太多样式时，最终选项可能是在html元素本身上使用它，因为它具有最高优先级并覆盖由任何样式完成的任何样式。课程或任何其他形式。
使用样式的许多原因，但通常它更容易让开发人员保持干净的html / css /脚本，如果可能的话分离，但是当事情变得复杂时，有一段时间打破常规练习实际上会让它更容易...... < / p>