La sémantique, les méthodes d'écriture et les bonnes pratiques de production de liens A_HTML/Xhtml_Web page

La sémantique, la rédaction et les bonnes pratiques du lien A.
J'ai vu ce sujet sur JavaEye. La discussion était assez intéressante et je n'ai pas pu m'empêcher d'y participer. pensée sémantique
Tout d'abord, le lien a et le bouton bouton sont sémantiques et ne peuvent pas être remplacés pour des raisons de commodité d'utilisation. a est l'abréviation de Anchor, qui est un point d'ancrage utilisé pour la navigation ou le positionnement. L'utilisation typique est :
Site Web du W3C C'est l'emplacement de l'ancre numéro un. Lien pour en ancrer un
Vous pouvez également spécifier les attributs name et href en même temps. Il s'agit de 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 ). Sémantiquement parlant, le bouton fait partie du formulaire et l'action déclenchée est associée au formulaire. S’il n’y a aucune action de formulaire, les boutons ne doivent pas être utilisés. Donnez quelques exemples :

L'image ci-dessus représente quelques liens Bien qu'ils ressemblent à des boutons, leur sémantique est une.

Les boutons d'affichage et de tri dans l'image ci-dessus sont. Formulaire d'action. Sémantiquement parlant, un bouton ou une entrée est plus approprié. (Remarque : la page de résultats de recherche de Taobao utilise actuellement a. Ceci dans un souci d'amélioration progressive, qui sera mentionnée ci-dessous)
En bref, les liens et les boutons ont leur propre sémantique et leurs propres scénarios d'utilisation et ne peuvent pas être utilisés de manière interchangeable. Analyse de la rédaction
Le monde n'est jamais aussi simple. Dans le monde Web d'aujourd'hui où JavaScript bat son plein, le lien a est souvent utilisé pour déclencher des événements js :
essai 1 >essai 2 >essai 3 essai 4
Tout d'abord, la première façon d'écrire est problématique sous IE car href sera automatiquement renseigné sous IE.
La deuxième façon d'écrire bloque directement l'événement par défaut dans l'événement onclick, donc le # dans href="#" peut en fait être n'importe quelle valeur. Utilisez # pour considérer que lorsqu'il n'y a pas de js, vous resterez sur cette page après avoir cliqué (remarque : lorsque a est en dessous d'un écran, cette méthode d'écriture fera revenir la page vers le haut).
Dans la troisième façon d'écrire, la valeur href est un pseudo-protocole JavaScript, et void est un opérateur unaire de JavaScript (tel que !, typeof). La fonction de l'opérateur void est d'exécuter uniquement l'expression suivante et de ne renvoyer aucune valeur. Il semble que void(0) bloque l'événement par défaut. En fait, les méthodes d'écriture suivantes conviennent :
>essai 3 >essai 3 >essai 3 >essai 3
Étant donné que l'opération par défaut de a est le contenu du pseudo-protocole JavaScript, les autres événements ne seront pas déclenchés, que void soit ajouté ou non. (Remarque : sous Opera, lorsqu'il y a une valeur de retour dans le pseudo-protocole, le href sera modifié, nous écrivons donc généralement void (0) ou une instruction vide)
Après avoir compris la troisième façon d'écrire, vous comprendrez également la quatrième façon d'écrire : href="javascript: void Something()". Un "avantage" de cette façon d'écrire est que lorsque la souris survole, le l'utilisateur peut le visualiser via la barre d'état jusqu'à la fonction à exécuter. Pour les développeurs, cela peut être un avantage, mais pour les utilisateurs ordinaires, cela augmentera-t-il réellement la confiance ? Ou est-ce un sentiment de peur ? Sans données, aucune conclusion ne peut être tirée.
En plus de la méthode d'écriture ci-dessus, une autre méthode d'écriture recommandée consiste à ajouter un hook à une classe ou un identifiant via, puis à ajouter des événements via un hook dans js. Réflexion
Je ne veux pas discuter laquelle des différentes méthodes d’écriture ci-dessus est la meilleure. Réfléchissons à la question initiale : Pourquoi utilisons-nous a pour déclencher des événements js ? Les raisons auxquelles je peux penser sont :

De cette façon, vous aurez automatiquement le style de survol de la souris. Tout le monde écrit ça Je ne vois vraiment aucune raison. N’est-ce pas une chose naturelle ? Parce qu'IE6 ne prend en charge que le style CSS a:hover et href ne peut pas être vide.

On voit qu'à part le style flottant, il n'y a aucune raison substantielle. Laissons de côté le problème de style pour l'instant et regardons un exemple :

Ce qui précède est la barre d'action de Google Reader. Si vous êtes intéressé, vous souhaiterez peut-être la lancer. Les balises utilisées sont :

Le style de survol de la souris n'est pas du tout un problème :

Ajoutez simplement un curseur : pointeur vers le CSS.
De l'exemple ci-dessus, nous pouvons tirer une conclusion : si vous déclenchez uniquement des actions js sans aucune sémantique de navigation ou de positionnement, utilisez simplement span ou d'autres balises appropriées. Il n'est pas nécessaire d'utiliser a de manière incorrecte (l'utilisation de a causera des problèmes : la première consiste à le faire). supprimer les événements par défaut, et l'autre est que les informations dans la barre d'état confondront ou même effrayeront les utilisateurs ordinaires).
Bien sûr, s'il s'agit d'un lien lui-même et que vous souhaitez simplement ajouter un peu de logique js avant la navigation, ou des applications telles que le tri de formulaires, du point de vue de l'amélioration progressive, la meilleure pratique est d'écrire la valeur href entière ainsi que s'il n'est pas pris en charge par le navigateur js, la disponibilité peut également être garantie. meilleures pratiques
Ce n'est pas un résumé, ni une décision finale. Les « meilleures pratiques » sont juste une série de principes. Pensez-y avant d'écrire du code :

Utilisez le lien a ou le bouton, selon le scénario d'utilisation spécifique. Le bouton est un élément lié au formulaire. N'abusez pas de a. Lorsque vous ne parvenez pas à comprendre quelle est la valeur href (vous n'avez pas de pseudo-protocoles javascript, ne soyez pas seul #), veuillez utiliser d'autres balises et ajouter des événements dans js via des hooks. S'il s'agit bien d'un lien et qu'il y a un événement onclick en même temps, pensez à une amélioration progressive pour garantir l'intégrité de la valeur href

Le code est vivant, le royaume des tags est un zoo, je les connais, tout est mignon.