Tutoriel de base HTML

Média HTML

Manuel de référence HTML

HTML5 Tutoriel de base

HTML5 API

HTML5 媒体

Mise en page HTML

Une mise en page de page raisonnable est très importante, non seulement elle détermine si la page est belle, mais elle affecte également l'expérience utilisateur; une mise en page de page mauvaise, l'expérience utilisateur est très mauvaise et il est difficile de retenir les utilisateurs.

Méthodes d'implémentation de la mise en page HTML

1、On peut utiliser le mode de tableau Html pour construire la mise en page de la page, puis remplir le contenu.
2、Utiliser div, conjointement avec float ou flex pour mettre en page la page.

Exemple simple de mise en page avec tableau

示例

<!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>Tableau</title>
</head>
<body>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　align="center"　style="background:　#0395e1">Navigation supérieure</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　Contenu<br>latéral<br> <br>intérieur
　　　　　　　　　　</td>
　　　　　　　　　　<td　style="background:　red"　align="center"　width="400px">
　　　　　　　　　　　　　　Contenu principal
　　　　　　　　　　</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　style="background:　darkorchid"　align="center">Bas de page</td>
　　　　　　</tr>
　　</table>
</body>
</html>

测试看看 ‹/›

Plus d'exemples en ligne

Mise en page de site utilisant l'élément <div>
Comment ajouter une mise en page en utilisant l'élément <div>.

Mise en page de site utilisant l'élément <table>
Comment ajouter une mise en page en utilisant l'élément <table>.

Mise en page du site

La plupart des sites Web disposent de contenu dans plusieurs colonnes (comme dans un magazine ou un journal).

La plupart des sites Web peuvent utiliser des éléments <div> ou <table> pour créer des colonnes multiples. CSS est utilisé pour positionner les éléments ou créer un apparence riche en couleurs pour la page.

Bien que nous puissions utiliser la balise HTML table pour concevoir une mise en page attrayante, il n'est pas recommandé d'utiliser la balise table comme outil de mise en page. - Les tableaux ne sont pas des outils de mise en page.

Mise en page HTML - Utilisation de l'élément <div>

Les éléments div sont des éléments en bloc utilisés pour regrouper des éléments HTML.

Les exemples suivants utilisent cinq éléments div pour créer une mise en page en colonnes multiples :

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
　
<div　id="container"　style="width:520px">
　
<div　id="header"　style="background-color:#FFA300;">
<h1　style="margin-bottom:0;">主要的网页H1标题</h1></div>
　
<div　id="menu"　style="background-color:#FF9a00;height:200px;width:120px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
　
<div　id="content"　style="background-color:#dddddd;height:200px;width:400px;float:left;">
内容在这里</div>
　
<div　id="footer"　style="background-color:#FFA300;clear:both;text-align:center;">
版权 © 基础教程(oldtoolbag.com)</div>
　
</div>
　
</body>
</html>

测试看看 ‹/›

上面的 HTML 代码会产生如下结果：

Mise en page HTML - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

下面的示例使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

示例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
　
<table　width="520"　border="0">
<tr>
<td　colspan="2"　style="background-color:#FFB500;">
<h1>主要的网页H1标题</h1>
</td>
</tr>
　
<tr>
<td　style="background-color:#FFB700;width:120px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td　style="background-color:#DDDDDD;height:200px;width:400px;">
内容在这里</td>
</tr>
　
<tr>
<td　colspan="2"　style="background-color:#FFB500;text-align:center;">
版权 © 基础教程(oldtoolbag.com)</td>
</tr>
</table>
　
</body>
</html>

测试看看 ‹/›

Mise en page HTML - 必不可少的 CSS

使用 CSS 的最大好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护、定义风格的灵活性。通过修改 CSS 样式表文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。

HTML 布局标签

标签	Description
<div>	Définir un bloc de document, bloc (-level)
<span>	Définir span, utilisé pour regrouper des éléments en ligne dans le document.

Lecture de vidéo HTML (Video)Blocs HTML