复制相同页面后，特殊字符变成问号 [英] special characters turned into question mark after duplication of the same page

查看：183
本文介绍了复制相同页面后，特殊字符变成问号的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

自上个星期五以来，我复制了我的第一页，并复制了大量的时间（同一个约40页），在检查了一个重复的页面后，我发现特殊字符（é，è，ç ，...）被替换为问号。



所以我搜索了一下可能会出现这样的问题，这就是人们谈论的问题： p> 

 < meta charset =utf-8/>

我已经更深入地观察了我从整个时间独自留下的那行代码，它是在我开始新页面时自动写入的，因此我不认为我会随时更改它，但现在是询问它是如何工作的正确时间。



我想知道是否 

 < meta charset =utf-8/>

仅适用于一页，因此，我想知道如何将其更改为使其适用于我的所有html页面（注意，除了我的主页面上显示的是特殊字符，我正在使用法语语言来显示我的页面，所以如果您需要使用traduction，您可以在评论中询问我。）



@charsetUTF-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;白颜色; text-align：center; padding：14px 16px; text-decoration：none;}。accueil {float：left; overflow：hidden;}。accueil .accueilbtn {font-size：16px; border：none;概要：无;白颜色; padding：14px 16px;背景颜色：继承;}。menu a：hover，.accueil：hover .accueilbtn {background-color：＃7FB8D5;}。accueil-content {display：none;位置：绝对;背景颜色：＃7FB8D5; min-width：160px; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。accueil-content a {float：none;白颜色; padding：12px 16px;文字修饰：无;显示：块; text-align：left;}。accueil-content a：hover {background：linear-gradient（＃7FB8D5，＃E6DF53）; / * background：线性渐变（向右，＃333，#FFF）; * / background-color：＃333;}。accueil：hover .accueil-content {display：block;}。lycee {float：left; overflow：hidden;}。lycee .lyceebtn {font-size：16px; border：none;概要：无;白颜色; padding：14px 16px;菜单a：hover，.lycee：hover .lyceebtn {background-color：＃7FB8D5;}。lycee-content {display：none;位置：绝对;背景颜色：＃7FB8D5; min-width：160px; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。lycee-content a {float：none;白颜色; padding：12px 16px;文字修饰：无;显示：块; text-align：left;}。lycee-content a：hover {background：linear-gradient（＃7FB8D5，＃E6DF53）; / * background：线性渐变（向右，＃333，#FFF）; * / background-color：＃333;}。lycee：hover .lycee-content {display：block;}。formations {float：left; overflow：hidden;}。formations .formationsbtn {font-size：16px; border：none;概要：无;白颜色; padding：14px 16px; background-color：inherit;}。menu a：hover，.formations：hover .formationsbtn {background-color：＃7FB8D5;}。formations-content {display：none;位置：绝对;背景颜色：＃7FB8D5; min-width：160px; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。formations-content a {float：none;白颜色; padding：12px 16px;文字修饰：无;显示：块; text-align：left;}。formations-content a：hover {background：linear-gradient（＃7FB8D5，＃E6DF53）; / * background：线性渐变（向右，＃333，#FFF）; * / background-color：＃333;}。formations：hover .formations-content {display：block;}。visite {float：left; overflow：hidden;}。visite .visitebtn {font-size：16px; border：none;概要：无;白颜色; padding：14px 16px; background-color：inherit;}。menu a：hover，.visite：hover .visitebtn {background-color：＃7FB8D5;}。visite-content {display：none;位置：绝对;背景颜色：＃7FB8D5; min-width：160px; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。visite-content a {float：none;白颜色; padding：12px 16px;文字修饰：无;显示：块; text-align：left;}。visite-content a：hover {background：linear-gradient（＃7FB8D5，＃E6DF53）; / * background：线性渐变（向右，＃333，#FFF）; * / background-color：＃333;}。visite：hover .visite-content {display：block;}。vielycee {float：left; overflow：hidden;}。vielycee .vielyceebtn {font-size：16px; border：none;概要：无;白颜色; padding：14px 16px;菜单a：hover，.vielycee：hover .vielyceebtn {background-color：＃7FB8D5;}。vielycee-content {display：none;位置：绝对;背景颜色：＃7FB8D5; min-width：160px; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。vielycee-content a {float：none;白颜色; padding：12px 16px;文字修饰：无;显示：块; text-align：left;}。vielycee-content a：hover {background：linear-gradient（＃7FB8D5，＃E6DF53）; / * background：线性渐变（向右，＃333，#FFF）; * / background-color：＃333;}。vielycee：hover .vielycee-content {display：block;}。tempsforts {float：left; overflow：hidden;}。tempsforts .tempsfortsbtn {font-size：16px; border：none;概要：无;白颜色; padding：14px 16px;我们可以通过下面的例子来说明如何使用背景颜色：背景颜色：继承;}菜单a：hover，.tempsforts：hover .tempsfortsbtn {background-color：＃7FB8D5;}。tempsforts-content {display：none;位置：绝对;背景颜色：＃7FB8D5; min-width：160px; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。tempsforts-content a {float：none;白颜色; padding：12px 16px;文字修饰：无;显示：块; text-align：left;}。tempsforts-content a：hover {background：linear-gradient（＃7FB8D5，＃E6DF53）; / * background：线性渐变（向右，＃333，#FFF）; * / background-color：＃333;}。tempsforts：hover .tempsforts-content {display：block;}。anciens {float：left; overflow：hidden;}。anciens .anciensbtn {font-size：16px; border：none;概要：无;白颜色; padding：14px 16px;菜单a：hover，.anciens：hover .anciensbtn {background-color：＃7FB8D5;}。anciens-content {display：none;位置：绝对;背景颜色：＃7FB8D5; min-width：160px; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。anciens-content a {float：none;白颜色; padding：12px 16px;文字修饰：无;显示：块; text-align：left;}。anciens-content a：hover {background：linear-gradient（＃7FB8D5，＃E6DF53）; / * background：线性渐变（向右，＃333，#FFF）; * / background-color：＃333;}。anciens：hover .anciens-content {display：block;} 

 <！doctype html>< html>< head> < meta charset =utf-8/> < link rel =stylesheethref =lyceecss.css/> < title> Bienvenue dans le site duLycéeSainte-Marie< / title>< / head>< body> <报头GT; < img src =http://via.placeholder.com/500x150>< / a> < /报头> < NAV> < div class =menu> < div class =accueil> < button class =accueilbtn> accueil< / button> < div class =accueil-content> < a href =../ college / collegesaintemarie.html> lecollège< / a> < a href =＃> le Centre de Formation< / a> < / DIV> < / DIV> < div class =lycee> < button class =lyceebtn> LeLycé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 =＃> Horairessecrétariat< / a> < a href =＃> Organigramme du人员< / a> < a href =＃> Date des cscance scolaires< / a> < a href =＃> La taxe d'apprentissage< / a> < / DIV> < / DIV> < div class =formations> < button class =formationsbtn>阵形< /按钮> < div class =formations-content> < a href =＃> 3°PREPA PRO< / a> < a href =＃> CAPEmployé（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ésd'inscription< / a> < a href =＃>结果< / a> < a href =＃>阶段< / a> < / DIV> < / DIV> < div class =visite> < button class =visitebtn> La vie auLycé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 auLycée< / button> < div class =vielycee-content> < a href =＃> LesJournéesPortes Ouvertes< / a> < a href =＃> Voyages< / a> < a href =＃> Les projets / Les博览会< / a> < a href =＃> LesActivitésde classe< / a> < / DIV> < / DIV> < div class =tempsforts> < button class =tempsfortsbtn> Les Temps Forts auLycé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 =＃> Laveillédenoël< / a> < a href =＃>Journéerencontre et connaissance< / a> < a href =＃> LaJournéeSt Joseph< / a> < a href =＃> Formation desdélégués< / a> < a href =＃> Les Workshops et les Projets< / a> < a href =＃>SoiréePartenaires 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 desdiplômes< / a> < a href =＃> Les 20 ans du Bac Pro Vente< / a> < / DIV> < / DIV> < a href =＃> V.A.E.< / a> < a href =＃>在酒吧里...< / a> < a href =＃>公式化联系人< / a> < a href =../ college / collegesaintemarie.html> Lecollège< / a> < a href =＃>中心&形成< / A> < /  - >< / html><！ -  end snippet  - <！ -  begin snippet：js hide：false console：true babel：false  - > 在这里你可以看到一个重复的图像，特殊字符是问号，我的边框缺少
  
解决方案
重要的是要知道角色是否真的转换为？即使是在HTML文件中，或者只是当您通过浏览器浏览它们。
 
 
 
如果HTML页面内的字符保存正确，并且您在浏览器中看到它们为问号大多数情况下，通过添加
 < meta charset =utf-8>  
（最好在< head> 
 
 
 
但另一方面，有时当您复制并粘贴或将HTML复制到另一个HTML文件，由于您的环境情况，新HTML文件的编码可能不是Unicode或UTF-8，因此它会在内部将所有特殊字符转换为问号。 Ofc当你浏览这个新的HTML页面时，你会看到问号，因为它们在文件创建（或保存）时实际上被转换为问号。 
  
 
 
 
在这种情况下，首先更改文件编码，然后再次粘贴内容，保存。 
希望它有帮助
 
since last friday, I've duplicated my first page ,and a lot of time (about 40 of the same one), after checking one of the duplicated pages , I found out that the special characters ( é,è,ç,...) were replaced by question marks.



and so I've searched about what could make a issue like this, that is where people talked about :
    <meta charset="utf-8" />

I've looked more into that line of code that i've left alone from the whole time, It was automatically written when i started a new page and so i didn't think i would change it anytime but now it is the right time to ask about how it works.



i would like to know if
 <meta charset="utf-8" />

only work as for one page, and thus, I would like to know how can i change it to make it avaiable to all of my html pages.(note aside, only my primary page show the special characters and i am using The French language for my page, so if you need traduction you can ask mee in the comment.) 







@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 -->






here you can see a duplicated image, the special characters are question mark and my border is missing

 解决方案 
Its important to know if the characters are really converted to ?? even inside the HTML files, or just when you browse them by a browser.



If inside the html page characters are saved correctly and you see them as question mark in browser In most cases by adding 
<meta charset="utf-8"> 
(best in <head> element) to the page will fix the issue.



But in other hand sometimes when you copy and paste , or duplicate an HTML to another HTML file, due your environment situation, the encode of the new HTML file might not be Unicode or UTF-8 therefore it internally convert all special characters to question marks. Ofc when you browse this new HTML page you will see the question marks because they are actually converted to question marks at the time of file creation ( or save ).




In this case its better to first change the file encoding and then paste the content again and save it.
Hope it helps


                        
这篇关于复制相同页面后，特殊字符变成问号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