Manual Básico de HTML

Mídia HTML

Manual de referência do HTML

HTML5 Manual Básico

HTML5 API

HTML5 Mídia

Anchors HTML

Quando o conteúdo de uma página HTML é muito longo, pode ser inconveniente para o usuário navegá-la, por exemplo, após rolar para o fundo, desejar retornar ao topo, então só pode arrastar a barra de rolagem até o topo (ou recarregar a página, mas essa prática não é tão boa), uma boa maneira é configurar a âncora para resolver esse problema, realizando a navegação dentro da página ou entre páginas

Exemplo de demonstração de âncora

Exemplo

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>Tutorial básico(oldtoolbag.com), configuração de âncora</title></head><body>
　　　　　<a href="#bottom" name="top">Ir para o pé da página</a>
　　　　<div style="height:　5000px; width:　300px; background-color: #123">Aqui é demonstrado como fazer a navegação para o cabeçalho e o pé da página</div>
　　　　<a href="#top" name="bottom">Voltar ao topo</a></body></html>

Teste Veja ‹/›

Como configurar uma âncora

(Um) Método de configuração de navegação dentro da página um:

Configurar um link de âncora <a href="#miao">Ir para o gato estrelado</a>；（Atenção: O valor do atributo 'href' deve começar com '#’）
Configurar um ponto de âncora na posição necessária na página <a name="miao"></a>；（Atenção: A tag 'a' deve conter um atributo 'name', cujo valor deve coincidir com o [1] do atributo 'href', sem '#', e insira o texto correspondente na tag conforme necessário, geralmente sem conteúdo.

(Dois) Método de configuração de navegação dentro da página2:

Configurar um link de âncora <a href="#miao">Ir para o gato estrelado</a>；（Atenção: O valor do atributo 'href' deve começar com '#’）
Posição de configuração da âncora <h4 id="miao">Base do gato estrelado</h4>; Adicione um atributo 'id' na tag onde deseja fazer a navegação, o valor deve ser o mesmo que o atributo 'href' do item ①, sem '#'.

　　 Atenção: O método dois não requer a adição de um tag 'a' separado para configurar a âncora, basta adicionar um 'id' na tag necessária.

Exemplo

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>Exemplo de âncora-Tutorial básicooldtoolbag.com</title>
</head>
<body>
　　　　<ul>
　　　　　　　　<li><a href="#miao">Ir procurar o gato estrelado</a></li>
　　　　　　　　<li><a href="#wang">Ir procurar o gato estrelado</a></li>
　　　　　　　　<li><a href="#meng">Outros bichinhos fofinhos</a></li>
　　　　</ul>
　　　　<a name="miao"></a><!--Método de configuração de âncora1-->
　　　　<h3　id="miao">Base do gato estrelado</h3><!--Método de configuração de âncora2-->
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　
　　　　<a name="wang"></a>
　　　　<p>Wau wau wau~</p>
　　　　<p>Wau wau wau~</p>
　　　　<p>Wau wau wau~</p>
　　　　<p>Wau wau wau~</p>
　　　　<p>Wau wau wau~</p>
　　　　<p>Wau wau wau~</p>
　　　　<a name="meng"></a>
　　　　<p>Meigu Meigu Meigu~</p>
　　　　<p>Meigu Meigu Meigu~</p>
　　　　<p>Meigu Meigu Meigu~</p>
　　　　<p>Meigu Meigu Meigu~</p>
　　　　<p>Meigu Meigu Meigu~</p>
　　　　<p>Meigu Meigu Meigu~</p>
</body>
</html>

Teste Veja ‹/›

Reprodução de Vídeo HTML Links HTML