复制同一页后特殊字符变成问号
special characters turned into question mark after duplication of the same page
从上周五开始,我复制了我的第一页,并且重复了很多次(大约 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 -->
在这里你可以看到一个重复的图像,特殊字符是问号,我的边框不见了
了解字符是否真的转换为 ?? 很重要甚至在 HTML 文件中,或者当您通过浏览器浏览它们时。
如果 html 页面中的字符被正确保存并且您在浏览器中将它们视为问号 在大多数情况下通过添加
<meta charset="utf-8">
(最好在 <head>
元素中)到页面将解决问题。
但另一方面,有时当您将 HTML 复制粘贴或复制到另一个 HTML 文件时,由于您的环境情况,新 HTML 文件的编码可能不是 Unicode 或 UTF-8,因此它在内部将所有特殊字符转换为问号。 Ofc 当您浏览这个新的 HTML 页面时,您会看到问号,因为它们实际上是在文件创建(或保存)时转换为问号的。
这种情况最好先更改文件编码,然后再粘贴内容保存。
希望对你有帮助
从上周五开始,我复制了我的第一页,并且重复了很多次(大约 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 -->
了解字符是否真的转换为 ?? 很重要甚至在 HTML 文件中,或者当您通过浏览器浏览它们时。
如果 html 页面中的字符被正确保存并且您在浏览器中将它们视为问号 在大多数情况下通过添加
<meta charset="utf-8">
(最好在 <head>
元素中)到页面将解决问题。
但另一方面,有时当您将 HTML 复制粘贴或复制到另一个 HTML 文件时,由于您的环境情况,新 HTML 文件的编码可能不是 Unicode 或 UTF-8,因此它在内部将所有特殊字符转换为问号。 Ofc 当您浏览这个新的 HTML 页面时,您会看到问号,因为它们实际上是在文件创建(或保存)时转换为问号的。
这种情况最好先更改文件编码,然后再粘贴内容保存。 希望对你有帮助