显示标签为“HTML”的博文。显示所有博文
显示标签为“HTML”的博文。显示所有博文

2010年2月17日星期三

Anigma - 一个HTML5游戏

一个珠宝配对的游戏，游戏本身并没什么，但真正COOL的是它是如何组织的：没有FLASH，只需要HTML5和webkit，快来体验一下吧~想 玩这个游戏，IE是不行的，你可以使用支持webkit核心的浏览器。

http://icefox.net/anigma/

发帖者 时间： 没有评论:
标签：

2008年12月13日星期六

一行代码给你的Blog添加下雪效果

前段时间冷空气突袭的时候，据说郊区密云的雪积得挺厚，但北京城内除了飘了一点小雪粒，毫无动静。应该是气温过高所致，我在慈云寺桥附近拍下的照片可以很好的解释这一点。

不过最近WordPress.com倒是提供了一种让你在Blog下雪的方法（原作者是Scott Schiller），只需要将这行代码加在你Blog的任何位置即可，不需要额外的负担：不用自己维护图片和JavaScript文件（WP.com会帮你出带宽费用，哈哈~）



<script src="http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js"
type="text/javascript"></script>


如果希望拥有像我的Blog这样的效果，即让雪停留在某一固定高度，例如我现在将雪停留在导航栏上，只需要引用我修改后的js即可。为了不影响加载速度，放到</body>前面即可。

所有TES主题用户都可以直接使用这个代码：

<script>
document.write(unescape('%3Cscript type="text/javascript"
src="http://vosforever.appspot.com/static/snow.js"%3E%3C/script%3E'));
</script>


其它主题用户，如果希望改变雪落下的位置，可以使用这个代码：

<script>
var customizedHeight = 0;
document.write(unescape('%3Cscript type="text/javascript"
src="http://vosforever.appspot.com/static/snow.js"%3E%3C/script%3E'));
</script>


同时，你可以根据你的页面导航情况自己定义customizedHeight的值，单位为像素，代表雪停留的位置与页面头部的距离。如果设为0，则落下的雪花会停留在页面最底部。
发帖者 时间： 没有评论:
标签： ,

2008年11月7日星期五

对网站进行代码升级

对原来是XHTML的网站已经全面升级到XHTML Strict,并开始使用application/xhtml+xml MIME 类型来发送XHTML。所以使用旧的不支持XHTML的浏览器可能无法正常浏览，遗憾的是IE也在此范围内。尽管已经对IE的浏览做过一些处理，但还是不能保证完全地兼容，比如本来是打开却出现下载提示。所以使用了IE浏览器的用户首页将转到www.pcxingxing.net.ru/ie。
发帖者 时间： 没有评论:
标签：

2008年10月12日星期日

IE 8 即将发布,您的网站准备好了吗?

IE 8将会是Internet Explorer历史上最重要的一个版本发布，除了其带有中国传统的吉祥数字“8”以外，最主要的是其对标准的兼容性上得到了极高的增强，这对于网页开发 人员来说，最大的便利就是不用再为每种浏览器（甚至某种浏览器的不同版本）开发不同的CSS来进行适应。以后网页开发人员只需要兼容W3C的标准即可，而 不需要把过度的精力放在不同浏览器标准的相异性上。发布时间在即，那么您的网站是否已经准备好了呢？

1) 兼容性考虑

目 前的网站由于各种历史原因，可能针对不同的浏览器设置了不同的CSS文件。而针对IE 8，可能大部分网站尚没有做好准备。可能很多朋友知道，IE 8带有一个“切换IE 7模仿模式”的按钮，而且在Beta 1以及Beta 2期间，这个按钮是设置在默认选中状态。但是在IE 8正式发布的时候，该按钮默认将会是非选中状态，这就表示着如果一个网站没有做任何准备功课，在IE 8下将会以严格模式来常解析CSS。

前段时间，我与合作伙伴见面时，曾经特意使用IE 8 Beta 2的严格模式浏览过大部分合作伙伴的网页，都会出现或多或少的显示变形的问题，使得网站无法进行正确浏览。如果您的网站尚未做过IE 8的兼容性测试，建议您尽快下载IE 8的Beta 1，并且将其切换到IE 8严格模式，对您的网站进行浏览。

如果您发现问题，并且感觉在短期内无法修复，您也可以通过在页面当中添加Meta标签，在服务器端强制IE 8使用“IE 7模仿模式”，做法很简单：

a. 针对全站页面: 您可以修改Web服务器（如Apache/IIS/Resin等）的HTTP头信息，在其中增加以下指令： X-UA-Compatible: IE=EmulateIE7。这个是我个人强烈推荐的做法，在您无法进行全站测试的情况下，可以先使用此方式使IE 8的严格模式暂时失效。

b. 针对单独页面：如果您的网站大部分页面在IE 8严格模式下显示正常，只有个别页面出现问题，建议在出现问题的页面的页首，即Head标签内添加以下Meta标签：

< m e t a equiv="X-UA-Compatible" content="IE=EmulateIE7" >
。

更多信息，请参考： http://support.microsoft.com/kb/952030/

2) 制作Activity以及WebSlice

IE 8在Beta 1期间曝光了两个新特性，即Activity（活动）以及WebSlice（源剪辑），目前国内很多网站已经基于Activity以及WebSlice制 作了相关的内容，在IE 8 Beta 2期间，您会发现更多的网站会发布这些实用的小工具。以下是目前已经对外发布的一些网站：

a. 淘宝：http://ie8.taobao.com

b. 网易：http://ie8.163.com

c. 百度：http://stock.baidu.com/ie8/ie8.html

d. 腾讯：http://labs.qq.com/e/49/

甚至包括.NET开发人员常去的博客园也已经发布了其最新文章的Web Slice，有兴趣的话可以使用IE 8 Beta 1来访问博客园的首页。另外，如果您也使用Firefox 3，您可以发现已经有人开发了面向Firefox 3的Activity以及WebSlice插件。

Activity的使用场景： 您的网站提供一系列的服务，允许贵网站的用户通过在其它网站的主动操作来调用此服务。比如假设您是一个财经网站，提供查询股票/基金信息的服务，通过 Activity，您可以让您的用户在其它网站上浏览股评信息时，不需要跳转到贵网站，即可以通过右键菜单调用贵网站的相应服务。如果感兴趣，可以下载Activity开发白皮书。

WebSlice的使用场景： 您的网站提供一些实时性信息，比如新闻、股票信息等，而希望用户可以在不返回相应页面的时候，当内容发生改动时，即可以推送给最终用户，您可以选择 WebSlice。而开发代价仅仅只是将页面当中的某一个标签内的“Class”元素设置为“hslice”这个特殊名称即可，详细信息请阅读WebSlice开发白皮书。

另 外，在IE 8 Beta 2发布时，微软将会发布一个面向IE 8全新的Gallery网站，用以搜索各个网站开发的WebSlice/Activity等面向IE 8新特性的组件，并且提供最终用户评估/下载，如果您希望您开发的WebSlices/Activity能够得到用户的青睐，那么就从现在开始吧：早起的 鸟儿有虫吃。 :)

3) 其它

