Semantik, Schreiben und bewährte Methoden für Link A
|
Die Semantik, der Schreibstil und die Best Practices von Link A. Ich habe dieses Thema auf JavaEye gesehen und die Diskussion war ziemlich interessant, also konnte ich nicht anders, als mich daran zu beteiligen. Semantisches Denken Zunächst einmal haben Links und Schaltflächen eine Semantik und können nicht einfach aus Gründen der Benutzerfreundlichkeit ersetzt werden. a ist die Abkürzung für „Anker“, also einen Ankerpunkt, der zur Navigation oder Positionierung dient. Typische Verwendung ist: <a href="http://www.w3c.org/">W3C-Website</a> <a name="anchor-one">Dies ist der Speicherort von Anker eins.</a> <a href="#anchor-one">Link zu Anker eins</a> Sie können auch gleichzeitig die Attribute name und href 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 <input type="button/submit" />). Semantisch ist die Schaltfläche Teil des Formulars und die von ihr ausgelöste Aktion steht in Zusammenhang mit dem Formular. Wenn überhaupt keine Formularaktion vorhanden ist, sollte keine Schaltfläche verwendet werden. Hier sind einige Beispiele:  Das obige Bild zeigt einige Links. Obwohl sie wie Schaltflächen aussehen, sind sie semantisch a.  Die Anzeige- und Sortierschaltflächen im obigen Bild sind die Operationsformulare. Semantisch gesehen ist „Button“ oder „Eingabe“ passender. (Hinweis: Die Taobao-Suchergebnisseite verwendet derzeit eins. Dies dient der fortschreitenden Verbesserung und wird weiter unten erläutert.) Kurz gesagt: Links und Schaltflächen haben ihre eigene Semantik und Verwendungsszenarien und können nicht beliebig ausgetauscht werden. Die Welt der Schreibanalyse 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: <a href="" onclick="etwas()">Test 1</a> <a href="#" onclick="etwas();return false">>Test 2</a> <a href="javascript: void(0)" onclick="etwas()">>Test 3</a> <a href="javascript: void etwas()">>Test 4</a> Zunächst einmal ist die erste Schreibweise im Internet Explorer problematisch, da der Internet Explorer das href automatisch vervollständigt. Die zweite Schreibweise blockiert das Standardereignis direkt im Onclick-Ereignis, sodass das # in href="#" tatsächlich jeden beliebigen Wert haben kann. Das # wird verwendet, um zu berücksichtigen, dass nach dem Klicken auf der aktuellen Seite verbleiben soll, wenn kein js vorhanden ist (Hinweis: Wenn a kleiner als ein Bildschirm ist, bewirkt diese Schreibmethode, dass die Seite wieder nach oben gescrollt wird). Die dritte Schreibweise besteht darin, dass der href-Wert ein JavaScript-Pseudoprotokoll ist und void ein unärer Operator in JavaScript ist (wie !, typeof). Die Funktion des Void-Operators besteht darin, nur den folgenden Ausdruck auszuführen, ohne einen Wert zurückzugeben. Es scheint, dass void(0) das Standardereignis verhindert. Tatsächlich sind die folgenden Ausdrücke alle korrekt: <a href="javascript: void(1)" onclick="etwas()">>Test 3</a> <a href="javascript:;" onclick="etwas()">>Test 3</a> <a href="javascript:" onclick="etwas()">>Test 3</a> <a href="javascript: return true" onclick="etwas()">>Test 3</a> Da die Standardoperation von a der Inhalt des JavaScript-Pseudoprotokolls ist, werden durch das Hinzufügen von void oder nicht andere Ereignisse nicht ausgelöst. (Hinweis: In Opera wird href geändert, wenn im Pseudoprotokoll ein Rückgabewert vorhanden ist. Daher schreiben wir normalerweise void(0) oder eine leere Anweisung.) Nach dem Verständnis der dritten Schreibweise wird auch die vierte Schreibweise klar: href="javascript: void something()". Ein "Vorteil" dieser Schreibweise ist, dass der Benutzer beim Bewegen der Maus über die Statusleiste die auszuführende Funktion sehen kann. Dies mag für Entwickler von Vorteil sein, aber wird dadurch wirklich das Vertrauen der normalen Benutzer gestärkt? Oder ist es ein Gefühl der Angst? Ohne Daten können keine Schlussfolgerungen gezogen werden. Zusätzlich zur oben beschriebenen Schreibmethode besteht eine weitere empfohlene Schreibmethode darin, einer Klasse oder ID einen Hook hinzuzufügen und dann Ereignisse über den Hook in js hinzuzufügen. Reflexion: Ich möchte nicht diskutieren, welche der oben genannten Schreibmethoden die beste ist. Lassen Sie uns über den Ursprung des Problems nachdenken: Warum verwenden wir ein , um JS-Ereignisse auszulösen? Die Gründe, die mir einfallen, sind:
Es ist ersichtlich, dass es außer dem schwebenden Stil keinen wesentlichen Grund gibt. Lassen wir das Stilthema für einen Moment beiseite und schauen uns ein Beispiel an:  Oben sehen Sie die Bedienleiste von Google Reader. Wenn Sie interessiert sind, können Sie Firebug verwenden, um sie zu überprüfen. Das verwendete Markup ist:  Der Hover-Stil der Maus ist überhaupt kein Problem:  Fügen Sie einfach Cursor: Zeiger in CSS hinzu. Aus dem obigen Beispiel können wir eine Schlussfolgerung ziehen: Wenn es nur darum geht, eine JS-Aktion ohne Navigations- oder Positionierungssemantik auszulösen, können span oder andere geeignete Tags verwendet werden. Es besteht kein Grund, a falsch zu verwenden (die Verwendung von a führt zu Problemen: Erstens wird das Standardereignis entfernt und zweitens 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 hinzufügen oder auf die Formularsortierung anwenden möchten, besteht aus Sicht der schrittweisen Verbesserung die beste Vorgehensweise darin, den vollständigen href-Wert zu schreiben, um die Benutzerfreundlichkeit auch in Browsern sicherzustellen, die JS nicht unterstützen. Best Practices sind keine Zusammenfassung oder ein abschließendes Wort. Best Practices sind lediglich eine Reihe von Grundsätzen, über die Sie nachdenken sollten, bevor Sie Code schreiben:
Code hat Leben, das Königreich der Tags ist ein Zoo, kennen Sie sie, alles ist süß. |
<<: Eine detaillierte Einführung in die Linux-Verzeichnisstruktur
>>: Erste Schritte mit den JavaScript-Grundlagen
Artikel empfehlen
Beispiel einer MySQL-Implementierung einer Volltextsuche und einer Methode zur Bewertung von Schlüsselwörtern
1. Einleitung Heute hat mich ein Kollege gefragt,...
Installations- und Konfigurationsschritte für die grüne Dekomprimierungsversion von MySQL
Schritte: 1. MySQL-Datenbank installieren 1. Lade...
Implementierung von webpack-dev-server zum Erstellen eines lokalen Servers
Inhaltsverzeichnis Vorwort Webpack-Deb-Server Sta...
Der MySQL-Tagesstatistikbericht trägt 0 ein, wenn für diesen Tag keine Daten vorliegen
1. Reproduktion des Problems: Zählen Sie die Gesa...
Zusammenfassung der MySQL-Injection-Bypass-Filtertechniken
Schauen wir uns zunächst den GIF-Vorgang an: Fall...
Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen
Effektbild: Vorwort: Kürzlich arbeitete ich an ei...
Implementierung des gemeinsamen Grid-Layouts
Keine Lücken auf beiden Seiten, Lücken zwischen j...
Schnellstart der Vue3-Dokumentation
Inhaltsverzeichnis 1. Einrichtung 1. Der erste Pa...
Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV
Seit der Einführung des contentEditable-Attributs ...
Detailliertes Tutorial zur Installation von Anaconda3 auf Ubuntu 18.04
Anaconda bezeichnet eine Open-Source-Python-Distr...
Beispielcode zur Implementierung einer Pivot-Tabelle in MySQL/MariaDB
Im vorherigen Artikel wurden mehrere Methoden zur...
Detaillierter Prozess der Installation von Jenkins-2.249.3-1.1 mit Docker
Inhaltsverzeichnis 1. Docker installieren 2. Zieh...
CSS3-Mauszeiger-Übergangszoomeffekt
Das Folgende ist ein Bild-Zoom-Effekt, der in rei...
So erstellen Sie ein Django-Projekt und stellen eine Verbindung zu MySQL her
1: django-admin.py startproject Projektname 2: CD...
Detaillierte Erklärung des einfachen Stores von Vue
Die einfachste Store-Anwendung in Vue ist die glo...