CÓDIGO
HTML ATRIBUTO ID
ID é um atributo usado no html para usar no style do css.
Também é usado no javascript.
Hast # mais nome do id no style.
VEJA COM FICA
<!DOCTYPE html>
<html>
<head>
<style>
#meutítulo {
background-color:
blue;
color: red;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>Atributo do id</h2>
<p>usando css para o id meutítulo</p>
<h1 id="meutítulo">meu título</h1>
</body>
</html>
OBS:. ID NO PODE COMEÇAR COM NÚMERO. NOME DO ID NÃO PODE
TER ESPAÇO.
Diferença entre
classe e ID
VEJA COM FICA
<!DOCTYPE html>
<html>
<head>
<style>
/* style do elemento do id "meutítulo"*/
#minhacidade {
background-color:
blue;
color: red;
padding: 35px;
text-align: center;
}
/* style do elemento da classe "cicade" */
.cidade{
background-color:
tomato;
color: blue;
padding: 20px;
}
</style>
</head>
<body>
<h1>Diferença entre classe e o id</h1>
<!-- Elemento do id -->
<h1 id="minhacidade">minha
cidade</h1>
<!-- Multiplos elementos da classe -->
<h2 class="cidade">Brasília</h2>
<p>Brasília capital do Brasil.</p>
<h2 class="cidade">Tóquio</h2>
<p>Tóquio a capital do Japão.</p>
</body>
</html>
Marcadores HTML
com ID e Links
Primeiro,
crie um marcador com o id atributo:
<h2 id="C4">Capítulo 4 </h2>
Em seguida, adicione um link
ao marcador ("Pular para o Capítulo 4"), de dentro da mesma página:
<a href="#C4">Pular para capítulo 4</a>
VEJA COM FICA
<!DOCTYPE html>
<html>
<body>
<p><a
href="#C4">PULAR PARA CAPÍTULO 4</a></p>
<p><a
href="#C8">PULAR PARA CAPÍTULO 8</a></p>
<h2>CAPÍTULO 1</h2>
<p>Uma descrição para capítulo
1</p>
<h2>CAPÍTULO 2</h2>
<p>Uma descrição para capítulo 2
</p>
<h2>CAPÍTULO 3</h2>
<p> Uma descrição para capítulo 3
</p>
<h2 id="C4"> CAPÍTULO
4</h2>
<p>Uma descrição para capítulo
4</p>
<h2>CAPÍTULO 5</h2>
<p>Uma descrição para capítulo
5</p>
<h2>CAPÍTULO 6</h2>
<p>Uma descrição para capítulo
6</p>
<h2>CAPÍTULO 7</h2>
<p>Uma descrição para capítulo 7
</p>
<h2 id="C8"> Capítulo 8
</h2>
<p>Uma descrição para capítulo
8</p>
<h2> Capítulo 9</h2>
<p>Uma descrição para capítulo
9</p>
<h2> Capítulo 10</h2>
<p>Uma descrição para capítulo
10</p>
<h2>Capítulo 11</h2>
<p>Uma descrição para capítulo
11</p>
<h2> Capítulo 12</h2>
<p>Uma descrição para capítulo
12</p>
</body>
</html>
Usando o atributo id em JavaScript
Usando o atributo id em javaScript.
<!DOCTYPE html>
<html>
<body>
<h2>Usando o atributo id no JavaScript</h2>
<h1 id="meutitulo">Meu título</h1>
<button onclick="displayResult()"> Clique
aqui para aperecer texto</button>
<script>
function displayResult() {
document.getElementById("meutitulo").innerHTML = "Seja
bem vindo JavaScript";
}
</script>
</body>
</html>