IE 8 发布时，还将会带来一系列的新特性，在前段时期，已经面向国内一些领先的网站进行过交流，很多合作伙伴都非常感兴趣，并且正在开发此上的服务，相信在奥 运会期间大家会看到此类的成果（依据NDA协议，此类网站也已经从微软拿到了IE 8 Beta 2的早期内部版本）。微软也将会举办一系列的市场活动，用以推广我们的合作伙伴所开发的各种面向IE 8的新的服务。

IE 8 即将发布，无论您是企业网站的网页设计人员，还是个人网站的站长，都需要尽快为IE 8做好准备。 希望本文对您有帮助。
发帖者 时间： 没有评论:
标签： , ,

2008年8月17日星期日

Web标准发展建议和实例 XHTML

使用HTML4.01是能够制作出现代的、结构化的、兼容标准的站点的。然而，为了做到向整洁的语义化的代码的转变，并且为XML和未来的其他标记语言做好准备，建议大家使用XHTML1.0 Strict来创建新的站点，本文中的例子用的就是XHTML1.0 Strict。


XHTML 1.0 是以XML 1.0对HTML 4的改进，他的发展，以用来代替HTML。XHTML 1.0 Strict（这是我一直所倡导的）不支持表现类的标记（HTML 4.01其实也不支持，但是现在我们讨论的是XHTML）。正因为此，XHTML1.0 Strict 就促使了表现和结构的分离。



XHTML 1.1（XHTML的最新版）从技术上说，使用起来有一些复杂。因为规定中声明XHTML 1.1的文档应当使用MIME类型 application/xhtml+xml, 不应当被看作text/html。 并不是严格的禁止使用text/html, 只是不建议使用。 另外一方面，XHTML 1.0 （应当使用 application/xhtml+xml）同样能够使用MIME类型 text/html, 假如他是可兼容的HTML。W3C的注解XHTML Media Types 中包括了MIME类型（W3C推荐使用的类型）的概要。


不幸的是，一些老的浏览器包括IE不能识别MIME类型 application/xhtml+xml, 并且会终止显示源代码，甚至会干脆拒绝显示整个文档。


假如您想使用application/xhtml+xml, 您应当让服务器检验一下读取文档的浏览器是否支持MIME类型，假如能，就使用偃绮荒埽褪褂胻ext/html。


