郭爽的网页设计资料

比如这样的代码就不能通过 xhtml 1.x 验证，以前没注意到这个问题 。比如这样的代码

test

• fefe

W3C验证会报告，不允许block元素（ul）出现在这里。p 换成 div就可以，真是奇怪的限制啊。xhtml 2.0 将去掉这个限制。

Another logical anomaly in XHTML 1.0 is that you must close a paragraph in order to use a list. In fact, you must close it to use any block-level element (blockquotes, preformatted sections, tables, etc.). This is often an illogical thing to do when such content can justly be used as part of the same paragraph flow. XHTML 2.0 removes this restriction. The only thing you can’t do is put one paragraph inside another.

via The future of HTML, Part 2: XHTML 2.0

有些意思，把 behavior 和 presentation 分开的一些思路。大约就是遍历元素，然后根据一些标签名、class或者自定义属性来赋予元素一些 behavior。也就是说，尽量不在 html 嵌入破碎的 javascript 代码，而统统在 onload 以后一次处理。

原文在 JavaScript Triggers

找到一个中文版 JavaScript触发器

如果没什么问题，还是建议阅读英文版，中文说这些事情总是怪怪的。部分代码摘录如下：

var x = document.forms[0].elements;

for (var i=0;i

{

if (

x[ i ].className.indexOf('required') != -1 && !x[ i ].value

)

...

}

说明：必填项 的表单元素，给个所谓的 required，然后判断是否有该字符串以及值。

function validateForm()

{

var x = document.forms[0].elements;

for (var i=0;i

{

if (x[ i ].getAttribute('required') && !x[ i ].value)

// notify user of error

}

}

var x = document.getElementsByTagName('textarea');

for (var i=0;i

{

if (x[ i ].getAttribute('maxlength'))

x[ i ].onkeypress = checkLength;

}

function checkLength()

{

var max = this.getAttribute('maxlength');

if (this.value.length > max)

// notify user of error

}

说明：使用自定义属性，更容易处理。

我关心的是 XHTML验证会通不过，果然作者立刻给出了办法，自定义 DTD。

其实也不是什么新思路，以前我们也这么做，所以我觉得重要的是一个语义(semantic)的html代码结构，通过DOM我们就可以做很多事情了，：）

# Elements need to be referenced in lowercase, e.g. document.getElementsByTagName(“p”)

元素名必须小写

# document.body is deprecated, instead reference it by id or use

document.body 属于不推荐，应该使用id或者（如下的格式）

document.getElementsByTagName(“body”).item(0)

# Collections like document.images, document.applets, document.links, document.forms and document.anchors do not exist when serving XHTML as XML, instead use document.getElementsByTagName()

如果伺服为 XHTML（XML）的话，document.images, document.applets, document.links, document.forms 和 document.anchors 将不复存在。

# innerHTML and document.write cannot be used anymore, instead use DOM methods, e.g. document.createElementNS(“http://www.w3.org/1999/xhtml”, “div”)

innerHTML 和 document.write 将不能使用，取而代之以 DOM 方法，如

document.createElementNS(“http://www.w3.org/1999/xhtml”, “div”)

via http://www.bobbyvandersluis.com/articles/goodpractices.php

• Best javascript article: Ten good practices for writing JavaScript in 2005
• Best javascript for effects: Moo.fx
• Best javascript for Ajax: AHAH
• Best resource for CSS/layout: In search of the One True Layout
• CSS – the coolest idea: Creating a star-rater with CSS
• Best article for CSS and browsers: On having layout
• Top CSS hackery: Pup’s Box Flow Hack
• Best on CSS/typography: Worn Type
• Best CSS/development practices: CSS framework
• Best on markup: semantic Typography
• Webdesign – top creative idea: Nifty Corners
• Top entry on webstandards: Ten reasons to learn and use web standards
• Best resource on Webstandards: Basic webstandards Workshop
• Best presentation: Designing with Web Standards
• Best accessibility article: Developing sites for users with Cognitive disabilities and learning difficulties
• Best design article: Five simple steps to designing grid systems
• Best articolo on search engines: Beginner’s Guide to SEO
• Best on-line tool: Typetester
• Most wanted commercial web app: Mint
• Best blog: 456BereaStreet

via http://web-graphics.com/mtarchive/001704.php

via Transitional vs. Strict Markup，很不错的文章，总结了绝大部分重要条目，在我验证的过程中也发现了几乎所有这些问题。不想全转，一般大家不注意的地方如下：

下面三个标签在 strict 中不再存在！center 用 text-align:center；font用样式表；iframe用object；（搜索本站旧贴）

* center

* font

* iframe

* text and images are not allowed immediately inside the body element, and need to be contained in a block level element like p or div

body 里面不能直接跟inline（行内）元素而必须先用 h1-7,div,p等block（块）元素

* input elements must not be direct descendants of a form element

form里面不能直接跟 input。我个人经验是用div，p或者fieldset

* text in blockquote elements must be wrapped in a block level element like p or div

blockquote 内也不能直接跟行内元素，而需要 p ,div等先

其实使用 W3C xhtml 验证 的时候就会出现这些提示。

Developing With Web Standards

中文版：

http://www.456bereastreet.com/lab/developing_with_web_standards/zh/

1.blockquote 中不可直接跟inline元素，而必须p等块元素

2.asp serve 正确的MIME类型

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

3.服务器端也要serve 编码声明

</p> <p><?php</p> <p> header("Content-Type: application/xhtml+xml; charset=utf-8");</p> <p>?>

4.According to TheCounter.com, 6% of web users have no JavaScript. W3Schools.com reports 8%.

5.semantic URL

BTW:解释了为什么要用 scope，这样替换 colspan，空 td可以省略

跨行和跨列

在以前用表格布局的年代，rowspan属性和colspan属性常被用来让单元格跨几列或跨几行，来布局那些经过整齐切割的图像。这两个属性现在还在用， 因为并没有CSS来控制单元格的跨行和跨列。仔细想想，其实是很有道理的：跨行和跨列示表格结构(structure)的一部分，而不是其表现(presentation)。

列和列组：
和

HTML提供了
和
标签来为相关的表格列分组。这样就可以（在一些浏览器中）使用CSS来单独的为列样式化。列组也可以使用scope属性来标明其表头信息。