HTML - 布局

网页布局对于更好地展示您的网站非常重要。设计一个具有良好外观和感觉的网站布局需要花费相当多的时间。

如今，所有现代网站都使用基于 CSS 和 JavaScript 的框架来创建响应式和动态网站，但您可以使用简单的 HTML 表格或分区标签与其他格式标签相结合来创建良好的布局。本章将向您提供一些示例，介绍如何使用纯 HTML 及其属性为网页创建简单但有效的布局。

HTML 布局 - 使用表格

创建布局最简单且最流行的方法是使用 HTML <table> 标记。这些表格按列和行排列，因此您可以按照自己喜欢的方式使用这些行和列。

例子

例如，以下 HTML 布局示例是使用具有 3 行和 2 列的表格实现的，但页眉和页脚列使用 colspan 属性跨越两列 -

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

这将产生以下结果 -

多列布局 - 使用表格

您可以设计网页以将网页内容放入多个页面中。您可以将内容保留在中间栏中，您可以使用左栏来使用菜单，右栏可以用来放置广告或其他一些东西。此布局与我们网站tutorialspoint.com 上的布局非常相似。

例子

这是创建三列布局的示例 -

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

这将产生以下结果 -

HTML 布局 - 使用 DIV、SPAN

<div> 元素是用于对 HTML 元素进行分组的块级元素。<div> 标签是块级元素，而 HTML <span> 元素用于在内联级别对元素进行分组。

虽然我们可以使用 HTML 表格实现相当漂亮的布局，但表格并不是真正被设计为布局工具的。表格更适合呈现表格数据。

注意- 此示例使用级联样式表 (CSS)，因此在理解此示例之前，您需要更好地了解 CSS 的工作原理。

例子

在这里，我们将尝试使用 <div> 标签和 CSS 来实现相同的结果，无论您在前面的示例中使用 <table> 标签实现了什么。

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 Tutorialspoint.com
            </center>
         </div>
			
      </div>
   </body>

</html>

这将产生以下结果 -

您可以使用 DIV、SPAN 以及 CSS 创建更好的布局。有关 CSS 的更多信息，请参阅 CSS 教程。