假如您使用的是PHP作为服务器端的脚本，那么下面的这段脚本能够让您的文档针对不同的浏览器使用不同的MIME类型。


<?php if (stristr($_SERVER[HTTP_ACCEPT], "application/xhtml+xml") || stristr($_SERVER["HTTP_USER_AGENT"],"W3C_Validator"))
{ header("Content-Type: application/xhtml+xml; charset=iso-8859-1");
header("Vary: Accept");
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
} else { header("Content-Type: text/html; charset=iso-8859-1");
header("Vary: Accept"); } ?>



这个脚本是检测是否用户代理发送了一个包含“application/xhtml+xml”的Accept HTTP头，或假如用户代理是W3C HTML校验器（不会发送合适的Accept HTTP头的，但是他依然支持 application/xhtml+xml）。假如上面检测的回答是肯定的，文本将被看作 application/xhtml+xml。那些浏览器也会收到一个XML的声明。对于另外的一些浏览器（包括IE的是任何版本），文档都将被看做 text/html。在文档中也没有添加额外的XML声明，因为假如添加的话，会使IE/WIN转化到我们所不希望的Quirks模式。


在Content-Type头部之后,一个被更改过的头部，将被发送到中间的缓存中（比如一些代理服务器），用来告诉他们文档的内容类型随着客户端对文档的请求而改变。


假如想了解更多的PHP检测脚本, 请参考Serving up XHTML with the correct MIME type. 那个脚本对请求客户端的q-rating（他声明了更够很好的支持某种MIME类型）进行了考虑，在发送text/html 文档给不支持 application/xhtml+xml的客户端之前，把XHTML转化成HTML 4。


下面的是个相似的脚本，针对ASP（VBSscript）:

<% If InStr(Request.ServerVariables("HTTP_ACCEPT"), "application/xhtml+xml") > 0 Or InStr(Request.ServerVariables("HTTP_USER_AGENT"), "W3C_Validator") > 0 Then Response.ContentType = "application/xhtml+xml" Response.Write("<?xml version=""1.0"" encoding=""iso-8859-1""?>" & VBCrLf); Else Response.ContentType = "text/html" End If Response.Charset = "iso-8859-1" %>

值得注意的是，当一个文档的MIME type是application/xhtml+xml时，一些浏览器（像Mozilla）是不会显示包含错误的文档的。这在研发过程中是一件好事，但是对于那些刚刚更新完站点且不是XHTML专家的人来说，就会出现一些问题，除非您能确保任何的代码都是规范的。假如出现了这种问题，您能够考虑使用HTML 4.01 Strict来代替XHTML。


下面列出了一些在使用XHTML 1.0 Strict中需要特别注意的地方:




  • 永远使用小写字母，让引号伴随者属性: 任何元素和属性的名字都必须使用小写，任何属性值必须使用双引号。


    错误: <A HREF="index.html" CLASS=internal>
    正确: <a href="index.html" class="internal">




  • 关闭任何的元素:在HTML中一些元素没有必要被关闭。当下一个元素开始的时候，上一个元素就自动被关闭。XHTML中是不允许这样的。任何元素都必须被关闭，即使其中没有内容（如 <img>）


    错误: <li>Item 1
    正确: <li>Item 1</li>



    错误: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    正确: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


    错误: <br>
    正确: <br />



    错误: <img src="image.jpg" alt="">
    正确: <img src="image.jpg" alt="" />



  • 属性不能被缩减: 在HTML里，一些属性能够被缩减。而XHTML则不允许这样做。


    错误: <input type="checkbox" id="checkbox1" name="checkbox1" checked>
    正确: <input type="checkbox" id="checkbox1" name="checkbox1" checked="checked" />




  • 不要使用被排斥的元素: 一些元素和属性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允许的，而在XHTML 1.0 Strict下则不被支持(更有in HTML 4.01 Strict)。比如<font>、<center>、 alink、align、width、 height (对于某些元素)和 background。

发帖者 时间： 没有评论:
标签： , ,

XHTML 和 MIME 类型 - 使用Web 标准生成 ASP.NET 2.0 Web 站点

当 Web 浏览器从 Web 服务器请求页时，Web 服务器会为该页分配特定的 MIME 类型（也称为 Content 类型）。例如，HTML 页被分配为 text/html MIME 类型，GIF 图像被分配为 image/gif MIME 类型，而 Microsoft Word 文档被分配为 application/msword MIME 类型。



浏览器使用 MIME 类型来确定如何处理页（或其他资源）。例如，如果浏览器从 Web 服务器获得一个具有可识别图像 MIME 类型的文件，则浏览器尝试将该文件解释并呈现为图像。如果浏览器获得一个具有 application/msword MIME 类型的文件，则该浏览器可能自动打开 Microsoft Word 以显示该文档（这里的确切行为取决于浏览器及其配置方式）。



W3C 为 XHTML 文档引入了一个 MIME 类型。这一新的 MIME 类型是 application/xhtml+xml。W3C 建议您在提供 XHTML 文档时使用 application/xhtml+xml MIME 类型，因为 XHTML 页应该以比旧式 HTML 页更严格的方式进行解释。



通过在页指令中包含 ContentType 属性，为 ASP.NET 页分配特定的 MIME 类型。例如，在 ASP.NET 页的顶部包含以下指令会导致为该页分配 application/xhtml+xml 类型。


<%@ ContentType="application/xhtml+xml" %>






W3C 的推荐标准有一个突出问题：并非所有浏览器都能识别 application/xhtml+xml。特别需要指出的是，Internet Explorer（有史以来最为流行的 Web 浏览器）不能识别 application/xhtml+xml MIME 类型。因此，使用推荐的 application/xhtml+xml MIME 类型提供 XHTML 页不是一个可行的选择。



有三种解决该问题的方式。可以使用 text/html MIME 类型来提供 XHTML 页，或者使用 application/xml（或 text/xml）MIME 类型来提供 XHTML 页，也可以使用内容协商方式。让我们对上述每个选择进行探讨。




第一个选择 — 以 text/html 类型提供页 — 是最容易的选择。默认情况下，ASP.NET 页被分配为该 MIME 类型。更好的做法是，按照 W3C 的建议，在向现有的 HTML 浏览器提供页时使用这一选择（请参阅 http://www.w3.org/TR/xhtml-media-types/）。如果创建的是 XHTML 1.0 Transitional 页，并且 Web 应用程序的主要受众使用不能理解 application/xhtml+xml MIME 类型的浏览器，那么以 text/html 类型提供页似乎十分明智。毕竟，引入 XHTML 1.0 Transitional 标准的目的是使开发人员能够更为容易地将现有的 HTML 页迁移到 XHTML。



这一主张是有争议的。例如，Ian Hickson 认为，绝不应该以 text/html 类型提供 XHTML 页，因为这样会导致随便的、不标准的 XHTML 页（请参阅 http://hixie.ch/advocacy/xhtml）。他建议作者们继续坚持使用 HTML 4.0，直到更多的浏览器完全支持 XHTML 标准为止。



第二个选择是使用 application/xml 或 text/xml MIME 类型，以 XML 类型提供 XHTML 页。在向 Internet Explorer 提供 XML 文档时，该文档会作为 XML 文档进行分析并呈现到浏览器中。（该文档由 document.XMLDocument 对象公开的 XML DOM 表示。）



以 XML 类型提供 XHTML 文档的优点是，XHTML 文档具有的任何问题都会被 Internet Explorer 的 XML 分析器捕获。例如，如果文档包含重叠标记，或者如果没有将属性的值包装到引号内，则不会呈现该文档，并且会显示错误信息（参见图 4）。XHTML 纯粹主义者认为该行为是一件好事，因为它可以防止您编写格式错误的 XHTML。








图 4. 在 Internet Explorer 中显示 XML





该方法的问题是：默认情况下，Internet Explorer 呈现 XML 文档的源代码。因此，如果以 XML 类型提供 XHTML 文档，则 Web 站点访问者将看到 XHTML 文档的源代码，而不是预期的呈现输出。W3C 推荐了一个用来解决该问题的“窍门”（请参阅 http://www.w3.org/MarkUp/2004/xhtml-faq#ie）：如果通过使用 XSLT 转换将 XHTML 文档转换为 HTML，那么文档将分析为 XML 并显示为 HTML。



例如，清单 1 中的 ASP.NET 页将以 XML 文档的形式提供，但被转换为 HTML 文档。结果页会正确地显示在 Internet Explorer、Opera 和 Firefox 中。



清单 1. XMLPage.aspx


<%@ Page Language="VB" ContentType="text/xml" %>

<?xml-stylesheet type="text/xsl" href="copy.xsl"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>My Page</title>

</head>

<body>


<form id="form1" runat="server">

<div>

<asp:TextBox ID="txtFirstName" runat="server" />

</div>

</form>

</body>


</html>






页指令会导致该页以 text/xml 类型呈现。清单中的第二行引用了一个名为 copy.xsl 的 XSLT 样式表，它会对当前文档执行标识转换。换句话说，除了将原始XML 文档中的所有元素复制到新的 HTML 文档中以外，它根本没有做任何事情。copy.xsl 的源代码包含在清单 2 中。



清单 2. Copy.xsl


<stylesheet version="1.0"


xmlns="http://www.w3.org/1999/XSL/Transform">

<template match="/">

<copy-of select="."/>

</template>

