La sémantique, l'écriture et les meilleures pratiques du lien A.
Voyant ce sujet à Javaeye, la discussion a été assez intéressante, et je ne pouvais pas m'empêcher de m'impliquer. Pensée sémantique
Tout d'abord, le bouton de lien A et du bouton est sémantique et ne peut pas être remplacé en raison de la commodité utilisée. A est l'abréviation de l'ancre, un point d'ancrage utilisé pour naviguer ou localiser. L'utilisation typique est:
<a href = http: //www.w3c.org/> w3c site web </a> <a name = anchor-one> Ceci est l'emplacement de l'ancrage. </a> <a href = # anchor-one> lien to ancre one </a>
Vous pouvez également spécifier le nom et les attributs HREF en même temps. Ce sont les connaissances de base. Si vous avez des questions, veuillez vous référer à la spécification HTML 4.01.
Parlons des boutons (y compris le bouton et <entrée type = bouton / soumis />). Sémantiquement, un bouton fait partie d'une forme et l'action déclenchée est associée à la forme. S'il n'y a pas de fonctionnement de formulaire du tout, vous ne devez pas utiliser de boutons. Donnez quelques exemples:
L'image ci-dessus est quelques liens, bien qu'il ressemble à un bouton, il est sémantiquement a.
Les boutons d'affichage et de tri de la figure ci-dessus sont le formulaire de fonctionnement. Sémantiquement, il est plus approprié d'utiliser le bouton ou l'entrée. (Remarque: la page de résultats de recherche de Taobao utilise actuellement A, qui est pour le souci de l'amélioration progressive, et sera mentionnée ci-dessous)
En bref, les liens et les boutons ont leurs propres scénarios de sémantique et d'utilisation et ne peuvent pas être remplacés à volonté. Analyse de l'écriture
Le monde n'est jamais aussi simple. Dans JavaScript Web World d'aujourd'hui, le lien A est souvent utilisé pour déclencher des événements JS:
<a href = onclick = quelque chose ()> test 1 </a> <a href = # onclick = quelque chose (); return false >> test 2 </a> <a href = javascript: void (0) onclick = quelque chose () >> Test 3 </a> <a href = javascript: void quelque chose () >> TEST 4 </a>
Tout d'abord, il y a un problème avec la première méthode d'écriture, car le HREF sera automatiquement terminé sous l'IE.
La deuxième façon de l'écrire empêche directement l'événement par défaut dans l'événement OnClick, donc # dans href = # peut en fait être n'importe quelle valeur. L'utilisation de # consiste à considérer que lorsqu'il n'y a pas de JS, il restera sur cette page après avoir cliqué (Remarque: Lorsque A est en dessous d'un écran, cette méthode d'écriture fera le retourner en haut de la page).
La troisième façon d'écrire est que la valeur HREF est un pseudo-protocol JavaScript, et Void est un opérateur unaire de JavaScript (tel que!, Typeof). La fonction de l'opérateur void consiste à exécuter uniquement l'expression suivante et à ne renvoyer aucune valeur. Il semble que Void (0) bloque l'événement par défaut, mais en fait, les méthodes d'écriture suivantes sont bien:
<a href = javascript: void (1) onClick = quelque chose () >> test 3 </a> <a href = javascript:; onClick = quelque chose () >> Tester 3 </a> <a href = javascript: onclick = quelque chose () >> test 3 </a> <a href = javascript: return true onclick = quelque chose () >> test 3 </a>
Étant donné que le fonctionnement par défaut de A est le contenu du pseudo-protocole JavaScript, l'ajout de void ou non déclenchera d'autres événements. (Remarque: Sous Opera, lorsqu'il y a une valeur de retour dans le pseudo-protocole, le HREF sera modifié, donc nous écrivons généralement void (0) ou des instructions vides)
Après avoir compris la troisième façon d'écrire, vous comprendrez la quatrième façon d'écrire: href = javascript: void quelque chose (). Un avantage de cette manière est que lorsque la souris est suspendue, l'utilisateur peut voir la fonction exécutée via la barre d'état. Cela peut être un avantage pour les développeurs, mais pour les utilisateurs ordinaires, cela augmentera-t-il vraiment la confiance? Ou est-ce un sentiment de peur? Sans données, vous ne pouvez pas tirer des conclusions.
En plus de la méthode d'écriture ci-dessus, il existe une autre méthode d'écriture recommandée, qui consiste à ajouter un crochet à une classe ou à ID, puis à ajouter des événements via Hook dans JS. Réflexion
Je ne veux pas discuter de laquelle des styles d'écriture ci-dessus est le meilleur. Pensons à la question d'origine: pourquoi utilisons-nous un pour déclencher des événements JS? Les raisons auxquelles je peux penser sont:
On peut voir qu'en dehors du style flottant, il n'y a pas de raison substantielle. Mettons de côté le problème de style pour le moment et jetons un coup d'œil à un exemple:
Ce qui précède est la barre d'opération de Google Reader. Si vous êtes intéressé, vous pourriez aussi bien le Firebug. La balise utilisée est:
Le style suspendu de la souris n'est pas du tout un problème:
Dans CSS, ajoutez simplement le curseur: pointeur.
D'après l'exemple ci-dessus, nous pouvons tirer une conclusion: si vous déclenchez simplement l'action JS sans aucune sémantique de navigation ou de positionnement, vous pouvez utiliser Span ou d'autres balises appropriées, et il n'est pas nécessaire d'utiliser une incorrectement (en utilisant un causera des problèmes: vous devez d'abord supprimer l'événement par défaut, et deuxièmement, les informations dans la barre d'état confondre ou même la peur des utilisateurs ordinaires).
Bien sûr, s'il s'agit d'un lien lui-même, vous voulez simplement ajouter des applications JS Logic ou de Tri Forms avant la navigation, en le considérant du point de vue de l'amélioration progressive, la meilleure pratique consiste à rédiger toutes les valeurs HREF afin que dans les navigateurs qui ne prennent pas en charge JS, la convivialité puisse être garantie. Meilleures pratiques
Ce n'est pas un résumé, ce n'est pas une finalisation unique. La meilleure pratique n'est qu'une série de principes. Il faut y penser avant d'écrire du code:
Les codes ont la vie, Tag Kingdom est un zoo, familier avec eux, tout est charmant.