Question

我想编写语义优美的废话HTML。什么时候是上课的正确时间，什么时候不是？我应该在HTML的每个元素上添加类吗？

要编写语义标记，我们必须正确使用HTML标记，这样我们的标记既可以被人类读取，也可以被机器读取。当我们编写语义标记时，我们不能再基于视觉表示来选择HTML元素。相反，我们根据语义含义选择HTML元素，然后使用CSS定义内容的视觉表示。在编写语义标记时，网页元素的表示与内容本身的标记完全分开且完全不同。

<body> 

<ul class="post">
<li class="title"> <h3>Title of Post</h3> </li>
<li class="content"><p> Lorem Ipsum bla bla..</p></li>
<li class="hashtag"><a href="site.come/hash/samplepost">#samplepost </a> 
</li>
</ul>

</body>

<style> 
.title{code}
.content{code}
.hashtag{code}
</style>

或

<body>

<ul class="post">
<li> <h3>Title of Post</h3> </li>
<li><p>Ipsum bla bla..</p></li>
<li><a href="site.come/hash/samplepost">#samplepost </a></li>
</ul>

</body>

<style> 
.post > li > h3{code}
.post > li > p {code}
.post > li > a {code}
</style>

其中哪些更具语义？我们应该在所有内容上使用类还是仅在必要时使用类？

Answer 1

仅当您想以相似的方式设置一组元素的样式（以及唯一元素的ID）时才使用类，如果类名未附加任何样式，则可能会使有人拿起您的代码感到困惑，只会增加混乱。

使用语义标记将使您的html更具语义-即。页眉，导航，主要，页脚，旁边-等。其中一些标签甚至使屏幕阅读器更易于浏览。 w3学校拥有有关语义标签的良好信息：https://www.w3schools.com/html/html5_semantic_elements.asp

Answer 2

最好不要附加HTML标记，因为HTML标记知道您还必须在其他地方使用类似的界面。最好坚持使用某些CSS方法（for example BEM）并根据CSS类编写样式。从类的存在来看，布局将不会缺少语义。主要的html标记可正确编写。通常，如果希望将来避免出现问题，请使用css类。我会这样写：

<body>
  <div class="posts-list">
    <h3 class="posts-list__title">Title of Post</h3>
    <ul class="post-list__ul">
      <li class="post-list__item">
        <p> Lorem Ipsum bla bla..</p>
      </li>
    </ul>
    <div class="posts-list__hashtag">
      <a href="site.come/hash/samplepost">#samplepost</a>
    </div>
  </div>
</body>

Answer 3

在任何地方创建类都是很多工作，以后可能会引起一些问题。如果将类添加到每个HTML标记，请想象一下，如果项目变大，维护代码的难度将是多少。如上所述，有一些特定的方法可能确实有用，BEM是一种流行的方法，但不是唯一的一种，您可以使用其他方法。如果您现在不想使用方法论并坚持使用简单的类（尽管在某些时候我确实建议您深入探讨该主题，那么您不必完全了解如何使用特定的方法论，但是，如果您愿意的话，它们将如何工作？曾经加入任何使用代码的团队，然后他们会告诉您他们为该项目选择了哪种方法），我建议使用第二个代码，但要加上注释：

<body>

  <!-- Post -->
  <ul class="post">
    <!-- Title -->
    <li>
      <h3>Title of Post</h3>
    </li>
    <!-- Content -->
    <li>
      <p>Ipsum bla bla..</p>
    </li>
    <!-- Hashtag -->
    <li><a href="site.come/hash/samplepost">#samplepost </a></li>
  </ul>

</body>

<style>
  .post>li>h3 {
    code
  }
  
  .post>li>p {
    code
  }
  
  .post>li>a {
    code
  }
</style>

评论确实是简单而强大的工具。它们将帮助您真正快速地适应项目，并避免添加不必要的语义类。

Answer 4

首先要注意的是您的内容不是列表，因此您不应该使用ul/li。糟糕的语义，因此比根本没有语义更糟糕。

您的语义标记是这样：

<body> 
  <h3>Title of Post</h3>
  <p>Lorem Ipsum bla bla..</p>
  <a href="site.come/hash/samplepost">#samplepost</a> 
</body>

如果您想为帖子创建一个包含块，可以合理地将其包装在div元素中，尽管对于这样简单的内容不是必需的，您也可以考虑将其包装在{{1 }}元素。您可以将锚点放在main元素中，但这不会产生语义差异。

现在，当明智可以在任何元素上添加一个或多个类。什么是明智的？这意味着不要越过顶端，仅将类强制放在一个元素上就将其强加给一个元素。通常，一个好的经验法则是，在这样做有功利目的的情况下添加一个类。类是将您的内容归入类别的一种方法，因此分类应该以某种方式有用。

例如，您可能想要以类似的方式为特定类别的所有内容设置样式。也可能是您想通过JavaScript向特定类别中的所有内容添加一些通用功能。

或者可能是出于维护目的想要标识内容类别。例如，假设您有一个描述您所销售产品的大文档。每个产品都有一个价格。即使您无意将价格样式设置为与其他内容不同，也没有任何相关的JavaScript，也可以在每个价格中添加一类“价格”，以便在需要更新价格时可以轻松找到它们都在您的编辑器中，因此请确保您不会错过任何一个。

出于每个功利目的，思考机会而不是必需品。通过添加一个类来对某些内容进行分类，您将为常见的样式，功能或发现应用创造机会。

什么时候需要添加语义类？

4 个答案: