HTML 布局

w3school 在线教程

## HTML 基础教程

- HTML 教程
- HTML 简介
- HTML 编辑器
- HTML 基础
- HTML 元素
- HTML 属性
- HTML 标题
- HTML 段落
- HTML 样式
- HTML 格式化
- HTML 引用
- HTML 计算机代码
- HTML 注释
- HTML CSS
- HTML 链接
- HTML 图像
- HTML 表格
- HTML 列表
- HTML 块
- HTML 类
- HTML 布局
- HTML 响应式设计
- HTML 框架
- HTML 内联框架
- HTML 背景
- HTML 脚本
- HTML 头部
- HTML 实体
- HTML URL
- HTML URL 编码
- HTML Web 服务器
- HTML 颜色
- HTML 颜色名
- HTML 文档类型
- HTML 速查手册

## HTML XHTML

- XHTML 简介
- XHTML 元素
- XHTML 属性

## HTML 表单

- HTML 表单
- HTML 表单元素
- HTML 输入类型
- HTML 输入属性

## HTML5

- HTML5 简介
- HTML5 支持
- HTML5 元素
- HTML5 语义
- HTML5 迁移
- HTML5 代码约定

## HTML 图形

- HTML5 画布
- HTML5 SVG
- HTML5 画布 vs SVG

## HTML 媒体

- HTML 媒体
- HTML 对象
- HTML 音频
- HTML 视频

## HTML API

- HTML5 地理定位
- HTML5 拖放
- HTML5 Web 存储
- HTML5 应用缓存
- HTML5 Web Workers
- HTML5 SSE

## 实例/测验/总结

- HTML 实例
- HTML 测验
- HTML 总结

## HTML 参考手册

- HTML 标签列表
- HTML 属性
- HTML 事件
- HTML 合法 DTD
- HTML 颜色名
- HTML 字符集
- HTML ASCII
- HTML ISO-8859-1
- HTML 符号
- HTML URL 编码
- HTML 语言代码
- HTML 消息

## HTML5

- HTML5 教程
- HTML5 参考手册

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# HTML 布局

- HTML 类
- HTML 响应式设计

网站常常以多列显示内容（就像杂志和报纸）。

## 使用 <div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局：

### 实例

    <body>

    <div id="header">
    <h1>City Gallery</h1>
    </div>

    <div id="nav">
    London<br>
    Paris<br>
    Tokyo<br>
    </div>

    <div id="section">
    <h1>London</h1>
    <p>
    London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
    Standing on the River Thames, London has been a major settlement for two millennia,
    its history going back to its founding by the Romans, who named it Londinium.
    </p>
    </div>

    <div id="footer">
    Copyright W3School.com.cn
    </div>

    </body>

亲自试一试

### CSS：

    <style>
    #header {
        background-color:black;
        color:white;
        text-align:center;
        padding:5px;
    }
    #nav {
        line-height:30px;
        background-color:#eeeeee;
        height:300px;
        width:100px;
        float:left;
        padding:5px;
    }
    #section {
        width:350px;
        float:left;
        padding:10px;
    }
    #footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
    }
    </style>

## 使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：

### HTML5 语义元素

header | 定义文档或节的页眉
nav | 定义导航链接的容器
section | 定义文档中的节
article | 定义独立的自包含文章
aside | 定义内容之外的内容（比如侧栏）
footer | 定义文档或节的页脚
details | 定义额外的细节
summary | 定义 details 元素的标题

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：

### 实例

    <body>

    <header>
    <h1>City Gallery</h1>
    </header>

    <nav>
    London<br>
    Paris<br>
    Tokyo<br>
    </nav>

    <section>
    <h1>London</h1>
    <p>
    London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
    Standing on the River Thames, London has been a major settlement for two millennia,
    its history going back to its founding by the Romans, who named it Londinium.
    </p>
    </section>

    <footer>
    Copyright W3School.com.cn
    </footer>

    </body>

亲自试一试

### CSS

    <style>
    header {
        background-color:black;
        color:white;
        text-align:center;
        padding:5px;
    }
    nav {
        line-height:30px;
        background-color:#eeeeee;
        height:300px;
        width:100px;
        float:left;
        padding:5px;
    }
    section {
        width:350px;
        float:left;
        padding:10px;
    }
    footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
    }

## 使用表格的 HTML 布局

注释：<table> 元素不是作为布局工具而设计的。

<table> 元素的作用是显示表格化的数据。

使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

### 实例

    <body>

    <table class="lamp">
    <tr>
      <th>
        <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
      </th>
      <td>
        The table element was not designed to be a layout tool.
      </td>
    </tr>
    </table>

    </body>

亲自试一试

### CSS

    <style>
    table.lamp {
        width:100%;
        border:1px solid #d4d4d4;
    }
    table.lamp th, td {
        padding:10px;
    }
    table.lamp td {
        width:40px;
    }
    </style>

- HTML 类
- HTML 响应式设计