Link A's Semântica, redação e práticas recomendadas.
Vendo esse tópico em Javaeye, a discussão foi bastante interessante, e eu não pude deixar de me envolver. Pensamento semântico
Primeiro de tudo, o link A e o botão são semânticos e não podem ser substituídos devido à conveniência em uso. A é a abreviação da âncora, um ponto de ancoragem usado para navegar ou localizar. O uso típico é:
<a href = http: //www.w3c.org/> site w3c web </a> <a nome = anchor-one> Este é o local da âncora.
Você também pode especificar o nome e os atributos HREF ao mesmo tempo. Este é o conhecimento básico. Se você tiver alguma dúvida, consulte a especificação HTML 4.01.
Vamos falar sobre botões (incluindo botão e <Tipo de entrada = botão /submeter />). Semanticamente, um botão faz parte de um formulário e a ação acionada está associada ao formulário. Se não houver operação de formulário, você não deve usar botões. Dê alguns exemplos:
A imagem acima são alguns links, embora pareça um botão, é semanticamente um.
Os botões de exibição e classificação na figura acima são o formulário de operação. Semanticamente, é mais apropriado usar o botão ou entrada. (Nota: Atualmente, a página de resultados de pesquisa do Taobao usa A, que é por uma questão de aprimoramento gradual e será mencionado abaixo)
Em resumo, links e botões têm seus próprios cenários de semântica e uso e não podem ser substituídos à vontade. Análise de escrita
O mundo nunca é tão simples. No JavaScript Web World de hoje, o link A é frequentemente usado para desencadear eventos JS:
<a href = OnClick = something ()> Teste 1 </a> <a href =# onclick = something (); retorna false >> teste 2 </a> <a href = javascript: void (0) onclick = algo () >> teste 3 </a> <a href = javascript: void sobre algo ()>
Primeiro de tudo, há um problema com o primeiro método de escrita, porque o HREF será concluído automaticamente no IE.
A segunda maneira de escrevê -lo impede diretamente o evento padrão no evento OnClick, então # em href = # pode realmente ser qualquer valor. Usar # é considerar que, quando não houver JS, ele permanecerá nesta página depois de clicar (Nota: Quando A estiver abaixo de uma tela, este método de escrita fará com que a página volte para a parte superior).
A terceira maneira de escrever é que o valor do HREF é um pseudo-protocolo JavaScript, e o Void é um operador unário do JavaScript (como!, Typeof). A função do operador vazio é executar apenas a seguinte expressão e não retornar nenhum valor. Parece que o vazio (0) bloqueia o evento padrão, mas, de fato, os seguintes métodos de escrita são bons:
<a href = javascript: void (1) onclick = something () >> teste 3 </a> <a href = javascript:; ONCLICK = SOMA () >> Teste 3 </a> <a href = JavaScript: OnClick = SOMODO () >> Teste 3 </a> <a href = javascript: return true onclick = something () >> teste 3 </a>
Como a operação padrão de A é o conteúdo do pseudo-protocolo JavaScript, a adição de vazios ou não acionará outros eventos. (Nota: Em Opera, quando houver um valor de retorno no pseudo-protocolo, o HREF será alterado, por isso geralmente escrevemos declarações vazias (0) ou vazias)
Depois de entender a terceira maneira de escrever, você entenderá a quarta maneira de escrever: href = javascript: void Something (). Uma vantagem dessa maneira é que, quando o mouse é suspenso, o usuário pode ver a função a ser executada através da barra de status. Isso pode ser um benefício para os desenvolvedores, mas para usuários comuns, isso realmente aumentará a confiança? Ou é uma sensação de medo? Sem dados, você não pode tirar conclusões.
Além do método de escrita acima, há outro método de escrita recomendado, que é adicionar um gancho a uma classe ou ID e adicionar eventos através do gancho no JS. Reflexão
Não quero discutir qual dos estilos de escrita acima é o melhor. Vamos pensar na pergunta de origem: por que usamos um para acionar eventos JS? As razões pelas quais consigo pensar são:
Pode -se observar que, além do estilo flutuante, não há motivo substancial. Vamos deixar de lado a questão do estilo por enquanto e dar uma olhada em um exemplo:
O exposto acima é a barra de operação do Google Reader. Se você estiver interessado, também pode incorporá -lo. A tag usada é:
O estilo suspenso do mouse não é um problema:
No CSS, basta adicionar cursor: ponteiro.
A partir do exemplo acima, podemos tirar uma conclusão: se você apenas acionar a ação do JS sem qualquer semântica de navegação ou posicionamento, poderá usar o span ou outras tags adequadas, e não há necessidade de usar um incorretamente (usando um problema causará problemas: primeiro, você precisa remover o evento padrão e o segundo, as informações na barra de status confundirão ou mesmo os usuários ordinários do comum).
Obviamente, se for um link em si, você só deseja adicionar alguns aplicativos de classificação de JS ou formulário antes da navegação, considerando -o de uma perspectiva gradual de aprimoramento, a melhor prática é escrever todos os valores do HREF para que, nos navegadores que não suportem JS, a usabilidade possa ser garantida. Práticas recomendadas
Não é um resumo, não é uma finalização única. A melhor prática é apenas uma série de princípios. É necessário pensar sobre isso antes de escrever código:
Os códigos têm vida, Tag Kingdom é um zoológico, familiarizado com eles, tudo é adorável.