Question

有没有办法（理想上很容易）在HTML / CSS中制作标题和部分自动编号？也许是一个JS库？

或者这是HTML中很难做到的事情吗？

我正在查看公司维基的应用程序，但我们希望能够像文字处理器一样使用标题编号。

Answer 1

绝对可以使用css计数器 - 只需确保注意浏览器兼容性......：

这将使h2得到1.，2.，h3得到1.1,2.1,2.2等......

<style>
   body{counter-reset: section}
   h2{counter-reset: sub-section}
   h3{counter-reset: composite}
   h4{counter-reset: detail}

   h2:before{
     counter-increment: section;
     content: counter(section) " ";
   }
   h3:before{
     counter-increment: sub-section;
     content: counter(section) "." counter(sub-section) " ";
   }
   h4:before{
     counter-increment: composite;
     content: counter(section) "." counter(sub-section) "." counter(composite) " ";
   }
   h5:before{
     counter-increment: detail;
     content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
   }
   </style>

正如lpfavreau所说，it's the same as another question我相信。

另请注意，使用css将不更改标题（例如，所选文本将为您提供没有数字的标题）。这可能是也可能不是所希望的。 lpfavreau（已接受）的答案将为您提供修改标题文本的jquery代码。

第三方编辑

我创建了example with the css above

Answer 2

2016年更新。有关CSS中的正确方法，请参阅下面的Stephen's answer。我的答案在2009年浏览器和库不同时才有意义。我们现在生活在一个全新的世界，这里介绍的方法已经过时了。我将它留给那些仍然生活在由IE7制造的企业微观世界中的可怜的灵魂。泪流满面。

如果您想知道如何在CSS中执行此操作，请参阅this other question，答案可能就是您要找的内容。但是，根据HTML文档的制作方式，titel也有一个很好的主张。

应该注意的是，正如Triptych在另一篇评论中所说的那样，只有在内部工具可以控制使用哪些浏览器并且使用CSS是值得的时候才会感兴趣，因为修改HTML会很困难。例。支持此CSS功能是有限的。

使用像jQuery这样的东西当然也很容易。像这个未经测试的片段：

$(document).ready(function() {
  $('h1').each(function(index) {
    $(this).html((index + 1) + '. ' + $(this).html());
  });
});

当然不要忘记在文档中包含jquery.js文件。

Answer 3

最简单的方法是编号列表

<ol>
<li> Section
    <ol>
      <li>Nested one</li>
      <li>Nested two</li>
    </ol>
</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
<ol>

将是这样的：

节
一，嵌套一 II。嵌套两个
科
科
科

Answer 4

可以在服务器端或使用JavaScript完成。虽然不知道任何预制的脚本。

至少不可能使用HTML / CSS - 除非您手动将所有数字添加到标题中。

Answer 5

可以使用有序列表使用HTML本身实现自动编号，并在必要时嵌套它们。下面是一个实际示例的链接，我在谷歌快速搜索后发现了这个例子。

http://archive.corewebprogramming.com/Chapter2/Nested-Ordered-Lists.html

还可以使用无序列表和CSS，如下例所示：

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

Answer 6

列表这样做，为什么不是其他元素呢？ http://www.w3.org/TR/CSS2/generate.html#scope

Answer 7

<ol>
  <li>Heading 1</li>
  <li>Heading 2</li>
  <li>Heading 3</li>
</ol>

HTML / CSS自动编号标题？

7 个答案:

第三方编辑