HTML 佈局

Created: October-16, 2018

網頁佈局是建立結構良好，結構良好，語義豐富的網站的重要組成部分。

建立網站佈局

建立網站佈局是定位各種元素的活動，這些元素使網頁結構良好，併為網站提供吸引人的外觀。

你可以發現，網際網路上的大多數網站都將其內容放在多行和多列中 - 格式化為雜誌或報紙，以便為一般網路使用者提供更好的閱讀和書寫環境。這可以通過使用 <table>、 <div> 和 <span> 輕鬆實現，或新增一些樣式給他們。

使用表格的 HTML 佈局

表是在 HTML 中建立佈局的最簡單方法。通常，這涉及將內容放入行和列的過程。

使用包含 3 行和 2 列的表來實現以下 HTML 佈局 - 第一行和最後一行使用以下 colspan 屬性跨越兩列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
    <table cellpadding="10px;" cellspacing="0" style="font:12px verdana, sans-serif; width:100%;">
        <tr>
            <td colspan="2" style="background-color:#679BB7;">
                <h1 style="font-size:18px; margin:10px 0;">Tutorial Republic</h1>
            </td>
        </tr>
        <tr style="height:170px;">
            <td style="background-color:#bbd2df; width:20%; vertical-align:top;">
                <ul style="list-style:none; padding:0px; margin:0px;">
                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Home</a></li>
                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">About</a></li>
                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Contact</a></li>
                </ul>
            </td>
            <td style="background-color:#f0f0f0; width:80%; vertical-align:top;">
                <h2 style="font-size:16px; margin:0px;">Welcome to our site</h2>
                <p>Here you will learn to create websites...</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#679BB7;">
                <p style="text-align:center; margin:5px;">copyright &copy; tutorialrepublic.com</p>
            </td>
        </tr>
    </table>
</body>
</html>

- 上面的 HTML 程式碼將產生以下輸出：

警告： 上面示例中用於建立佈局的方法沒有錯，但不建議這樣做。避免使用表格和內聯樣式來建立佈局。

使用 Div 和 Span 的 HTML 佈局

HTML （代表除法）元素用於標記 HTML 文件中的內容塊或其他元素集。如果需要，它可以包含更多 div 元素，但它不能包含在內聯元素中。另一方面， <span> 元素用於標記塊元素或其他內聯元素中的部分。

以下示例使用 div 元素建立多列布局，生成與上一個使用表的示例相同的結果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Div Layout</title>
    <style type="text/css">
        body{
            font: 12px verdana, sans-serif; 
            margin: 0px;
        }
        .header{
            padding: 10px 0;
            background-color: #679BB7; 
        }
        .header h1{
            font-size: 18px; 
            margin: 10px;
        }
        .container{
            width: 100%;
            background-color: #f0f0f0; 
        }
        .sidebar{
            float: left; 
            width: 20%; 
            min-height: 170px;
            background-color: #bbd2df;
        }
        .sidebar .nav{
            padding: 10px;
        }
        .nav ul{
            list-style: none; 
            padding: 0px; 
            margin: 0px;
        }
        .nav ul li{
            margin-bottom: 5px; 
        }
        .nav ul li a{
            color: #3d677e;
        }
        .nav ul li a:hover{
            text-decoration: none;
        }
        .content{
            float: left;
            width: 80%;
            min-height: 170px;
        }
        .content .section{
            padding: 10px;
        }
        .content h2{
            font-size: 16px; 
            margin: 0px;
        }
        .clearfix{
            clear: both;
        }
        .footer{
            background-color: #679BB7; 
            padding: 10px 0;
        }
        .footer p{
            text-align: center; 
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Tutorial Republic</h1>
        </div>
        <div class="wrapper">
            <div class="sidebar">
                <div class="nav">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="content">
                <div class="section">
                    <h2>Welcome to our site</h2>
                    <p>Here you will learn to create websites...</p>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="footer">
            <p>copyright &copy; tutorialrepublic.com</p>
        </div>
    </div>
</body>
</html>

- 上面的 HTML 程式碼將產生與前一個示例相同的輸出：

提示： 使用 DIV，SPAN 和 CSS 可以建立更好的佈局。你只需編輯 CSS 檔案即可更改網站所有頁面的佈局。要了解有關 CSS 的更多資訊，請檢視 CSS 教程。

使用 HTML5 結構元素建立網站佈局

HTML5 已經推出新結構元素比如 <header>，<footer> ， <nav> ，<section> 等，以更加語義的方式來定義網頁的不同部分。你可以考慮這些要素作為常用的類如更換 .header ， .footer， .nav， .section 等。下面的示例使用新的 HTML5 結構元素，創造了我們在前面的例子已經建立了相同的網頁佈局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Web Page Layout</title>
    <style type="text/css">
        body{
            font: 12px verdana, sans-serif; 
            margin: 0px;
        }
        header{
            background-color: #679BB7; 
            padding: 10px;
        }
        header h1{
            font-size: 18px; 
            margin: 10px 0;
        }
        .container{
            width: 100%;
            background-color: #f0f0f0; 
        }
        .sidebar{
            float: left; 
            width: 20%; 
            min-height: 170px;
            background-color: #bbd2df;
        }
        .sidebar nav{
            padding: 10px;
        }
        nav ul{
            list-style: none; 
            padding: 0px; 
            margin: 0px;
        }
        nav ul li{
            margin-bottom: 5px; 
        }
        nav ul li a{
            color: #3d677e;
        }
        nav ul li a:hover{
            text-decoration: none;
        }
        .content{
            float: left;
            width: 80%;
            min-height: 170px;
        }
        .content section{
            padding: 10px;
        }
        section h2{
            font-size: 16px; 
            margin: 0px;
        }
        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        footer{
            background-color: #679BB7; 
            padding: 10px;
        }
        footer p{
            text-align: center; 
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Tutorial Republic</h1>
        </header>
        <div class="wrapper clearfix">
            <div class="sidebar">
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="content">
                <section>
                    <h2>Welcome to our site</h2>
                    <p>Here you will learn to create websites...</p>
                </section>
            </div>
        </div>
        <footer>
            <p>copyright &copy; tutorialrepublic.com</p>
        </footer>
    </div>
</body>
</html>

- 上面的 HTML 程式碼也會產生與前一個示例相同的輸出：

下表簡要概述了 HTML5 中的新結構元素。

標籤	描述
`<header>`	表示文件或節的標題。
`<footer>`	表示文件或節的頁尾。
`<nav>`	定義一段導航連結。
`<section>`	定義文件的一部分，例如頁首，頁尾等。
`<article>`	定義一篇文章。
`<aside>`	定義與頁面內容鬆散相關的一些內容。
`<details>`	表示使用者可以根據需要從中獲取其他資訊或控制元件的視窗小部件。
`<summary>`	定義元素的摘要。 `<details>`

檢視有關 HTML5 標籤的參考，以瞭解有關新標籤的更多資訊。