</stylesheet>







该解决方案是有效的，但它似乎不是很精彩。当分析 XML 文档时，的确获得了额外的验证步骤。但是，如果在 Visual Studio .NET 2005 或 Visual Web Developer 中生成 ASP.NET 页，那么开发环境会在“Source”视图中执行相同的验证。最后，Internet Explorer 将收到与向它发送 text/html 类型文档时相同的文档。



第三个选择 — 内容协商，将 W3C 推荐标准的精神与最大程度的浏览器兼容性最佳地组合在一起（请参阅 http://www.w3.org/2003/01/xhtml-mimetype/content-negotiation）。当使用内容协商时，会以不同的 MIME 类型向不同的浏览器提供 ASP.NET 页。如果浏览器声称它支持 XHTML，则向它提供 XHTML 类型的页；否则，以 text/html MIME 类型向该浏览器提供页。



清单 3 中的 Global.asax 包含向不同的浏览器提供不同 MIME 类型页所需的代码。如果将该文件添加到 Web 项目中，则每个 ASP.NET 页的 MIME 类型都会随着每个请求而修改。将页提供给 Firefox 或 Opera 时，该页以 application/xhtml+xml 类型提供。另一方面，Internet Explorer 6 会收到 text/html 页。



清单 3. Global.asax






<script runat="server">

Sub Application_PreSendRequestHeaders(ByVal s As Object, _

ByVal e As EventArgs)

If Array.IndexOf(Request.AcceptTypes, _

"application/xhtml+xml") > -1 Then


Response.ContentType = "application/xhtml+xml"

End If

End Sub

</script>




转自：http://www.flywe.net/article.asp?id=133
发帖者 时间： 没有评论:
标签： , ,

2008年8月15日星期五

打造W3C XHTML 1.0标准的网站

XHTML1.0是HTML4.0的重新组织,算是HTML4.01的修正版,发行命名为XHTML1.0。
XHTML1.0要求比较严格,跟HTML4.01有些差别,以XHTML1.0标准下列1-4项是绝对必要的也是不同于HTML4.01的地方。
网页制作使用Dreamweaver MX 2004,可以在
「编辑」-「偏好设定」-「新文件」-「将文件设为XHTML兼容」，然后新增HTML,就可以开始制作XHTML的网页。 以下我列出几点比较常见会发生的错误供参考:

1.所有卷标元素名称都使用小写
错误 <HTML> <TITLE> <HEAD> <BODY>
正确 <html> <title> <head> <body>
错误 <IMG src=”BG.GIF” BORDER=”0″ ALT=”说明文字”>
正确 <img src=”bg.gif” border=”0″ alt=”说明文字” />
错误 <UL><LI></LI></UL>
正确 <ul><li></li></ul>
以上只是举例,是”所有”卷标元素名称都必须是小写。

2.所有没有成对的空标签必须以 />结尾，<p></p>和<a href=”home.html”></a>。

这就是成对错误： <br> <hr>
正确 <br /> <hr />
错误 <input type=”text” name=”name”>
正确 <input type=”text” name=”name” />
错误 <meta …>
正确 <meta … />
错误 <link rel=”stylesheet” type=”text/css” href=”style.css”>
正确 <link rel=”stylesheet” type=”text/css” href=”style.css” />
错误 <img src=”bg.gif” border=”0″ alt=”说明文字”>
正确 <img src=”bg.gif” border=”0″ alt=”说明文字” /> 3.不允许使用target=”_blank”
在HTML4.01可以使用target=”_blank”,
但XHTML1.0是不被允许的,你可以改写为 target=”new”

4.所有属性都必须有值
XHTML1.0规定所有属性都必须有值,若没有就必须重复属性作为值
错误 <input type=”radio” value=”v1″ checked name=”s1″ />
正确 <input type=”radio” value=”v1″ checked=”checked” name=”s1″ />
错误 <option selected>S1</option>
正确 <option selected=”selected”>S1</option>
错误 <td nowrap>
正确 <td nowrap=”nowrap”>

5.非卷标一部分的符号以编码表示
窗体内包含以下符号也必须用编码表示
< 以 < 表示
> 以 > 表示
& 以 & 表示
程序中的连结 & 也要改用 &
错误 <a href=”foo.cgi?chapter=1&section=2″>
正确 <a href=”foo.cgi?chapter=1&section=2″>

6.使用表格常犯的错误
我们在做表格通常会指定宽与高,例如:
<table border=”1″ width=”300″ height=”55″>
<tr><td> 内容 </td></tr>
</table>
这样做是没有办法通过,W3C建议使用CSS来控制卷标元素的高度
.table{
height:55px;
}
<table class=”table”>
<tr><td> TEXT </td></tr>
</table>
但是若使用太多表格,在CSS一一指定不同高,也不是好方法
其实很简单将高度height属性指定在储存格就可以了通过测试
<table border=”0″ width=”300″>
<tr><td height=”55″> TEXT </td></tr>
</table>
但这不是w3c希望的标准,建议能够使用div代替不必要的table

