HTML5 项目实践指南（六）
十七、打印、计数和重定向
顾名思义，本章提供了实现以下四个实用程序的实用方法:
- Page printing
- Self-service visitor counter
- Analyze Google Visitor Counter
- redirect
我将首先研究如何避免从浏览器工具栏打印的陷阱，以及用户如何节省墨水和纸张。然后，您将看到如何创建访问者计数器。最后，我将描述重定向到另一个页面、同一页面上的另一个位置或另一个网站的方法。
页面打印
通过使用浏览器工具栏上的“打印机”按钮或插入到页面顶部附近的“页面打印机”按钮，可以在没有特殊样式表的情况下从网站页面打印页面。
不幸的是，这两种方法都会打印出不需要的项目，如背景色、横幅标题、菜单按钮、页脚和广告。这些项目不必要地消耗纸张和墨水。此外，打印机必须设置为横向格式，以防止切断页面的右侧。诸如菜单按钮和“转到顶部”箭头等功能在打印的文档上毫无用处。此外，冗长的文档可能会在不方便的地方分页。下一节将展示如何通过研究以下主题来避免这些问题:
- Create this page button
- Prevent unwanted items from printing.
- Simplify printout to save ink and paper.
- page break
- Print URL (web address)
- Print check box
- Search engines and printable pages
- Test CSS printable page
创建一个“打印本页”按钮
可以使用浏览器工具栏按钮打印页面，但大多数用户更喜欢突出的打印本页按钮，尤其是初学者。可以在页面顶部附近插入页面打印机按钮，如图图 17-1 所示。
***图 17-1。*两种类型的页面打印机按钮
对于一个标准的窗口按钮(就像图 17-1 中的上部按钮)，把这个标记放在你想要按钮出现的页面上。下面只给出清单 17-1 的一部分，但是完整的清单可以从本书的页面[www.apress.com](http://www.apress.com)下载
清单 17-1。【button-types.html 分部分项清单两种类型页面打印按钮】(??)
<div id="button"> <input type="button" **value="Print this page"** onclick="window.print()" title="Print this page"> </div>
value(标记中以粗体显示)提供了按钮上的文本。
Windows 样式按钮的 CSS 是:
#button { text-align:center; }
对于图 17-1 中的自定义下部按钮，使用以下标记:
<div id=button> <input id="printbtn" type="button" value="Print this page"  onclick="window.print()" title="Print this page"> </div>
自定义按钮的 CSS 是
#button { text-align:center; } #printbtn { margin-bottom:10px; padding:5px; font-weight:bold;  background:aqua; color:black; }
防止打印不需要的项目
为了在打印页面时去掉不需要的项目，必须创建一个附加的“打印”样式表。这将以更方便的纵向格式打印页面，以黑白方式打印，并删除所有不需要的项目。
- Main style sheet; For example,
mainstyle.csswill determine how the page is displayed on the screen.- Print style sheet; For example,
print.csswill determine how the page is printed.
仅当单击“打印本页”按钮(或浏览器的“打印”按钮)时，打印样式表才会起作用。
在 HTML 页面的<head>…</head>部分，将打印样式表链接放在屏幕样式表链接之后，如下所示:
<link rel="stylesheet" href="**mainstyle.css**" type="text/css" **media="screen"**> <link rel="stylesheet" href="**print.css**" type="text/css" **media="print">**
简化打印输出以节省墨水和纸张
图 17-2 、 17-3 和 17-4 显示打印输出可以删除所有不必要的项目。
***图 17-2。*屏幕显示(仅页面的上半部分)
图 17-3 。第一个打印页面
***图 17-4。*第二印页
在图 17-2 、图 17-3 和图 17-4 中，我选择从打印输出中省略以下项目:
- Background color (to save color ink).
- Header (which contains no useful information). This can save paper and ink.
- Print this page button because it doesn't work on printout.
- Menu buttons, because they don't work on printouts. On the screen display
- Headings (
h1toh6) have large line spacing. I choose to reduce the text size and line height in the printout to save the user's paper.- Go to the "Up" arrow at the top of the page because it doesn't work on printout.
- Footer, because it is a set of links that don't work on printout.
我还决定拆分栏目。这个项目中的屏幕页面有两列；每一栏包含不同的主题。因此，我设置了打印输出，以便为每一列/主题生成不同的页面。这可以防止页面在不适当的位置断开。我通过在第二列顶部放置分页符来实现这一点。
我保留了打印输出中的指导图像，因为它们对用户有用。
清单 17-2a 、 17-2b 和 17-2c 提供了两列页面和两个样式表的内容。这种情况下的菜单是一个带有翻转按钮的水平菜单栏。它包含在标题<div>中。没有使用语义标签，所以练习的要点可以被清楚地理解，而没有 IE 的 JavaScript hack 的混乱。在清单 17-2a 中，为了节省空间和清楚地显示打印 CSS 所针对的项目，大部分文本内容都被省略了。包含两个样式表的完整页面可以从 Apress companion 网站下载。屏幕和打印样式以粗体显示。打印机忽略的<div>也以粗体显示。
注意打印的页面有一个小缺点:多栏页面打印每一栏，使其横跨页面的整个宽度，如图图 17-3 和 17-4 所示。
清单 17-2a。【twocol-printer.html】展示页面打印的两栏页面
`
Two column page for printer *meta details go here* **** ****Coly Computer Help
****
INSTALLING & CONFIGURING A FREE ANTI-VIRUS PROGRAM
How good is a free Anti Virus program?
*The content of the first column goes*
Configuring a free anti-virus program
*The content of the second column goes here*某些版本的 Mozilla Firefox 有时会因为一个内置的怪癖而插入一个空白页。为了避免任何浏览器怪癖，用re-set开始样式表，如清单 17-2b 所示。
***清单 17-2b。*打印机的 CSS 样式表(twocol-print.css)
/*PRINT.CSS: re-set style for printing only*/ /*re-set basic styles to avoid browser compatibility quirks*/ html, h1, h2, h3, h4, h5, p { padding:0; margin:0; font-size:100%; font-weight:normal; } /***TO SAVE INK**, set the text to black with white background*/ body { width:100%; padding:0; margin:0; float:none; color:black; background-color:white; } /***TO SAVE PAPER**, remove the large line space beneath a heading. Set headings to 14 point*/ h1, h2, h3, h4, h5, h6 { margin-top:0; margin-bottom:0; font-weight:bold;  font-size:14pt; !important } /***SELECT UNWANTED PRINT-OUT ITEMS**, i.e., header, menu, print-button, footer and uparrow*/ #hdr, #hmenu, #button, #ftr, .uparrow { display:none; } /***REVEAL OUTGOING URL** links on printed page. See item on Printing URLs*/ ahref^="http://":after {content: "(" attr(href)")"; } /***SET PAGE BREAK** class so that the printed pages do not break in undesirable places*/ .break-before { page-break-before: always; }
 color: #000000; } #container {text-align:center; margin: auto; width:960px; } img { border:0; } #leftcol { float: left; width: 48%; padding:2px; text-align:left; } #leftcol img { float:left; margin-right:5px; } #rightcol { float: right; width: 48%; padding:2px; text-align:left; } #ftr { clear: both;}/* ensure footer stays at the bottom */ #hdr { background-position:35% 20%; background-image:url('img/compbkgcrop.jpg');  background-repeat:no-repeat; width:960px; height:170px; } #button {margin:auto; } h1 { position:absolute; top:90px; left:300px; width:450px; font-family:"Times New Roman";  font-size: 300%; color: #0080a0; font-weight:bold; margin-bottom:5px; } .uparrow { text-align:center; } #hmenu { width:790px; text-align:center; margin:5px 0 10px 100px; } li.hbtnew {display:block; margin:auto; float:left; text-align:center; padding:3px;  list-style-type:none; list-style-position:inherit; } li.hbtnew a {display:block; text-decoration:none; color:white; background-color:#0080a0;  font-weight:bold; padding:4px; } li.hbtnew a { background: #0080a0; border: 4px outset #AABAFF; } li.hbtnew a:hover { background: #0060a0; color:yellow; border: 4px outset #8ABAFF; } li.hbtnew a:active { background:#ABCBFF; border: 4px inset #ABCBFF; } h3, h4, h5, h6 { margin-top:0; margin-bottom:0; } span.tiny {font-size: x-small; } .cntr { text-align:center; margin:auto; } .lft {text-align:left; } .right {text-align:right; }
打印网址(网址)
如果网页有到其他页面的内部链接或同一页面上的锚，打印它们是没有意义的，因为它们在打印的页面上没有任何作用。CSS 标记的下一部分将打印对用户有用的网站的 URL。打印的 URL 将省略下划线，因为这有时会掩盖 URL 中的下划线。该代码适用于所有浏览器。
/*reveal links on printed page*/ a[href^="http://":after {content: "("attr(href)")"; }
注意中间的四个括号(大括号之间)是普通的弯括号。假设下面几行出现在 HTML…
`
Click for <a title="Click for free computer help" href="www.colycomputerhelp.co.uk">Free computer help
`URL 的屏幕外观如下:
点击获取免费电脑帮助
相应的打印输出将是:
点击获取免费电脑帮助(
[www.colycomputerhelp.co.uk](http://www.colycomputerhelp.co.uk))。
打印复选框
在订单等可打印页面上，使用 Wingdings 或 Webdings 的方形复选框(也称为勾选框)在 Mozilla Firefox 中不起作用。然而，几乎每台计算机都有 Lucida Sans Unicode 符号。Lucida Sans Unicode 复选框□在所有流行的浏览器中都能正确显示。您需要在文本框中使用比文本更大的字体。
***图 17-5。*这是盒子在所有流行浏览器中的显示和打印方式。
清单 17-5 提供了一个可以正确打印并在所有浏览器中正确显示的复选框。
清单 17-5 。适合在所有浏览器中打印的勾选框(tickbox-printer.html)
`
This is box styled with Unicode Lucida font .stylebox { font:xx-large bold; font-family:"Lucida Sans Unicode"; margin-left:50px;}The tick box shown below is styled with Unicode Lucida and it is formatted as xx-large and bold
□
` ` `搜索引擎和可打印页面
一些网页设计者创建一个易于打印的网页，它是主要文本内容的副本。搜索引擎不赞成使用重复的页面。以下是 Google 关于使用重复页面而不是页面的 CSS 可打印版本的说法:“不要在不同的 URL 下创建一个页面的多个副本。许多网站提供纯文本或打印友好版本的页面，这些页面包含与相应的图形丰富的页面相同的内容。为了确保您的首选页面包含在我们的搜索结果中，您需要使用 robots.txt 文件阻止重复的页面。有关使用 robots.txt 文件的信息，请访问我们关于阻止 Googlebot 的信息。”
有关robots_text的信息，请访问:
[code.google.com/web/controlcrawlindex/docs/robots_txt.html](http://code.google.com/web/controlcrawlindex/docs/robots_txt.html)。
注本章描述的页面打印机并没有颠覆搜索引擎。使用本章所示的 CSS 页面打印机可以避免这个问题。
测试 CSS 可打印页面
没有必要浪费纸张和墨水，即使测试需要合理的反复试验。将页面加载到浏览器中，然后单击文件打印预览，查看可打印页面的外观。如果可打印页面包含分页符，请单击打印预览屏幕底部的向右箭头查看后续页面。
按 Esc 键退出打印预览模式。
自助游客柜台
许多客户要求设立访客柜台。支付了网站和托管费用后，他们会急于知道是否有人访问它。你必须在第三方柜台，依靠主机的柜台，或者在网站上放置自己的 DIY 柜台之间做出选择。
第三方计数器意味着向页面添加一些代码。该代码然后链接到一个为您管理计数的 URL。我发现第三方计数器有时会受到拒绝服务攻击(DOS ),使计数器暂时无法工作。一位网站所有者曾经告诉我，网站的计数不再有意义。因此，我使用 DIY 计数器，因为它完全在网站管理员的控制之下，不依赖于易受攻击的主机。
大多数主机提供访问者统计数据，但是所有者不愿意钻研他们网站的控制面板。这意味着 DIY 柜台可能是最好的选择。在接下来的部分中，我将向您展示如何创建一个。它确实涉及到一小段 PHP 脚本的简单应用，但这是完全解释。主要议题将介绍如下:
- Why use the counter?
- Explain visitor count
- How does the counter work?
- Step 1: Create a free PHP visitor counter.
- Step 2: Create
"count"file- Step 3: Create three tiny and identical text files with a text editor.
- Step 4: Match the menu with three PHP main pages.
- Matching step 5: upload the counter to the host.
- Step 6: Ensure
为什么要用计数器呢？
一些网页设计师不鼓励他们的客户设置访客柜台。他们说柜台是过时的，业余的，没有意义的。这些借口通常掩盖了设计师对搜索引擎优化的无能。他们不想因为访客数量少而暴露他们的无能。
仅限于主页的访问者计数器可能无法为网站所有者提供足够的信息。主页可能有很多点击率，但是如果主页过于花哨、混乱或者晦涩难懂，用户就不会浏览网站的其他部分。计数器只是告诉网站所有者有多少人访问了主页，这不是很有用。所有者需要知道访问者是否被诱惑去浏览其他页面。因此，访问者计数器应该放在其他关键页面上，也就是所有者希望被访问的页面。这将告诉所有者，主页是否已经说服用户进行更深入的研究。
解读访客数量
通过查看访问者数量以及多少页面应该有计数器，我们可以了解到什么？
假设主页上的访客计数器显示为 10，000。所有 10，000 个访问者可能只看了一眼你的主页，然后跳到另一个网站。或者他们可能看了好几页。所有者永远不会知道访问者是否被诱惑去更深入地研究网站。
很明显，只在主页上有一个计数器不会提供很多信息。如果计数器也放在另外三个关键页面上，我们可以了解更多。让我们将关键页面称为步行者页面、露营者页面和关于我们的页面。我们如何解释下面的访问者数量？
- Home page: 10000 visitors
- Traveler page: 5800 visitors
- Camp page: 8700 visitors
- About our page: 2300 visitors
这一信息表明
主页不会因为其他页面有访客而拒绝访客。* Tourists are more interested in camping equipment than walking equipment.* The sum of other page hits is greater than that of the first page; Therefore, the homepage will attract visitors to look at more than one other page.
计数器如何工作
这个计数器不仅免费，而且完全可靠。计数器需要一些 PHP 代码，但是您不需要 PHP 知识来实现它。只需将您自己的文件名和编号插入到本节包含的简单列表中。计数可以从所有者选择的任何数字开始；在这个例子中，我选择了 1000。该方法非常简单，只需将一段 PHP 代码插入到页面中。当用户访问网页时，这段代码触发一个小的 PHP 文件，将文本文件中存储的数字加 1。新的数字(现在是 1001)被传回网页并显示出来。该过程如图 17-6 所示。
***图 17-6。*当一个页面被访问时，访问者的数量如何增加 1
一个虚拟主页？一些设计者创建了一个类似于index-dummy.html的复制主页，这样所有的页面都链接到虚拟主页，而不是真正的主页。这种方法意味着，如果在浏览了网站上的其他页面后，访问者点击返回主页，他们将被发送到虚拟主页。正版主页上的计数器不会记录另一个唯一访问者。虽然这给出了一个更准确的访问者数量，但它确实意味着网站违反了搜索引擎的一条规则:“不要创建重复的页面。”所以，不推荐这种技术。
第一步:创建一个免费的 PHP 访客计数器
本章介绍的访客柜台是由 CJ 网站设计公司的詹姆斯·克鲁克设计的。他的网站是[www.cj-design.com](http://www.cj-design.com)。
这个柜台可以免费使用，条件是你要把他记在访客柜台旁边。完成这项工作的代码在三个count*.php文件的步骤 2 中列出。
这个工作示例假设关键页面是index.html、walk.html和camp.html。(在本例中，我们将假设所有者不希望“关于我们”页面上有计数器)。
注只有列出的三页才会有一个
DOCTYPE。支持文件(*.dat和count*.php)必须而不是有一个DOCTYPE。
Use a text editor (such as Notepad or Notepad++) to insert the
includecode type (shown in bold) directly above the end body tag (index.html) of the homepage, or you can put it in the footer.将修改后的索引页面保存为
index.php，如清单 17-6 所示。清单 17-6.【index . PHP】包含访客计数器的主页
`
index page with counter *meta details go here* * *the home page content goes here* **** **** **
** `
注意因为页面包含了一些 PHP，所以本例中的
charset必须是windows-1252；否则,页面将无法验证.Repeat the process in
camp.html pageas follows:**<p>** **<?php include("countcamp.php");** **?>** **</p>**Save the file as
camp.php.Repeat the process in the
`walk.htmlpage. `Save the file as
walk.php. Now you have three new.phpfiles:index.php,camp.phpandwalk.php.
第二步:创建盘点文件
使用文本编辑器从头开始创建三个"count"文件，并将它们保存为.php文件。除了粗体显示的项目外，这些文件是相同的。
- Create the first
"count"file for the home page, as follows: `"; } ?> ©CJ Counter `- Save the file as
counthome.php.- Create a second
"count"file for the camping page, as follows:<?php $COUNT_FILE = "**countcamp.dat**"; if (file_exists($COUNT_FILE)) { $fp = fopen("$COUNT_FILE", "r+"); flock($fp, 1); $count = fgets($fp, 4096); $count += 1; fseek($fp,0); fputs($fp, $count); flock($fp, 3); fclose($fp); } else { echo "Can't find file, check '\$file'<br>"; } ?> <font color="#000000" size="x-small" face="Arial"> <?php echo $count; ?> <a href=”http://www.cj-design.com>©CJ Counter</a> </font>- Save the file as
countcamp.php.- Create a third
"count"file for the walking page, as follows:<?php $COUNT_FILE = "**countwalk.dat**"; if (file_exists($COUNT_FILE)) { $fp = fopen("$COUNT_FILE", "r+"); flock($fp, 1); $count = fgets($fp, 4096); $count += 1; fseek($fp,0); fputs($fp, $count); flock($fp, 3); fclose($fp); } else { echo "Can't find file, check '\$file'<br>"; } ?> <font color="#000000" size="x-small" face="Arial"> <?php echo $count; ?> <a href=”http://www.cj-design.com>©CJ Counter</a> </font>- Save the file as
countwalk.php.
第三步:使用文本编辑器创建三个微小的相同的文本文件
- Only the starting number of the counter (such as 0 or 1000) is put in each file. Don't put anything else in these files, and don't insert commas to represent thousands.
- Save these three files with the names of
home.dat,camp.datandwalk.dat.
您现在有了三个新的 PHP 网页、三个.dat文件和三个*count.php文件。
第四步:让菜单与三个 PHP 页面相匹配
在网站的每个页面上，更改菜单超链接，使其链接到index.php、camp.php和walk.php页面，而不是旧的*.html页面。
第五步:上传计数器到主机
- Use your FTP program to access the website on the host server.
- Now upload three
.datfiles, threecount.phpfiles and three main PHP pages to the host server.- Using FTP program, right-click New File
counthome.phpon the panel of the host server. In the drop-down menu, look for Properties/CHMOD and click it. Change the number 644 to 777.- 对
countcamp.php``countwalk.php``counthome.dat``countcamp.dat``countwalk.dat，重复此步骤
注 CHMOD 代表改变模式；也就是说，它使您能够更改文件的访问权限，从而使内容不能被 Linux 服务器上未经授权的人激活。主页面保留为 CHMOD 664，因此不会受到干扰。其他页面被设置为 777，以允许文件之间进行交互，从而在每次有人查看页面时改变访问者数量。在支持 PHP 的 Windows 服务器上，这要稍微复杂一些。最简单的方法是将
.dat文件放在子目录中，并将子目录设置为 777。
第六步:确保浏览器访问新的*。php 页面而不是旧的*。html 页面
这很可能是最重要的一步，因为它防止浏览器访问旧的 HTML 文件；因为如果两个文件有相同的前缀，比如index.html和index.php，浏览器总是会选择 HTML 版本。
- In the right server/host pane of FTP program, right-click the file
index.html, rename itindexold.htmlor delete it. The user will now automatically access theindex.phpfile.- Repeat this step for
camp.htmlfile andwalk.htmlfile.
计数器现在的功能应该如下:当一个访问者访问一个页面时，这将触发一个相关的文件:countcamp.php或countwalk.php或counthome.php。这些导致相关*.dat文件上的数字增加 1。然后，新号码被传递到相关页面，并在那里显示。您现在需要测试计数器。
第七步:测试计数器
使用浏览器访问网站，以确保计数器数字显示在页面底部。如果计数器编号出现在页面上，请单击浏览器上的刷新图标。该数字应增加 1。访问其他主页，检查它们的计数器是否正常工作。
注意如果出现 PHP 解析错误，很可能是在
<?和php之间插入了空格。删除那个空格，使它看起来像<?php。
使用谷歌分析追踪访客
Google Analytics 是之前描述的 DIY 计数器的替代产品。它为每个页面的访问者提供了详细的分析，甚至记录了访问者浏览每个页面的平均时间。你将能够发现游客流量来自哪里；例如，搜索引擎、推荐或直接 URL 输入。它甚至会告诉你哪些国家使用你的网页最多。
Google Analytics 要求你在网站的每个页面的<head>部分添加一段 JavaScript。以下步骤将为您提供代码并帮助您安装它:
- To install Google Analytics, please visit
[www.google.com/analytics](http://www.google.com/analytics)and log in. If you have a Google account, log in with it; Otherwise, register an account.- In the form that appears, check the box to indicate that you agree to the terms.
- Click the "Create Account" button, and you will see a code inserted into the
<head>section of each page. This code is essential; Without it, Google can't track your web page. Insert a code snippet before the closing</head>tag.
当您下载代码时，它将类似于以下内容:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-67xxx9-1"; urchinTracker(); </script>
24 小时后，您将能够看到第一批访客报告。随着时间的推移，这些报告将变得更有意义。要访问分析(称为我的仪表板)，打开[www.google.com/analytics](http://www.google.com/analytics)并登录。单击您的网站名称，统计数据就会显示出来。
在 Google Analytics 的左侧菜单中，选择流量来源关键字。这将向您显示人们为了到达您的网站而搜索的所有关键字的列表。
如需帮助，请访问[support.google.com/googleanalytics/?hl=en](http://support.google.com/googleanalytics/?hl=en)。
重定向
重定向是链接的子集(或者用完整的术语来说是超链接)。链接有三种形式:将用户从一页带到另一页的导航链接；页面的<head>部分内将页面连接到脚本或 CSS 样式表的链接；和不属于其他两个类别的重定向链接。
大多数用户都熟悉顶部有一组链接的网页(见图 17-7 )。单击这些链接时，光标会跳转到页面上的各个部分。用户被重定向到页面上的特定位置。用户也可以被重定向到另一个页面上的特定位置。它们可以从一个网站重定向到另一个网站，旧网站可以将用户重定向到具有不同 URL 的较新版本。
锚和链接
重定向指向的地方称为锚。最初，页面上的锚被定义为<a name="…"></a>。虽然<a name="…"></a>没有被弃用，但是 W3C 在 2002 年推荐用id代替name。然后代码变成了<a id="…"></a>。同样的建议也适用于同一页面或其他页面上的锚；也就是用id不要用name。
将光标重定向到锚点的组件是一个链接。您将完全熟悉将您重定向到另一个页面的链接。这通常采取以下形式:
<b>For a desciption of the tennis courts</b> Please click <a href="tennis.html " title="Tennis court information"><b>Tennis</b</a>.
接下来的六个小项目显示，将光标发送到比整个页面更具体的锚点时，需要稍微不同的链接格式。
重定向到同一页面上的特定位置
页面顶部的链接列表可以将用户重定向到该页面的各个部分。对于长页面的信息，这是常见的做法。图 17-7 显示了在同一页面上移动的典型菜单。单击链接会将您带到页面上的相关部分。总是在每一部分的末尾放置一个向上箭头(或返回菜单链接)，以允许用户重定向回菜单(见图 17-8 )。
***图 17-7。*默认链接重定向
***图 17-8。*使用向上箭头重定向
清单 17-7 中的粗体字显示了这两个图中重定向链接的位置。单击菜单上的一个项目会将您带到相关部分。单击页面上任意位置的向上箭头会将您重定向到菜单。完整的文件可以从 Apress 伙伴网站下载。
清单 17-7。【long-page-with-links.html 在长页面上创建两种类型的重定向
`
Long page with links to items on page #menu p { margin-top:5px; margin-bottom:0; } img { border:0; } h1 { font-size:large; } ****EMBEDDING SCRIPTS
****Introduction
*Long block of text goes here* **Return to Menu
About Us
*Long block of text goes here* **Return to Menu
Embed scripts
*Long block of text goes here* **Return to Menu
Terms and Conditions
*Long block of text goes here* **Return to Menu
您需要创建颜色和大小适合您的页面的箭头图像。
对于很长的文本块，可能需要不止一个向上箭头。为附加的向上箭头创建一个类，并将该类的上边距设置为 400 像素。向上的箭头将会在垂直方向上分开，而不会像<br><br><br><br><br>或<p> </p><p> </p><p> </p><p> </p>等那样在向上的箭头之间使用很多间隔。
重定向到同一网站不同页面上的特定位置
在下一个例子中，一个名为page1.html的网页有一个到page2.html的链接，但是锚是第 2 页上的一个特定位置。在page2.html的那个特别的地方有使用网球场的费用清单。原理如图 17-9 中的所示。
***图 17-9。*重定向到另一个页面上的特定位置
page1.html中的重定向链接将是page2.html#tennis-prices。完整的链接是:
<b>For details of the cost of using the tennis courts</b> Please click  <a href="page2.html#tennis-prices" title="Tennis court hire prices"><b> Tennis prices</b </a>
href指定目标页面(page2.html)，散列符号指定目标页面上的精确位置(#tennis-prices)。在page2.html中，就在网球场价格列表的前面，您将插入以下代码:
<a id="tennis-prices"></a>
当用户点击page1.html上的链接时，浏览器立即跳转到page2.html上的网球场价目表部分。
从旧网站重定向到新网站
所有者可能希望将流量从旧网站重定向到新网站。图 17-10 显示了一个被新网站取代的网站的典型页面。在显示页面的同时，用户将在几秒钟内被自动重定向到新的网站。
***图 17-10。*一个典型的重定向页面
我们现在来看一个典型的例子。假设所有者是英国的一个镇议会。网址是[www.brightville-council.com](http://www.brightville-council.com)。委员会决定.com域名并不真正适合英国市政厅。因此，委员会委托你设计并制作一个闪亮的新网站，名为[www.brightville-council.org.uk](http://www.brightville-council.org.uk)。对于知道旧网址的 100，000 人，委员会能做些什么？然后是所有文献和那些引用旧 URL 的目录所带来的问题？
此外，搜索引擎将索引旧网站的一些页面，以便输入“Brightville”或“Brightville council”将访问旧网站。
最简洁的解决方案是让旧站点与新站点并行运行几年，但是您需要确保新旧站点之间没有紧密的重复。搜索引擎不会容忍重复的网站。
下一步需要一些侦查工作。使用搜索引擎来发现当输入关键字时搜索引擎选择了哪些页面。出现在结果的前三页的页面就足够了。记下页面名称，因为必须向这些页面添加重定向。
使用旧网站的 FTP 详细信息下载这些页面的副本。使用清单 17-10 中显示的标记创建这些页面的新版本，并保持相同的页面名称。重定向指令以粗体显示。
清单 17-10 为这个问题提供了一个简单的解决方案，它自动通知用户，然后将他们重定向到新的网站。此列表没有可下载的模板。
清单 17-10 。添加到另一个网站的重定向
`
Redirection page **** *no need for any other meta content* body {font-weight:bold; font-size: large; color:black; font-family:arial;  text-align:center; }A search engine such as Google has directed you to an old version of our web site
Please accept our apologies
>You will be switched to the new version at   www.***brightville-council.org.uk*** in 5 seconds
If re-direction does not occur after 5 seconds, please click  Here
`插入您自己的新网站详细信息，以取代粗体斜体显示的 URL。在存储旧 URL 的主机中，上传修改后的页面以替换旧页面。重定向消息上的文本可能类似于图 17-10 中的文本。在每一页上稍微改变一下文字，这样搜索引擎就不会被重复的页面打乱。
创建“返回”按钮
可打印表单等页面可能没有导航菜单。通过返回按钮进行重定向将是一个有用的功能。返回按钮可能类似于图 17-9 中的所示。
***图 17-11。*典型的返回按钮
通常只有在网站的单个页面上才需要返回按钮，所以内部样式表是一个明智的选择。但是，如果网站中有几个页面需要“返回”按钮，请使用外部样式表。清单 17-11 创建了如图图 17-11 所示的返回按钮。此列表没有可下载的模板。
***清单 17-11。*在网页中插入返回按钮
`
A Go-back-button ` ` *meta details go here* #button {height:22px; width:125px; margin:auto; background-color:#6aaaff;  text-align:center; } /*set alternative hyperlink colours white medium bold*/ a.button:link {color: white; text-decoration:none; font-size:100%; font-weight:bold; } a.button:hover {color: red;text-decoration: none; font-size:100%; font-weight:bold; } `用您希望返回的页面的文件名替换**previous-page.html**。
返回任何页面
如果用户已经从任何其他页面随机访问了一个页面，您将需要一点 JavaScript 来实现到未知页面的重定向。这确实复制了浏览器后退按钮的功能，但是它可能是有用的，例如，在反馈表单的错误报告页面上。按钮文本的值将会是“返回表单”。
如果用户已经从任何其他页面到达一个名为page2.html的页面，她可以通过该按钮返回到任何的上一页(参见图 17-12 )。
***图 17-12。*将用户重定向到上一页的按钮
当单击按钮时，用户返回到上一页。该按钮是用清单 17-12 中的创建的。(此列表不可下载)。
***清单 17-12。*在页面上放置一个按钮，将用户重定向到上一页
`
A Go-back-to previous page button *meta details go here* `总结
本章讨论了三个主题:页面打印、访问者计数器和重定向。页面打印机代码旨在节省用户的纸张和墨水，并提供一个干净的打印输出，没有不必要的项目，如背景色，横幅标题，菜单按钮，广告和页脚。
DIY 访问者计数器为用户提供了一个简单的网站是否吸引访问者的视觉评估。这一章解释了为什么在不止一页上有一个计数器很重要。提供了安装 Google Analytics 作为 DIY 计数器替代方案的说明。
重定向部分列出并解释了五种类型的重定向。
在下一章中，您将了解为什么验证是重要的，以及如何解释验证器(如 W3C 验证器和html5.validator.nu)提供的报告。
十八、验证
为什么你应该验证
验证是一个经常被请求的增强功能。客户要求我在他们的页面上添加一个 W3C 验证标志，以表明他们雇佣了一个有能力的网页设计师。验证使网页设计者为他们准确的编码感到自豪。验证还有一些实际原因，如下所示:
验证是解决模糊问题的另一种方法。通过在不同浏览器中测试页面之前进行验证，设计人员可以节省时间并避免失败。* It ensures that your page is coded correctly, so that the browser won't produce strange results.* It ensures that the search engine will not be blocked because of your tiny coding errors.* Disabled users will be able to access your page. Small coding errors will trouble automatic screen readers.* The mobile device has a reduced version of the browser; They can't handle errors in unverified websites.
html 5 和 XHTML5 的文档类型
要验证 HTML5 页面，DOCTYPE 必须设置为下列之一:
对于 HTML5
`
HTML5 test page *meta details go here* `对于 XHTML5
`
` `XHTML5 test page *meta details go here* `lang=en指定英语语言。
提示对于非英语语言，参见
[www.w3schools.com/tags/ref_la…](http://www.w3schools.com/tags/ref_language_codes.asp)和[www.iana.org/assignments…](http://www.iana.org/assignments/language-subtag-registry)
标志
如果一个页面有一个可访问的数据表，该页面必须是 HTML4 或 XHTML1.0，因为屏幕阅读器(在编写时)不能正确读取 HTML5 表(见图 18-1 中 HTML4 和 XHTML 1.0 的相关验证标志)。
HTML4 和 XHTML 1.0 徽标
当 HTML4 或 XHTML 1.0 页面通过验证时，您有权在页面上放置验证证书，以向您的客户证明您能够按照最新标准正确编写网站代码。您还可以下载经过验证的 CSS2 样式表的徽标。对于 HTML4 和 XHTML 1.0，你可以选择蓝色或黄色的标志。HTML4 和 XHTML 1.0 标识如图图 18-1 所示。
***图 18-1。*这些可下载的徽标可从 W3C 验证器获得
HTML5 的 logo 有点不一样。我们接下来会看到这一点。
html 5 标志
图 18-2 显示了 2011 年 1 月发布的 HTML5 标志。
***图 18-2。*html 5 验证标志
目前，HTML5 标识并不表示 W3C 是提供验证的权威。你需要在你的页面上说明这一点。
HTML5 徽标有多种尺寸和多种配置。W3C 徽标网站很漂亮，但令人困惑。它在[www.w3.org/html/logo/](http://www.w3.org/html/logo/)被发现
注意W3C 网址中没有字母“c”；是
w3.org不是w3c.org。它是在知识共享署名 3.0 下许可的。您可以更改徽标的颜色和大小，以匹配您的网页。
可验证 HTML5 徽标的解决方案
HTML4 和 XHTML 1.0 徽标附带了完整的 HTML 代码，这样用户就可以单击徽标并收到页面经过真正验证的验证。在撰写本文时，HTML5 徽标没有这种保护措施；网站管理员可以欺骗并嵌入 HTML5 徽标来假装页面是有效的。
同时，我设计了一些代码来克服这个缺陷。该代码既可以消除动态嵌入 HTML5 徽标的需要，也可以从您的images文件夹中调用它。在网页的适当位置输入清单 18-2 中粗体显示的代码；你用它不需要我的许可。
注意一个页面必须上传到主机，使我的徽标代码在单击时产生验证报告。如果您不这样做，一个错误消息将告诉您验证程序无法定位 referer。
清单 18-2。【在网页上放置可验证的标志(verifiable-code-1.html)
`
Validation logo for html5 img { border:0; } ****
****
**
**
**
如果您希望从根文件夹中的 images 文件夹加载图像，而不是从 W3C 网站加载，请将 64 像素徽标下载到 images 文件夹中，然后使用下面的替代代码片段(verifiable-code-2.html):
**<p>** **<a href="http://validator.w3.org/check?uri=referer">** **<img src="img/html5_logo_64.png" width="64" height="64" alt="Validated HTML5"**  **title="Validated HTML5"></a>** **</p>**
如果您喜欢较小的徽标，请在代码片段中将 64 的每个实例都改为 32。您需要下载 32 像素版本的徽标，以使第二个代码片段能够显示小徽标。
注意验证 HTML4、XHTML 1.0、XHTML5 或 HTML5 时，验证报告有时会引用错误的行号。报告将引用一个行号，但您不会在该行上找到错误。这很正常；在所示行附近的行中查找错误，尤其是在前面的行中。
使用 W3C 验证器
W3C 验证器和 HTML5 徽标目前位于 W3C 网站的不同文件夹和不同页面中。此外，没有必要代码的 W3C 标志并不意味着页面是有效的。希望这本书出版时这些遗漏能被弥补。
我强烈推荐 W3C 验证器。图 18-3 显示了 W3C 验证器的界面，它在[validator.w3.org](http://validator.w3.org)被访问。
注意不管你用哪个
DOCTYPE，HTML4，XHTML 1.0，HTML5，还是 XHTML5，验证器都会识别出来并产生报告与之匹配。这同样适用于编码；它将自动检测它，并根据您的页面是utf-8还是任何 Windows 或 ISO 编码进行验证。
***图 18-3。*W3C 验证器的接口
当你在浏览器中打开 W3C 验证器时，你会看到三个标签:通过 URI 验证、通过文件上传验证和通过直接输入验证。以下提示将帮助您决定应该选择哪个选项卡:
如果你的页面已经上传到一个网络主机，选择第一个标签，将页面的 URL 复制粘贴到地址栏或者输入；比如
[www.mywebsite.co.uk/myhomepage.…](http://www.mywebsite.co.uk/myhomepage.html)。单击"检查"按钮,等待几秒钟。最终会出现一份报告如果页面尚未上传到您的 web 主机，请单击文件上传选项卡，在您的计算机上浏览到该页面的文件，并加载它。然后单击“检查”按钮。
或者单击"通过直接输入验证"选项卡,将页面的整个标记粘贴到提供的文本区域中。然后单击"检查"按钮
图 18-4 显示了一次成功的标记。
***图 18-4。*W3C 验证器成功验证了一个标记页面
图 18-4 显示了粘贴到文本区域的标记页面的成功验证。如果验证给出一个或两个警告，它们可以被忽略，因为它们指的是验证器是实验性的，而utf-8是自动假定的。警告与您的页面无关。
如果验证报告有一个绿色的标题，那么你的网页是有效的。如果它有一个红色的标题，那么你有一个或多个错误。我认为这是一个糟糕的颜色选择，因为最常见的色盲是红色/绿色。无论如何，以下部分回顾了一些错误和建议的解决方法。
提示为了最大限度的方便，使用文本编辑器来显示行号并打印页面标记。将打印结果放在计算机旁边，以便可以参考认证报告提供的行号。
HTML4 和 XHTML 1.0 的早期验证器检查正确的代码样式和标记错误。HTML5 验证器只关心标记错误。因为 HTML5 是向后兼容的，它将接受任何早期的样式，验证器也相应地工作。例如，HTML5 验证器将接受<meta charset=utf-8>、<META charset="utf-8">、<meta CHARSET=UTF-8 />或这些样式的任意组合。但是，它不会验证<meta charset=utf8>，因为缺少的连字符是错误的标记。
一些典型的 HTML5 验证错误以及如何修复它们
与验证 HTML4 和 XHTML 1.0 相比，HTML5 文档报告的错误更少，因为 HTML5 验证器只查找错误的标记；它不检查代码样式。
如果验证器报告的标题是红色的，问题列表和建议的解决方案将出现在红色标题的下面。
看到红顶报告中列出大量错误，您可能会感到震惊。不要担心，验证器总是报告许多错误，而实际上只存在少数错误(许多报告的错误是重复的)。
以下部分描述了一些典型的验证报告和适当的修复。
一份 W3C 验证报告发现了以下三个错误
下面是提交给验证器的 HTML5 标记的一个片段。我在括号中添加了行号，仅用于教学目的。
(10) <!--[if lte IE 8]><!-- conditional Javascript added --> (11) <script src="html5.js" type="text/javascript"> (12) </script> (13) <![endif]-->
验证报告的第一部分如下:
`Line 10, Column 23: Consecutive hyphens did not terminate a comment. -- is not permitted inside a comment, but e.g. - - is.
Line 10, Column 23: The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment.
Line 13, Column 3: Bogus comment. <![endif]--> Line 13, Column 11: The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment. <![endif]--> Line 13, Column 12: The document is not mappable to XML 1.0 due to a trailing hyphen in a comment. <![endif]-->`
不要让报告难倒你，而是按照以下四个步骤开始清除警告和一些重复。
提示将报告复制到 Notepad++或其他显示行号的文本编辑器中。然后清除警告。删除引用 XML 的行，因为这些行是已经报告的行的变体。这留下了一个更清晰的工作区域(如下所示)。
从报告中删除了所有警告，因为它们适用于验证器，而不是文档。我删除了所有对 XML 的引用，因为它们重复了前面的错误消息。以下是报告第一部分的剩余内容:`Line 10, Column 23: Consecutive hyphens did not terminate a comment. -- is not permitted inside a comment, but e.g. - - is.
Line 13, Column 3: Bogus comment. <![endif]-->`
报告指出,评论中不允许出现连续的连字符。我们知道注释中的连续连字符是正确的,那么问题是什么呢？验证器将条件代码块视为注释。这是正确的,因为它以
`*<!--开始,以-->结束。报告应该说你不能在评论里有*的评论于是，我将注释移到了条件注释的上方，并再次尝试验证。修改后的标记如下所示。`此验证成功；只剩下第三个错误,如下所示
Line 38, Column 42: Bad value 88px for attribute width on element img: Expected a digit but saw p instead. title="Valid CSS!" alt="Valid CSS!" /></a>Syntax of non-negative integer: One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.:查看标记,很明显出现了一个愚蠢的错误,如粗体所示
<p><a href="http://jigsaw.w3.org/css-validator/"><img src="img/vcss-blue.gif"  width="88**px**" height="31" title="Valid CSS!" alt="Valid CSS!"></a> <span class="small"><br><br>Markup Validated by the World Wide Web Consortium</span></p>The last paragraph of the report said that it saw a letter "P" instead of a number. The width of images in HTML tags can only be numbers.
88pxis very good in CSS stylesheets, but it is not a good tag when it is included in HTML pages. Afterpxis removed, the whole page is verified successfully.
视频文件会产生验证错误和警告
一个播放视频的 HTML5 文件被提交给验证器，验证器报告了 14 个错误和 2 个警告。这两个警告被忽略，因为它们与验证程序有关，而与页面无关。其中 12 个错误是相同的——12 个&符号被写成'&'。验证器建议将&符号改为实体&。使用“查找和替换”,十二个“与”符号变成了实体。然后，在几个浏览器中测试该页面，以检查其功能是否正常；幸运的是，它做到了。页面再次被提交给验证器。该报告只给出了两个错误，如下所示:
Line 20, Column 49: Element object is missing one or more of the following attributes: data, type. <object width='320' height='265' id='flvPlayer'>Attributes for element object: Line 24, Column 9: Stray end tag embed. </embed>
我注释掉了</embed>标签，然后页面在浏览器中测试，然后重新提交给验证器。这一次，唯一的错误在第 20 行，这里的属性在<object>标签中丢失了。
验证程序推荐了一个data或一个type属性。首先，一个Mime type被匹配到视频，这是一个冲击波文件。
在互联网上快速搜索发现了一个冲击波文件的 MIME type;它被输入到代码中，如粗体所示。
<object width='320' height='265' id='flvPlayer' **type="application/x-shockwave-flash"**>
修改后的页面在浏览器中运行正常，并且验证成功。
找到字节顺序标记
Microsoft Expression Web 是创建标记的程序之一，这些标记会产生神秘的警告“发现字节顺序标记”。
字节顺序标记(BOM)是嵌入在utf-16页中的字节序列。它确保您的 utf-16 文档能被 web 浏览器正确读取。不幸的是，默认情况下，MS Expression Web 会在不需要 BOM 的地方向utf-8页面或 PHP 页面添加 BOM。
在 MS Expression Web 中，要防止 BOM 包含在新页面中，请按照下列步骤操作:
- Click Tools and select the Page Editor Options dialog box.
- On the authoring tab, check the contents under New Document.
- Then add a byte order mark (BOM) to the new
utf-8document with these file extensions, and you will see a list of file extensions.- Clear the check box next to each file extension that you do not want BOM.
要从现有页面中删除 BOM，请执行以下操作:
- Open the document in Expression Web.
- In Code view, right-click anywhere, and then click Encoding.
- In the text file encoding dialog box, clear the check box marked "Include a byte order mark (BOM)".
- Save the page and upload it; And then re-verify.
注意免费的 Notepad ++程序有一个 BOM 移除工具。加载页面，单击菜单上的“格式”，然后选择“转换为不带 BOM 的 UTF”。Notepad ++还提供了行号、颜色编码和许多其他用于编辑任何类型的 web 文档的强大功能。
检测到罕见或未注册的字符编码
如果您看到该错误消息，那么包含文本编码的 meta 标记中有一个错误。标记应如下所示:
<charset=utf-8>
很可能你省略了utf-8中的连字符。
关于 PHP 页面，包含一些 PHP 代码是“罕见或未注册字符”错误消息的常见原因。要验证包含 PHP 的页面，字符集必须是windows-1252，如下所示:
<charset=windows-1252>
验证可访问数据表:HTML4 和 XHTML 1.0 验证错误及解决方案
对于盲人和弱视者，任何数据表都必须出现在 XHTML 1.0 或 HTML4 页面上。在屏幕阅读器能够正确读取具有三列或更多列的 HTML5 数据表之前，这将是必要的。
以下部分主要处理 HTML4 和 XHTML 1.0 页面上的错误，但有些也适用于 HTML5 页面。本节只提到了少量的验证错误，因为有 447 个已知的错误，而且篇幅有限(请访问下面技巧中的w3.org网站，查看所有已知的错误消息)。
提示有关验证错误及其解决方案的列表，请访问网站
[line25.com/articles/10-common-validation-errors-and-how-to-fix-them](http://line25.com/articles/10-common-validation-errors-and-how-to-fix-them)和[validator.w3.org/docs/errors.html](http://validator.w3.org/docs/errors.html)。虽然这些 URL 主要处理 HTML4 和 XHTML 1.0 验证错误，但有些也适用于 HTML5。
看到红顶报告中列出大量错误，您可能会感到震惊。验证器在页面顶部发现一个错误，然后它向下级联报告，多次重复相同的错误报告，有时使用不同的单词。例如，在验证有错误的页面时，这些错误可能会作为 XML 解析错误在报告中重复出现。只要忽略它们，当你纠正靠近报告顶部的错误时，它们就会消失。
一些最常见的验证错误信息
以下是一些最常见的验证错误消息:
OMITTAG NO :这是常见错误的前兆。查找未正确关闭的元素。
Line 78, Column 9: end tag for "html" omitted, but OMITTAG NO was not specified.开始的结束标签应该出现在页面的最后一行。我漏掉了标签。
<p>标签【XHTML 1.0 最常见的错误是<p>缺少结束标签</p>。**结束标签:XHTML 1.0 中的一些结束标签与普通 HTML4 不同；必须用
<br />代替<br>.标签<br />称为自结束标签。所有的 XHTML 1.0<meta>标签和<img>标签都必须用一个像这样的正斜杠…" />结束。该报告陈述了这样的闭合错误:
Line 38, Column 10: end tag for "ul" omitted but OMITTAG NO was not specified.这意味着在 HTML4/XHTML 1.0 页面中省略了结束标记尖括号
>，或者在 XHTML 1.0 或 XHTML5 页面中结束标记应该是/>而不是>。当报告闭合错误时，即使只有一个闭合错误，也会有几个错误级联通过报告。修正错误，瀑布就会消失。
一个没有打开的元素:闭包错误的反义词。
Line 87, Column 12: end tag for element "SPAN", which is not open.这可能意味着您在文档的前面删除了一个内联标签，比如
<span>，但是忘记删除页面中它的结束元素。小写:记住 XHTML 1.0 标记必须全小写。验证器将会看到小写字母。
不正确的嵌套:一些标签错误可能被描述为在不允许的地方。您可能将
<ul> <li>元素与表格元素<tr> <td>混合在一起。错误消息将会显示如下内容:
Line 33, Column 32: document type does not allow element "li" here.内嵌元素嵌套:在下一个例子中，验证器说像
<ul>这样的块元素标签不能包含在<span>标签中。
Line 52, Column 4: document type does not allow element "ul" here. **<span class="list">** <ul> <li>he Haven provides sheltered housing companionship in retirement</li> <li>Thirteen purpose built units for single or double occupancy</li> </ul> **</span>**应该去掉
<span>标签，将类插入到<ul>标签中。此处不允许的其他错误是用内嵌标签包围块元素的结果。例如，用
<span>标签、<b>标签或<strong>标签包围一个无序列表。*弃用的标签和属性:错误报告会发现 HTML4 或 XHTML 1.0 中不再接受的弃用元素；例如:
Line 32, Column 7: there is no attribute "CENTER".这意味着中心在 HTML 标记中不再被接受；必须使用样式表使元素居中。
W3C 验证程序更有帮助的解释示例:
Line 137, Column 19: value of attribute "ALIGN" cannot be "ABSBOTTOM"; must be one of "TOP", "MIDDLE", "BOTTOM", "LEFT", "RIGHT". align="absbottom" width="199" height="231">有些属性(如 align)不再适用于将文本与图像对齐，只接受顶部、中间、底部、左侧和右侧。
alt:验证器会报告
"alts"图像丢失。有些报道不明确；例如:
Line 25, Column 39: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag . <li>Home page<li>.我忘记了在结束标签中加一个正斜杠，就像这样
</li>。出现了一些误报，如下例所示:
Elements not allowed here Line 23, Column 9: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag . <h2>some heading text was here</h2>我查看了第 23 行，没有发现错误；
h2元素已正确关闭。然后我查看了附近的行，发现在第 22 行，没有一个<p>元素的结束</p>标记。错误报告的错误通常可以通过查看未关闭的<p>报告行的上方和下方来修复。***
***提示你会得出结论，报告的错误并不总是像它们看起来那样。您需要通过查看错误行之前或之后的行来确定报告应该说些什么。就像纵横字谜中的神秘线索一样，通过练习，你会认识到这些模式，并知道如何纠正编码错误。
The。nu HTML5 验证程序
替代验证网站是[html5.validator.nu](http://html5.validator.nu)
我发现这相当容易使用，但是它的报告不如 W3C 验证器的信息丰富。W3C 验证器实际上使用了.nu验证器作为其代码扫描过程的一部分。我倾向于只使用 W3C 验证器，但这可能是因为我对它太熟悉了。你不应该让我个人的偏好阻止你探索.nu验证器。它在不断改进，它的界面是不言自明的。整洁的界面如图图 18-5 所示。
***图 18-5。*美国。nu 验证器的界面
在撰写本文时，.nu验证器没有提供 HTML5 徽标。为此，您需要访问 W3C 徽标网站。然后，您将需要添加我的代码片段，使用户能够检查验证。
注意在撰写本文时，W3C HTML5 和 XHTML5 验证器以及
.nu验证器都是“高度实验性的”此外，随着时间的推移，.nu验证器的外观会随着每次更新而改变。XHTML5 页面的.nu祝贺消息指出被检查的文件是 HTML5，反之亦然。在编写本文时，.nu验证器只会产生一个 HTTP 错误 415，并且拒绝验证任何 HTML5 文件。这有望在本书出版时得到纠正。
验证 CSS2
转到[jigsaw.w3.org/css-validator/](http://jigsaw.w3.org/css-validator/)，你会发现一个类似于 HTML 验证器的界面，但是标题是 CSS 验证服务。
如果你的 CSS 页面已经上传到你的网络主机，使用以下格式输入你想要验证的 CSS 样式表的 URL:
[www.mywebsite.co.uk/mystyleshee…](http://www.mywebsite.co.uk/mystylesheet.css)。单击"检查"按钮,等待几秒钟。最终会出现一份报告如果 CSS 页面尚未上传到您的 web 主机，请单击文件上传选项卡，在您的计算机上浏览到该页面的文件，并加载它。然后单击“检查”按钮。
或者单击"通过直接输入验证"选项卡,并将半铸钢ˌ钢性铸铁(Cast Semi-Steel)页面标记粘贴到提供的字段中。然后单击"检查"按钮
如果标记未能通过验证，您将得到有关错误的提示。如果它通过验证，你会得到一个标志放在你的网页上。
下面的例子可能令人困惑:
29 li.btn a Same color for background-color and border-right-color 29 li.btn a Same color for background-color and border-top-color 29 li.btn a Same color for background-color and border-left-color 30 li.btn a:hover Same color for background-color and border-top-color 30 li.btn a:hover Same color for background-color and border-left-color 30 li.btn a:hover Same color for background-color and border-right-color 32 li.btn a:active Same color for background-color and border-top-color 32 li.btn a:active Same color for background-color and border-left-color 32 li.btn a:active Same color for background-color and border-right-color 35 Same colors for color and background-color in two contexts li.btn a:active and #footer
菜单 3D 按钮的起始边框颜色已设置为与背景颜色相同。可以安全地忽略这些警告，但是如果您愿意，可以通过稍微更改开始的边框颜色使其不同于背景颜色来消除错误。
如果文本和渐变背景使用相同的颜色，CSS 样式表也将无法验证。例如，如果背景是带有绿色背景渐变的白色，并且文本也是白色。验证器忽略渐变，将真实背景(白色)与文本(白色)进行比较。它会将此报告为错误。
CSS3 验证和供应商特定错误
要验证 CSS3 样式表，请转到[jigsaw.w3.org/css-validator/](http://jigsaw.w3.org/css-validator/)。
注意对于 CSS3，必须点击更多选项按钮。为您的标记条目选择一个选项卡。然后单击 Profile 字段中的下拉箭头，并选择 CSS Level 3。
If your CSS page has been uploaded to the network host , use this format.
[www.mywebsite.co.uk/mystyleshee…](http://www.mywebsite.co.uk/mystylesheet.css)键入你想要验证的 CSS 样式表的 URL。单击"检查"按钮,等待几秒钟。最终会出现一份报告如果 CSS 页面尚未上传到您的 web 主机，请单击文件上传选项卡，在您的计算机上浏览到该页面的文件，并将其加载。然后单击“检查”按钮。
或者单击"通过直接输入验证"选项卡,并将半铸钢ˌ钢性铸铁(Cast Semi-Steel)页面标记粘贴到提供的字段中。然后单击"检查"按钮
CSS3 验证器将报告样式表中任何供应商特定项目的错误；即-mozkit-、-webkit-等项目。这是您所期望的，因为特定于供应商的项目不是 W3C 推荐的；验证器的作用是检查是否符合 W3C 推荐标准。这样的错误将会继续被报道，直到浏览器厂商支持 CSS3 并放弃他们特定的攻击。尽一切办法玩 CSS3，但也许你应该忘记 CSS3 和它在客户网站上的验证标志，直到这些黑客不再需要，当 IE 7 和 IE 8 最终过期。同时，在客户的网站上使用 CSS2。
例如，测试了一个 CSS 样式表，验证器给出了一个带有红色横幅的报告。典型故障报告的内容如图 18-6 所示。
***图 18-6。*CSS3 表的 CSS 验证报告
我检查了提交的代码，发现了错误和警告，如下面粗体文本所示:
(1) table { width: 500px; border:1px black solid; border-collapse:collapse; } (2) td { border:1px black solid; padding:0 **5px;**0 5px } (3) th { border:1px black solid; } (4) caption { font-weight:bold; } (5) table tr:nth-child(even) { **background-color: #C8F0F0;** } (6) .right { text-align:right; }
在第 2 行中，5px 后面的分号应该位于行尾，如下所示:
td { border:1px black solid; padding:0 5px 0 **5px;** }
关于第五行的警告建议总是指定文本颜色和背景颜色。这一行应该是:
table tr:nth-child(even) { background-color: #C8F0F0; **color:black;** }
当修正后的 CSS 代码被重新验证时，它给出祝贺信息，如图图 18-7 所示。这个案例中的横幅是绿色的。
***图 18-7。*W3C CSS3 验证程序显示验证成功
在撰写本文时，CSS3 的验证标志还不可用，但正如你在图 18-7 中看到的，你可以看到传统的 CSS 标志和代码，使用户能够验证验证。
总结
在本章中，您发现了验证对于故障排除和确保代码在各种设备上正常运行是多么有用。提供了一个代码片段来嵌入 HTML5 徽标，使用户能够检查页面是否经过真正的验证。您还了解了从验证器收到的报告可能相当神秘，为了熟悉它们的含义和解决方案，需要进行一些练习。
在下一章，你将学习如何处理设计网站时出现的一些问题。故障排除是 web 开发的一个重要方面；下一章的提示和捷径将会节省你的时间和挫折。***
十九、故障排除
这一章旨在帮助你找到那些占据了网页设计师大量时间的难以捉摸的问题。它涵盖了最常见的问题和测试方法。本章没有涉及的问题通常可以通过 W3C 验证器运行问题页面或者将问题发布到搜索引擎中来解决。
测试你的页面
在你的电脑上安装五种主要的浏览器——Internet Explorer、Mozilla Firefox、Safari、Chrome 和 Opera。将它们的图标放在桌面上，并在工作时在每个浏览器中测试您的页面。如果你使用 IE 9，你需要 IETester 工具来测试 IE 6、IE 7 和 IE 8 中的网站。或者你可以在另一台电脑上用 XP 和 IE 8 进行测试。
一些勇敢的设计者在他们的计算机上安装 Apache 本地主机来测试 PHP 表单和计数器。我花了很多令人沮丧的时间试图安装 Apache，但没有成功；有时它会工作两三个星期，但最终失败了。一个更简单快捷的解决方案是，使用 Mozilla Firefox 查看存储在计算机上的 PHP 页面。要测试 PHP 反馈表单或 PHP 页面计数器的交互性，请在您现有的网站主机上创建一个测试文件夹。然后将交互文件上传到测试文件夹并运行；与花几个小时安装 Apache 相比，这大约只需要两分钟。
提示这个漂亮的 IETester 工具是无价之宝，对于在旧版本的 ie 浏览器上测试你的网页来说，它是一个真正的省时工具。从
[www.my-debugbar.com/wiki/IETest…](http://www.my-debugbar.com/wiki/IETester/HomePage)下载并安装。这个工具是免费的，但是非常值得捐赠。关于其他一些好的测试资源，请访问位于[browserlab.adobe.com/en-us/features.html](https://browserlab.adobe.com/en-us/features.html)的 Adobe BrowserLab 和位于[netrenderer.com](http://netrenderer.com)的快速“版本检查器”。
使用 IETester 可能会令人困惑。似乎无法打开存储在计算机文件夹中的网页。首先，您需要在浏览器中加载页面。然后从浏览器的地址栏中选择并复制它的地址(Ctrl+C)。它应该像下面这样开始:
file:///C:/Documents%20and%20Settings/User/…
或者像C:\Documents and Settings\User\My Documents\BOOK\Ch10 \filename。
打开 IETester，点击其中一个标签，(比如 IE 6)。您将在地址栏中看到一个蓝色的网址。不要点它；只需按 Ctrl+V 将地址替换为您的文件位置，然后按 Enter。单击另一个选项卡(比如 IE 7)，重复 Ctrl+V 并按 Enter。一旦一个页面被加载到 IETester 中，您就可以点击它的导航按钮，用 IETester 测试站点上的其他页面。
当使用 IETester 时，偶尔会弹出一条错误消息，说程序需要关闭，但这是一个 bug，它实际上并没有关闭程序。
大多数所见即所得的网页编辑器都有错误检查功能。比如 MS Expression Web 有一个优秀的错误检查器；在“代码”视图中按 F9 键会逐步显示并解释错误。
如果你有一个关于浮动下降或者定位的问题，这个提示可以帮助你找到原因。在问题页面的标题部分添加一个临时行，如下所示:
`
- { border:1px solid red !important; } `
在浏览器中查看时，块元素将被红色边框包围；这可以揭示你的问题的原因。
其他测试方法和工具包含在相应的章节中。例如，第十八章展示了如何测试你的代码是否符合 W3C。第十四章给出了残疾人可以进入的考场信息。
如果浏览器将页面视为没有文档类型
这表明DOCTYPE不是页面上的第一行。在DOCTYPE之前不能有任何东西，甚至不能是空行。如果这个错误存在，浏览器将使用怪癖模式来显示页面，您可能不会喜欢这个结果。然而，可以将一段 PHP 代码放在DOCTYPE之前，而不会产生负面影响。
如果您有定位问题
元素可能不会出现在页面上您希望它们出现的位置。以下是一些例子:
- The left navigation menu appears on the right side of the screen: try to put one or more
<br>labels before<div>or<nav>containing the menu.- The image will not stay at the position: sometimes it is centered instead of left aligned, and vice versa. Check the stylesheet and delete any image positioning styles that cause misalignment. The stylesheet can contain two image alignment instructions; The web page will follow the last of the two.
- The page can't be displayed normally in WYSIWYG webpage design program : In this case, the page viewed in various browsers may be displayed normally in all browsers. Some WYSIWIG programs are not completely accurate in displaying the appearance of web pages in the browser.
如果有横向菜单问题
以下是两个最常见的水平菜单问题:
- One of the buttons dropped, especially when viewed in Internet Explorer 6.
- One button increases the depth, or one button becomes two buttons.
这些故障如图 19-1 所示。
***图 19-1。*首页按钮有故障的横向菜单
这些故障也可能是由 IE 6 引起的，因为它使用的默认字体比任何其他浏览器都大。较大的字体扩大了按钮的宽度，因此菜单对于其容器来说太宽了。为了解决这个问题，你只需要为 IE 6 指定一个较小的字体。创建一个名为ie6style.css的特殊附加样式表。它只需要包含来自mainstyle.css的#容器或#菜单代码，但是将它的字体大小从中等改为较小，如下面的粗体所示:
#container{text-align:center; background-color:#D7FFEB; font-family: "times new roman"; **font-size: small;** color: #000000; margin: auto; width:95%;}
在 HTML 的 head 部分，插入一个条件链接(以粗体显示)。将它放在其他链接的下面，如下面的代码片段所示。
`
Home page … *meta details go here* **** `还有另外两个问题需要考虑。弱视用户可以用自己的样式表增加字体大小。请注意这一点，并尝试在按钮上为更大的文本尺寸留出足够的空间。
如果水平菜单拒绝在页面上居中，确保在样式表中将<ul>块的容器设置为text-align:center;。
如果你的服务器有问题
反病毒警报:“威胁被阻止。”这是一个真正的警报，因为您没有故意在您的网站中构建任何恶意软件。但是一些卑鄙的家伙入侵了你的网站，并在一个或多个页面中插入了一些 JavaScript 代码。使用您的 FTP 程序下载页面，并查找 JavaScript 片段。流氓脚本通常位于标签<body>之后。
典型的流氓脚本如下所示:
<!-- ad --><script language='JavaScript' src='http://powergym.be/xxxxfs31dj.js'> </script><!-- /ad -->
这种情况不会发生在像样的主机上，但偶尔会发生在安全意识较差的主机上。作为预防措施，请始终使用包含特殊字符和数字的更长、更复杂的密码。但是，如果问题已经发生，补救措施是登录到主机上的控制面板，将 FTP 密码更改为更复杂的密码。然后使用您的 FTP 客户端上传所有受感染页面的干净副本。然后联系主机大声抱怨，直到它让它的服务器更安全。
如果主机服务器突然不接受你的 FTP 密码，可能是因为上一段描述的同样的问题；解决方法是一样的。
如果您遇到浏览器变异问题
如果您的页面在一个或多个浏览器中显示不正确，不要认为问题是您的错。我花了两个小时追踪一个问题，结果发现是 Mozilla Firefox 的一个 bug。最右边的列显示在中间的容器中。一次偶然的机会，我在另一台使用火狐浏览器的电脑上查看了这个页面，它没有问题。答案？每台电脑都有不同版本的 Firefox。旧的火狐版本是问题所在；通过更新到最新版本，页面显示正确。总是在浏览器的最新版本和之前的版本上进行测试。
另一个问题可能是，在 Mozilla Firefox 中，可打印页面或屏幕上的方形复选框显示为圆形。在显示订单等可打印页面的屏幕上，使用 Wingdings 或 Webdings 的方形复选框在 Firefox 中不起作用。几乎每台计算机都有 Lucida Sans Unicode 符号。通过使用这种字体，复选框可以在所有流行的浏览器中正确显示(见图 19-2 )。
***图 19-2。*这是这个盒子在所有流行浏览器中的外观
盒子的代码是□，如清单 19-2 所示。当打印包含勾选框的反馈表单或订单表单时，此代码使框能够正确打印。
清单 19-2。【tickbox-printer.html 创建在 Mozilla Firefox 中正确显示的复选框
`
This is a box styled with Unicode Lucida font .stylebox { font:xx-large bold; font-family:"Lucida Sans Unicode"; margin-left:50px; }The tick box shown below is styled with Unicode Lucida and it is formatted as  xx-large and bold
□
`是否应该排查 IE 6 等老浏览器的问题？
这取决于目标受众以及是否可能使用较旧的浏览器。在英国和美国，只有不到 2%的电脑用户仍然使用 IE 6 上网。然而，你可以接受一个使用 IE 6 的客户(例如，一些政府部门和一些地方政府服务)。
大多数设计师现在都忽略了 IE 6，理由是微软发起了一场强有力的运动，让人们不再依赖它。Mozilla、Chrome、Safari 和 Opera 的用户通常会下载最新版本的浏览器。
提示访问 Stat Counter Global Stat (
[gs.statcounter.com](http://gs.statcounter.com))查看最新统计数据，评估浏览器流行趋势。选择条形图版本，以便更清楚地了解当前情况。选择趋势的折线图版本。
另见[marketshare.hitslink.com/browser-market-share.aspx?qprid=3](http://marketshare.hitslink.com/browser-market-share.aspx?qprid=3)。有关 2012 年全球浏览器使用百分比的表格，请参见附录。各个组织的统计数据各不相同。我们永远不会知道哪些是最可靠的，但你将能够发现非常有用的明确趋势。
浏览器可能会有微小的显示差异
IE 6 不识别max-width和min-width。如果客户使用 IE 6(例如，一些地方政府部门可能会被时间扭曲)，你需要给它的网站页面固定的宽度。
消除小的分歧。尽管最新的浏览器符合 W3C 标准，但仍然存在一些小的差异，特别是在边距和填充方面，这些差异可以通过在样式表的开头包含一个重置来避免，就像 David Sawyer McFarland 在CSS:The Missing Manual(O ' Reilly，2009)中展示的那样。
/*reset all browsers to a common standard*/ html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable,  form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } td, th, caption { font-weight: normal; text-align: left; } img, fieldset { border: 0; } ol { padding-left: 1.4em; list-style: decimal; }
在 IETester、IE 9、Mozilla Firefox、Chrome、Opera 和 Safari 中创建页面时测试它们。
如果屏幕上出现奇怪的符号
这些可以采取正方形的形式。检查符号在屏幕上出现的位置处的标记。用字符实体代替引起问题的符号。例如，英国符号将显示为正方形。用字符实体£替换符号。
如果你改变了 CSS，但它看起来是一样的
这可能会令人沮丧。有两个常见的原因。
第一个原因是浏览器缓存已经存储了以前的样式表，因此，您看到的是旧样式表的结果。要查看由修改后的样式表设计的页面，请使用浏览器的刷新按钮，或者在 IE 和 Chrome 中尝试 Ctrl+F5。在 Firefox 中尝试 Ctrl+Shift+R。
第二个原因是样式、<link>和 JavaScript 在<head>部分中的顺序不正确。标记中出现的顺序应该遵循一个计划。
以下代码片段显示了包含在<head>部分中的项目的正确顺序:
`
Correct order for head items *meta details go here* #wrapper {background: #FFF; color:#000; } `代码片段显示，如果页面链接到多个基于设备的样式表，链接的顺序应该是手持、屏幕和打印。如果某个页面有特定页面的内部样式(例如，在前面的清单中，用白色背景和黑色文本显示页面)，该样式应该在主样式链接之后。条件样式和 JavaScript 应该放在最后。
一般规则是最后一种风格胜出。在前面的代码片段中，计算机屏幕上的显示很大程度上是由屏幕链接决定的，内部样式只覆盖主页的颜色和文本颜色。只有当访问者使用 IE 8 或 IE 的早期版本时，条件和 JavaScript 才会生效。
如果您遇到浮动下降
浮动元素可能会受到浮动下降的影响；也就是说，一个元素下降到了它原本要占据的位置之下。这可能发生在以下两种相关情况下:
- Static : When the width of the container is not enough to accommodate the lateral contents.
- Dynamic : When the browser window is horizontally reduced by the user, the width is not enough to accommodate the content in the horizontal direction.
任何包含固定宽度元素的水平行的页面都可能遭受浮动丢失。本例中选择的页面包含一个菜单块和水平行中的三个图像。图 19-3 显示了预期的显示。
我非常感谢艺术家安·罗·琼斯，她友好地允许我使用她给人留下深刻印象的肖像照片。我为她设计的网站使用了这些肖像图片。请务必访问她的网站[www.annroejones-artist.co.uk](http://www.annroejones-artist.co.uk)
***图 19-3。*没有浮动下降的显示
图 19-3 没有飘降，但是图 19-4 演示飘降:女孩的画像滑落到了另外两张画像的下方。
图 19-4。一幅肖像落在了其他肖像的下方。
放下的肖像会在其他肖像的右侧留下一大片空白。如果您认为可以通过将图像的宽度和菜单块的宽度相加来设置页面容器的最小宽度，这是情有可原的。然而，还有隐藏的额外费用。像图像和菜单块这样的项目可能有水平填充、边框和边距。这些项目都增加了宽度。你可以决定这些额外的尺寸，并设置容器的最小宽度。
我发现设置最大和最小容器宽度来匹配最流行的屏幕尺寸和分辨率更快更方便。然后我让水平元素适合最小的容器宽度。这可以通过在图形程序中裁剪或调整图像大小，和/或调整菜单块和图像的水平边距和填充来实现。
从本书的页面[www.apress.com](http://www.apress.com)下载故障排除章节的文件和文件夹。在浏览器中查看文件portraits-drop.html ( 清单 19-4a )。然后水平缩小浏览器的窗口，看到女孩的图像下降到其他人的下方。
清单 19-4a。【portraits-drop.html演示飘降的例子
`
Float drop test *meta details go here* ` `Ann L Roe SWAc
SOME PORTRAITS BY ANN ROE (JONES) SWAc
Professor Robert Clements OBE
Reuben
Megan
All of Ann's portraits are painted
in oils on canvas.
For information on commissioning a portrait, click the '  Commissions' button
Click the 'Contact Ann' button to request more detailed  information.
Footer goes here
在清单 19-4b 中，容器的min-width(以粗体显示)导致了浮动下降，因为它太小了，无法包含所有的水平元素。
在 ( portraits-drop.css)你在[www.apress.com](http://www.apress.com)从书的页面下载的 CSS 表中，把容器的宽度从 850 像素改成 960 像素，看看这是如何防止浮动下降的。
***清单 19-4b。*清单 19-4a 的 CSS 样式表
/*set attributes for consistent appearance in all browsers*/ p, ul, li, h1, h2 {margin:0; padding:0; } img { border:0; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } /*A container width that prevents float drop*/ /*#container {min-width:960px; font-family:"times new roman"; font-size:medium; color:black; margin:auto; max-width:1050px; }*/ /* A container width that causes float drop*/ #container {**min-width:850px;** font-family:"times new roman"; font-size:medium; color:black; margin:auto; max-width:1000px; } header {width:100%; margin:auto; height:60px; text-align:center; } #midcol-portraits {margin-left:165px; margin-right:15px; } figure { float:left; margin-right:5px; display:inline; } figure p { font-size:80%; height: 15px; margin:0 auto 0 auto; text-align:center;  width:200px; } #gallery img { margin-right:20px; margin-top:5px; } aside { float:left; width:260px; } footer {clear:both; text-align:center; } /* set side menu position */ nav {float:left; margin-left:0; width :135px; padding:0; zoom:1; } /* set general side button styles */ nav ul li{ margin-bottom: 4px; text-align: center; list-style:none; } /* set general anchor styles */ nav ul li a { color: white; background:#D20B0D; font-weight: bold; text-decoration: none } /* specify state styles */ /* mouseout (default) */ nav li a { background: #D20B0D; border: 4px outset #FFAAAA; display:block; } /* mouseover */ nav li a:hover { background: maroon; border: 4px outset maroon; } /* onmousedown */ nav li a:active { background:#AECBFF; border: 4px inset #AECBFF; } h1 {font-size:300%; font-weight:bold; color:#D20B0D; margin-top:0; margin-bottom:0; font-family:"Calligraph421 BT"; font-style:italic; text-align:center; } span.swac {font-size:x-large; font-weight:bold; color:#D20B0D;  font-family:"Calligraph421 BT"; font-style:italic; text-align:center; } h3,h4 { margin-top:0; margin-bottom:0; } h2 {font-size:x-large; font-weight:bold; margin-top:0; margin-bottom:0; }
通过将容器的min-width改为890px，防止了浮子掉落。
如果一个 HTML5 页面在 IE 7 和 IE 8 中没有样式
你改变了风格，在 IE 7 和 IE 8 的显示中什么也没发生。可能的原因有以下几种:
- The JavaScript file
html5.jsof Remy Sharp has not been uploaded to the folder of the server.- JavaScript is not called in the
<head>part of the HTML page. It should read as follows:<!--[if lte IE 8]> <script src="html5.js"> </script> <![endif]-->- The following line is omitted from the CSS page of the link:
header, nav, article, footer { display:block; }- Maybe you enclosed the condition in the style label of the style sheet or internal style. The HTML tag must contain a condition.
如果数据表有双边框
虽然您将不再使用表格进行页面布局，但表格是显示数据的推荐和基本工具。默认表格在单元格边框周围显示双线。这是相当不吸引人的，而且有点过于繁琐。图 19-5 显示了这些边界是如何被一个默认的 2 像素间隙分开的。
***图 19-5。*双边框数据表
清单 19-5 产生了双边框。主要的 WYSIWYG 网站编辑器有一个表格对话框，可以消除这种差异。学生和初学者经常不能勾选对话框上的将消除间隙的框；通常这是因为他们还不理解 CSS 属性border-collapse的含义。
清单 19-5。【default-table.html 创建双边框默认数据表
`
Default table table, tr, td { width: 600px; border: 1px solid #000000; } ` `要移除边框之间的 2 像素间隙，请更改 CSS 样式以包含属性border-collapse:collapse;。这合并了两个边界，在每个单元格周围给出了一条单独的、无间隔的线，如图 19-6 所示。
***图 19-6。*将双边框折叠成单边框
下面的 CSS 片段替换了清单 19-5 中的 CSS 样式来折叠边框。border-collapse项以粗体显示(collapsed-table.html)。
<style type="text/css"> table, tr, td { width: 600px; border: 1px solid #000000; **border-collapse:collapse;** } </style>
如果网站所有者没有收到安全反馈表的回复
网站的所有者抱怨她没有从安全表单收到任何反馈(如第十一章所述)。原因显然是忘记在表单处理程序中切换电子邮件地址。相信我，这是真的。web 设计者急于通知所有者表单可以工作(当用他自己的电子邮件地址测试时)，以至于忘记交换地址，或者他更改了地址但忘记上传修改后的版本。
如果您看到以下代码，请检查处理程序:
<?php // -------- SET THE EMAIL HEADINGS ------------------------ /* set the recipient’s email address (i.e., the person you want to send the feedback to) //$mailto = "***your-client@her-isp.co.uk***" ; $mailto = "***me@my-isp.co.uk***" ;
按如下方式交换注释掉的斜线:
<?php // -------- SET THE EMAIL HEADINGS ------------------------ /* set the recipient’s email address (i.e., the person you want to send the feedback to) $mailto = "***your-client@her-isp.co.uk***" ; //$mailto = "***me@my-isp.co.uk***" ;
别忘了上传修改后的处理程序。
总结
在本章中，您学习了如何测试您的页面，以及如何对开发网站时出现的一些最常见的问题进行故障排除。如果您遇到模糊的问题，通常可以通过验证第十八章中描述的页面进行诊断和解决。互联网论坛提供了另一种可能性。尝试在搜索引擎中输入问题，或者注册成为网页设计师论坛的成员。
本章后面有一个附录。它包含了 CSS2 和 CSS3 的快速参考部分，关于在页面上定位元素的提示，插入 IE 条件的提示，HTML 元素的排序说明，以及浏览器流行度的统计表。它还包含关于设置 MIME 类型的建议和一个通用实体表。
二十、附录：快速参考、技术和有用的数据
本附录有以下三个主题:
- Quick reference chapter . Why do readers of this book want such basic information? Because even the most experienced web designers will have short-term amnesia. It is convenient to remind the basic principles in one place of a book; It saves time searching in several books, chapters or the Internet.
- Technical summary . This paper summarizes some useful technologies, such as positioning, floating, tag sorting and ensuring that MIME type is set on the server.
- Table information . Include useful data tables so that you can find information about character entities and browser statistics.
快速参考章节
HTML5 和 XHTML5 快速参考
HTML5 和 XHTML5 的文档类型比早期的表单简单得多。
| **对于 HTML5:** | ` HTML5 test document *meta details go here* ` | | **对于 XHTML5:** | ` XHTML5 test document` ` meta details go here ` | 注意对于标记为 XHTML5 的页面，可以使用更简单的 HTML5 DOCTYPE。
对于英语以外的语言，请访问[www.w3.org/International/questions/qa-choosing-language-tags.en](http://www.w3.org/International/questions/qa-choosing-language-tags.en)或[www.w3.org/blog/International/tag/qa-choosing-language-tags/](http://www.w3.org/blog/International/tag/qa-choosing-language-tags/)
验证
这两种文档类型都将在 W3C 验证器([validator.w3.org](http://validator.w3.org))或.nu验证器([html5.validator.nu](http://html5.validator.nu))中进行验证。
在撰写本文时，这两种验证器都是实验性的。那个。XHTML5 检查的 nu 祝贺消息表明检查的文件是 HTML5，反之亦然。这应该在本书出版时得到纠正。参见第十八章，其中涵盖了验证的全部细节。
如果选择使用 XHTML5 标记，应该遵守 XHTML 中的自结束标记和双引号规则。如果你像我一样喜欢使用 HTML5 标记，生活会变得更容易；您可以忘记自结束标记和双引号以及许多其他以前的标记要求。例如，要指定语言，使用<html lang=en>；要指定字符集，请使用<meta charset=utf-8>。不需要为 JavaScript 指定 MIME 类型，因为新浏览器，由于 HTML5，不再需要被告知 JavaScript 文件是type="text/javascript。
CSS2 快速参考
有关 CSS 的更多信息，请尝试以下手册:
- 用可扩展的超文本标记语言开始超文本标记语言和 CSS 作者克雷格·库克和大卫·舒尔茨(阿普莱斯，2006 年).
- ProCSS and HTML Design Pattern Author Michael Bowles (April, 2007).
- [ CSS: Missing Manual 2nd edition, by David Sawyer McFarlane (O'Reilly Media, 2009).
在[www.apress.com](http://www.apress.com)还有很多其他的标题。访问该网站，在搜索框中键入“css”或“html”。
美国拼写必须用于三个属性
使用gray、center、color；不像英国、澳洲和纽西兰的grey、centre和colour。
CSS 选择器的四个主要类别
以下是 CSS 选择器的四个主要类别:
id(identity)classspangroup
身份(id)
在 CSS 样式表中，用散列符号写了一个id选择器；例如:
#credits {font-size:small;}
每页仅使用一个id。
在这种情况下，网页上的目标将是<div id="credits">
类(。)
在样式表中，类选择器以句号开头；例如
.bigblue {font-size:xx-large; color:blue;}
这个类会产生一个蓝色的大字体。您可以在每页上使用任意多个相同的类。
在这种情况下，网页中的目标是
<p class="bigblue">The Sausage Shop</p>
跨度<跨度>
跨度选择器在页面中内联使用，用于定位较大元素中的小元素，例如段落中的几个单词。CSS 的一个例子是
span.redfont {color:red;}
这将把一段文本变成红色。A <span>不会像标签<div>和<p>以及标题hi、h2、h3等那样在一行文本的上下添加行间距；每页使用尽可能多的相同跨度。
本例中的 HTML 目标是
<p>We hope you will visit <span class="redfont">The Sausage Shop</span> very soon</p>
分组目标
可以在每个标签后使用逗号将样式表选择器分组。本示例将所有标题的边距和填充设置为零。
h1, h2, h3, h4, h4, h5, h6 {margin:0; padding:0 }
特定群体目标
通过在选择器中选择一个选择器，选择器可以变得更加具体，但是没有逗号。例如:
header strong {color:blue;}
在这种情况下，选择器的目标是包含在<strong>标签中的一些文本，但是只有当<strong>标签本身包含在一个 header 标签中，如下所示:
<header><strong>some text</strong></header>
单词some text将被涂成蓝色。这个选择器的行话是后代选择器。<strong>标签是<header>标签的后代。
其他目标
HTML 标签如<img>、<html>、<body>、<ul>都可以是目标；它们就像特殊的<div>一样。例如，下面这段样式去除了所有图像的边框:
img { border:none; }
下一种样式设置网站上每个页面的总体外观。
body { font-family:arial; font-size:medium; background:#FFF; color:#000;}
锁定超链接
链接的外观和行为应该由样式表决定。CSS 可以是
/*set the hyperlink colour to blue and the font size to mediuml*/ a.small-normal:link { color: blue; text-decoration:none; font-weight:normal; font-size:medium; } a.small-normal:visited { color: blue; text-decoration: none; font-weight:normal; font-size:medium; } a.small-normal:hover { color: red; text-decoration: none; font-weight:normal; font-size:medium; } a.small-normal:active { color: blue; text-decoration: none; font-weight:normal; font-size:medium; }
在这个例子中，目标链接将是蓝色的，以使它从默认的黑色文本中突出出来，并且它不会被加下划线，因为文本装饰被设置为“none”。当鼠标指针悬停在链接上时，链接将从蓝色变为红色。
前一种样式对应的 HTML 可能是
<a title="Computer Jargon explained" href="jargon.html">Go to Jargon page</a>
如果您希望链接在悬停时加下划线，请按如下方式更改悬停条件的文本装饰:
a.small-normal:hover { color: red; **text-decoration: underline;** font-weight:normal; font-size:medium; }
使用 3D 按钮定位滚动导航菜单
以下代码片段使用一个无序列表来生成 3D 菜单按钮(第四章给出了工作示例):
nav {position:absolute; top:100px; left:3.6%; width: 866px; padding: 5px;  list-style: none; overflow: hidden; height: 35px; } nav li { display:inline; padding: 5px; padding-top:15px; margin:5px 0 0 2px;  height:25px; width:100px; } nav a {height:25px; width:100px; color: #fff; font-size:80%; font-size: 100%;  font-weight:bold; text-decoration: none; background-color: #72b720;  border: 4px outset #5edd51; padding:5px 5px 0 5px; display: inline-block; } nav a:hover { font-weight: bold; background-color:green; color:white; } .clear { clear:both; }
伪元素前的
CSS 可以生成一段特殊的高亮文本，并将其放在所选段落的开头，如图图 App-1 所示。单词注释是用彩色框中的白色文本生成的。
***图 App-1。*生成内容
IE 7 不支持伪元素:before。清单 App-1 有一个内部 CSS 样式，而:before的伪样式以粗体显示。
清单 App-1。【为段落中的第一个单词创建特殊效果(css2-before.html)
`
Generate some content before a selected paragraph *meta details go here* p { font-size: 100%; } **.note:before { content:"Note: "; background-color:red; color:white;}**surrounding paragraph
<**p class="note">**The text with the coloured backgroundis generated with CSS2  but is not supported by IE 6 and IE 7.
The class "note" is targeted by the 
pseudo-element :before` `
surrounding paragraph
`更广泛的命名颜色
最初，只有 17 种命名的颜色可用。这个数字大大增加了，像巧克力，黑鲑鱼，蜜露这样的名字可以用来代替 RGB 或十六进制颜色。
如需完整列表，请访问[somacon.com/p142.php](http://somacon.com/p142.php)。
排序标记:什么在<头>部分中排在第一/最后？
某些项目必须以特定的顺序出现在标记的<head>部分，否则您可能会遇到意想不到的结果。首选顺序如下。
链接到不同的媒体
`
` 注意
print媒体链接应该出现在screen链接之后。screen链接指的是默认的台式机/笔记本电脑显示屏。要记住顺序，试试这个助记符:HotSoupPlease(Hand held，Sscreen，以及 P rint)。
使用特殊样式表的链接进行打印的替代方法是在全局样式表中包含一个将应用于所有页面的@media print指令。例如，您可能希望减小从网站打印的任何页面上的标题大小和行距。此外，让我们假设网站使用无衬线，10 点字体；我们将把字体改为 12 磅乘以新罗马体，因为它在印刷品上更容易阅读。为此，您可以将以下代码添加到主外部样式表中:
@media print { p { font-family: "times new roman"; font-size:12pt; } h1 { font-size:20pt; margin-bottom:0; } h2 (font-size: 14pt; margin-bottom:0; } }
将链接样式放在内部样式之前
将默认链接语句放在任何内部样式之前，如下所示:
<link rel="stylesheet" type="text/css;" href="stylesheet.css"> <style type="text/css"> body {background: #FFF; color:#000; } </style>
IE 条件句所在
在<head>部分找到任何条件样式。它们必须在之后出现，如下所示:
`
`包括 JavaScript
将 JavaScript 链接放在链接样式和内部样式之后，如下所示:
`
Home page *meta details go here* body {background: #FFF; color:#000; } `在<正文>部分列出视频源
<body>部分中的视频源必须按以下顺序列出，否则某些手持设备可能会出现问题:
.mp4.webm.ogv
IE 7 和 IE 8 的后备文件应该位于列表的末尾。
订购伪类
设计链接样式时，顺序很重要。应该是这样的:
- interlinkage
- Visit
- hover
- having the initiative
一个有用的记忆方法是永远不变。
CSS3 快速参考
CSS3 有几个期待已久的增强功能。这些正在逐步完善和发布；大部分浏览器(除了 IE 7 和 IE 8)都开始回升了。IE 7 和 IE 8 忽略了这些增强，例如，带有 CSS3 圆角的页面将显示方形角。IE 9 可能会利用一些新的 CSS3 增强功能。
CSS3 元素的当前列表包括以下内容:
- [fillet] (see chapter 7 of )
- Multi-column (see Chapter 15 of )
- Shadows (see chapter 8 )
- Shading the text (see chapter 8 of )
- Multi-background (see Chapter 3 of )
- Font selector (see chapter 5 of ).
- An opaque attribute (see chapter 5 of )
- RGBA color notation (see chapter 5 of )
- A template layout module
- Frame picture
- Grid layout
注这本书给出了标有章节号的模块的工作示例。
技术总结
元素的相对定位
CSS 相对定位相对于项目通常出现的位置移动项目。通过相对定位，图 App-2 中左边的圆被做成了向右 320 像素，但是这个的 CSS 代码并不像你预期的那样。CSS 代码实际上告诉你原来的圆在哪里；即向左 320 像素，向上 70 像素。CSS 代码是
#circle { position:relative; left:320px; top:70px; }
记住这一点的最好方法是假设左边的和上边的和的尺寸是边距。
***图 App-2。*相对定位将元素从其原始位置移开
为了说明这一点，我们将使用第三章中一个熟悉的图像。图 App-3 显示了带有玫瑰花结的割台。
***图 App-3。*玫瑰花结定位前的位置
玫瑰花结位于页眉边框的内部左侧边缘。清单 App-3 为玫瑰花结设置原始默认位置。
***清单 App-3。*在其默认位置叠加一个玫瑰花结(original-position.html)
`
Rosette in original position *meta details go here* body { background:#FFF url(img/green-grad.jpg) repeat-x; } #container { margin:auto; width:920px; } /*add display attributes for semantic tags*/ header, footer, section, article, nav { display:block; } header {width:920px; height:180px; padding:0; border:10px white solid;  background:url(img/header3.jpg); margin: 20px auto; } h1 { font-size:300%; color :white; position: relative; left:90px; width:480px; top: 55px; }Devon's Rural Retreats
`
相对放置玫瑰花结
从逻辑上来说，你可能会认为玫瑰图必须放在右边的位置，但是如前所述，你需要想象相对的位置尺寸是 ?? 边距。所以，通过反复试验，我使用下面的 CSS 样式，给玫瑰图左边 750 像素和上边 5 像素的假想边距:**
#rosette { position:relative; left:750px; top:5px; }
玫瑰花结的新位置如图 App-4 所示。
***图 App-4。*玫瑰花结相对定位后的位置
通过清单 App-4 中的粗体显示的代码应用相对位置。
清单 App-4。【re-positioned.html】相对定位玫瑰花结
`
Rosette relatively re-positioned *meta details go here* body { background:#FFF url(img/green-grad.jpg) repeat-x; } #container { margin:auto; width:920px; } header {width:920px; height:180px; padding:0; border:10px white solid;  background:url(img/header3.jpg); margin: 20px auto; } h1 { width:480px; font-size:300%; color :white; position: relative; left:90px; top: 55px; } **#rosette { position:relative; left:740px; top:5px;** **}**Devon's Rural Retreats
`
元素的绝对定位
绝对定位相对于以下内容定位元素:
The edge of the browser window . For example
#element { position:absolute; left:0; top:0; }This CSS style will position an element so that it is close to the left and top of the browser window.
The edge of its nearest container . In this case, the container must be a direct ancestor and it must also have positioning applied to it. The ancestor’s positioning does not need to have any dimensio NS such as left, top, right or bottom.
For example, the following CSS statement absolutely locates the horizontal navigation bar in the container; The container applies some positioning, which in this case is relative. The location of the container can be zero, as shown in bold in the first line, it still works; In fact, the items shown in bold in the first row can be completely omitted.
#container {position:relative; **top:0; left:0;** width:950px; margin:auto;  text-align:center; } nav { **position:absolute; top:100px;** left:8%; width: 785px; padding:5px;  list-style: none; height: 35px; }
提示为了避免跨浏览器的问题，总是给绝对定位和固定位置的元素一个宽度。
显示内嵌、块或内嵌块
有些元素默认为inline元素。要改变这种行为，可以使用 CSS display style 属性来设置元素的样式。
display:inline;: line height, width, top and bottom filling; The top margin and bottom margin cannot be changed. Increasing the height or width has no effect. And padding margins can only be added to the right and left sides of the content. However, the width of the element will be determined by any text and/or images contained in the element in the line. By default, these elements are inline;<span>、<a>, <label>、<input>、<img>、<strong>、<b>、<em>。 Elements such as < UL >, < Li > can be changed toinline. In this case, they are subject to the same restrictions: width, height, top and bottom padding and top and bottom margins cannot be adjusted.display:block;: Ensure that an element has top and bottom line spacing, and allow optional width, height, top and bottom padding and top and bottom margin. If there is no width, the element will default to the width of the element it contains, such as the sidebar column. Examples of blocks are<div>,<h1>,<h2>,<h3>,<h4>,<h5>,<p>,<form>,<dl>,<dd>,<dt>, <ul>,<li>,<ol>and<br>. Elements are placed on top of each other, so they are very suitable for vertical lists like menus.display:inline-block;: Delete the space between the upper and lower rows, but allow padding up and down. This is a very useful style for embedded menu buttons. It was not fully utilized in the past because some old browsers did not support it.- All three styles allow left and right filling.
- Inline elements can only contain text and other inline elements. A block can contain text and inline elements.
浮动元素
浮动是定位元素的另一种方法。项目可以向左或向右浮动。默认为float:none;。浮动元素应该总是有宽度(浮动的图像已经有预定义的宽度)。当一个元素被浮动时，它不能被赋予position:absolute;或position:relative;。CSS 为float:left;或float:right;或float:none;
提示浮动的元素可以有正或负的边距来帮助定位。
图 App-5 显示顶部玫瑰花形向左浮动，下部玫瑰花形向右浮动。
***图 App-5。*左右浮动的玫瑰花结
清单 App-5 创建了如图 20-5 所示的浮动属性的演示。
清单 App-5。【float-1.html 演示左右浮动
`
float-1 ` ` *meta details go here* body { font-size:150%; } #container { width:500px; margin:auto; } #rosette-left { float:left; } #rosette-right { float:right; }
The rosette is floated left. The paragraph flows around the rosette. The rosette is floated left. The paragraph flows around the rosette. The rosette is floated left. The paragraph flows around the rosette. The rosette is floated left. The paragraph flows around the rosette.
The rosette is floated right. The paragraph flows around the rosette. The rosette is floated left. The paragraph flows around the rosette. The rosette is floated left. The paragraph flows around the rosette. The rosette is floated left. The paragraph flows around the rosette.
应用于浮动元素的<清除>属性
文本围绕浮动项目流动。有时你不希望文本四处流动；您希望文本位于浮动元素的下方。这可以通过使用clear属性来实现；然而，我从来不记得什么清除了什么，以及左右应该如何应用。
一般的规则是，如果一个项目，比如一个图像，向左浮动，给文本 CSS 属性clear:left;——换句话说，清除向左浮动的项目。相反，如果一个元素是右浮动的，并且你不希望文本围绕它流动，那么给文本 CSS 属性clear:right;。
CSS 命令clear也可以像在clear:both;中一样拥有属性both。这对于将像页脚这样的元素放在页面的列下面非常有用。
在图 App-6 中举例说明了clear:left;和clear:right;属性。
***图 App-6。*段落被设计为清除浮动图像。
清单 App-6 中粗体显示的代码强制文本远离图像。
清单 App-6。【使用清晰属性(float-2.html)
`
float-2 *meta details go here* body { font-size:150%; } #container { width:500px; margin:auto; } #rosette-left { float:left; } #rosette-right { float:right; } **.clear-left { clear:left;** **}** **.clear-right { clear:right;** **}**
The rosette is floated left. The paragraph has been given a class clear-left. The rosette is floated left. The paragraph has been given a class clear-left.
**The rosette is floated right. The paragraph has been given a class clear-right. The rosette is floated right. The paragraph has been given a class clear-right.
了解 MIME 类型
MIME 类型(多用途互联网邮件扩展)告诉浏览器正在处理什么类型的文件。尽管最初是为电子邮件设计的，但该标准已经扩展到了网站。你在网页上看到几种 MIME 类型；它们是这样出现的:type="something"。以下是典型的 MIME 类型:
HTML 页:??]
JavaScript:
type="text/javascript"MP3 文件:
type="audio/mpeg"SVG:??㎡t
CSS:??]
幸运的是，网页设计者不必过多担心 MIME 类型，因为浏览器足够聪明，知道.jpg、.gif和.png是图像，它们自动知道应用哪种 MIME 类型。这在 HTML5 中会变得更加普遍；例如，以后的浏览器会识别 JavaScript，这样就不需要在标记中声明脚本的 MIME 类型。
基于服务器的 MIME 类型
MIME 类型并不总是输入到网页中；有些位于服务器/主机中。这尤其适用于新 HTML5 建议的音频和视频。
以下笔记摘录自[tomraftery.com2005/01/15//creating-an.htaccess-file/](http://tomraftery.com2005/01/15//creating-an.htaccess-file/)和[www.javascriptkit.com/howto/htacc…](http://www.javascriptkit.com/howto/htaccess.shtml)的网站。
注意有些主机允许网站设计者向服务器添加 MIME 类型权限。你可以创建自己的
.htaccess文件，但是你需要弄清楚你的主机是否允许你上传它。请注意，在更改.htaccess文件时，您必须非常小心。如果可能的话，请你的主人改变它。一些主机在其网站的控制面板中有一个工具，可以让你自己修改文件。否则，如果你能在主机的文件夹里看到一个.htaccess文件，就下载一份。该文件通常存储为隐藏文件，因此您可能看不到它。在这种情况下，您将无法下载它(尽管文件名前面的点表示一个隐藏的文件，但它可能不会隐藏在您的特定主机上)。始终保留一份.htaccess文件的备份；如果你犯了一个错误，你可以上传原件。在.htaccess文件中犯一个错误会让你的整个网站停止工作。如果发生这种情况，只需从备份中上传原件。无论是出版社还是作者都不会对你在主机服务器上犯的任何错误负责。
视频 MIME 类型
在尝试为网站提供 HTML5 视频之前，请务必联系主机服务器，请求为.ogv、.mp4、.flv、.swf和.webm视频文件设置 MIME 类型。如果你忽略了这一点，你的视频将无法在某些浏览器上播放。
下面是大多数主机用来在服务器上设置 MIME 类型的代码片段。它和其他名为AddType的权限一起存在于.htaccess文件中。
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm AddType video/x-flv .flv AddType application/x-shockwave-flash swf
注意使用纯文本编辑器创建文件是绝对必要的。可以使用笔记本创建文件，并先保存为
.htaccess.txt。然后您必须通过右击文件并将其重命名为.htaccess来删除.txt文件类型。如果在.htaccess文件名后面写任何东西都不行。
- Each
AddTypemust be on its own line, and no line break is allowed. If the text editor wraps the text, make sure it doesn't insert line breaks to create the wrapping.- Use
#(hash) at the beginning of a line to comment out a line.- Ignore multiple or single spaces, but do not use tabs.
- When uploading files using FTP, should not be sent in binary. You must upload it in ASCII mode.
- You should upload the
.htaccessfile to the folder (root folder) where your homepage is located. Then, the file affects every folder in the entire site.- Use your FTP client, find the
.htaccessfile you uploaded, and right-click it. Set CHMOD to 644 or (rw-r–r–). This prevents unauthorized people from interfering with it. This also makes it available to the server, but it can't be seen in the browser.
提示你的主机/服务器可能选择不显示
.htaccess文件，但是它仍然存在，所以试试这个:在你的 FTP 程序中，点击下载按钮，不选择文件名。通常会出现一个文本框，要求您输入文件名。键入.htaccess然后点击 OK 下载文件。
如果你的文本编辑器不允许你像一样重命名一个文件。 htaccess如果前面有一个点，请尝试在 MyComputer 中查看该文件(或在 Windows 7 中在 Computer 中查看)。然后右键单击该文件，选择重命名，键入新名称，并按 Enter 键进行确认。或者，您可以将.htaccess上传到您的主机服务器，并在服务器上重命名它。然而，如果主机使文件不可见，这将不起作用。如果您的 FTP 程序可以配置为查看所有文件，它可能会克服这个问题。在 FTP 程序中重命名文件后，您可能看不到该文件。
上传您的新.htaccess后，您可能会在尝试查看您的网站时看到错误消息。这意味着你的.htaccess文件有问题。上传保存好的，好的版本；或者在绝望中，你可以尝试上传一个完全空的.htaccess文件来覆盖这个有问题的文件。
永远保存好你的htaccess.txt文件，以防你将来需要修改。
主持人可能允许你改变。htaccess 文件
我使用[www.bargainhost.co.uk](http://www.bargainhost.co.uk)是因为它对网页设计者/所有者有很多有用的功能，而且支持人员是我见过的最有帮助的。我可以使用以下步骤从廉价主机 cPanel(控制面板)访问.htaccess文件:
- Log in to cPanel. Click under File Manager Options.
- 。
- Select the home directory.
- Select the
public_htmlfolder.
htaccess
Internet Explorer 条件句
有时 IE 需要一个简短但附加的样式表来克服浏览器无法符合标准建议的问题。
条件链接必须放在 HTML 标记的 head 部分，在样式化整个网站的主链接之后。条件位由if和endif包围。
如果 IE 6、IE 7 和 IE 8 是不符合特定 W3C 标准的浏览器，那么 HTML 将如下所示:
<link rel="stylesheet" type="text/css" href="*global.css*"> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="*style-IE.css*"> ` <![endif]-->
表达式<!--[if lt IE 9]>中的lt表示“如果浏览器低于 IE 9。”
如果 IE 6 是唯一不符合特定 W3C 标准的浏览器，那么 HTML 将如下所示:
`
`如果 IE 6 和 IE 7 是不符合特定 W3C 标准的浏览器，那么 HTML 将如下所示:
`
`表达式<!--[if lte IE 7]>中的lte表示“如果浏览器小于或等于 IE 7。”
注意你大概习惯打“IE6”、“IE7”、“IE8”。输入条件句的时候一定要在 IE 和数字之间加一个空格，否则会被浏览器忽略。
IE 条件句的全部细节可以在[msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx](http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx)找到。同样参见[www.conditional-css.com/usage](http://www.conditional-css.com/usage)了解所有浏览器的条件。
数据表
常见的人物实体
在 HTML5 中，有些字符必须用字符实体来表示。表 App-1 显示了最常见的实体。
要了解全部细节，请在搜索引擎中输入“ISO-8859-/entities”。
浏览器流行度统计
网页设计者需要知道他们的大多数目标用户使用的是哪种浏览器。当决定我们的目标受众时，我们可以把杂志投票作为设计技术网站的指南，比如教程和 W3C 信息。对于提供新闻、商品、服务、旅游信息的网站，以及一般的网站，表 App-2 中的统计数据更适用。总是问你的潜在客户她正在使用哪个浏览器。
警惕计算机杂志调查收集的统计数据。调查结果并不代表公众的观点。相反，他们给出了一组精选的计算机爱好者的观点。大多数人和商业公司使用 Windows 和该操作系统免费提供的内容。在表格 App-3(computer active杂志和[gs.statcounter.com](http://gs.statcounter.com))中比较两类用户 2012 年 2 月在英国的数字。
表 App-2 和表 App-3 并不能说明全部情况。IE 的数据包括好的和不太好的版本。我们可以忽略 IE 6。如果我们假设到 2015 年，Windows 7 和 Windows 8 的用户已经成为主导，这些用户可能会遵循他们早期的偏好，使用他们的操作系统自带的任何东西——IE 9 和 IE 10。与此同时(2012 年 2 月)，IE 7 仅占英国 IE 总使用量的 12 %,而且还在快速减少。IE 8 占 IE 总数的 62 %,并逐渐被 IE 9 取代，2012 年 2 月 IE 9 占 26%。
调查变得更加复杂，因为现在许多人有不止一台电脑，每台电脑都装有不同的 Windows 操作系统和不同的浏览器。政府机构有时落后于更有知识的公众。
短期内，确保你的网站可以在所有浏览器上运行，包括 IE 7 和 IE 8。希望到 2015 年我们可以忘记 IE 条件，因为所有的浏览器都将更加符合标准。
提示访问
[gs.statcounter.com](http://gs.statcounter.com)时，选择条形图版本，清晰了解当前情况。选择折线图版本以查看趋势。另请参见[marketshare.hitslink.com/browser-market-share.aspx?qprid=3](http://marketshare.hitslink.com/browser-market-share.aspx?qprid=3)。
浏览器使用的统计数据也由以下网站监控:
[www.w3schools.com/browsers/br…](http://www.w3schools.com/browsers/browsers_stats.asp)[gs.statcounter.com](http://gs.statcounter.com)[www.netmarketshare.com/browser-mar…](http://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=0)[en.wikipedia.org/wiki/Usage_share_of_web_browsers](http://en.wikipedia.org/wiki/Usage_share_of_web_browsers)
不同组织的统计数据差异很大。我们永远不会知道哪个数据是最可靠的，但是你应该能够发现明确的趋势。
