HTML部分

<div id="content">

    <div class="block col-m-s300-e100">

        <div class="main-wrap">
            <div class="main">main</div>
        </div>

        <div class="sub">sub</div>

        <div class="extra">extra</div>

    </div>

    <div class="block col-s350-m-e200">

        <div class="main-wrap">
            <div class="main">main</div>
        </div>

        <div class="sub">sub</div>

        <div class="extra">extra</div>

    </div>

    <div class="block col-m-s300">

        <div class="main-wrap">
            <div class="main">main</div>
        </div>

        <div class="sub">sub</div>

    </div>

</div>

CSS部分

.main-wrap, .sub, .extra { float:left;}
.main-wrap { width:100%;}
.main { background-color:#eef;}
.sub { background-color:#fee; }
.extra { background-color:#efe;}

.block { border-bottom:20px dashed #6C0; width:100%; }
.block > div, .block > div .main { height:200px;}

/*  Clearfix
----------------------------------------*/
.block:after, .block .main:after, .block .sub:after, .block .extra:after {
	clear:both;
	content: '\20';
	display:block;
	height:0;
}
.block, .block .main, .block .sub, .block .extra {
	zoom:1;	/* ie6 */
}

/*  The First Block
--------------------------------------- */

.col-m-s300-e100 .main {
	margin:0 400px 0 0;
}

.col-m-s300-e100 .sub {
	margin-left:-400px;
	width:300px;
}

.col-m-s300-e100 .extra {
	margin-left:-100px;
	width:100px;
}

/*  The Second  Block
--------------------------------------- */

.col-s350-m-e200 .main {
	margin:0 200px 0 350px;
}

.col-s350-m-e200 .sub {
	margin-left:-100%;
	width:350px;
}

.col-s350-m-e200 .extra {
	margin-left:-200px;
	width:200px;
}

/*  The Third  Block
--------------------------------------- */
.col-m-s300 {}
.col-m-s300 .main {
	margin:0 300px 0 0;
}
.col-m-s300 .sub {
	margin-left:-300px;
	width:300px;
}

这里分享自己常用的一种分栏方式之一，之前整理过淘宝栅栏布局模块化命名浅析，当时并不晓得圣杯布局，有幸看到lifesinger的渐进增强式布局探讨（下），受益匪浅。

先看看之前的这个图

上面这个class中的 3 5 7分别指的是三列布局在24栏栅格化分别占到的栏数。

但事实是并不是所有站点都适合或使用了栅格化布局，尤其是在多项目快速开发的过程中，人少活多，面对着大量的页面，应该没有太多人那么高效率的，配合设计师实施栅格化设计布局。

但是这种负margin值，页面内容部分主次顺序分明（main、sub、extra），兼容性好(IE6 zoom:1; 清除浮动，clearfix)，任意列可高出等优点。

我们给到它，固定列宽的具体数值，就可以摆脱删栏的束缚，随意使用了（即便是高压下给到设计稿精度不高），我们用这样的命名来应对：

col-m-s300-e100
main列100%;
sub子列300px；
extra附加列100px;
//实际上m的宽度一般是通过 content 这个div的宽度来限定的

col-m-s-e
我们通过m s e的从左至右的出现次序来确定网页中3列的显示位置，这点从文章开始的图和对应的代码中可以看出。

演示地址：http://uecss.com/demo/jeff/msbox/column.html

1.灵活的圆角

为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到下边这个图片。

HTML:

<div class="box">
        <span class="crnr tl"></span>
        <span class="crnr tr"></span>
        <h3>This is a heading</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius
enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p>
       <span class="crnr bl"></span>
       <span class="crnr br"></span>
</div>

CSS

.box {
        position:relative;
        width:200px;
        height:300px;
}
.crnr {
        position:absolute;
        background:url("http://uecss.com/wp-content/uploads/2010/04/crnr-sprite.jpg") no-repeat;
        width:20px;
        height:20px;
}
.tl {
     left:0;
     top:0;
     background-position: 0 0 ;
 }
.tr {
     right:0;
     top:0;
     background-position: -20px 0 ;
 }
.bl {
     left:0;
     bottom:0;
     background-position: 0 -20px ;
 }
.br {
     right:0;
     bottom:0;
     background-position: -20px -20px ;
}

优点：能自动适应父容器的大小，浏览器兼容性非常强。

缺点：为了实现圆角，添加了一些没有意义的标记。

2.Border radius（边界半径）

css3中为boder增加的一个属性border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。

HTML:

<div class="box">
    <h3>This is a heading</h3>
    <p>Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius
    enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p>
</div>

CSS:

.box {
    width:200px;
    height:200px;
    background-color:#EE2E24;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

优点：这种方法不需要添加任何多余的标记，而且可以非常方便睇修改圆角的半径，是最易上手的方法。

缺点：虽然符合W3C的标准，但缺乏浏览器支持。

3.多个背景图片

CSS3对background属性做出了一些重大改进，在CSS3标准里，我们可以把多个背景图片应用到同一个元素里。我们利用这个特性为容器加 上圆角效果。HTML代码与上例保持一致，在CSS中需要先把四个圆角的图片分别做好

CSS:

.box {
    background: url(top-left.gif) top left no-repeat,
    url(top-right.jpg)  top right no-repeat,
    url(bottom-left.gif) bottom left no-repeat,
    url(bottom-right.gif) bottom right repeat-y;
}

优点：没有多余的标记，可以分别设置每个圆角的半径。

缺点：使用了W3C未明确定义的方法，浏览器兼容性很差，目前只有Safari和Chrome对此方法支持良好。

4.结合CSS3和JavaScript,兼容所有浏览器

这是一种很不错的实现跨浏览器圆角的解决方案，结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费J该脚本的最大优势是可以在Safari/Chrome/Firefox中
使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:avaScript库。

下载这个js

然后引用

<script type="text/javascript" src="curvycorners.js"></script>

然后定义以下样式：

.box{
    width: 220px;
    padding: 10px;
    background-color: #DDEEF6;
    border:1px solid #DDEEF6;
     /* Do rounding (native in Safari, Firefox and Chrome) */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
 }

然后在上面的样式后面定义以下代码：

<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
	var setting = {
	tl: { radius: 6 },
	tr: { radius: 6 },
	bl: { radius: 6 },
	br: { radius: 6 },
	antiAlias: true
	}
	curvyCorners(setting, ".roundedCorners");
}
</script>

tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等) 你可以像这样在前面的代码中定义:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

HTML代码如下：

<div class=”box”> </div>

这样圆角的效果就出现了！

今天，你裸了吗

4月9日的CSS裸奔节到了，脱掉CSS，露出HTML真实的脊梁骨吧 – PS:宁可CSS分层多一些，也要保证HTML结构的简洁、语义化的书写习惯。

这是总宽950像素的24栏栅格应用，先来看下淘宝网的一处3栏布局(当然现在的淘宝网已经改版了，尽管我还是不太习惯)：

这里是对应的代码：

我们可以看到 class=”grid-c3-s5e7″ 这个命名似乎有些特别，
再看看其包含的class=”col-main” 和 class=”col-sub” 以及 class=”col-extra skin-orange”

再多一些样本代码：

.grid-c, .grid-c2-s4, .grid-c2-s4f, .grid-c2, .grid-c2f, .grid-c2-s6, .grid-c2-s6f, .grid-c2-s7, .grid-c2-s7f, .grid-c2-s8, .grid-c2-s8f, .grid-c2-s9, .grid-c2-s9f, .grid-c2-s10, .grid-c2-s10f, .grid-c2-s11, .grid-c2-s11f, .grid-c2-s12, .grid-c2-s12f, .grid-c3, .grid-c3f, .grid-c3e, .grid-c3d, .grid-c3c, .grid-c3b, .grid-c3-s5e7, .grid-c3-s5e7f, .grid-c3-s5e7e, .grid-c3-s5e7d, .grid-c3-s5e7c, .grid-c3-s5e7b, .grid-c3-s9e6, .grid-c3-s9e6f, .grid-c3-s9e6e, .grid-c3-s9e6d, .grid-c3-s9e6c, .grid-c3-s9e6b, .grid-c3-s8e8, .main-wrap, .col-sub, .col-extra {
}

我们选择其中一个来仔细看下可以尝试着作出这样的解释：

上图中 s5e7 里的 5 和 7 代表的是在 24栏 中所占的栏数。

如下这样更方便我们进行模块化操作：

.grid-c3 {}
.grid-c3-s5e7 {}
.grid-c3-s5e7 col-main {}
.grid-c3-s5e7 col-sub {}
.grid-c3-s5e7 col-extra {}

.grid-c2 {}
.grid-c2-s7f {}
.grid-c2-s7f col-main {}
.grid-c2-s7f col-sub {}

稍微注意下你会发现 上例中我只提到了 s, e 的解释，并没有对 f, b, d 做出解释，因为我觉得原理我们已经掌握，f b d 只是淘宝因内容区域不同而采取的命名方法(应该可以这样理解)。
可以看出 -s5e7 , -s7f , -s5e7d , -s5e7b , -s9e6c 之类的就显得不太符合语义化命名，只是为了让我们更方便的使用，我这个人喜欢简洁些的风格，因此在这里我对它进行了升级。

下面看下整合出属于自己的栅栏布局命名，我把这些用在公司的项目上，来看下我的命名方法：

(三栏页面栅格布局-例：部分列表页) Grid-c3-c6e5

class=”grid-c3-w13c6e5″ 完整版
class=”grid-c3-c6e5″ 简洁版

注意这里的数字和上图中的数字进行对比，你会发现我省掉了w13即最宽的那一栏main（通常最宽的为main），
我将c 和 e这样除了main之外的窄栏通常固定宽度， main的宽度则为width:100%; 具体实现如下：

假设最外层的div 为 <div class=”content”>
.content {
 position:relative;
 width:总宽减窄栏的宽度;
 padding-left&right:窄栏的宽度;
}

窄栏浮动，main 绝对定位
.main {
 position:absolute;
 top:xx;
 left&right:窄栏的宽度;
}

先作下简单的说明，这里与淘宝网命名不同的是我没有采取 s（sub）和 e (extra) 这样的习惯，
而是用到了 w(west), c(center), e(east)
我将网页上的方位分为上北下南左西右东
不使用 l (left) 等上下左右表示是因为在如宋体等字体下 left 里的 l 与数字1 很容易造成混乱。

下面是一系列方位栅栏模块化命名例如：

(两栏页面栅格布局-例：首页) Grid-c2-e5

(两栏页面栅格布局-例：商品详细页) Grid-c2-w6

(两栏页面栅格布局-例：注册流程页) Grid-c2-e7

方案一：(三栏页面栅格布局-例：部分列表页) Grid-c3-c6e5

方案二：(三栏页面栅格布局-例：部分列表页) Grid-c3-c7e5

(三栏页面栅格布局-例：商城主页、个人空间预览页) Grid-c3-w6e5

(三栏页面栅格布局-例：个人空间管理页) Grid-c3-w5e6

以上命名都是由class=”grid-c3-w5c13e6″ 这类的完整版去掉main栏目(即最宽的一栏)
简化到class=”grid-c3-w5e6″ 这类简洁版(很快可以猜出-w5e6所对应的宽栏位c13，即左边占24-5-6=13a的main)，
不想用上面的方法为main定width:100%;

.grid-c3-c6e5 .main{ width:13a;}
.grid-c3-c6e5 .sidebar { width:5a;}
.grid-c3-c6e5 .service { width:6a;}

.grid-c3-c6e5的名字看起来蛮长的,考虑过去掉.grid-c3-c6e5中的 grid 这个单词，但似乎不太方便阅读，况且后面会出现 .mode-a , .mode-b 之类的模块命名，统一下会更好；
这里的命名习惯建议使用的表意命名《超越CSS》有提到过。

可以看到简洁版的只有3个字母出现 w (west), c (center), e (east)
不用记太多的字母含义，grid-c3-c6e5这样的命名方法让我们更好的对栅格化布局进行操作。

博客园观点：http://www.cnblogs.com/cnpass/archive/2009/05/07/cnpass.html
经典论坛观点：http://bbs.blueidea.com/thread-2926561-1-1.html

PS：一些事情是不会停止的，现在自己再看到这些内容，发现存在很多不足，还好是浅析，标记到这里

目录建立的原则

• 以最少的层次提供最清晰简便的访问结构
• 基本的文件我们用这些文件夹将其归类划分 [ css ] 、 [ images ] 、[ script ] 、[ fla ]

• 确保整个文件树的简洁有序，命名尽量采用简短英文，尽量避免简写、缩写，一律小写
• html 文档的扩张名均以 .html 结尾
• 每个栏目首页以栏目名命名

例如，积分商城下的首页 shop/shop.html

• 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔

例如，news_01.html

开发环境的统一

• 统一文档类型
  • HTML编码类型采用目前主流的 XHTML 1.0 Transitional 格式
  • 尽量采用国际通用的 utf-8 编码格式
• 避免因开发工具的不同所造成的差异
  • 编写前应事先声明开发工具
  • 避免因工具不同Tab键造成的缩进程度不同，统一使用4个空格位的缩进度
  • 避免过分缩进(一些常见的编辑器会对 <html> 标签下的 <body> 进行缩进)

CSS样式文档组织结构

通过合理有效的组织样式文档结构，控制样式文档的优雅降级，使得网站能更好的符合浏览器的解析要求，同时方便日后的维护工作。

基础样式 （base.css）//加载给所有页面最基础的样式

模块样式 （module.css）//同类页面及相似页面的共同样式

页面级样式 （list.css 、member.css 、shop.css 、service.css）

所有独立页面使用自己独有的样式文件，命名以页面功能或所在模块为基准

• 首页 的样式文档组织结构，如下：

//结合首页的特性，仅加载了base.css 和 home.css，文档home.css用来给予首页的独有的样式。

• 产品专区系列&列表页 的样式文档组织结构，如下：

//通过给product&list（产品专区系列&列表页）页面加载list.css样式文档，来提供给此系列独有的样式。

• 会员专区系列 的样式文档组织结构，如下：

//通过给member（会员专区系列）页面加载member.css样式文档，来提供给此系列独有的样式。

• 积分商城系列 的样式文档组织结构，如下：

//通过给shop（积分商城系列）页面加载shop.css样式文档，来提供给此系列独有的样式。。

• 客户服务系列 的样式文档组织结构，如下：

//通过给service（客户服务系列）页面加载service.css样式文档，来提供给此系列独有的样式。

• 以上样式文件均由上至下逐级加载，不可随意调换位置，后期新样式入应在其后置入。

HTML文档的布局规划

• 两栏第一种布局：主内容在左边，侧栏在右边，如下图

//将主内容content放置于左侧，使得用户能很好的聚焦于主内容content区块，这种布局将主内容content放在左边，辅助内容放置在右边以rightbar命名，如：产品专区系列页面 。

• 两栏第二种布局：主内容在右边，侧栏在左边，如下图

//将侧边栏放置于左侧，使得用户能很方便的操作以快速查看适合的信息，这种布局将主内容content放在右边，辅助内容放置在左边以leftbar，如：客户服务系列页面

• 通栏单列布局，如下图

//这种布局在container容器中仅放置了主内容content，减少干扰因素，提供清晰的环境，以便用户更快速的锁定进入下一步操作，如：产品介绍页。

Box盒模型

• 简洁的box，未添加任何前缀

//HTML代码部分

//有上面这段代码可以看出，我们通过更换box-skin-yel（yel在这里代表yellow）可以很方便的控制box的皮肤，注释fillet style所包含的代码部分用来控制圆角标签，如：投保指南页面下的“温馨提示”这个box

• 通过为box添加前缀ms，设置特定的盒子ms-box

//HTML代码部分

//这里的class=”lt”为左部圆角，class=”rt”为右部圆角，底部class=”ms-btm”可以用来添加扩展，如：更多链接。

Css Sprites拼合优化

• 通过Css Sprites有效的减小页面请求次数，如下图

//这里我们列举的是通过Css Sprites技术将多个图标拼合在一张图片上进行优化处理（具体规格为50px的等边网格分布），有效的将原本需要多次http request的页面请求，降为只需加载一次即可完成同类所需的全部加载，以提升网站的性能。

//上图为全站navigation的特效图片优化，同样的还有button的优化，优化的源文件保存在（../ Css Sprites拼合源文件）文件夹下。

Css语句缩写

• 颜色

color:#333333;    缩写为  color:#333

• 盒子（常用的四种写法）

property:value1;   //表示所有边都是一个值value1

property:value1 value2;   //表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3;   //表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4;   //四个值依次表示top,right,bottom,left

• 边框 (border)

border-width:1px;

border-color:#ccc;

border-style:solid;

可以缩写为一句: border:1px solid #ccc;

• 背景 (background)

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

• 字体 (font)

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:”Lucida Grande”,sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

// 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

• 列表(list)

取消默认的圆点和序号可以这样写

list-style:none;

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif)

习惯的设立 （如注释、代码排列等）

• 注释
• 通过注释有效的组织管理代码文档，将相关的文档放归类在一起，以便阅读与修改，示例供参考

/**************************************/
/*                                  Globals                               */
/**************************************/

/***************************************/
/*                                   Header                                 */
/***************************************/

/***************************************/
/*                               Navigation                             */
/***************************************/

/***************************************/
/*                         Main Content                               */
/***************************************/

/***************************************/
/*                                     Footer                                */
/***************************************/

//这里将多个CSS文件合并在一个文档，以便通过减小请求次数，达到优化的目的。

• 通过适当的注释将合并后的文档进行有效的组织管理，方便日后查找、维护
• 尽量避免特殊符号的使用

• 代码排列及结构

所编代码按照字母的排序A-Z来编写，如下面的例子：

div.test1 {

text-align: left;

margin: 5px;

z-index: 1;

padding: 0 8px;

border: 1px solid #ccc;

}

div.test2 {

border: 1px solid #ccc;

margin: 5px;

padding: 0 8px;

text-align: left;

z-index: 1;

}

//在多行代码的情况下，按照字母排序(如div.test2)来编写的代码，会更易于查找

• 代码结构上配合上一条提到的字母的排序方式，采用多行编写，对于一个标签下的CSS属性 ≤3 时，我们将其编写在同一行内，合理的节省空间
• 每个标签的后面和左花括号之间加上一个空格便于区分查找

例如，div.test1 { 中 “div.test1” 和 “{“ 之间用空格隔开

• 每个Css属性后面加上均分号，即便是一组属性的最后一个，避免后期添加因遗漏而导致的错误

根目录下的 readme.txt

• 详细记录了web开发过程中的更新内容；
• 首次更新对重要文档给出适当的解释（重要文件的关联部分)

PS：box部分用了position属性来实现圆角，这样一来在IE6中不得不去添加width属性以解决错位问题(但并不是所有)
下次在更新这里吧，阴雨天睡觉看起来是个不错的选择O(∩_∩)O~

1、div标签未关闭

这是设计失效的最常见的原因之一。调查显示，开启的div标签是最普遍的版块设计失误之一，也是最难诊断的失误之一。这种错误在初学者中出现的比较多，但写的多了就不会太容易出错。

2、麻烦的embed标签

九十年代早期，Microsoft和Netscape的浏览器开始能够辨认非标准的独有字体。遗憾的是这意味着W3C验证程序还不能识别某些关键HTML 标签，如“embed”，即使这些标签已经被广泛使用。如果确实希望得到严格的DOCTYPE（文档类型）验证，就只能放弃嵌套。

如果同时想要生效的版面设计和嵌入式媒体，可以试试Flash Satay方法。这种错误一般在设计中出现在不是很多，但在后台开发中对这些的要求是非常高的。

3、不当的DOCTYPE声明

不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。

4、结尾斜线

如果你的网站不能验证，很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。例如：
在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

5、Align标签

如果DOCTYPE被设为Transitional，你就会使用“align”标签，但如果要求更高一点希望得到Strict验证，你会看到很多错误。 Align是另一个不可用于版面设计的标签。可以尝试用“float”或者“text-align”来代替align转换元素

6、JavaScript

如果已经声明Strict DOCTYPE，就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员，因为网站倾向于为广告和追踪脚本使用嵌入的JavaScript。

7、图像需要“alt”属性

你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt= ”Scary vampirepicture”。搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的

8、未知实体数据

实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。

9、不良嵌套

嵌套就是元素里又包括元素我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。

10、缺少“title”标签

尽管这看上去是一个很明显的错误，很多程序员（包括我自己）还是经常会在“head”版块中遗漏title标签。当你看到“missing arequired sub-element of HEAD”（缺少HEAD的必要子元素）时，才会发现自己忘记添加title标签了。

11、所有的标签使用小写

12、所有卷标内之属性都要有值且不可省略双引号或单引号，若没有属性值就必需重复属性作为值如：<a href=”index.htm”>连结</a> <frame noresize=”noresize”>

13、所有标签必须成对, 若非成对需加上/在最后

14、一个网页最少要包含的标签

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=big5″ />

<title>标题</title>

</head>

<body>

内容

</body>

</html>

说明：通常中文网页以big5编码, 需加上以下这行于<head>与</head>之间：

<meta http-equiv=”Content-Type” content=”text/html; charset=big5″ />

15、若要显示【<】【>】【&】的话, 需以其它值输入

例如要显示< >于网页中的话, 需填入： &lt; &gt;

16、卷标顺序不可错乱

错误：<b><p>文字</b></p>

正确：<b><p>文字</p></b>

17、在做一些onmousover 的时候我习惯用a这个标签，用起来方便做起来也实用。通常的做法是在a里面嵌套一个div或是多个div来实现它的效果。但是这种做法却不符合W3C的标准。

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

19、在ul、li 中嵌套像span之类的标签，也不能通过W3C标准。

20、在from中，如果在没有手动去写一个select 或input，或其它的标签，而是在菜单栏中去添加，通常会出现一个ID，这时候如果 你的表单很多的话，就会出现很多个ID，而这时候这个ID就会重复，所以在这个地方要改一下ID的命名，或是去掉这个ID。

总结了这么些，希望对大家也对自己有所帮助！