这个主要是对用户友好，不用非要将鼠标移动到文字上才显示链接。

<a href="#" style="width:100px;height:50px;background:red">首页</a>

<a href="#" style="width:100px;height:50px;background:red;display:block;">首页</a>

没有设置转换块元素的a标签：

<a href="#" style="width:100px;height:50px;background:red">首页</a>

同一个代码加上转换block后的a标签

<a href="#" style="width:100px;height:50px;background:red;display:block;">首页</a>

a标签属于内联元素，如果您添加了：hover，设置了背景色，那么如果没有把a标签转换成block块元素的话是没有办法和li标签的宽度高度一样的，因为内联元素只有和文字相等的宽度，所以最好一开始就在a标签设置样式，外面的li会被a标签自适应充满整个盒子

不知道你有没有试过，如果你用li来写，就会变成这样因为a:hover{}

一般导航都是具有超链接功能，<a>标签具有这个功能，而<li>标签只是罗列信息列表，不具备链接功能。