日文文字显示不正确

时间:2015-07-15 18:44:08

标签: html css encoding

目前我正在开发一个有日语文本的网站。所有文本在所有浏览器中显示都很奇怪。该网站有“Shift_JIS”的“charset”。我用一些新代码重新编写了网站,因为它在10年前编写了一些类似电子邮件模板的表格。

这是网站的主管部分

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>コミックで英語を学ぶ,,漫画で学ぶ英語:, ESL, EFL, TOEFL, FCE, TOIEC, IELTS</title>

所有文字都是这样的 enter image description here 这是我在页面中使用的所有代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>コミックで英語を学ぶ,,漫画で学ぶ英語:, ESL, EFL, TOEFL, FCE, TOIEC, IELTS</title>


<script language="JavaScript">
<!--HPB_SCRIPT_ROV_50
//
// Licensed Materials - Property of IBM
// 83H7391, 42L1820
// (C) Copyright IBM Corp. 1995, 1999  All Rights Reserved.
//
// Version: 5.0.1
//

// HpbImgPreload: 画像のプリロードを行ないます
//
function HpbImgPreload()
{
  var appVer=parseInt(navigator.appVersion);
  var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
  var isIE=(document.all    && (appVer >= 4)); // Internet Explorer  4.0 or later
  if (isNC || isIE)
  {
    if (document.images)
    {
      var imgName = HpbImgPreload.arguments[0];
      var cnt;
      swImg[imgName] = new Array;
      for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++)
      {
        swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image();
        swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt];
      }
    }
  }
}
// HpbImgFind: Imageオブジェクトを探します
//
function HpbImgFind(doc, imgName)
{
  for (var i=0; i < doc.layers.length; i++)
  {
    var img = doc.layers[i].document.images[imgName];
    if (!img) img = HpbImgFind(doc.layers[i], imgName);
    if (img) return img;
  }
  return null;
}
// HpbImgSwap: 画像を入れ換えます
//
function HpbImgSwap(imgName, imgSrc)
{
  var appVer=parseInt(navigator.appVersion);
  var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
  var isIE=(document.all    && (appVer >= 4)); // Internet Explorer  4.0 or later
  if (isNC || isIE)
  {
    if (document.images)
    {
      var img = document.images[imgName];
      if (!img) img = HpbImgFind(document, imgName);
      if (img) img.src = imgSrc;
    }
  }
}
var swImg; swImg=new Array;
//-->
</script><script language="JavaScript">
<!--
HPB_SCRIPT_PLD_50
HpbImgPreload('_HPB_ROLLOVER3', 'image/english02.gif', 'image/english01.gif');
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
TD {
    font-size : 12px;
}
-->
</style>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body class="container-fluid">
<div class="header row">
  <div class="col-md-3"></div>
  <div class="col-md-6"><img src="banners/banner-cfangollll-flyguy600-105.png"></div>
  <div class="col-md-3"></div>
