Link As Semantik, Schreiben und Best Practices.
Als ich dieses Thema in Javaeye sah, war die Diskussion sehr interessant, und ich konnte nicht anders, als mich zu engagieren. Semantisches Denken
Zunächst sind die Taste der Link A und die Schaltfläche semantisch und können aufgrund der Verwendung nicht ersetzt werden. A ist die Abkürzung von Anker, einem Ankerpunkt, der zum Navigieren oder zur Lokalisierung verwendet wird. Typische Verwendung ist:
<a href = http: //www.w3c.org/> W3C-Website </a> <a name = Anchor-one> Dies ist der Speicherort von Anchor.
Sie können auch gleichzeitig den Namen und die HREF -Attribute angeben. Dies ist das Grundwissen. Wenn Sie Fragen haben, lesen Sie bitte die HTML 4.01 -Spezifikation.
Lassen Sie uns über Schaltflächen sprechen (einschließlich Taste und <Eingabetyp = Taste /Senden />). Semantisch ist ein Knopf Teil einer Form, und die ausgelöste Aktion ist der Form zugeordnet. Wenn es überhaupt keine Formularbetrieb gibt, sollten Sie keine Tasten verwenden. Geben Sie einige Beispiele an:
Das obige Bild ist einige Links, obwohl es wie ein Knopf aussieht, ist es semantisch a.
Die Anzeige- und Sortierschaltflächen in der obigen Abbildung sind das Betriebsformular. Semantisch ist es angemessener, Taste oder Eingabe zu verwenden. (Hinweis: Die Seite der Suchergebnisse in Taobao verwendet derzeit A, das für die allmähliche Verbesserung willen und unten erwähnt wird)
Kurz gesagt, Links und Schaltflächen haben ihre eigenen Semantik- und Nutzungsszenarien und können nicht nach Belieben ersetzt werden. Schreibanalyse
Die Welt ist nie so einfach. In der heutigen JavaScript -Webwelt wird Link A häufig verwendet, um JS -Ereignisse auszulösen:
<a href = onclick = etwas ()> test 1 </a> <a href =# onclick = treffend (); Rückgabe falsch >> test 2 </a> <a href = javaScript: void (0) Onclick = the test () >> test 3 </a> <a href = javascript: void ton etwas ()> 4 </a>
Erstens gibt es ein Problem mit der ersten Schreibmethode, da der HREF unter dem IE automatisch abgeschlossen wird.
Die zweite Möglichkeit, es direkt zu schreiben, verhindert direkt das Standard -Ereignis im Onclick -Ereignis, daher kann # in href = # tatsächlich ein beliebiger Wert sein. Die Verwendung von # soll berücksichtigen, dass es nach Klicken auf dieser Seite auf dieser Seite bleibt (Hinweis: Wenn A unter einem Bildschirm liegt, wird diese Schreibmethode nach oben zurückrollen).
Die dritte Art des Schreibens besteht darin, dass der HREF-Wert ein JavaScript-Pseudo-Protokoll ist und Void ein unärer Operator von JavaScript (wie!, Typof). Die Funktion des Hohlraumoperators besteht darin, nur den folgenden Ausdruck auszuführen und keinen Wert zurückzugeben. Es scheint, dass void (0) das Standardereignis blockiert, aber tatsächlich sind die folgenden Schreibmethoden in Ordnung:
<a href = javaScript: void (1) onclick = there () >> Test 3 </a> <a href = javaScript:; onclick = there () >> test 3 </a> <a href = javaScript: onclick = there () >> test 3 </a> <a href = javaScript: Return true Onclick = Anything () >> Test 3 </a>
Da der Standardvorgang von A der Inhalt des JavaScript-Pseudo-Protokolls ist, wird das Hinzufügen von Leere oder nicht andere Ereignisse ausgelöst. (Hinweis: Unter Opera wird der HREF geändert, wenn im Pseudo-Protokoll ein Rückgabewert vorliegt, sodass wir normalerweise Leere (0) oder leere Anweisungen schreiben.
Nachdem Sie die dritte Art des Schreibens verstanden haben, werden Sie die vierte Art des Schreibens verstehen: href = javaScript: void etwas (). Ein Vorteil dieser Art ist, dass der Benutzer, wenn die Maus suspendiert wird, die Funktion sehen kann, die über die Statusleiste ausgeführt wird. Dies mag ein Vorteil für Entwickler sein, aber für normale Benutzer wird dies das Vertrauen wirklich erhöhen? Oder ist es ein Gefühl der Angst? Ohne Daten können Sie keine Schlussfolgerungen ziehen.
Zusätzlich zur oben genannten Schreibmethode gibt es eine weitere empfohlene Schreibmethode, bei der ein Haken zu einem Durchgang oder einer ID hinzugefügt und dann Ereignisse über Hook in JS hinzugefügt wird. Spiegelung
Ich möchte nicht diskutieren, welche der oben genannten Schreibstile am besten sind. Denken wir über die Ursprungsfrage nach: Warum verwenden wir A, um JS -Ereignisse auszulösen? Die Gründe, an denen ich denken kann, sind:
Es ist zu sehen, dass es abgesehen vom schwimmenden Stil keinen wesentlichen Grund gibt. Lassen Sie uns vorerst das Stilproblem beiseite legen und ein Beispiel ansehen:
Das obige ist die Operationsleiste von Google Reader. Wenn Sie interessiert sind, können Sie es genauso gut feuern. Das verwendete Tag ist:
Der suspendierte Stil der Maus ist überhaupt kein Problem:
Fügen Sie in CSS einfach Cursor: Zeiger hinzu.
Aus dem obigen Beispiel können wir eine Schlussfolgerung ziehen: Wenn Sie nur die JS -Aktion ohne Navigation oder Positionierungssemantik auslösen, können Sie Span oder andere geeignete Tags verwenden, und es ist nicht erforderlich, eine falsche Verwendung zu verwenden (mit einem Testament zu Problemen zu verursachen: Erstens müssen Sie das Standard -Ereignis entfernen, und zweitens die Informationen in der Statusleiste verwirren oder haben sogar Angst gewöhnliche Benutzer).
Wenn es sich selbst um einen Link selbst handelt, möchten Sie natürlich nur einige JS -Logik- oder Formularsortierungsanwendungen vor der Navigation hinzufügen. Wenn Sie sie aus einer allmählichen Verbesserungsperspektive berücksichtigen, besteht die beste Praxis darin, alle HREF -Werte zu schreiben, sodass in Browsern, die JS nicht unterstützen, die Benutzerfreundlichkeit garantiert werden kann. Best Practices
Es ist keine Zusammenfassung, es ist keine einmalige Abschluss. Best Practice ist nur eine Reihe von Prinzipien. Es ist notwendig, darüber nachzudenken, bevor Sie Code schreiben:
Codes haben Leben, Tag Kingdom ist ein Zoo, der mit ihnen vertraut ist, alles ist schön.