HTML 布局

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> 标签内部,而网站本身负责内容结构。

最后的效果和上面一样:

div 布局

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>

最终的效果和前面一样:

HTML5 布局

下面是一些常见的 HTML5 结构元素:

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

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top