Layout ng HTML

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

使用 <div> 元素的 HTML 布局

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

Ang eksemplo na ito ay gumagamit ng apat na <div> elemento upang lumikha ng ilang-linya na pagsasakop:

实例

<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>
Ang London ay ang kabisera ng Inglatera. Ito ang pinakamaraming populasyon na lungsod sa United Kingdom,
may isang kalakhan ng lugar na may higit sa 13 milyong naninirahan.
</p>
<p>
Nasa kagubatan ng River Thames, ang London ay isang pangunahing pook ng paninirahan sa loob ng dalawang libong taon,
Ang kasaysayan nito ay nagmumula sa pagtatag nito ng mga Romano, kung saan tinawag itong Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</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>

Mga patakaran ng pagsasakop ng website gamit ang HTML5

Ang bagong mga semantikong elemento ng HTML5 ay nagtutukoy sa iba't ibang bahagi ng web page:

Semantikong Elemento ng HTML5

header Tumukoy sa pamagat ng dokumento o Seksyon
nav Tumukoy sa tanggapan ng navigation link
section Tumukoy sa Seksyon ng dokumento
article Tumukoy sa malayang, na may pinag-isang artikulo
aside Tumukoy sa nilalaman na walang kaugnayan (katulad ng sidebar)
footer Tumukoy sa pahina ng dokumento o Seksyon
details Tumukoy sa karagdagang detalye
summary Tumukoy sa pamagat ng elementong details

Ang eksemplo na ito ay gumagamit ng <header>, <nav>, <section>, at <footer> upang lumikha ng ilang-linya na pagsasakop:

实例

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
Ang London ay ang kabisera ng Inglatera. Ito ang pinakamaraming populasyon na lungsod sa United Kingdom,
may isang kalakhan ng lugar na may higit sa 13 milyong naninirahan.
</p>
<p>
Nasa kagubatan ng River Thames, ang London ay isang pangunahing pook ng paninirahan sa loob ng dalawang libong taon,
Ang kasaysayan nito ay nagmumula sa pagtatag nito ng mga Romano, kung saan tinawag itong Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

亲自试一试

CSS

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>