</div>
<div class="middle row">
  <div class="col-md-3"></div>
  <div class="col-md-6" style="background:#fff">
    <div class="top_sec_mid row">
      <div class="top_text">
        <h1 align="center"><br>
          コミックデ英語学ぶ</h1>
        <h1 align="center">世界コッミクで国際的なビジネス言語を勉強。</h1>
        <h5 align="center"><br>
          <b>Language Learning thru World Comics</b> </h5>
      </div>
      <!--top_text ends-->
      <div class="top_txt2"> 英語を学ぶ人、そして教える人を対象とした、プリントOK、フォトフリーのお手
        軽レッスン。難易度は中レベルで、初級編・中級編・上級編の3段階に別れてい
        る。まずは下のタイトルをクリックしてみよう。 </div>
      <div class="pdf">
        <ul>
          <li>
            <div class="list_left  col-md-9 col-sm-9"><img src="images/flag-icon_us.png" width="27" height="17">幻視少女(作:リー・ケネディ)</div>
            <div class="list_right col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
          </li>
          <li>
            <div class="list_left  col-md-9  col-sm-9"><img src="images/flag-icon_Flag_of_England.png" width="27" height="17"> ルッキング(作:キャスパー・ウィリアムス)</div>
            <div class="list_right  col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
          </li>
          <li>
            <div class="list_left col-md-9  col-sm-9"><img src="images/flag-icon_icon-denmark.png" width="27" height="17"> 冷や汗タラタラ(作:オーレ・コモル</div>
            <div class="list_right  col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
          </li>
          <li>
            <div class="list_left col-md-9  col-sm-9"><img src="images/flag-icon_dutch.png" width="27" height="17"> ピート(作:マイケ・ハーチェス)</div>
            <div class="list_right  col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version"><a href="maahar22/index.html">コミック</a></div>
          </li>
          <li>
            <div class="list_left col-md-9  col-sm-9"><img src="images/flag-icon_germany-flag-icon.png" width="27" height="17"> 悪魔主義死神カルト(作:ウルリッチ・メイジン)</div>
            <div class="list_right  col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version">コミック</div>
          </li>
          <li>
            <div class="list_left col-md-9  col-sm-9"><img src="images/flag-icon_Serbia Yugoslavia.png" width="27" height="17"> 夢見るセルビア人(作:アレクサンダー・ゾグラフ)</div>
            <div class="list_right   col-md-3 col-sm-3"><img src="image/p.gif" width="16" height="16" border="0" alt="pdf version"><a href="alezog/index.html" target="_blank">コミック</a></div>
          </li>
        </ul>
      </div>
    </div>
    <!--top_sec_mid-->

    <div class="mid_box_1">
      <div class="mid_box1_img"><img src="alezog/serdre_02.gif" width="465" height="281"></div>
      <div align="center" class="mid_box1_txt"> <strong>aleksandar zograf </strong><br>
        (作:アレクサンダー・ゾグラフ)<br>
        夢見るセルビア人 </div>
    </div>

    <!--mid_box_1 ends-->

    <div class="mid_box_2">
      <div class="mid_box2_img"><img src="olecom/olecomTOP.gif" width="431" height="306" alt=""></div>
      <div align="center" class="mid_box2_txt"> <strong>ole comoll</strong><br>
        I was hopelessly in love. I couldn't sleep, but lay think of her....Every day I came to see her, but all I dared to say to her was: "The usual please." It went on for some weeks until: "And here?" </div>
    </div>

    <!--mid_box_2 ends-->

    <div class="mid_box_3">
      <div class="mid_box3_img"><img src="caswil/look0203.gif" width="222" height="258" alt=""></div>
      <div align="center " class="mid_box3_txt"> <strong> caspar williams</strong><br>
        カスパーウィリアムズは、毎日の生活が何のためにあるのかということに全く確新が待ってない人々のために神経質な物語シリーズを書いている。Suburban Nightmare シリーズの中の LOOKING(ルキングか見ている)でもどちらかといえばふつうの状況にあるふつうの男が 神経質になっていく。Mr. Williams は<small><font face="MS ゴシック" lang="JA">ブ</font></small>ライトンで植物だけを友にひとりで住んでいる。 <strong>Click <a href="clp01.html">here </a>for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong> </div>
    </div>

    <!--mid_box_3 ends-->

    <div class="mid_box_4">
      <div class="mid_box4_img"><img src="leeken22/02t_r2_c2_f2.gif" width="205" height="228" alt=""></div>
      <div align="center " class="mid_box4_txt">
        <p><strong>lee kennedy</strong><br>
          幻視少女(作:リー・ケネディ</p>
        <p><strong>Click <a href="clp01.html">here </a>for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong></p>
      </div>
    </div>

    <!--mid_box_4 ends-->

    <div class="mid_box_5">
      <div class="mid_box5_img"><img src="maahar22/maaful4.gif" width="241" height="332" alt=""></div>
      <div align="center mid_box5_txt" class="mid_box5_txt"> <strong>maaike hartjes</strong><br>
        この小さな物語は私の友人ピートについて,彼はいいやつですが、巨大な浮気者です。 <strong>Click <a href="clp01.html">here </a>for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong> </div>
    </div>

    <!--mid_box_5 ends-->

    <div class="mid_box_6">
      <div class="mid_box6_img"><img src="ulrmag/ulrTOP.gif" width="425" height="367"></div>
      <div align="center mid_box6_txt" class="mid_box6_txt">
        <p>ulrich magin</p>
        <p><strong>Click <a href="clp01.html">here </a>for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</strong></p>
      </div>
    </div>

    <!--mid_box_6 ends-->

    <div class="mid_box_7">
      <div class="mid_box7_img1 col-md-6"><img src="images/holocomics-template-FLATSURFACEVIEWnoLAYERS400traN.png" width="316" height="192"></div>
      <div class="mid_box7_img2 col-md-6">
        <div class="box7_txt">
          <h5>xxxxxxxxxxxxx<a href="clp01.html">xxxxx</a></h5>
          <h6>Click <a href="clp01.html">here </a>for details on how to get your 6 bilingual comics and free sample Language Learning thru Comics Lesson</h6>
        </div>
      </div>
    </div>

    <!--mid_box_7 ends-->

    <div class="bottom_blue row">
      <div class="mid_box_8">
        <div align="center" class="mid_box8_txt">
          <p align="left">6部バイリンガルの漫画(アメリカ、ドイツ、オランダ、デンマーク、セルビア,英国から1つずつ、が無料で付いてきます。それぞれ単語と文法練習が付いたレッスンで物語を完全に理解し、イギリスとアメリカ英語で考え、話せるようになります。 </p>
          <h6 align="left">What you get for free are 6 bilingual comics (one each from America, Serbia, Holland, Germany, Denmark and  England). Each includes a complete lesson that will ensure that you know the story as well as  how to think and talk about it in English. What are you waiting for?</h6>
        </div>
        <div class="mid_box8_img1"><img src="images/serdre-bilinguallastPage.png" width="600" height="354"></div>
      </div>

      <!--mid_box_8 ends-->

      <div class="mid_box_9">
        <table width="60%" border="2">
          <tr>
            <th height="372" bgcolor="#0066FF" scope="col"><h6 align="left">Maximizeyour your learning and memorization potential with three modes. Experience these comics and lessons thru your three main senses, </h6>
              <h1 align="center">Listen See Feel</h1>
              <p align="center">(auditory, visual and kinethetic) </p>
              <p align="center">then </p>
              <h1 align="center">Think and Create</h1>
              <h6 align="left">(auditory, visual and kinethetic) </h6>
              <table width="88%" border="0" align="center">
                <tr>
                  <th height="42" scope="col"><img src="images/icon-movie2.jpg" width="40" height="40"></th>
                  <th scope="col"><img src="images/icon-text.jpg" width="40" height="40"></th>
                  <th scope="col"><img src="images/icon-voice.jpg" width="40" height="40"></th>
                  <th scope="col"><img src="images/icon-hear-2.jpg" width="40" height="40"></th>
                  <th scope="col"><img src="images/icon-comic40.jpg" width="40" height="40"></th>
                  <th scope="col"><img src="images/icon-slideshow.png" width="40" height="40"></th>
                </tr>
              </table>
              <table width="88%" border="0" align="center">
                <tr>
                  <th height="42" scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
                  <th scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
                  <th scope="col"><img src="images/icon-watch2.jpg" width="40" height="40"></th>
                  <th scope="col"><img src="images/icon-do.jpg" width="40" height="40"></th>
                  <th scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
                  <th scope="col"><img src="images/image-blank-transparent40b.png" width="40" height="40"></th>
                </tr>
              </table>
              <p align="left">Depending on what kind of learner you are (auditory, visual or kinesthetic),  I believe  it is best to 1) listen<img src="images/icon-hear-2.jpg" width="40" height="40">, 2)see <img src="images/icon-watch2.jpg" width="36" height="36"> and feel <img src="images/icon-do.jpg" width="40" height="40"> the comic and finally, 3) involve yourself in Creative Thinkingcheck out the translated version <img src="images/Flag_of_Japan_27.png" width="27" height="17"> <img src="images/icon-plus20.jpg" width="20" height="20"> <img src="images/flag-icon_british-flag.png" width="27" height="17">. You should then be ready for the lesson.</p>
              <h6 align="center">All the audio is inEnglish in accents from various countries. </h6></th>
          </tr>
        </table>
      </div>

      <!--mid_box9-->

      <div class="mid_box_10">
        <table width="60%" border="2">
          <tr>
            <th scope="col"><div align="center">
                <table width="60%" border="2">
                  <tr>
                    <th bgcolor="#FFFFFF" scope="col"><div align="center">
                        <p><img src="images/wordshoot.gif" alt="Language Learning Game " width="228" height="22"><br>
                        </p>
                      </div></th>
                  </tr>
                </table>
                <p><img src="images/worshoot-scrnsht.jpg" alt="Wordshoot: Language Learning Game" width="232" height="184"></p>
              </div></th>
          </tr>
        </table>
      </div>

      <!--mid_box10-->

      <div class="mid_box_11">
        <h2 align="center" >(語学学習シューティング・ゲーム:TOIEC, TOEFL, IELTS, ケンブリッジ英検対策用)
          100以上の問題&回答を収録。<br>
          <br>
          <strong>PC版:ここをクリック! MAC版:ここをクリック! </strong></h2>
        <table width="100%" border="0" align="center">
          <tr valign="top">
            <td ><p align="center">&nbsp;</p>
              <p align="center" style="color:#fff;"><font face="Arial, Helvetica, sans-serif" size="1"><b>Language 
                Learning shoot 'em up for learners of TOIEC, TOEFL, IELTS et) </b></font></p>
              <h6 align="center"><font face="Arial, Helvetica, sans-serif" size="3" color="#333333">A horde of illiterate, savage, grammatically-challenged and linguistically-dysfunctional 
                mutant aliens from a far off planet in an alternative dimension 
                want you for breakfast. Prevent this from happening by downloading this somewhat retro but still fun game.</font> <font face="Arial, Helvetica, sans-serif" size="3" color="#333333">Yummmy!</font></h6></td>
          </tr>
        </table>
      </div>
      <!--mid_box11-->

      <div class="mid_box_12">
        <table width="78%" border="2">
          <tr>
            <th bgcolor="#FFFFFF" scope="col"><div align="left">
                <h2 style="color:#000">上のコミック好きだったら、きっと、あなたがこの南蛮画(ナンバンガ)23ヶ国、60
                  以上の漫画家の作品集大好きです。。。。<br>
                </h2>
                <h5 align="center" style="color:#000">If you like the comics above you'll love the works on the Nambanga Collection .</h5>
                <div align="center">
                  <table width="80%" border="0">
                    <tr>
                      <th bgcolor="#3E8FD1" scope="col"><a href="bios/creBiosFinalJ.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/nambangaBCK.jpg',1)"><img src="images/nambangaFRONT.jpg" alt="xxxxxx" width="404" height="600" id="Image10"></a></th>
                    </tr>
                  </table>
                  <h2 align="left" style="color:#000"><a href="bios/creBiosFinalJ.html">ここ</a>はアーティストやクリエイターのインクです(略歴も読めます!!)</h2>
                  <h5 align="center" style="color:#000"><a href="bios/creBiosFinalJ.html">here</a> is a link to a list of the artists and creators and short bios. </h5>
                  <h2 align="center" style="color:#000">★ ★ ★  今だけ999円 ★ ★ ★</h2>
                  <p align="center">&nbsp;</p>
                  <h2 align="center" style="color:#000">75%割引きです</h2>
                  <p align="center" style="color:#000">★ ★ ★ はいそうです ★ ★ ★</p>
                  <h2 align="center" style="color:#000">75%オフ</h2>
                  <h6 align="center" style="color:#000">Now only 750 yen (that's a 75% discount)</h6>
                  <p align="center"><img src="images/warning.png" width="60" height="60"></p>
                  <h2 align="center" style="color:#000">成人向けの漫画</h2>
                  <h2 align="left" style="color:#000">いくつかの物語を子どもたちにとって不適切であると考えていますよ。</h2>
                  <h5 align="left" style="color:#000">Some stories are suitable for a mature audience only!!!</h5>
                  <p align="center"><img src="images/banner-holoM-signmeUP-englishJP.jpg" alt="Lorem ipsum dolor..."></p>
                </div>
                <div align="center"></div>
              </div>
              <div align="center">
                <table width="58%" border="2">
                  <tr>
                    <th scope="col"><div align="left">
                        <h2 style="color:#000">ホロミーム言語暗記システムは、英語学習が効率的になるだけでなく、スペイン語でも中国語でもフランス語でもどんな言語でもあなたが学びたい学習に役立ちます。</h2>
                        <h5 align="center"><img src="images/logo_header.jpg" width="289" height="86"></h5>
                        <h5 align="center">The Holo-MeME Language Memorization System will help you to learn not  only ENGLISH faster and<br>
                          more efficiently but also Spanish, French, Chinese. In fact, whatever language you want to learn.<br>
                        </h5>
                      </div></th>
                  </tr>
                </table>
              </div></th>
          </tr>
        </table>
      </div>
      <!--mid_box12-->

      <div class="mid_box_13"> <a href="bios/creBiosFinalJ.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','banners/banner_nambanga-titlewithdilcar728b-60-20.jpg',1)"><img src="banners/banner_nambanga-titlewithdilcar600only-60-20.jpg" width="600" height="74" id="Image25"></a> </div>
      <!--mid_box13--> 

    </div>
  </div>
  <div class="col-md-3"></div>
</div>
<div class="footer row">
  <p><img src="banners/banner-cfangollll-flyguyblack600-105.png" width="600" height="105">
    <center>
      <iframe src="footer.html"  frameBorder="0" width="610" height="100"></iframe>
    </center>
  </p>
</div>
<style>



</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

我该如何解决?感谢

1 个答案:

答案 0 :(得分:1)

显然,问题在于您声明的编码(Shift_JIS)不再与使用的实际编码(可能是UTF-8)相匹配,因此浏览器会呈现垃圾。或者,或者您的浏览器无法识别Shift_JIS编码。

可能发生的是,当您编辑源代码时,文本编辑器会以其首选编码重写文本,这与Shift_JIS不同。根据您发布的代码,无法确定当前源文件所在的编码;我们需要有原始文件。

另一种可能性是,您的源实际上是在Shift_JIS中正确编码的,但您的服务器正在为页面提供错误匹配的Content-Type标头,该标头会覆盖<meta>标记。

无论如何,我建议尽可能将内容完全切换为UTF-8。

尝试将页面的声明字符集更改为UTF-8(可能会添加现代<meta charset="utf-8">标记)。如果这不起作用,请尝试以下步骤:

  • 将原始来源转换为UTF-8
    • 在编辑器中打开原始来源
    • 确保文本在编辑器中正确显示(表示编辑器识别编码)
    • 使用编辑器的设置重新保存为UTF-8
  • 将声明的编码更改为UTF-8
  • 应用您的更改