Heim > Artikel > Web-Frontend > Detaillierte Erklärung, was HTML-Anker sind
Detaillierte Erklärung, was HTML-Anker sind
- PHPzOriginal
- 2017-04-02 09:24:302623Durchsuche
Der erste Schritt beim Erlernen von Webkenntnissen ist definitiv HTML. Wofür ist der Ankerpunkt von HTML?
Vereinfacht ausgedrückt: Wenn Sie beispielsweise einen sehr langen Artikel segmentweise genau lesen möchten, können Sie Ankerpunkte verwenden.
Code:
<a href="#001">跳到001</a> …文字省略 <a name="001" id="001" ></a> …文字省略
Tatsächlich muss der Name des Ankerpunkts hinzugefügt werden, um die Kompatibilität zu erhöhen.
Der Wert von href muss sein Der gleiche Name wie i d ist konsistent und „#“ muss vorangestellt werden. Der obige Code ist in ie6/7 und ff kompatibel, jedoch nicht in ie8.
Da der -Wert unseres Ankerpunkts leer ist, können wir einfach ein Leerzeichen hinzufügen, um die Ästhetik nicht zu beeinträchtigen.
Der folgende Code ist kompatibel mit ie8
<a href="#001">跳到001</a> …文字省略 <a name="001" id="001" > & n b s p </a> …文字省略
Noch eine Frage: Möchten Sie einen bestimmten Ankerinhalt einer bestimmten Seite anzeigen (z. B. 321.html)?
Der Code lautet wie folgt
<a href="123.html#001">跳到001</a> …文字省略 <a name="001" id="001" > & n b s p </a> …文字省略
Alle Codeanzeigen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>锚点示例</title> </head> <body> <a name="A0" id="A0"></a> <a href="#A1">网页第一部分</a> <a href="#A2">网页第二部分</a> <div style="height:900px; background:#CCCCCC"></div> <a name="A1" id="A1"></a>1<a href="#A0">返回顶部</a> <div style="height:900px; background:#999999"></div> <a name="A2" id="A2"></a>2<a href="#A0">返回顶部</a> <div style="height:900px; background:#666666"></div> </body> </html>
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, was HTML-Anker sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!