Die Semantik, Schreibmethoden und Best Practices der Link-A_HTML/Xhtml_Web-Seitenproduktion

Die Semantik, das Schreiben und die Best Practices von Link A.
Ich habe dieses Thema auf JavaEye gesehen. Die Diskussion war sehr interessant und ich konnte nicht anders, als mitzumachen. Semantisches Denken
Zunächst einmal sind „Link a“ und „Button“ semantisch und können aus Gründen der Benutzerfreundlichkeit nicht ersetzt werden. a ist die Abkürzung für Anker, ein Ankerpunkt, der zur Navigation oder Positionierung verwendet wird. Typische Verwendung ist:
W3C-Website Dies ist der Standort von Anker eins. Link zum Anker eins
Sie können auch die Namens- und href-Attribute gleichzeitig angeben. Dies ist Grundwissen. Wenn Sie Fragen haben, lesen Sie bitte die HTML 4.01-Spezifikation.
Lassen Sie uns über Schaltflächen sprechen (einschließlich Schaltfläche und ). Semantisch gesehen ist die Schaltfläche Teil des Formulars und die ausgelöste Aktion ist mit dem Formular verknüpft. Wenn überhaupt keine Formularaktion vorhanden ist, sollten Schaltflächen nicht verwendet werden. Nennen Sie einige Beispiele:

Das obige Bild zeigt einige Links. Obwohl sie wie Schaltflächen aussehen, ist ihre Semantik eine.

Die Anzeige- und Sortierschaltflächen im obigen Bild sind Aktionsformular. Semantisch gesehen ist „Button“ oder „Input“ besser geeignet. (Hinweis: Die Suchergebnisseite von Taobao verwendet derzeit a. Dies dient der progressiven Verbesserung, die weiter unten erwähnt wird.)
Kurz gesagt, Links und Schaltflächen haben ihre eigene Semantik und Verwendungsszenarien und können nicht austauschbar verwendet werden. Schreibanalyse
Die Welt ist nie so einfach. In der heutigen Webwelt, in der JavaScript in vollem Gange ist, wird Link a oft verwendet, um js-Ereignisse auszulösen:
Test 1 >Test 2 >Test 3 Test 4
Erstens ist die erste Schreibweise unter IE problematisch, da href unter IE automatisch vervollständigt wird.
Die zweite Schreibweise blockiert direkt das Standardereignis im Onclick-Ereignis, sodass das # in href="#" tatsächlich ein beliebiger Wert sein kann. Verwenden Sie #, um zu berücksichtigen, dass Sie nach dem Klicken auf dieser Seite bleiben, wenn kein js vorhanden ist (Hinweis: Wenn sich a unter einem Bildschirm befindet, führt diese Schreibmethode dazu, dass die Seite nach oben zurückgerollt wird).
Bei der dritten Schreibweise ist der href-Wert ein JavaScript-Pseudoprotokoll und void ein unärer Operator von JavaScript (z. B. !, typeof). Die Funktion des void-Operators besteht darin, nur den folgenden Ausdruck auszuführen und keinen Wert zurückzugeben. Es scheint, dass void(0) das Standardereignis blockiert. Tatsächlich sind die folgenden Schreibmethoden in Ordnung:
>Test 3 >Test 3 >Test 3 >Test 3
Da die Standardoperation von a der Inhalt des JavaScript-Pseudoprotokolls ist, werden andere Ereignisse nicht ausgelöst, unabhängig davon, ob void hinzugefügt wird oder nicht. (Hinweis: Unter Opera wird die href geändert, wenn im Pseudoprotokoll ein Rückgabewert vorhanden ist. Daher schreiben wir normalerweise void (0) oder eine leere Anweisung.)
Nachdem Sie die dritte Schreibweise verstanden haben, werden Sie auch die vierte Schreibweise verstehen: href="javascript: void Something()". Ein „Vorteil“ dieser Schreibweise besteht darin, dass, wenn die Maus schwebt, die Der Benutzer kann über die Statusleiste die auszuführende Funktion anzeigen. Für Entwickler mag das ein Vorteil sein, aber wird es für normale Benutzer wirklich das Vertrauen stärken? Oder ist es ein Gefühl der Angst? Ohne Daten können keine Schlussfolgerungen gezogen werden.
Zusätzlich zu der oben genannten Schreibmethode besteht eine weitere empfohlene Schreibmethode darin, einen Hook zu einer Durchgangsklasse oder ID hinzuzufügen und dann Ereignisse über den Hook in js hinzuzufügen. Spiegelung
Ich möchte nicht darüber diskutieren, welche der verschiedenen oben genannten Schreibmethoden die beste ist. Denken wir über die ursprüngliche Frage nach: Warum verwenden wir a, um js-Ereignisse auszulösen? Die Gründe, die mir einfallen, sind:

Auf diese Weise erhalten Sie automatisch den Mauszeigerstil. Jeder schreibt das Mir fällt wirklich kein Grund ein. Ist das nicht eine natürliche Sache? Da IE6 nur den CSS-Stil a:hover unterstützt und href nicht leer sein darf.

Es ist ersichtlich, dass es außer dem schwebenden Stil keinen wesentlichen Grund gibt. Lassen wir das Stilproblem vorerst beiseite und schauen wir uns ein Beispiel an:

Das Obige ist die Aktionsleiste von Google Reader. Wenn Sie interessiert sind, können Sie sie mit einem Firebug versehen.

Der Mauszeiger-Stil ist überhaupt kein Problem:

Fügen Sie einfach den Cursor: Zeiger zum CSS hinzu.
Aus dem obigen Beispiel können wir eine Schlussfolgerung ziehen: Wenn Sie nur js-Aktionen ohne Navigations- oder Positionierungssemantik auslösen, verwenden Sie einfach span oder andere geeignete Tags. Es besteht keine Notwendigkeit, a falsch zu verwenden (die Verwendung von a führt zu Problemen: Eine davon ist). Entfernen Sie die Standardereignisse, und zum anderen werden die Informationen in der Statusleiste normale Benutzer verwirren oder sogar erschrecken.
Wenn es sich natürlich um einen Link selbst handelt und Sie vor der Navigation nur etwas JS-Logik oder Anwendungen wie die Formularsortierung hinzufügen möchten, besteht die beste Vorgehensweise aus Sicht der progressiven Verbesserung darin, den gesamten href-Wert so zu schreiben Wenn der Browser js nicht unterstützt, kann die Verfügbarkeit ebenfalls garantiert werden. Best Practices
Es handelt sich weder um eine Zusammenfassung noch um eine endgültige Entscheidung. Es handelt sich lediglich um eine Reihe von Prinzipien. Denken Sie darüber nach, bevor Sie Code schreiben.

Verwenden Sie je nach Verwendungsszenario einen Link oder eine Schaltfläche. Die Schaltfläche ist ein Element, das sich auf das Formular bezieht. Missbrauchen Sie a nicht. Wenn Sie den href-Wert nicht herausfinden können (keine Javascript-Pseudoprotokolle, seien Sie nicht einsam #), verwenden Sie bitte andere Tags und fügen Sie Ereignisse in js über Hooks hinzu. Wenn es sich tatsächlich um einen Link handelt und es gleichzeitig ein Onclick-Ereignis gibt, denken Sie bitte über eine schrittweise Verbesserung nach, um die Integrität des href-Werts sicherzustellen

Code ist lebendig, das Tag-Königreich ist ein Zoo, mit ihnen vertraut, alles ist süß.