HTML布局模板是用于構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)的規(guī)范，它決定了網(wǎng)站內(nèi)容的排版和組織方式。常見的布局模板有3列和2列結(jié)構(gòu)，如下：

<div class="wrapper">  
<div class="header">  
<h1>網(wǎng)站名稱</h1>  
<ul class="menu">  
<li><a href="#">菜單1</a></li>  
<li><a href="#">菜單2</a></li>  
<li><a href="#">菜單3</a></li>  
</ul>  
</div>  
<div class="content">  
<div class="column1">  
<h2>三列結(jié)構(gòu)</h2>  
<p>左側(cè)內(nèi)容</p>  
</div>  
<div class="column2">  
<h2>三列結(jié)構(gòu)</h2>  
<p>中間內(nèi)容</p>  
</div>  
<div class="column3">  
<h2>三列結(jié)構(gòu)</h2>  
<p>右側(cè)內(nèi)容</p>  
</div>  
</div>  
<div class="footer">  
<p>?版權(quán)信息</p>  
</div>  
</div>

上述代碼是一個(gè)典型的3列布局模板，其中“wrapper”是整個(gè)頁(yè)面的外層容器，在這個(gè)容器內(nèi)部分別有頁(yè)頭“header”、內(nèi)容“content”和頁(yè)腳“footer”三個(gè)容器，內(nèi)容“content”部分又分別細(xì)分為左側(cè)欄目“column1”、中間內(nèi)容“column2”和右側(cè)欄目“column3”三個(gè)容器。要實(shí)現(xiàn)4列布局，只需要在“content”里添加一個(gè)“column4”的容器即可。

2列布局模板則相對(duì)簡(jiǎn)單，只需要使用“l(fā)eft”和“right”兩個(gè)容器即可，如下：

<div class="wrapper">  
<div class="left">  
<h2>左側(cè)</h2>  
<p>左側(cè)內(nèi)容區(qū)</p>  
</div>  
<div class="right">  
<h2>右側(cè)</h2>  
<p>右側(cè)內(nèi)容區(qū)</p>  
</div>  
</div>

如上代碼，“wrapper”是整個(gè)頁(yè)面的外層容器，內(nèi)部分別定義了左側(cè)欄目“l(fā)eft”和右側(cè)欄目“right”兩個(gè)容器。這種布局模板適合展示比較簡(jiǎn)單的內(nèi)容，如博客文章列表、產(chǎn)品列表等。