Heim > Artikel > Web-Frontend > Grundkenntnisse in der Webseitenerstellung (HTML) (4) Ausführliche Erläuterung der Links
Grundkenntnisse in der Webseitenerstellung (HTML) (4) Ausführliche Erläuterung der Links
- 零下一度Original
- 2017-05-06 13:40:351817Durchsuche
1.HTML-Link
<html> <body> <p> <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body> </html>
Dieses Beispiel zeigt, wie man einen Link in einem HTML-Dokument erstellt.
<html> <body> <p> 您也可以使用图像来作链接： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> </body> </html>
Dieses Beispiel zeigt, wie man ein Bild als Link verwendet.
HTML Hyperlink(Link)
Hyperlink kann ein Wort, ein Wort oder eine Gruppe von Wörtern sein. Oder es kann ein Bild sein, auf das Sie klicken können, um zu einem neuen Dokument oder einem bestimmten Teil des aktuellen Dokuments zu springen.
Wenn Sie den Mauszeiger über einen Link auf der Webseite bewegen, verwandelt sich der Pfeil in eine kleine Hand.
Wir erstellen Links in HTML mithilfe des 3499910bf9dac5ae3c52d5ede7383485-Tags.
Es gibt zwei Möglichkeiten, das 3499910bf9dac5ae3c52d5ede7383485-Tag zu verwenden:
Durch die Verwendung des href-Attributs – erstellen ein Link zu einem anderen. Ein Link zu einem Dokument
unter Verwendung des Namensattributs – erstellt ein Lesezeichen innerhalb des Dokuments
Erweiterte Lektüre: Was ist Hypertext?
HTML-Link-Syntax
Der HTML-Code des Links ist sehr einfach. Es sieht so aus:
<a href="url">Link text</a>
Das href-Attribut gibt das Ziel des Links an.
Der Text zwischen dem öffnenden Tag und dem schließenden Tag wird als Hyperlink angezeigt.
Instanz
<a href="www.php.cn/">Visit php</a>
Die obige Codezeile wird angezeigt: PHP besuchen
Klicken Dieser Hyperlink führt den Benutzer zur Homepage von PHP.
Tipp: „Linktext“ muss kein Text sein. Bilder oder andere HTML-Elemente können zu Links werden.
HTML-Links – Zielattribut
Mit dem Zielattribut können Sie definieren, wo das verknüpfte Dokument angezeigt wird.
Die folgende Zeile öffnet das Dokument in einem neuen Fenster:
<a href="http://www.php.cn/" target="_blank">Visit W3School!</a>
Probieren Sie es selbst aus
HTML-Link - Namensattribut
Das Namensattribut gibt den Namen des Ankers an. Das Namensattribut
name wird zum Erstellen von Lesezeichen in HTML verwendet.
Das Lesezeichen wird nicht auf besondere Weise angezeigt und ist für den Leser unsichtbar.
Bei der Verwendung benannter Anker können wir Links erstellen, die direkt zu einem Abschnitt der Seite springen, sodass Benutzer nicht weiter scrollen müssen, um die benötigten Informationen zu finden.
Syntax zur Benennung von Ankern:
<a name="label">Text to be displayed</a>
Tipp: Der Name des Ankers kann beliebig sein.
Instanz
Benannter Anker in einem HTML-Dokument:
<a name="tips">Useful Tips Section</a>
Dann erstellen wir einen Zeiger auf denselben Dokument Link zum Abschnitt „Hilfreiche Tipps“ im Dokument:
<a href="#tips">Visit the Useful Tips Section</a>
Alternativ können Sie von einer anderen Seite einen Link zum Abschnitt „Hilfreiche Tipps“ des Dokuments erstellen:
<a href="www.w3school.com.cn/html_links.htm#tips"> Visit the Useful Tips Section </a>
Im obigen Code fügen wir das #-Symbol und den Ankernamen am Ende der URL hinzu, damit wir direkt auf die Tipps mit dem Namen „Anker“ verlinken können.
Spezifische Wirkungen: Nützliche Tipps
Grundlegende Hinweise - Nützliche Tipps:
HINWEIS : Fügen Sie Unterordnern immer Schrägstriche hinzu. Wenn der Link so geschrieben ist: href="www.w3school.com.cn/html", werden zwei HTTP-Anfragen an den Server generiert. Dies liegt daran, dass der Server der Adresse einen Schrägstrich hinzufügt und dann eine neue Anfrage erstellt, etwa so: href="www.w3school.com.cn/html/".
Tipp: Benannte Anker werden oft verwendet, um ein Inhaltsverzeichnis am Anfang großer Dokumente zu erstellen. Sie können jedem Kapitel einen benannten Anker zuweisen und dann Links zu diesen Ankern oben im Dokument platzieren. Wenn Sie die Baidu-Enzyklopädie häufig besuchen, werden Sie feststellen, dass fast jeder Eintrag darin diese Navigationsmethode verwendet.
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
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开发手册
Das obige ist der detaillierte Inhalt vonGrundkenntnisse in der Webseitenerstellung (HTML) (4) Ausführliche Erläuterung der Links. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!