新手入门，菜鸟提个问题，希望各位大虾能帮个忙解释一下

我是要打算在页面上用js划20行水平线，并且宽度类似阶梯逐行变长，第一行5%，最后一行100%，我是这么写的：
<script type="text/javascript">
var a=0;
do
{
a+=5;
document.write('<hr width="a+'%'"/>');
}while(a<100);
</script>
可是不对，搞不起来，但正确答案是这样的：
<script type="text/javascript">
var a=0;
do
{
a+=5;
document.write('<hr width="'+a+'%"/>');
}while(a<100);
</script>
主要问题出在控制水平线的宽度，我的 document.write('<hr width="a+'%'"/>');中，我把a看作已经定义好的数字，应该可以直接填写进去，不需要用引号，然后+百分号，百分号我看作是字符，用引号框起来了
为什么答案中的是document.write('<hr width="'+a+'%"/>');
a左边的+号貌似不需要吧，左边没字符啊，右边添加一个百分号就应该可以了哇，可是不知道那单引号是框的谁，有点乱了，希望谁能解释一下