突出显示标题级别-DEV365 开发者社区

HTML中的标题很重要，原因有很多。对于SEO，可访问性和整体信息结构。

层次结构也非常重要。首先，您必须具有H1。而且，如果您需要另一个标题，则必须是H2等。

这是标题级别的示例结构。

h1 - Main title  
  h2 - Section title A.
  h2 - Section title B. 
    h3 - Subtitle for Section title B. 
      h4 - Subtitle for the previous h3. 
    h3 - Subtitle for Section title B
  h2 Section title C. 
  h2 Section title D.

您如何设置标题当然取决于您。没有话可以说H4不能成为最大的标题。或最小的H1。或不同的H2标题可以具有不同的设计。

这就是为什么可以使用以下CSS在您的开发中突出显示代码每个标题的级别。

h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
  color: red;
  opacity: 1;
  background-color: white;
  z-index: 1;
  position: relative;
  top: -2px;
  left: -2px;
  border: 1px solid red;
  font-size: small;
  padding: 0 1px;
  line-height: 1;
  margin-right: 0;
}
h1:before { content: 'H1'; }
h2:before { content: 'H2'; }
h3:before { content: 'H3'; }
h4:before { content: 'H4'; }
h5:before { content: 'H5'; }
h6:before { content: 'H6'; }

这个想法是在每个标题之前添加一个元素并拼出标题级别，以使其在页面上可见，而无需检查源代码或开发人员。

希望您发现这有用。

直到下一次！