Enlace la semántica, la escritura y las mejores prácticas de A.
Al ver este tema en Javaeye, la discusión fue bastante interesante, y no pude evitar involucrarme. Pensamiento semántico
En primer lugar, el enlace A y el botón del botón son semánticos y no se pueden reemplazar debido a la conveniencia en uso. A es la abreviatura del ancla, un punto de anclaje utilizado para navegar o ubicar. El uso típico es:
<a href = http: //www.w3c.org/> w3c sitio web </a> <a name = fallor-one> Esta es la ubicación de Anchor One. </a> <a href =######one> Link para Anchor One </a>
También puede especificar el nombre y los atributos HREF al mismo tiempo. Este es el conocimiento básico. Si tiene alguna pregunta, consulte la especificación HTML 4.01.
Hablemos de los botones (incluido el botón y <input type = button /shipt />). Semánticamente, un botón es parte de una forma, y la acción activada está asociada con la forma. Si no hay operación de formulario en absoluto, no debe usar botones. Dar algunos ejemplos:
La imagen de arriba es algunos enlaces, aunque parece un botón, es semánticamente a.
Los botones de visualización y clasificación en la figura anterior son el formulario de operación. Semánticamente, es más apropiado usar el botón o la entrada. (Nota: la página de resultados de búsqueda de Taobao usa actualmente A, que es por el bien de la mejora gradual, y se mencionará a continuación)
En resumen, los enlaces y los botones tienen sus propios escenarios de semántica y uso y no pueden ser reemplazados a voluntad. Análisis de escritura
El mundo nunca es tan simple. En el mundo web de JavaScript de hoy, el enlace A a menudo se usa para activar eventos JS:
<a href = onClick = something ()> test 1 </a> <a href =# onClick = something (); return false >> prueba 2 </a> <a href = javascript: void (0) onclick = something () >> prueba 3 </a> <a href = javaScript: void something ()> test 4 </a>
En primer lugar, hay un problema con el primer método de escritura, porque el HREF se completará automáticamente bajo el IE.
La segunda forma de escribirlo impide directamente el evento predeterminado en el evento OnClick, por lo que # en href = # en realidad puede ser cualquier valor. Usar # es considerar que cuando no hay JS, permanecerá en esta página después de hacer clic (nota: cuando A está debajo de una pantalla, este método de escritura hará que la página vuelva a la parte superior).
La tercera forma de escribir es que el valor HREF es un pseudoprotocol JavaScript, y Void es un operador unario de JavaScript (como!, Typeof). La función del operador Void es ejecutar solo la siguiente expresión y no devolver ningún valor. Parece que Void (0) bloquea el evento predeterminado, pero de hecho, los siguientes métodos de escritura están bien:
<a href = javaScript: void (1) onClick = something () >> prueba 3 </a> <a href = javaScript:; onClick = something () >> prueba 3 </a> <a href = javascript: onClick = something () >> prueba 3 </a> <a href = javascript: return true onClick = something () >> Prueba 3 </a>
Debido a que el funcionamiento predeterminado de A es el contenido del pseudoprotocol JavaScript, agregar nulo o no activará otros eventos. (Nota: Bajo Opera, cuando hay un valor de retorno en el pseudoprotocolo, el HREF se cambiará, por lo que generalmente escribimos void (0) o declaraciones vacías)
Después de comprender la tercera forma de escribir, comprenderá la cuarta forma de escribir: href = javaScript: void something (). Una ventaja de esta manera es que cuando el mouse está suspendido, el usuario puede ver que la función se ejecutará a través de la barra de estado. Esto puede ser un beneficio para los desarrolladores, pero para los usuarios comunes, ¿esto realmente aumentará la confianza? ¿O es una sensación de miedo? Sin datos, no puede sacar conclusiones.
Además del método de escritura anterior, hay otro método de escritura recomendado, que es agregar un gancho a una clase o ID a través de, y luego agregar eventos a través de gancho en JS. Reflexión
No quiero discutir cuál de los estilos de escritura anteriores es el mejor. Pensemos en la pregunta de origen: ¿Por qué usamos un para activar los eventos JS? Las razones por las que puedo pensar son:
Se puede ver que, aparte del estilo flotante, no hay una razón sustancial. Dejemos de lado el problema de estilo por el momento y echemos un vistazo a un ejemplo:
Lo anterior es la barra de operación de Google Reader. Si está interesado, también podría firebug. La etiqueta utilizada es:
El estilo suspendido del mouse no es un problema en absoluto:
En CSS, solo agregue cursor: puntero.
Del ejemplo anterior, podemos sacar una conclusión: si solo activa la acción JS sin ninguna semántica de navegación o posicionamiento, puede usar el tramo u otras etiquetas adecuadas, y no hay necesidad de usar incorrectamente (usando un problema: primero, debe eliminar el evento predeterminado, y segundo, la información en la barra de estado se confundirá o incluso los usuarios ordinarios).
Por supuesto, si se trata de un enlace en sí, solo desea agregar algunas aplicaciones de clasificación de lógica JS o clasificación de forma antes de la navegación, teniendo en cuenta que desde una perspectiva de mejora gradual, la mejor práctica es escribir todos los valores de HREF para que en los navegadores que no admitan JS, la usabilidad pueda garantizarse. Mejores prácticas
No es un resumen, no es una finalización única. La mejor práctica es solo una serie de principios. Es necesario pensar en ello antes de escribir código:
Los códigos tienen vida, Tag Kingdom es un zoológico, familiarizado con ellos, todo es encantador.