Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Grundkenntnisse in der Webseitenerstellung (HTML) (4) Ausführliche Erläuterung der Links

零下一度
Freigeben： 2017-05-06 13:40:35
Original
1801 Leute haben es durchsucht

1.HTML-Link

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

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

</body>
</html>
Nach dem Login kopieren

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>
Nach dem Login kopieren


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 -Tags.

Es gibt zwei Möglichkeiten, das -Tag zu verwenden:

  1. Durch die Verwendung des href-Attributs – erstellen ein Link zu einem anderen. Ein Link zu einem Dokument

  2. 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Tipp: Der Name des Ankers kann beliebig sein.

Instanz

Benannter Anker in einem HTML-Dokument: 

<a name="tips">Useful Tips Section</a>
Nach dem Login kopieren

Dann erstellen wir einen Zeiger auf denselben Dokument Link zum Abschnitt „Hilfreiche Tipps“ im Dokument: 

<a href="#tips">Visit the Useful Tips Section</a>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

这个例子演示如何在 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>
Nach dem Login kopieren

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

表格

表格由

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

3.HTML 列表

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

</body>
</html>
Nach dem Login kopieren

本例演示无序列表。

<html>
<body>

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

</body>
</html>
Nach dem Login kopieren

有序列表

无序列表

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

无序列表始于

标签定义）。字母 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>
Nach dem Login kopieren

在浏览器显示如下：

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>
Nach dem Login kopieren

表格的表头

表格的表头使用

标签进行定义。

<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>
Nach dem Login kopieren

在浏览器显示如下：

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>
Nach dem Login kopieren

在浏览器显示如下：

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>
Nach dem Login kopieren

在浏览器中显示如下：

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


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