css 同页复制后特殊字符变为问号

4xrmg8kj  于 2023-08-09  发布在  其他
关注(0)|答案(2)|浏览(66)

从上周五开始，我复制了我的第一页，很多时候（大约40页相同），在检查了其中一页之后，我发现特殊字符（é，è，ç，...）被问号取代了。
所以我一直在寻找是什么造成了这样的问题，这就是人们谈论的地方：

<meta charset="utf-8" />

字符串
我已经看了更多的那行代码，我已经离开了整个时间，它是自动编写的，当我开始一个新的页面，所以我不认为我会改变它随时但现在是正确的时间来询问它是如何工作的。
我想知道如果

<meta charset="utf-8" />

型
只工作作为一个页面，因此，我想知道我如何才能改变它，使其avaiable到我所有的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 -->

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

css

2条答案

按热度按时间
taor4pac

taor4pac1#

重要的是要知道，如果字符真的转换成？？即使在HTML文件中，或者只是在通过浏览器浏览时。
如果在HTML页面中的字符被正确保存，并且您在浏览器中看到它们作为问号在大多数情况下，通过添加<meta charset="utf-8">（最好在<head>元素中）到页面将解决这个问题。
但在另一方面，有时当您复制和粘贴，或将HTML复制到另一个HTML文件时，由于您的环境情况，新HTML文件的编码可能不是Unicode或UTF-8，因此它在内部将所有特殊字符转换为问号。当您浏览这个新的HTML页面时，您将看到问号，因为它们实际上在文件创建（或保存）时转换为问号。x1c 0d1x的数据
在这种情况下，最好先更改文件编码，然后再次粘贴内容并保存。希望有帮助

赞(0）分享  回复(0）举报  2023-08-09
kxxlusnw

kxxlusnw2#

我与这个错误斗争了很长一段时间，发现Fered的答案很有用。在我的例子中，我必须用正确的编码（UTF-8）将有问题的文件保存在Visual Studio中，以正确显示斯堪的纳维亚字符。x1c 0d1x的数据

赞(0）分享  回复(0）举报  2023-08-09
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com