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
- 零下一度original
- 2017-05-06 13:40:351832parcourir
1.Lien HTML
<html> <body> <p> <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body> </html>
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>
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 3499910bf9dac5ae3c52d5ede7383485
Il existe deux manières d'utiliser la balise 3499910bf9dac5ae3c52d5ede7383485 :
En utilisant l'attribut href - créer un lien vers un autre Un lien vers un document
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>
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>
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>
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>
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>
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>
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>
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>
这个例子演示如何在 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>
本例演示各种类型的表格边框。
表格
表格由 f5d188ed2c074f8b944552db028f98a1 标签来定义。每个表格均有若干行（由 a34de1251f0d9fe1e645927f19a896e8 标签定义），每行被分割为若干单元格（由 b6c5a531a458a2e790c1fd6421739d1c 标签定义）。字母 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>
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格
<table border="1"><tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
表格的表头
表格的表头使用 b4d429308760b6c2d20d6300079ed38e 标签进行定义。
<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>
在浏览器显示如下：
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 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>
在浏览器显示如下：
| row 1, cell 1 | row 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>
在浏览器中显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
基本的注意事项 - 有用的提示：
ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a 和 06669983c3badb677f993a8c29d18845很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。
3.HTML 列表
<html> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
本例演示无序列表。
<html> <body> <h4>一个有序列表：</h4> <ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> </body> </html>
有序列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 ff6d136ddc5fdfeffaf53ff6ee95f185 标签。每个列表项始于 25edfb22a4f469ecb59f1190150159c6。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
浏览器显示如下：
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 c34106e0b4e09414b63b2ea253ff83d6 标签。每个列表项始于 25edfb22a4f469ecb59f1190150159c6 标签。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
浏览器显示如下：
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 5c69336ffbc20d23018e48b396cdd57a 标签开始。每个自定义列表项以 73de882deff7a050a357292d0a1fca94 开始。每个自定义列表项的定义以 67bc4f89d416b0b8236eaa5f43dee742 开始。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!