Acima: Linguagem de marcação - elementos de frase
Fonte original Capítulo 7 Ponto de âncora
A maneira correta de dizer que os links no HTML devem ser chamados de âncoras. Eles não apenas nos permitem apontar para documentos, mas também para parágrafos específicos na página, e também podem ser usados como uma ferramenta conveniente para links precisos. Deixe o objeto Link se aproximar do foco. Neste capítulo, veremos quatro práticas de âncora diferentes, explicando as vantagens de cada método e também introduzindo como o atributo de título pode melhorar a facilidade de uso dos links. Além disso, também usaremos o CSS para projetar estilos para links. Quando você precisa especificar uma parte específica da página, marcar âncoras é a melhor maneira de fazê -lo.
Esta é uma situação comum ao projetar um site. Você deseja vincular a uma parte específica de uma determinada página, mas o usuário pode estar lendo em outra página. Escolha qualquer um dos quatro métodos discutidos ao lado para permitir que você atinja seu objetivo.
No exemplo, suponha que pretendamos vincular a um título específico na mesma página: Método A: O nome do buraco
<p> <a href =#oranges> sobre laranjas </a> </p>
... algum texto ...
<um nome = larangoes> </a>
<h2> laranjas são saborosas </h2>
... mais texto ...
Use uma tag de âncora com conteúdo em branco e um atributo de nome para marcar um ponto de link específico. Talvez este seja o método com o qual você esteja familiarizado. Coloque um conteúdo em branco <a> Na frente do título e conecte -o (usando o símbolo #, seguido pelo valor do atributo de nome), que nos permite conectar a uma parte específica da página. Quando a página contém uma longa lista de itens que precisam ser rolados, podemos conectar facilmente a um projeto específico através desse método.
A Figura 7-1 mostra o resultado depois de clicar no link Sobre os laranjas, o que significa pular para o local que identificamos <um nome = oranges> </a>, que está exatamente no título.
Figura 7-1. Exemplo de clicar para conectar -se a um link âncora específico
O efeito é bom, mas desperdiçar uma tag em branco para identificar o local do link é um pouco inconsistente com a semântica. O método B pode melhorar isso. Método B: Tudo dentro do nome
<p> <a href =#oranges> sobre laranjas </a> </p>
... algum texto ...
<H2> <a nome = laranjas> laranjas são saborosas </a> </h2>
... mais texto ...
Como o método A, ainda usamos a tag <a> com o atributo de nome, mas desta vez o envolvemos fora do título com o qual quero vincular. Isso parece mais semântico. No método A, nosso objeto de conexão é ... bem, não há nada, mas no método B, não apenas explicamos que este texto faz parte da tag de título, mas também uma das âncoras de conexão desta página. Cuidado com o estilo global de <a>
Se o método B for usado, há um lugar em que você deve prestar atenção. Se você especificar estilos CSS globais para todos os elementos <a> (cor, tamanho do texto, decoração de texto etc.), esses estilos substituirão os estilos que você especificará para <H2> elementos. A razão pela qual isso acontece é que, neste exemplo, a tag <a> é um elemento filho localizado dentro da tag <H2> que a circunda.
Por exemplo, se você tiver uma declaração como esta em seu CSS:
um{
Cor: verde;
Peso da fonte: negrito;
Decoração de texto: sublinhado;
}
O método B e este CSS farão com que o título fique verde, ousado e sublinhado, como o <a> em outras páginas, talvez diferente do estilo <H2> que você espera.
Podemos usar o: link pseudo-classe de <a> Para evitar esse fenômeno (e também obter outros benefícios), que serão discutidos em detalhes posteriormente neste capítulo. Atributos de nome mais ricos
Um dos benefícios do uso do método B (e do método A) é que o atributo de nome pode lidar com nomes de âncora mais abundantes. Especificamente, é a capacidade de usar símbolos dentro do nome
Por exemplo, se você usar o método B, poderá fazer isso (aqui representa o símbolo e):
<p> <a href =#retum é> meu currículo é </a> </p>
... algum texto ...
<H2> <a nome = currículo é> Culso de Dan é </a> </h2>
... mais texto ...
Essa função é muito importante ao lidar com personagens que não pertencem a letras em inglês.
Mas existem vários métodos que vale a pena mencionar. O método a seguir não requer o uso de <a> para definir o ponto de ancoragem. Vamos dar uma olhada no método C.
Método C: descarte o nome
<p> <a href =#oranges> sobre laranjas </a> </p>
... algum texto ...
<h2 id = laranjas> laranjas são saborosas </h2>
... mais texto ...
Ah, a função do atributo ID é como o atributo de nome, que também pode especificar pontos de ancoragem para a página. Além disso, o método C também elimina o método A e B usa o atributo de nome como uma tag <a> adicional. Reduzimos o código -fonte, o que sempre foi uma coisa boa.
Como o atributo de identificação pode ser adicionado a qualquer tag, podemos adicionar facilmente âncoras a qualquer elemento da página. Neste exemplo, optamos por adicionar âncoras ao título, mas também podemos adicionar facilmente âncoras a <div>, <form>, <p>, <ul> ... e todas as outras tags. Uma morte, dois pássaros com um pássaro
De fato, na maioria dos casos, podemos adicionar estilos ou scripts ao atributo de ID preexistente, que é outro benefício do método C. Por causa disso, não precisamos adicionar código extra para apenas definir a âncora.
Por exemplo, vamos supor que você tenha um formulário para deixar comentários na parte inferior de uma página longa e deseja adicionar um link à parte superior da página. Este formulário definiu ID = comentários para especificar um estilo exclusivo. É assim que podemos conectar diretamente os IDs como âncoras sem adicionar uma tag <a> com atributo de nome.
O código se parece com o seguinte:
<p> <a href =#comentários> Adicione um comentário! </a> </p>
... muitos texto ...
<formulário ID = Comentários Action =/Path/to/script>
... elementos de formação ...
</morm>
Além disso, se a sua página for longa, você adicione um link à âncora superior na parte inferior para que o usuário possa voltar à parte superior.
Vale ressaltar que, embora pareça muito adequado, é melhor evitar usar o TOP ao especificar nomes de âncora. Alguns navegadores mantêm esse nome para fins especiais. O uso desse nome pode causar resultados inconsistentes. É melhor escolher um nome semelhante, mas não causa problemas. Talvez use #gemesis? Ou #Ut Most? Você tem sua própria ideia.
Navegador antigo com atributos de identificação
Ao usar apenas o atributo de ID como âncora, há uma desvantagem importante que vale a pena mencionar, ou seja, alguns navegadores antigos não suportam esse método. Ah, isso é realmente um obrigatório ao identificar sua própria âncora, e também é um exemplo infeliz de compatibilidade a seguir. Vejamos o último exemplo, método D. Método D: juntos
<p> <a href =#oranges> sobre laranjas </a> </p>
... algum texto ...
<H2> <a id = nome de laranjas = laranjas> Laranjas são saborosas </a> </h2>
... mais texto ...
Se você deseja obter compatibilidade a seguir e compatibilidade com versões anteriores ao marcar âncoras, provavelmente gostará desse método. Os navegadores antigos e futuros podem identificar corretamente tags de âncora nomeadas, mas porque o W3C não recomenda o atributo de nome (http://www.w3.org/tr/xhtml1/#c_8) na recomendação do XHTML1.0, você também usa o atributo ID para apoiar futuros navegadores.
O mesmo que o método B, devemos prestar atenção ao estilo global que afeta a tag <a>.
Nome compartilhado
Se você optar por usar o método D, é aceitável escolher o mesmo nome para os atributos de ID e nome (pode ser muito conveniente), mas isso só é possível se eles estiverem na mesma tag. Além disso, existem apenas algumas tags específicas que permitem que isso, que, seja preciso, inclui <a>, <pplet>, <drame>, <mg>, <pap>. Portanto, movemos ID = laranjas de <H2> para a tag de âncora.
Agora que vimos quatro métodos para estabelecer pontos de ancoragem, vamos resumir as vantagens e desvantagens de cada método.
Página anterior 1 2 3 Próxima página Leia o texto completo