7.正确使用CSS样式表
一定要放在<head></head>之间
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<style type=”text/css”>
<!–
body{font-size:9pt;}
–>
</style>

错误 <style>
正确 <style type=”text/css”>
建议全站的样式都写在.css文件中

8.同一个id选择器不可重复使用
一个网页中id=”xx”同一个选择器不能重复使用,若需要重复请用class=”xx”

9.绝对不可省略双引号或单引号
错误 style=font-size:9pt
正确 style=”font-size:9pt”
错误 <img src=bg.gif width=140 height=30 alt=text />
正确 <img src=”bg.gif” width=”140″ height=”30″ alt=”text” />
错误 <a href=home>text</a>
正确 <a href=”home”>text</a>

10.标签必须是一对
<p> </p>
<span></span>
<div></div>

11.图片卷标加上文字说明alt=”说明”
错误 <img src=”bg.gif” height=”50″ border=”0″ />
正确 <img src=”bg.gif” height=”50″ border=”0″ alt=”说明文字” />

12.正确的卷标顺序
错误 <b><i>文字</b></i>
正确 <b><i>文字</i></b>

13.批注文字不可包含–符号
错误 <!– OEC–SPACE –>
正确 <!– OECSPACE –>

14.JavaScript写法
Javascript我们通常会写为
错误 <script language=”javascript”>
W3C标准必须为程序指定类型type=text/javascript,所以要写为
正确 <script type=”text/javascript”>
或者 <script language=”javascript” type=”text/javascript”>
载入外部.js独立档案的写法
正确 <script type=”text/javascript” src=”script.js”></script>

15. <embed>标签的争议
<embed>是Netscape的私有标签,W3C 从HTML3.2 HTML 4.01 到 XHTML 1.0 中都没有这个标签,所以使用<embed>的页面是不能通过标准测试。
W3C推荐使用 <object> 标签,用<object>插入flash影片的代码可以写为:
<object type=”application/x-shockwave-flash” data=”index.swf” width=”400″ height=”200″>
<param name=”movie” value=”index.swf” />
</object>
但这样的写法可能IE5/IE6 Win浏览器版本会出现问题。想要符合标准又能在任何浏览器下正常显示,以下几个连结点提供参考:以下几个连结点提供参考:

torresburriel.com
A List Apart

<embed>标签因为广大的受到运用,不再标准范围引起很大的争议,想要解决这个问题,只能等IE浏览器对<object>有更好的支持或者W3C愿意收录<embed>标签。

16. XHTML 1.0文件类别宣告的正确写法 (不可小写)
用于一般网页
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

用于框架页
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
W3C标准测试网址 http://validator.w3.org/
网页自动测试网址 http://validator.w3.org/check?uri=referer
测试时一定要有「16.文件类别宣告」还有指定文件编码
<meta http-equiv=”Content-Type” content=”text/html; charset=big5″ />
才能顺利进行测试动作,开始打造一个万维标准的网站吧!

发帖者 时间： 没有评论:
标签： , ,

2008年8月6日星期三

为什么AdSense不能在真正的XHTML中工作？

　　为什么AdSense不能在真正的XHTML中工作？



　　Google的AdSense使用JavaScript生成一个iframe来动态地发送广告。如果页面是使用常规的HTML或者不严格版本的XHTML，以text/html来伺服的话，没有任何问题。这个JavaScript如你所愿地生成iframe，任何事情都工作得很好。不幸的是，对于站长以application/xhtml+xml来伺服的XHTML，Google的方法不能工作。


　　主要问题出在JavaScript。Document.Write()不会在正确伺服的由一个XML解析器处理的XML页面中工作。Ian Hickson给出了为什么会这样的理由（中文版本站已经翻译：为什么document.write在XML中不工作）。就如我们所觉察到的， Document.Write()用来生成iframe，因此，Google的广告永远不会出现。


　　第二个问题在于iframe本身。这个元素没有出现在任何严格的XHTML版本中，所以尽管JavaScript可以生成，iframe会使这个页面的XHTML不合法。

　　怎么才能使它工作呢？


　　解决这些问题的一条途径是，简单地以text/html来伺服AdSense代码。为达到目的，有必要创建一个独立的网页，使用text/html的MIME类型，然后以object的形式插入到需要的页面中。下面是一个独立的文档的样例：




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html lang="en">

<head>

<title>Sponsorship</title>

<style type="text/css">


body {}{ margin: 0; padding: 0; }

</style>


</head>

<body>

