主要是有三方面的优势：
搜索引擎友好，如果结构太深的话，不便于抓取，不利于seo蜘蛛对于网站结构的理解，从而影响收录或者排名；
代码的可维护度，如果太深的话，由于是多人开发，不便于同事读懂代码；
用js或jquery在操作dom的时候，方便理解和元素选取。
以上就是html页面中最好用扁平化的原因。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.dow{display:blockwidth:202pxheight:52px line-height:52px text-align:center font-family:arial,verdana,sans-serif, '新宋体' font-weight:bold font-size:22px background:#428bcacolor:#fff text-decoration:none border: 3px solid #357ebd cursor:pointer}
.dow:hover{background:#1165ae}
.dow:active{background:#0d79d5}
</style>
</head>
<body>
<input name="xiazai" type="submit" class="dow" value="立即下载">
<br />
<br/>
<button name="xiazai" type="submit" class="dow">立即下载</button>
<br />
<br />
<a href="#" class="dow">立即下载</a>
</body>
</html>
效果图：
html静态网页模板挺多的，包括商城或者博客之类的，目前很多静态网页模板的下载都提供了移动端和pc端页面，5个页面以上很正常。
需要注意的是如果是没有交互的展现型模板，那么不需要太多修改。如果是有交互的话和内容管理的话，可以将页面修改为cms系统形式，或者干脆直接使用cms网站模板。
