Question

自从上个星期五以来，我复制了我的第一页和大量时间（大约40个相同的页面），在检查其中一个重复页面后，我发现了特殊字符（é，è，ç），...）被问号所取代。

所以我搜索了可能会出现这样的问题，这是人们谈论的地方：

    <meta charset="utf-8" />

我更深入地研究了我从一开始就独自留下的那一行代码，它是在我开始新页面时自动编写的，因此我不认为我会随时更改它但现在它是是时候询问它是如何运作的。

我想知道是否

 <meta charset="utf-8" />

仅适用于一个页面，因此，我想知道如何更改它以使其可用于我的所有html页面。（请注意，只有我的主页显示特殊字符，我正在使用我的页面是法语，所以如果你需要转录，你可以在评论中问我。）

@charset "UTF-8";
header {
  font-size: 1px;
  border: 7px ridge #1173AF;
}

header img {
  height: 340px;
  width: 1570px;
  overflow: hidden;
}

.menu {
  overflow: hidden;
  background-color: #3CA9DF;
  font-family: Arial, Serif, Sans-Serif;
}

.menu a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.accueil {
  float: left;
  overflow: hidden;
}

.accueil .accueilbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.accueil:hover .accueilbtn {
  background-color: #7FB8D5;
}

.accueil-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.accueil-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.accueil-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.accueil:hover .accueil-content {
  display: block;
}

.lycee {
  float: left;
  overflow: hidden;
}

.lycee .lyceebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.lycee:hover .lyceebtn {
  background-color: #7FB8D5;
}

.lycee-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.lycee-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.lycee-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.lycee:hover .lycee-content {
  display: block;
}

.formations {
  float: left;
  overflow: hidden;
}

.formations .formationsbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.formations:hover .formationsbtn {
  background-color: #7FB8D5;
}

.formations-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.formations-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.formations-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.formations:hover .formations-content {
  display: block;
}

.visite {
  float: left;
  overflow: hidden;
}

.visite .visitebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.visite:hover .visitebtn {
  background-color: #7FB8D5;
}

.visite-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.visite-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.visite-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.visite:hover .visite-content {
  display: block;
}

.vielycee {
  float: left;
  overflow: hidden;
}

.vielycee .vielyceebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.vielycee:hover .vielyceebtn {
  background-color: #7FB8D5;
}

.vielycee-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.vielycee-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.vielycee-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.vielycee:hover .vielycee-content {
  display: block;
}

.tempsforts {
  float: left;
  overflow: hidden;
}

.tempsforts .tempsfortsbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.tempsforts:hover .tempsfortsbtn {
  background-color: #7FB8D5;
}

.tempsforts-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.tempsforts-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.tempsforts-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.tempsforts:hover .tempsforts-content {
  display: block;
}

.anciens {
  float: left;
  overflow: hidden;
}

.anciens .anciensbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.anciens:hover .anciensbtn {
  background-color: #7FB8D5;
}

