未声明HTML文档的字符编码，但实际上是

Question

I keep getting the below error and I have no idea why. 我不断收到以下错误，我也不知道为什么。 I've declared UTF-8! 我已经声明了UTF-8！

The character encoding of the HTML document was not declared. 未声明HTML文档的字符编码。 The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. 如果文档包含来自US-ASCII范围之外的字符，则在某些浏览器配置中，文档将呈现乱码。 The character encoding of the page must be declared in the document or in the transfer protocol. 页面的字符编码必须在文档或传输协议中声明。

Here is my head section 这是我的头部

<!DOCTYPE html>
<html ng-app lang="en">
<head>
<meta charset="utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>CUalify - Let them know they qualify for membership</title>
</head>

I've tried several different ways of encoding but I keep getting this same issue the page renders blank. 我尝试了几种不同的编码方式，但是我一直遇到同样的问题，页面呈现空白。

Below is the extent of the entire index page. 以下是整个索引页面的范围。 The site is cualify.org. 该网站是cualify.org。

<!doctype html>
<html ng-app lang="en">
 <head>
    <meta charset="utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>CUalify - Let them know they qualify for membership</title>
 </head>
<body>
<div class="header">
    <div class="wrapper">
    <img class="logo" src="images/logo.png"/>
    </div>
</div>
<main>
<div class="wrapper">
<p>Do visitors to your credit union website know if they qualify for membership without having to search and find the requirements?</p>
<b>Simplify!</b>
<p>We created a one click qualification based on the current location of the user. A user simply clicks one button on your credit union site and is alerted whether or not they qualify for membership based on their location within a county or township.</p>
<b>Our Method</b>
<p>We employ multiple methods of geolocation to track the most reliable location of the user. If the user lands outside of the membership area they are prompted to enter their city to double check whether they qualify.</p>
<b>Pro Credit Union</b>
<p>If a member does not qualify for your credit union they are given options of nearby credit unions in which they maybe eligible for membership. We don't want to lose them to a bank so we present other credit union options.</p>

<p id="demo"></p>
</div>
</main>
<div class="wrapper">
<h2>How it Works</h2>
<p>The first button a user will see will be the main <b>check by my current location</b> button. One click is all it takes to confirm if a user qualifies for the area.</p>
<img class="examples" src="images/blue.png"/><br/><br/>
<p>If the user does not qualify based on their location, we give them a chance to enter their city. We also try another method of geolocation and put that in the search field.</p>
<img style="width:600px;" src="images/yellow.png"/><br/><br/>
<p>If the user still falls outside the area to qualify for membership they see a last error message and shows them a list of credit unions nearby they may qualify for.</p>
<img style="width:600px;" src="images/red.png"/><br/><br/>
<p>If at anytime during the process the user qualifies based on their location, they will be shown this message.</p>
<img style="width:600px;" src="images/green.png"/><br/>

<hr/>

<h2>Create Your Script</h2>
<p>Fill in the information below and copy and paste the code anywhere in your website. Multiple entries can be seperated with a comma and no space.</p>

<div class="section">
    <label for="country">
        Country Code - <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements"><b>Find Your Code</b></a>
    </label>
  <input class="creator" type="text" name="country" ng-model="country" maxlength="2" placeholder="US (Optional Filter)"/>
</div>

<div class="section">
    <label for="aa">
        State Code - <a href="https://en.wikipedia.org/wiki/List_of_U.S._state_abbreviations#ANSI_standard_INCITS_38:2009"><b>Find Your Code</b></a>
    </label>
  <input class="creator" type="text" name="aa" ng-model="aa" maxlength="2" placeholder="IL (Optional Filter)"/>
</div>

<div class="section">
    <label for="county">
        Counties
    </label>
  <input class="creator" type="text" name="county" ng-model="county" placeholder="LaSalle County,Grundy County"/>
</div>

<div class="section">
    <label for="township">
        Townships
    </label>
  <input class="creator" type="text" name="township" ng-model="township" placeholder="Bruce Township,Ottawa Township"/>
</div>

<div class="section">
    <label for="city">
        Cities
    </label>
  <input class="creator" type="text" name="city" ng-model="city" placeholder="Streator,Peru,Chicago"/>
</div>

<div class="section">
    <label for="phone">
        Credit Union Phone Number
    </label>
  <input class="creator" type="text" name="phone" ng-model="phone" placeholder="800-555-5555"/>
</div>

<textarea class="copyarea">
<iframe src="https://cualify.org/a.html?aa={{aa}}&country={{country}}&county={{county}}&township={{township}}&city={{city}}&phone={{phone}}" width="100%" height="100%" scrolling="no" seamless="seamless" frameborder="0" style="border:0" />

</textarea>
<br/>
<hr/>
<h2>Dig Deeper</h2>
<p>This is an example of how the script can be imported into your website with an iframe.
You can put your option tags on the end of the url. Iframe should be fully responsive to resizing and browser windows. The following inputs are supported.</p>

<div class="center">
<div class="area">
    <img src="images/state.png"/>
    <b>State / Country</b>
</div>

<div class="area">
    <img src="images/county.png"/>
    <b>County</b>
