怎么只把摘要两个字加入目录
摘要作为文章的重要组成部分，对读者的阅读起到了很大的帮助作用。但是在一些情况下，我们希望只把“摘要”两个字加入目录，那么该怎么做呢？下面就为大家介绍几种方法。
1.使用HTML锚点
在文章中先编写好摘要，然后在目录处添加HTML锚点。具体操作为：
第一步：在摘要区域的HTML标签内添加id属性，如下所示：
<div id=\"abstract\">这里是摘要内容</div>
第二步：在目录列表处添加链接并指向摘要区域，如下所示：
<a href=\"#abstract\">摘要</a>
这样，当读者点击目录中的摘要时，页面就会自动滚动到摘要区域。相比于直接加入目录，这种方法不会增加目录的字数，在页面体验方面也更加舒适。
2.使用CSS隐藏
我们可以在CSS中为“摘要”两个字添加display:none;属性，这样便可以实现将“摘要”两个字隐藏起来，只留下序号和文章标题。具体操作为：
第一步：在CSS中将“摘要”两个字隐藏，如下所示：
li:first-child a:before { content:\"摘要\"; display:none; }
第二步：文章目录处正常添加目录列表，如下所示：
<ol><li><a href=\"#abstract\">1. 摘要</a></li></ol>
这样，在页面中“摘要”两个字不会显示出来，但序号和文章标题依旧可以正常显示，以此优化文章目录的视觉效果。
3.使用JavaScript操作
我们可以使用JavaScript动态生成文章目录，这样就可以自定义目录内容，实现将“摘要”两个字添加进目录中。具体操作为：
第一步：在HTML中创建目录容器，如下所示：
<div id=\"toc\"></div>
第二步：在JavaScript中获取文章所有的h2标题，并生成目录链接，如下所示：
var h2s = document.getElementsByTagName(\"h2\");
var toc = document.getElementById(\"toc\");
for(var i=0; i<h2s.length; i++){
var tocLink = document.createElement(\"a\");
var tocLi = document.createElement(\"li\");
var tocNum = document.createElement(\"span\");
var tocTitle = document.createElement(\"span\");
tocLink.setAttribute(\"href\", \"#\"+h2s[i].getAttribute(\"id\"));
tocNum.innerText = \"\"+(i+1)+\". \";
tocTitle.innerText = h2s[i].innerText;
tocLi.appendChild(tocNum);
tocLi.appendChild(tocTitle);
tocLink.appendChild(tocLi);
toc.appendChild(tocLink);
}
第三步：手动将摘要连接插入目录，如下所示：
var tocLink = document.createElement(\"a\");
var tocLi = document.createElement(\"li\");
var tocNum = document.createElement(\"span\");
var tocTitle = document.createElement(\"span\");
tocLink.setAttribute(\"href\", \"#abstract\");
tocNum.innerText = \"1. \";
tocTitle.innerText = \"摘要\";
tocLi.appendChild(tocNum);
tocLi.appendChild(tocTitle);
tocLink.appendChild(tocLi);
toc.insertBefore(tocLink, toc.firstChild);
第四步：在文章中为摘要添加id属性，如下所示：
<h2 id=\"abstract\">摘要</h2>
这样，当读者点击目录中的摘要时，页面便会自动滚动到摘要区域。
结语
以上就是只添加“摘要”两个字到文章目录的三种方法。根据需要选择其中的一种即可。当然，在使用锚点和动态生成目录的时候，记得在对应的目标位置设置好id属性，以免点击无效。祝大家写作愉快！