<script type="text/javascript">这里是Google AdSense的参数</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>


</body>

</html>






　　对于使用这个分离内容和MIME内容脚本来同时伺服application/xhtml+xml和text/html的站长，最好能够利用已经存在的代码来决定这两种不同的方法的采用。在原始的分离内容和MIME内容脚本中，MIME类型由$mime变量来保存。如果该变量的值是 “application/xhtml+xml”，则可以在文档中使用object。否则，则把标准AdSense的JavaScript包含进来。下面的脚本演示这是如何做到的：





<div class="ads">


<?php if($mime == "application/xhtml+xml" { print " <object data=\"/includes/google.php\"

type=\"text/html\"></object>\n"; } else { ?>


<script type="text/javascript">这里是Google AdSense的参数</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>


<?php } ?>

</div>






　　这个解决方案业已在IE 6， Firefox 0.92和Opera 7.0中测试通过。



文章出处： http://neoone.51.net/tech/adsense.php

发帖者 时间： 没有评论:
标签： ,

Transitional vs. Strict Markup

推广Web Standards的人经常说XHTML比HTML更加严格，当然从某种意义上说是的，比如它要求所有的标签关闭并且所有的属性都用引号。但其实XHTML 1.0还分两种（加上Frameset DOCTYPE的话算三种，本文不讨论），Transitional（过渡型）和Strict（严格）DOCTYPEs。并且HTML 4.01也有同样的文档声明。


从字面上就可以看出来意思：Transitional DOCTYPEs只是为了实现从旧时代到新时代的过渡，而且Strict DOCTYPEs是默认的文档声明， 对构造HTML 4.01和XHTML 1.0都适用。


使用Transitional DOCTYPE一般是由于代码中含有过多陈旧的写法，并且一下子很难完全转换到Strict DOCTYPE来。但是Strict DOCTYPE才应该是你的目标。它鼓励甚至有时是强迫你把结构与表现区分开来，把表现层的代码都写在CSS里。HTML 4 Document Type Definition： -


本HTML 4.01 Strict DTD不包括表现层属性和标签，W3C将逐渐淘汰这些属性和标签，您完全可以使用样式表来实现。您应该使用Strict DTD，如需获得表现层属性和标签的支持，请使用Transitional DTD。



用Strict DOCTYPE还有一个好处，即可以让浏览器使用它们最严格、（一定程度上）最符合标准的模式来渲染页面。


Tommy Olsson在Web Standards Group的Ten questions for Tommy Olsson一文中很好的阐述了使用Strict的好处：


我觉得，使用Strict DTD，无论是HTML 4.01 Strict还是XHTML 1.0 Strict，远比讨论是用HTML还是XHTML重要的多。它代表了未来互联网的质量。它将结构和表现分开，使得维护一个站点非常容易。



对于刚开始接触web standards和正确的、语义化的结构的人，认清Transitional和Strict DOCTYPEs的区别非常重要。更多详细列表请参考：XHTML: Differences between Strict & Transitional、Comparison of Strict and Transitional XHTML和XHTML1.0 Element Attributes by DTD。


对于准备向Strict进发的人来说，两者的有些区别很可能会使开发者犯错误，接下来我将会谈到。


在Strict DOCTYPEs下不支持的标签



  • center

  • font

  • iframe

  • srike

  • u


在Strict DOCTYPEs下不支持的属性



  • align (表格相关的支持：col, colgroup, tbody, td, tfoot, th, thead, and tr)

  • language

  • background

  • bgcolor

  • border (table支持)

  • height (img和object支持)

  • hspace

  • name (在HTML 4.01 Strict中支持，XHTML 1.0 Strict中的form和img不支持)

  • noshade

  • nowrap

  • target

  • text, link, vlink, 和alink

  • vspace

  • width (img, object, table, col, 和 colgroup都支持)


内容模型的区别


元素类型的内容模型描述了什么样的元素类型实例可以被包含。这一点上，两种文档声明的最大区别在于blockquote, body, 和form元素仅能够包含块级元素，如：



  • 文本和图像不允许直接包含在body中，必须被p或者div等块级元素包含

  • input元素不能直接是form元素的下一层

  • blockquote元素内的文本，必须被p或者div等块级元素包含


将所有的表现都交给CSS，恪守Strict标准


在向Strict DOCTYPEs过渡的过程中，了解每个元素是做什么的比知道每个元素长啥样有效的多。


首先考虑结构和语义，然后再担心表现。

发帖者 时间： 没有评论:
标签： , ,

2008年7月25日星期五

Valid XHTML 1.0 Strict

最近开始研究web标准,把主博客首页去校检了一下,结果是This Page Is Valid XHTML 1.0 Transitional,通过了Transitional的校检,又去尝试了最严格的Strict。没有通过校检,因为Strict要求比 transitional 高得多,transitional是过度型的。
尽量改掉了一些错误,比如链接不能用target 属性(不知道在新窗口中打开怎么处理)。
图片加上 alt 属性,img不允许有border属性、align属性。language="JavaScript" 将不被允许，因为language属性在xhtml中是非法的。
XHTML 1.0 Strict真是严格,以前html中常见的代码都不能用了。不过标准化也是有好处的:能够适应各种浏览器。
发帖者 时间： 没有评论:
标签： , ,

2008年5月25日星期日

HTML高级教程 标准要点（xhtml）

HTML高级教程的目的是开拓HTML的优点，优化亲和力和易用性。

因为HTML初级教程和HTML中级教程持使用最新HTML标准 （XHTML 1.0以上版本）的立场，可能某些没有读过初级和中级教程的人对这个教程的某些方面感到难以理解，这也是标准要点存在的原因。总体上，这个 教程的各部分都假设你对HTML已经里外理解，并要进一步开发它的潜能。

这个教程给那些虽然已经了解HTML，但对经不起未来XHTML标准的考验，隐含在分离内容和表现后面含义还未觉醒的人们。

分离内容和表现

HTML从来就不是表现的手段，但从用户端结合元素来格式化文本，开发者从中找到操作布局的方法。CSS的强大，使得现在不再需要用HTML做任何表现了，而内容也可以完全从表现（CSS）中分离出来。

这样做有很多好处──通常可以压缩文件容量，有着用一个主要样式表就可控制整个网站而不是单个页面的灵活性，也可能使页面更易用，更具亲和力。

遵 循这些基本原则基本上意味着你不应该在HTML内使用样式化的任何事物了。比如font的标签，比如bgcolor的属性不应该再使用。甚至在图像标签 img内的边框属性border在XHTML 1.1中也是非法的了。别担心，过时的HTML可以样式化，CSS更可以样式化，而且可以做得更好。

不仅仅是从HTML内剥离表现，内容的结构意味着在适合的地方使用明确的HTML标签。比如，h1，h2等应用在标题上──而不仅仅是使用CSS使字体变大而已。

最佳指引就是一个可视化的浏览器上使用其默认的样式来呈现一个没有样式表（或者有样式表，但不支援样式表的文本浏览器，比如lynx——译者注）的页面。

表格不应该用在布局上──表格用来表示表格式的数据（我们已经不厌其烦地说了很多次──译者注）。也许对于已经习惯传统结构的HTMLer来说，完全改变有很大的技术难度。这个方法很大程度上压缩了文件，而且，基于这些显性代码，它变得更易用，更具亲和力。

关于更多，请阅读CSS高级教程的布局。

标签

在XHTML中所有的标签都必须小写和关闭。没有闭合标签的（如br和img）必须用英文半角正斜杠“/”在后面自关闭（如
）。注意在斜杠前应该有一个英文半角空格。

标 记也必须是合式的，使元素正确嵌套（比如< strong>< em>this< / em>< / strong>，而不是this）。

所有的文档都要有html，head，title和body元素。也必须从文档类型声明开始。

文档主体应该从 p， h1，h2， h3，h4，h5，h6，div， pre，address，ins或者del开始。

属性

所有的属性必须是小写的，它们的值也要用英文半角引号括（"）起来。

精简属性是不允许的（比如）。按惯例，精简属性必须给出跟属性名称一样的值（如 ）。

名字 name属性不再是合法的了（除了在表单元素中），应该使用id来代替。

目标属性target不是一个合法的属性。庆幸吧，它有些癫狂。

在img里，alt属性是必须的。

亲和力

为 残障人士制做具有亲和力网页的理由是不证而明的。不仅是人道的，而且也对老年用户和五官功能减退的用户有利（想一想，有一天我们老了，视力消退，五官不 灵，怎么浏览互联网？为年老积点德，现在就考虑亲和力吧！——译者注）。亲和力不仅与有严重残障人士方便，也使大部分少量消退功能（特别是视觉）的用户更 为易用。

这个问题越来越牵涉法律问题了，比如美国的“508条款”的采用，试图积极推动强制使用亲和力；在英国，所有的政府网站必须有一 个指定的亲和力程度。什么时候才可以有像在建筑物上的亲和措施的立法，以便普遍用在商业网站上？（中国还不知道什么时候有这种立法呢！但不等于我们就不要 关注我们设计的网页的合法性。——译者注）

如果能遵循上述的建议，你的HTML应该已经具备了为残障用户服务的高度亲和力。还有更多的创作使你的亲和力更上一层楼，而且不难。见亲和连接和亲和表单指南。
发帖者 时间： 没有评论:
标签： ,
订阅： 博文 (Atom)