BlogJava-自由,开源,分享-文章分类-W3C validation

让 <pre /> 标签中的内容自动换行并符合 W3C 标准（多浏览器支持）

龙震 — Wed, 21 May 2008 14:00:00 GMT

　　默认情况下，

 标签中的内容若超出范围不会自动换行，这样无论在显示或打印都会出现麻烦。



　　下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码： 



pre{

  white-space:pre-wrap;       /* css-3 */

  white-space:-moz-pre-wrap;  /* Mozilla, since 1999 */

  white-space:-pre-wrap;      /* Opera 4-6 */

  white-space:-o-pre-wrap;    /* Opera 7 */

  word-wrap:break-word;       /* Internet Explorer 5.5+ */

}


　　更多内容请参见：http://www.w3.org/TR/css3-text/#white-space。

龙震 2008-05-21 22:00 发表评论

让 <a /> 标签的外部链接通过 W3C XHTML 1.0 Strict 标准验证

龙震 — Mon, 12 May 2008 03:17:00 GMT

　　通常情况下，我们要打开一个外部链接（新开窗口），往往使用如下代码：

　　然而把它放在 W3C XHTML 1.0 Strict 标准下却发现无法通过验证。

　　原来，在严格的 W3C DTD 下，标签的 target 属性是不被官方所推荐的，使用 Strict 模式将视 target 属性无效，我们只有利用 JavaScript 来变通实现。
　　真不知道 W3C 专家们是怎么想的，或许“易用性、友好性”成为他们主张的关键，因为老外觉得不经过用户同意，没有明确提示就打开一个新窗口是不礼貌的。

　　我们姑且不管这样的概念是否真正合理，先看看解决办法：

　　rel 属性：规定当前文档与目标 URL 之间的关系，即用来说明链接和包含此链接页面的关系，以及链接打开的目标。
　　我们将使用 rel="external" 作为标签的特性，那么可以得到如下代码：

　　这是符合 W3C XHTML 1.0 Strict 标准的方法，当然还需要以个 JavaScript 方法作配合：

function external(){
  var anchors=document.getElementsByTagName("a");
  for(var i=0;i<anchors.length;i++){
    if(anchors[i].getAttribute("rel")=="external"){anchors[i].target="_blank";}
  }
}

　　在页面下载完成时自动加载：

window.onload=function(){
external();
};

　　可以把以上两段 JavaScript 代码存储在 external.js 文件里，然后通过外部链接方法调用：

龙震 2008-05-12 11:17 发表评论

表单元素通过 W3C 校验

龙震 — Tue, 22 Apr 2008 06:16:00 GMT

　　对含有表单的网页进行 XHTML 1.0 校验时，发现无论如何也无法通过验证，网上检索了一下相关资料，发现有如下规则：

　　XHTML 1.0 Strict 中表单元素要放在
、
… 里面。

　　看下面的代码：

<form method="post" action="">
<p>
<label>帐号 <input name="account" type="text" />label>
<label>密码 <input name="password" type="password" />label>
<input type="submit" value="登录" />
p>
form>

　　另外，如果 form 中包含 fieldset 元素，它可不必包含在 div、p 等元素中，但未包含在 fieldset 元素中的表单元素，必须包含在 div、p 中。

<form method="post" action="">
<fieldset>
<legend>帐户legend>
<label>帐号 <input name="account" type="text" />label>
<label>密码 <input name="password" type="password" />label>
fieldset>
<p><input type="submit" value="登录" />p>
form>

龙震 2008-04-22 14:16 发表评论

符合 W3C 标准的细线表格

龙震 — Fri, 18 Apr 2008 01:02:00 GMT

　　随着 W3C 标准的流行，表格标签对于我们来说已经不太常用，但 W3C 标准并没有抛弃它，这必然有它存在的合理性。

　　依我看来，表格最大的用途就在于数据内容的表现，确实省去了不少麻烦。

　　下面是表格标记的 XHTML 代码：

<table width="236">
<tr>
<td> td>
<td> td>
<td> td>
<td> td>
<td> td>
<td> td>
tr>
table>

　　常用的修饰上述表格为细线表格的 CSS2 样式代码如下：

table{border:1px solid #000;border-width:1px 0 0 1px;margin:2px 0 2px 0;text-align:center;border-collapse:collapse}
td,th{border:1px solid #000;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left}
th{text-align:center;font-weight:600;font-size:12px;background-color:#F4F4F4}

　　后来发现有更简单的：

table,td,th{border:1px #000 solid;border-collapse:collapse}

　　注意：以上代码均通过了 W3C 验证（strict），符合标准。

龙震 2008-04-18 09:02 发表评论

盒模型 div 布局的垂直居中（W3C 推荐方法）

龙震 — Thu, 17 Apr 2008 17:01:00 GMT

<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>title>
<style type="text/css">
body{margin:0;padding:0}
div{margin:-200px auto auto -275px;position:absolute;top:50%;left:50%;width:550px;height:400px;background:#ff6600;text-align:center;line-height:400px}
style>
head><body>
<div>盒模型 div 布局的垂直居中（W3C 推荐方法）div>
body>html>

龙震 2008-04-18 01:01 发表评论