</div>

<div class="area">
    <img src="images/township.png"/>
    <b>Township</b>
</div>

<div class="area">
    <img src="images/city.png"/>
    <b>City</b>
</div>

<div class="area">
    <img src="images/phone.png"/>
    <b>Phone</b>
</div>
</div>
<br/>
<p>
<b>Parameters: aa</b><br/>

Name: admistrative area<br/>

Type: filter<br/>

Value: state ie 'IL' (Optional field)<br/>

<br/>
<b>Parameters: country</b><br/>

Name: country<br/>

Type: filter<br/>

Value: country ie 'US' (Optional field)<br/>

<br/>
<b>Parameters: county</b><br/>

Name: county<br/>

Value: county name ie 'LaSalle County' (Must match format '[county name] County')<br/>
<br/>
<b>Parameters: township</b><br/>

Name: township<br/>

Value: township name ie 'South Ottawa Township' (Must match format '[township name] Township')<br/>
<br/>
<b>Parameters: city</b><br/>

Name: city<br/>

Value: full city name (Must match format '[city name]')<br/>
<br/>
<b>Parameters: phone</b><br/>

Name: phone number<br/>

Value: any value is allowed<br/>

Notes: The credit union's phone number</br>
<br/>
<h2>Examples:</h2>

<b>One County</b>
<pre>https://cualify.org/a.html?aa=IL&county=Livingston County&phone=815-555-1000</pre><br/>

<b>Multiple Counties</b>
<pre>https://cualify.org/a.html?aa=IL&county=Livingston County,LaSalle County&phone=815-555-1000</pre><br/>

<b>One Township</b>
<pre>https://cualify.org/a.html?aa=IL&township=Bruce Township&phone=815-555-1000</pre><br/>

<b>Multiple Townships</b>
<pre>https://cualify.org/a.html?aa=IL&township=Bruce Township,South Ottawa Township&phone=815-555-1000</pre><br/>

<b>One City</b>
<pre>https://cualify.org/a.html?aa=IL&city=Streator&phone=815-555-1000</pre><br/>

<b>Multiple Cities</b>
<pre>https://cualify.org/a.html?aa=IL&city=Pontiac,Streator&phone=815-555-1000</pre><br/>


<h2>Completed Example</h2>
<p>Below is the code that you would import into your website.</p>
<textarea class="copyarea">&lt;iframe src="https://cualify.org/a.html?aa=IL&county=Some%20County&phone=1234" width="100%" height="100%"frameborder="0" style="border:0" /&gt;</textarea>

<iframe src="https://cualify.org/a.html?aa=IL&country=US&county=Livingston County&township=&city=&phone=" width="100%" height="500px" scrolling="no" seamless="seamless" frameborder="0" style="border:0"></iframe>


<footer>
<p>&copy; 2016 Streator Onized Credit Union</p><br/>
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/"><img src="images/ccbyncnd.jpg"/></a>
<br/>
</footer>
</div>
</body>
</html>

Answer 1

The meta tag is placed properly, so it should work. meta标签放置正确，因此应该可以正常工作。 I realize this is small, but any chance you are saving and refreshing the correct page after the changes? 我知道这很小，但是您是否有机会在更改后保存并刷新正确的页面？

What kind of browser are you using? 您使用哪种浏览器？

Answer 2

If you are using HTML4 you should use 如果您使用的是HTML4，则应使用

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

And your page shouldn't be blank. 而且您的页面不应空白。 The error has to be somewhere else. 该错误必须在其他地方。 The encoding just says how characters will be rendered. 编码只是说明如何渲染字符。

Answer 3

I was able to resolve this, even though I'm not sure why it works. 尽管我不确定为什么它能解决问题，但我还是能够解决这个问题。 I changed all my extensions to .php from .html even though I do not have any PHP code at all on the site. 我将所有扩展名从.html更改为.php，即使该站点上根本没有任何PHP代码。 I'm using jQuery...it makes no sense. 我正在使用jQuery ...这没有任何意义。

UPDATE - This issue was being caused by mod_pagespeed that I was running on Apache. 更新-此问题是由我在Apache上运行的mod_pagespeed引起的。 As soon as I turned it off HTML files rendered fine. 一旦我关闭它，HTML文件就可以正常显示了。

It has to be something with one of these directives. 这些指令之一必须与之相关。 I haven't had time to test it though. 我还没来得及测试。 What a headache. 真是头疼

ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters resize_mobile_images
ModPagespeedEnableFilters inline_preview_images
ModPagespeedEnableFilters inline_google_font_css
ModPagespeedEnableFilters extend_cache

未声明HTML文档的字符编码，但实际上是

问题描述

3 个解决方案

解决方案1
1 2017-12-19 22:31:55

解决方案2
0

解决方案3
0 已采纳 2017-12-20 15:24:37

未声明HTML文档的字符编码，但实际上是

问题描述

3 个解决方案

解决方案1 1 2017-12-19 22:31:55

解决方案2 0

解决方案3 0 已采纳 2017-12-20 15:24:37

解决方案1
1 2017-12-19 22:31:55

解决方案2
0

解决方案3
0 已采纳 2017-12-20 15:24:37