web标准如何实现高效开发

2006-8-16　　　作者：佚名　　　来源：blueidea.com　　　点击：1358

页面功能：【评论】【有错就点】【字体：大中小】【打印】【关闭】【收藏本页】【收藏到365Key】

web标准让大家学会了手写代码，显然这样的效率不够高。关于高效开发早已提到了web标准推广的日程上来了，可是现在的成效还不是很让人满意，我个人观点，开发的时候从整体到局部，提高开发效率的时候要从局部到整体，因为这是一种组装，比如head区域，文章显示块，内容列表块，表单块......让你的代码复用起来。

现在web标准化版面的讨论有点沉闷，也没有了当年的火热，我打算每月搞一次专题讨论，带动大家的热情和对问题的集中解决。

下面是我以前的文章，希望能引起大家的讨论。

小毅已经整理很很多了，但是没有针对DW的，我个人比较喜欢DW，界面美观方便，而且提供多种浏览器预览，做法就是将常用的XHTML代码作成存入DW的剪辑库，不需要的部分就删除掉，现在还在整理中，先列出一部分，也希望大家给以补充。

TOP Code/头部代码

CODE:

<!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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="Content-Language" content="zh-CN" />


<meta content="all" name="robots" />

<meta name="author" content="ajie@netease.com‚阿捷" />

<meta name="Copyright" content="www.w3cn.org‚自由版权‚任意转载" />

<meta name="description" content="新网页设计师。web标准的教程站点，推动web标准在中国的应用" />

<meta content="designing‚ with‚ web‚ standards‚ xhtml‚ css‚ graphic‚ design‚ layout‚ usability‚ ccessibility‚ w3c‚ w3‚ w3cn‚ ajie" name="keywords" />

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<title>网页标题</title>

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
<style type="text/css" media="all">@import url( css/style01.css );</style>

<link rel="alternate" type="application/rss+xml" title="greengnn's space" href="http://www.jluvip.com/blog/feed.asp" />

<script src="js/common.js" type="text/javascript" language="javascript" "></script>
</head>
<body></body>
</html>

Example：

CODE:

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="ajie33(at)gmail.com‚阿捷" />
<meta name="Copyright" content="www.w3cn.org‚自由版权‚任意转载" />
<meta name="description" content="新网页设计师‚web标准的教程站点‚推动web标准在中国的应用." />
<meta content="web标准‚web标准教程‚网站重构‚ css布局‚ xhtml‚ css‚xhtml+css‚layout‚ usability‚ w3cn‚ CSS+DIV" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<title>网页设计师:怎样过渡</title>

<link rel="stylesheet" href="http://www.w3cn.org/style/001/001.css" type="text/css" media="all" charset="utf-8"/>
</head>
<body id="w3cn">
</body>
</html>
</code>

Flash嵌入代码

CODE:

From:http://www.alistapart.com/stories/flashsatay

fildset & legend：fildset套在表单外，legend用于描述表单内容。

CODE:

<form>
<fildset>
<legend>title</legend>
<ol>
<li><label for="user-name">用户名</label>
<input type="text" name="uname" id="uname"/></li>
<li><label for="user-password">密　码</label>
<input type="password" name="password" id="user-password" /></li>
</ol>
</fildset>
</form>

dl‚dt‚dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签

CODE:

ul‚li无序列表

CODE:

ol‚li有序列表

CODE:

table表格

CODE:

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">Model</th>
<td>M9454LL/A</td>

<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>

</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>

</table>