HTML 布局

创建网站的第一步就是规划网站的布局，一般编程人员会根据样式稿拆分网站的模块，例如网站可以划分哪些部分，哪些部分在不同页面可以复用，哪些需要单独的落地页等等。

良好的布局可以帮助你减少代码的编写量，也更容易进行维护。不管网站的最终布局样式如何，首先规划的肯定是 HTML 结构，HTML 页面最上层的结构基本上是固定不变的，首先是类型声明，然后是 html 元素，在其内部包含 head 和 body 两个元素。大致的结构如下：

网页的具体内容一般被包含在 body 元素内部。

表格布局

在早期的 web 开发中，编程人员一般会使用 HTML 提供的表格标签进行布局，因为表格是天然的轮廓结构，并且表格可以嵌套，所以满足早期的页面需求是足够的。

但是随着时间的发展，页面的元素越来越丰富，对于元素细节的把控越来越高，表格的灵活度就显得有些不够用了，现代的网站虽然仍然可以用表格的形式搭建，但是并不推荐。下面为了方便大家理解，展示一段表格布局的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML Table Layout</title>
  </head>
  <body style="margin: 0px">
    <table
      style="
        width: 100%;
        border-collapse: collapse;
        font: 14px Arial, sans-serif;
      "
    >
      <tr>
        <td colspan="2" style="padding: 10px 20px; background-color: #acb3b9">
          <h1 style="font-size: 24px">HTML</h1>
        </td>
      </tr>
      <tr style="height: 170px">
        <td
          style="
            width: 20%;
            padding: 20px;
            background-color: #d4d7dc;
            vertical-align: top;
          "
        >
          <ul style="list-style: none; padding: 0px; line-height: 24px">
            <li><a href="#" style="color: #333">Home</a></li>
            <li><a href="#" style="color: #333">About</a></li>
            <li><a href="#" style="color: #333">Contact</a></li>
          </ul>
        </td>
        <td
          style="padding: 20px; background-color: #f2f2f2; vertical-align: top"
        >
          <h2>Welcome to our site</h2>
          <p>Here you will learn how to create websites...</p>
        </td>
      </tr>
      <tr>
        <td
          colspan="2"
          style="padding: 5px; background-color: #acb3b9; text-align: center"
        >
          <p>copyright &copy; meishizaolunzi.com</p>
        </td>
      </tr>
    </table>
  </body>
</html>

最后的效果如下：

div 布局

使用 div 布局基本上是现在网站开发的主流方法。div 是 division 的简称，说白了就是用来划分内容的标签。这个标签默认是一个块级元素，因为其对内容样式没有任何影响，所以常用来布局使用。

因为 div 自身不带有任何样式，所以想要改变网站的样式主要是使用附加的 CSS 样式进行修饰，而 div 更多的是负责网站的内容划分。

例如假设我们创建一个侧边栏，一般我们会这样写：

<div class="sidebar"></div>

然后使用 CSS 修改 sidebar 的样式效果。下面展示一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    .header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    .header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2; 
    }
    .nav, .section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    .nav {            
        width: 20%;             
        background: #d4d7dc;
    }
    .section {
        width: 80%;
    }
    .nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    .nav ul li a {
        color: #333;
    }    
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>HTML</h1>
        </div>
        <div class="wrapper clearfix">
            <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 class="section">
                <h2>Welcome to our site</h2>
                <p>Here you will learn how to create websites...</p>
            </div>
        </div>
        <div class="footer">
            <p>copyright &copy; meishizaolunzi.com</p>
        </div>
    </div>
</body>
</html>

网站的所有样式都放在 <style> 标签内部，而网站本身负责内容结构。

最后的效果和上面一样：

HTML5 元素

我们知道 HTML 的发展越来越强调标签的语义化，div 的布局方式虽然很方便，但是在语义程度上来说较弱，所以 HTML5 推出了很多强化语义的标签，用来明确标注网站的不同部分。

主流的标签有 <header>、<footer>、<nav>、<section> 等等。这些标签从文字上大家就应该理解它们的具体含义了，基本上拿来就能用，不过在使用之前最好了解一下它们的相关约束，例如 <main> 标签为例，它在文档中必须唯一等等，这些没什么可说的，看过文档就知道了，用的时候多看看就好了。

下面给个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Web Page Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;  
    }
    nav, section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;             
        background: #d4d7dc;
    }    
    nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML5</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <section>
                <h2>Welcome to our site</h2>
                <p>Here you will learn how to create websites...</p>
            </section>
        </div>
        <footer>
            <p>copyright &copy; meishizaolunzi.com</p>
        </footer>
    </div>
</body>
</html>

最终的效果和前面一样：

下面简单的介绍一下常见的的结构元素：

标签	描述
`<header>`	文档的页头部分。
`<footer>`	文档的页脚部分。
`<nav>`	文档的导航部分。
`<section>`	文档的一部分，可以用作网站的面包屑、页眉等部分。
`<article>`	代表文章、博客或独立的信息单元。
`<aside>`	主要用于一些内容的补充说明，例如文章的旁白、标注框之类的东西。