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 标签的参考，以了解有关新标签的更多信息。