.anciens-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.anciens-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.anciens-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.anciens:hover .anciens-content {
  display: block;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="lyceecss.css" />
  <title>Bienvenue dans le site du Lycée Sainte-Marie</title>
</head>

<body>
  <header>
    <img src="http://via.placeholder.com/500x150"></a>

  </header>
  <nav>
    <div class="menu">
      <div class="accueil">
        <button class="accueilbtn">accueil</button>
        <div class="accueil-content">
          <a href="../college/collegesaintemarie.html">le collège</a>
          <a href="#">le Centre de Formation</a>
        </div>
      </div>
      <div class="lycee">
        <button class="lyceebtn">Le Lycée</button>
        <div class="lycee-content">
          <a href="#">Le mot du chef d'établissement</a>
          <a href="#">Plan d'accès</a>
          <a href="#">Historique</a>
          <a href="#">Horaires secrétariat</a>
          <a href="#">Organigramme du personnel</a>
          <a href="#">Date des vancances scolaires</a>
          <a href="#">La taxe d'apprentissage</a>
        </div>
      </div>
      <div class="formations">
        <button class="formationsbtn">Formations</button>
        <div class="formations-content">
          <a href="#">3° PREPA PRO</a>
          <a href="#">CAP Employé(e) de commerce Multi-Spécialités</a>
          <a href="#">BAC Pro vente 3 ans</a>
          <a href="#">BAC Pro commerce 3 ans</a>
          <a href="#">BAC Pro Acceuil Relation Client Usager 3 ans</a>
          <a href="#">Bac Pro COMMUNICATION VISUELLE PLURI-MEDIA 3 ans</a>
          <a href="#">BAC Pro PHOTOGRAPHE 3 ans</a>
          <a href="#">Modalités d'inscription</a>
          <a href="#">Résultats</a>
          <a href="#">Stages</a>
        </div>
      </div>
      <div class="visite">
        <button class="visitebtn">La vie au Lycée</button>
        <div class="visite-content">
          <a href="#">Les lieux de rencontre</a>
          <a href="#">Les ateliers</a>
          <a href="#">Les laboratoires</a>
          <a href="#">Le CDI</a>
          <a href="#">Le gymnase</a>
          <a href="#">Le self</a>
          <a href="#">L'internat</a>
        </div>
      </div>
      <div class="vielycee">
        <button class="vielyceebtn">La vie au Lycée</button>
        <div class="vielycee-content">
          <a href="#">Les Journées Portes Ouvertes</a>
          <a href="#">Voyages</a>
          <a href="#">Les projets/Les expositions</a>
          <a href="#">Les Activités de classe</a>
        </div>
      </div>
      <div class="tempsforts">
        <button class="tempsfortsbtn">Les Temps Forts au Lycée</button>
        <div class="tempsforts-content">
          <a href="#">Le Forum de l'orientation</a>
          <a href="#">OFF 2017</a>
          <a href="#">Design Culinaire 2016</a>
          <a href="#">Les nuits du Design</a>
          <a href="#">La veillé de noël</a>
          <a href="#">Journée rencontre et connaissance</a>
          <a href="#">La Journée St Joseph</a>
          <a href="#">Formation des délégués</a>
          <a href="#">Les Workshops et les Projets</a>
          <a href="#">Soirée Partenaires Entreprises</a>
        </div>
      </div>
      <div class="anciens">
        <button class="anciensbtn">Les anciens élèvess</button>
        <div class="anciens-content">
          <a href="#">Que devenez-vous ?</a>
          <a href="#">Remise des diplômes</a>
          <a href="#">Les 20 ans du Bac Pro Vente</a>
        </div>
      </div>
      <a href="#">V.A.E.</a>
      <a href="#">On parle de nous...</a>
      <a href="#">Formulaire de contacts</a>
      <a href="../college/collegesaintemarie.html">Le collège</a>
      <a href="#">Centre & Formation</a>
    </div>
</body>

</html>

<!-- end snippet -

<!-- begin snippet: js hide: false console: true babel: false -->

在这里你可以看到一个重复的图像，特殊字符是问号，我的边框丢失了

Answer 1

重要的是知道字符是否真的转换为??甚至在HTML文件中，或者只是当您通过浏览器浏览它们时。

如果在html页面内部字符保存正确，您在浏览器中将其视为问号大多数情况下通过添加 <meta charset="utf-8"> （页面中最好的<head>元素）将解决问题。

但另一方面，有时当您复制和粘贴HTML或将HTML复制到另一个HTML文件时，由于您的环境情况，新HTML文件的编码可能不是Unicode或UTF-8，因此它在内部转换所有特殊字符问号。当你浏览这个新的HTML页面时，你会看到问号，因为它们实际上是在文件创建（或保存）时转换为问号。

在这种情况下，最好首先更改文件编码，然后再次粘贴内容并保存。希望它有所帮助

重复同一页面后，特殊字符变为问号

1 个答案: