communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Connaissance de base de la production de pages Web (html) (4) Explication détaillée des liens

Connaissance de base de la production de pages Web (html) (4) Explication détaillée des liens

零下一度
Libérer： 2017-05-06 13:40:35
original
1833 Les gens l'ont consulté

1.Lien HTML

<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>
Copier après la connexion

Cet exemple montre comment créer un lien dans un document HTML. 

<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>
Copier après la connexion


Cet exemple montre comment utiliser une image comme lien.

HTML Lien hypertexte(Lien)

L'hyperlien peut être un mot, un mot ou un groupe de mots, ou il peut s'agir d'une image sur laquelle vous pouvez cliquer pour accéder à un nouveau document ou à une certaine partie du document actuel.

Lorsque vous déplacez le pointeur de la souris sur un lien de la page Web, la flèche se transforme en une petite main.

Nous créons des liens en HTML en utilisant la balise

Il existe deux manières d'utiliser la balise  :

  1. En utilisant l'attribut href - créer un lien vers un autre Un lien vers un document

  2. en utilisant l'attribut name - crée un signet dans le document

Lectures approfondies : Qu'est-ce que l'hypertexte ?

Syntaxe du lien HTML

Le code HTML du lien est très simple. Cela ressemble à ceci : 

<a href="url">Link text</a>
Copier après la connexion

L'attribut href précise la cible du lien.

Le texte entre la balise d'ouverture et la balise de fermeture est affiché sous forme d'hyperlien.

Instance

<a href="www.php.cn/">Visit php</a>
Copier après la connexion

La ligne de code ci-dessus s'affiche : Visitez php

Cliquez Cet hyperlien amènera l'utilisateur à la page d'accueil de php.

Conseil : "Le texte du lien" ne doit pas nécessairement être du texte. Des Images ou d'autres éléments HTML peuvent devenir des liens.

Liens HTML - attribut cible

À l'aide de l'attribut Target, vous pouvez définir où le document lié sera affiché.

La ligne suivante ouvrira le document dans une nouvelle fenêtre : 

<a href="http://www.php.cn/" target="_blank">Visit W3School!</a>
Copier après la connexion

Essayez-le par vous-même

Lien HTML - attribut name

L'attribut name précise le nom de l'ancre. L'attribut

name est utilisé pour créer des signets dans HTML.

Le marque-page ne s'affiche pas de manière particulière et est invisible pour le lecteur.

Lorsque nous utilisons des ancres nommées, nous pouvons créer des liens qui renvoient directement à une section de la page, afin que les utilisateurs n'aient pas à continuer de faire défiler pour trouver les informations dont ils ont besoin.

Syntaxe pour nommer les ancres : 

<a name="label">Text to be displayed</a>
Copier après la connexion

Astuce : Le nom de l'ancre peut être ce que vous voulez.

Instance

Ancre nommée à l'intérieur d'un document HTML : 

<a name="tips">Useful Tips Section</a>
Copier après la connexion

Ensuite, nous créons un pointeur vers le même document Lien vers la section « Conseils utiles » dans le document : 

<a href="#tips">Visit the Useful Tips Section</a>
Copier après la connexion

Vous pouvez également créer un lien depuis une autre page vers la section « Conseils utiles » du document : 

<a href="www.w3school.com.cn/html_links.htm#tips">
Visit the Useful Tips Section
</a>
Copier après la connexion

Dans le code ci-dessus, nous ajoutons le symbole # et le nom de l'ancre à la fin de l'URL, afin de pouvoir créer un lien direct vers les astuces nommées ancre.

Effets spécifiques : Conseils utiles

Basique Notes - Conseils utiles :

REMARQUE  : Ajoutez toujours des barres obliques aux sous-dossiers. Si vous écrivez le lien comme ceci : href="www.w3school.com.cn/html", deux requêtes HTTP seront générées vers le serveur. En effet, le serveur ajoutera une barre oblique à l'adresse, puis créera une nouvelle requête, comme celle-ci : href="www.w3school.com.cn/html/".

Astuce : Les ancres nommées sont souvent utilisées pour créer une table des matières au début de documents volumineux. Vous pouvez attribuer à chaque chapitre une ancre nommée, puis placer des liens vers ces ancres en haut du document. Si vous visitez fréquemment l'Encyclopédie Baidu, vous constaterez que presque toutes les entrées utilisent cette méthode de navigation.

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

2.HTML 表格

<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>
Copier après la connexion

这个例子演示如何在 HTML 文档中创建表格。

<html>

<body>

<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>
Copier après la connexion

本例演示各种类型的表格边框。

表格

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 , 和 很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。

3.HTML 列表

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>
Copier après la connexion

本例演示无序列表。

<html>
<body>

<h4>一个有序列表：</h4>
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

</body>
</html>
Copier après la connexion

有序列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Copier après la connexion

在浏览器显示如下：

row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格

<table border="1"><tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Copier après la connexion

表格的表头

表格的表头使用

标签进行定义。

<table border="1">
<tr><th>Heading</th>
<th>Another Heading</th></tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Copier après la connexion

在浏览器显示如下：

HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


表格中的空单元格

在大多数浏览器中，没有内容的表格单元显示得不太好。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td><td></td></tr>
</table>
Copier après la connexion

在浏览器显示如下：

row 1, cell 1row 1, cell 2
row 2, cell 1

注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td><td> </td></tr>
</table>
Copier après la connexion

在浏览器中显示如下：

row 1, cell 1row 1, cell 2
row 2, cell 1


基本的注意事项 - 有用的提示：