我需要对 HTML 做些什么才能让重音字符正确显示？

Question

我有 HTML 这样的（英语和西班牙语的组合）：

<p><em><span class="consolas">In </span><span class="english">English</span><span class="consolas"> and </span><span><strong>Spanish</strong></span></em><em><span class="consolas"> / En </span><span class="english">Inglés</span><span class="consolas"> y </span><span><strong>Español</strong></span></em></p>

<p class="smallfont">Translated by/Traducida por Manuel Caballero (1886)</p>

<hr/>
<section>

    <h2 class="smallcaps">PART ONE--The Old Buccaneer / PARTE I--EL VIEJO FILIBUSTERO</h2>

<p class="chapter">CHAPTER/CAPÍTULO 1</p>
<h3>The Old Sea-dog at the Admiral Benbow / EL VIEJO LOBO MARIN EN LA POSADA DEL 'ALMIRANTE BENBOW'</h3>

<p>SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having
asked me to write down the whole particulars about Treasure Island, from
the beginning to the end, keeping nothing back but the bearings of the
island, and that only because there is still treasure not yet lifted, I
take up my pen in the year of grace 17__ and go back to the time when
my father kept the Admiral Benbow inn and the brown old seaman with the
sabre cut first took up his lodging under our roof.</p>
<p class="spanish"><strong>Imposible me ha sido rehusarme á las repetidas instancias que el Caballero Trelawney, el Doctor Livesey y otros muchos señores me han
hecho para que escribiese la historia circunstanciada y completa de la
Isla del Tesoro. Voy, pues, á poner manos á la obra contándolo todo,
    desde el <em>alfa</em> hasta el <em>omega</em>, sin dejarme cosa alguna en el tintero, exceptuando la determinación geográfica de la isla, y esto tan solamente
porque tengo por seguro que en ella existe todavía un tesoro no
descubierto. Tomo la pluma en el año de gracia de 17-- y retrocedo hasta
la época en que mi padre tenía aún la posada del "<em>Almirante Benbow</em>," y
hasta el día en que por primera vez llegó á alojarse en ella aquel viejo
marino de tez bronceada y curtida por los elementos, con su grande y
visible cicatriz.</strong></p>

正如您在尖叫截图中看到的那样：

...西班牙文重音字符替换为默认/"I don't know what that is" 字符。它以不同的替换字符出现，但在 IE 中仍然是 "broken"（尖叫声来自 Chrome）。

我必须怎么做才能使这些重音字符显示为 should/naturally？

更新

我尝试了看起来简单的修复方法，在 "head" 部分添加了“<meta http-equiv="content-type" content="text/html;charset=utf-8" />”行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Treasure Island / La Isla del Tesoro</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
body {
    font-family:"Segoe UI", "Palatino Linotype", "Bookman Old Style", "Candara", "Calibri", "Consolas", serif;
    font-size: 1.2em;
}
. . .
}</style>
</head>

...但这没什么区别。

更新 2

即使使用 Ctrl+F5，我仍然无法使用快速提示，但对以下内容进行全局搜索和替换（将第一个替换为第二个）效果很好：

á
&aacute;

Á
&Aacute;

é
&eacute;

É
&Eacute;

í
&iacute;

Í
&Iacute;

ñ
&ntilde;

Ñ
&Ntilde;

ó
&oacute;

Ó
&Oacute;

ú
&uacute;

Ú
&Uacute;

ü
&uuml;

Ü
&Uuml;

¿
&iquest;

¡
&iexcl;

更新 3

顺便说一句，可以看到这个的 jsfiddle 版本（重音字符从来没有问题）here

Answer 1

指定页面使用的字符集很重要，因为某些浏览器可能会混淆显示特殊字符或来自不同语言的字符。在您的 <head>....</head>

中添加以下行

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

我在使用和不使用上面的行的情况下尝试了你的代码，在包含上面的行之后我得到了正确的结果。

如果仍然有一些字符没有正确显示，请尝试用它们的字符代码替换这些字符。 Here is a complete list of character codes for Spanish characters

编辑： 我尝试了您更新后的代码，它在 Mozilla、Chrome 和 IE 上仍然可以正常工作，这是我的屏幕截图，

检查你是否准确地写下了你在问题中所写的内容

正在尝试重新打开浏览器并按 ctrl+F5 刷新页面

我需要对 HTML 做些什么才能让重音字符正确显示？

What do I need to do to my HTML to allow accented characters to properly display?

html

browser

html-escape-characters

更新

更新 2

更新 3