html - W3C 验证器的问题

问题描述

我的网站代码工作正常，但是当我放入 w3c 验证器时，它显示了一些错误，当我修复它们时，我的网站变得一团糟。基本上我的代码正在处理验证器指向我的“错误”。我不知道该怎么做，因为这段代码是我大学的测试，可能我的教授也会把代码放在验证器上。

我是编程初学者，所以我分别做了html和css（没有js，因为我不知道如何使用它，我的教授还没有教我们）

* {
  overflow-x: hidden;
  padding: 0px !important;
  margin: 0px !important;
}
#container{
  width: 1348px;
  height: 312px;
  margin: 0 auto;
  background-color: #FFFFFF;
}
.logo {
  width: 208px;
  height: 208px;
  background: url("../IMG/logo.png");
  position: absolute;
  top: 55px;
  left: 87px;
  border-radius: 50%;
}
.caixa_texto_quemsomos {
  width: 172px;
  height: 27px;
  position: absolute;
  top: 156px;
  left: 512px;
  overflow: hidden;
}
.quemsomos {
  width: 172px;
  color: #000000;
  position: relative;
  top: 0px;
  left: 0px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
}
.caixa_texto_contato {
  width: 172px;
  height: 27px;
  position: absolute;
  top: 156px;
  left: 757px;
  overflow: hidden;
}
.contato {
  width: 172px;
  color: #000000;
  position: relative;
  top: 0px;
  left: 0px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
}
.barralaranja1 {
  width: 100%;
  height: 14px;
  background: #FB9324;
  position: absolute;
  top: 300px;
  left: 0px;
  overflow: hidden;
}
.section_foto {
  width: 450px;
  height: 505px;
  position: absolute;
  top: 378px;
  left: 415px;
  overflow: hidden;
}
.foto {
  width: 450px;
  height: 450px;
  background: url("../IMG/foto.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.maisdetalhes {
  width: 174px;
  color: #000000;
  position: absolute;
  top: 479px;
  left: 138px;
  font-family: Roboto;
  font-size: 22px;
  text-align: center;
  text-decoration: none;
}
.div_rodape {
  width: 100%;
  height: 85px;
  position: absolute;
  top: 939px;
  left: 0px;
  overflow: hidden;
}
.rodape {
  width: 100%;
  height: 78px;
  background: #5DBCD2;
  position: absolute;
  top: 7px;
  left: 0px;
  overflow: hidden;
}
.direitosreservados {
  width: 338px;
  color: #000000;
  position: absolute;
  top: 32px;
  left: 174px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
}
.ajuda {
  width: 81px;
  color: #000000;
  position: absolute;
  top: 32px;
  left: 798px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
}
.barralaranja2 {
  width: 100%;
  height: 14px;
  background: #FB9324;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.instagram {
  width: 53px;
  height: 53px;
  background: url("../IMG/instagram.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 22px;
  left: 1096px;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="pt-br">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/Index.css">
<head>
    <title>Gente - Arquitetura Colaborativa</title>
</head>

<body>

    <div id=container>
    <header>
        <figure class="logo">
            <img src="IMG/logo.png" alt="logo_img">
        </figure>

        <nav class="caixa_texto_quemsomos">
            <a class="quemsomos" href="Quem_Somos.html" target="_blank">QUEM SOMOS</a>
        </nav>

        <nav class="caixa_texto_contato">
            <a class="contato" href="Contato.html" target="_blank">CONTATO</a>
        </nav>

    </header>
    </div>

    <div class="barralaranja1"></div>

    <main>
        <section class="section_foto">

        <figure class="foto">
            <img src="IMG/foto.jpeg" alt="foto_img">
        </figure>

        <a class="maisdetalhes" href="Redirecionamento_Imagem.html" target="_blank">Mais detalhes...</a>
        </section>
    </main>

    <footer>
        <div class="div_rodape">
            <div class="rodape">
        </div>

        <div class="barralaranja2"></div>

        <p class="direitosreservados">Todos os direitos reservados ©</p>

        <a class="ajuda" href="Index.html" target="_blank">Ajuda</a>

        <a class="instagram" href="https://www.instagram.com/gentearq/" target="_blank">
            <img src="IMG/instagram.png" alt="instagram_img">
        </a>
    </footer>

</body>

</html>

错误是：

错误：已看到开始标记头，但已打开相同类型的元素。从第 5 行第 1 列开始；到第 5 行第 6 列 dex.css">↩↩ <tit
警告：部分缺少标题。考虑使用 h2-h6 元素为所有部分添加标识标题。从第 31 行第 3 列开始；到第 31 行第 32 列 ↩ ↩↩ <f
错误：看到结束标记页脚，但有打开的元素。从第 55 行第 2 列开始；到第 55 行第 10 列 >↩ ↩ ↩↩</bo
错误：未闭合的元素 div。从第 42 行第 3 列开始；到第 42 行，第 26 列页脚>↩ ↩ <d

标签： htmlcss

html - W3C 验证器的问题

问题描述

解决方案

推荐阅读