1.表单项不能水平对齐的问题

input中类型分别为text和submit的表单项目放在同一行时，会出现表单项不能水平对齐的问题，尤其是指定了他们的高度和边框之后，而且ie和ff效果差异很大。这是在XHTML 1.0 Transitional的文档申明下，不用表格来布局，会出现这样的情况。

position可以解决这个问题，但是并不理想，用input {vertical-align: middle;}可以很好地处理这个问题（？）。

2.table的caption和th或td之间的缝隙

当table有caption的时候，在ff下，在caption或table指定margin的情况，caption和th或td之间会存在margin，即caption和td或th都有背景色，他们之间就会出现缝隙。

W3C的REC-CSS2中table部分提出：table的box是由table和caption两个box合并的，相当于table和caption是两个box，这样的话，如果指定他们接触面的margin，就会出现裂缝。

W3C:Tables in the visual formatting mode

文中提到的Markup，在这里我简单地理解为(x)HTML标签，简称标签，以下所说的标签都指Markup。

也许写HTML标签真的是一件很简单的事情，没有什么技术含量；但是，仔细看看下面列出来的这些东西，对照一下你写出来的标签，可以做的事情还是很多的。

标签是前台代码地基础，她和设计、内容、可用性、CSS、DOM脚本等相互影响，标签的质量直接影响网站程序的运行效率和维护成本。也许你认为自己的标签能够让页面效果在浏览器中被呈现出来就行了，但是有些看不见的东西也是不能忽视的，希望以下提到的东西能帮助你更好地认识标签。简单地说，写好标签是一项基础投资，她可以让：
        后续的CSS书写更精简
        DOM脚本编写更独立
        页面可用性更好
        搜索引擎更对页面内容更友好


简单重于一切


简单的标签代码，可以让错误无处藏身，减少错误出现的机会，也更容易被别人或者你自己解读，这就是我们的第一条，简单。

1、简单、简单、再简单
简单，需要清除一切不恰当和非必须的标签：用于布局的表格、font标签、内嵌的样式属性、内嵌的JavaScript...

2、不要用表格来布局
表格布局不利于后期维护，让页面标签异常臃肿，也给可用性带来麻烦，更缺少具体的语义结构。

3、标签完全语义化，排除用于装饰的元素
让每一个标签都能很好地概括她所包含的内容，内嵌的样式属性、font标签、strike和s元素、用于装饰的图像和文字，这些没有实际含义的元素都要清除。对于页面中的图像，除照片、图表等有具体含义的，别的装饰性图像可以在样式表中作为背景显示。这有利于表现和结构的完全分离。

4、消除标签中的的脚本程序，包括事件触发语句
内嵌的JavaScript，完全破坏了标签代码的结构和逻辑顺序，让标签变得异常丑恶。她直接导致标签语句的可读性降低，给错误的滋生提供了角落空间，标签和脚本的交错也提高了开发和维护成本。
把脚本程序放到一个外部单独的文件中，通过getElementById和getElementsByTagName等来获得对象，进而触发各种事件，进行操作，这样她们就能够完全独立于标签，做到行为和结构的完全分离。


因此，标签必须独立并且集中


5、不要在脚本里加标签
这会是后期的调试和维护时的恶梦。

6、不要在脚本里加内容
也许这有些难度，但必须最大限度的减少脚本中标签和内容的出现。


谨慎处理标签与CSS、脚本之间的接口


当我们把表现和行为从标签中分离出来以后，标签就成为了一个枢纽，把CSS和DOM和标签连接起来，这时候，接口成为了关键。虽然，我们可以随意给标签添加IDs和classes，来到达我们的需求的，但是这样可能会出现一些冗余的CSS和代码，也违背了简单的原则，因此如何合理地使用IDs和classes成为了一个重要的问题。

7、避免不必要的classes和IDs
例如，我们可以用#primary div h3来代替h3#name，虽然这样可能会让CSS比较复杂，但标签是一切的基础，权衡之下，#primary div h3减少了ID的使用，更加合适。我们首先考虑的是，尽量保持接口最少化。

8、Classes和IDs必须根据内容来命名而不是表现
避免名称表示的是表现的某个风格元素，如right_col，因为，最后我们可能会把这部分放到左边，容易造成后期改版维护的混乱。

9、根据功能来命名Classes和IDs
如上面的right_col，可以改成second_nav_bar，很好的表示了这个模块的功能，而和布局无关。


了结标签代码和你需要的选项


10、适当地使用微格式
微格式是一组标签和Classes、IDs命名的固定组合，一个你自己定义的固定的小模块，例如一个有姓名、职务、地址、联系方式、备注的名片模块。理解微格式之后，可以很统一地快速地书写标签中常出现地一些元素，把她们当作你自己的HTML标签。

11、了解所有地HTML标签
虽然微格式能够解决一些问题，但只是你自己的一些标签和命名，并不适用于所有的地方，HTML标签才是一切代码的基础，掌握并能正确使用HTML标签，是不可避免的。

12、不要用已经淘汰或者有争议标签
知道什么地方用什么标签是不够的，还要知道什么地方不能用什么标签，例如font标签，已经被CSS中的字体样式取代。

13、通过语义标签来传到意思。
例如del和strong标签，她们传达出删除和加粗地意思。

14、了解各个浏览器和她们之间的差异
知道在什么情况下用哪个标签是不够的，还需要熟悉各个浏览器对各个标签的支持，例如IE6就不支持abbr和q标签,此时我们需要另外寻找解决办法。

15、了解所有地HTML标签属性
许多HTML标签都不止一个属性，不同的属性有不同的用途，但是象rel、rev、alt、title等属性，经常被错误地应用，正确使用标签属性可以给用户提供更多有价值的信息。


关注细节


16、让标签代码保持一定的逻辑顺序

细微之处见真章，细节反应的是令一个层次的东西。先看，标签代码的顺序，虽然CSS可以控制我们看到的一切视觉效果包括内容顺序，但是标签代码的顺序对于提高可用性非常重要。而且在标签中排列好顺序比起用CSS更简单，还能够让页面内容的逻辑层次更清晰。

17、超链接的文字
让内容成为一个流畅的整体是我们的目标，超链接的文字是关键的细节。 好的超链接的文字，可以提高可用性，能用性，搜索引擎友好性。因此花点时间，让超链接的文字更好地描述目标链接有益无害。

18、有用的alt替换文本
alt替换文本也是一个重要的细节，alt替换文本不仅要描述图片的内容，还必须把这些文字和上下文联系起来，考虑图片的环境。

19、标题hx是对内容的逻辑概括
通过阅读标题来了结页面的大概意思和内容的逻辑结构，是应用标题的理想境界。标题标签的语义化只是第一步，让标题来概括和她相关的内容，理顺内容的逻辑顺序才是我们的目标。

20、做好表单
表单是书写标签时能够做的最多的东西，利用label、field等标签，可以改善表单的可用性。

21、用表格来更好地展示数据
我们反对用表格来布局，但是，在处理数据地时候，表格却拥有不凡地能力。如何利用caption、tbody、thead、tfoot、th、col等标签来处理数据不是一个简单地问题。

通过上面这些努力，写出来地标签代码时整洁的，流畅的，具有语义和逻辑结构，能表达具体的信息，更好的可用性，容易被解读和维护，最重要的是能从中的到一种特别的享受...

其实，写HTML标签也可以是有技术含量的

Markup as a Craft
Garrett Dimon
http://www.digital-web.com/articles/markup_as_craft/

XHTML是一种为适应XML而重新改造的HTML，是更为严格和清晰的HTML版本。

为什么要用Xhtml,因为... ...

1.Xhtml的结构非常严秘密，能保证文档的正确性和逻辑严谨性
2.拥有更快的展现速度(大约3倍)
3.她可以减少CSS代码的书写(尤其是兼顾各种浏览器时)
4.有利于后期扩展(语义Web应用、标准化、XML)
5......

如何转向Xhtml... ...

1.拥有文档类型申明(doctype)
2.有关闭的head和body标签，并且head标签里面包含有关闭的title标签
3.所有标签都必须关闭(<br />)
4.所有标签及其属性的字母都必须小写(包括css样式的属性和值)
5.所有标签属性必须加引号
6.所有标签值必须有其属性(checked="checked")
7.标签必须正确嵌套(嵌套层次需分明)
8.form里面不能在嵌套form
9.&必须写成&amp;
10......

Fieldset标签：fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。

Label标签：Label 用于表单元素 (input, textarea or select)，配于for 将值传递给相应的表单元素。

Tabindex：用于 input， textarea......，给其一个编号，使用键盘上的TAB（制表键），就很容易地进入输入框中。


下面是HTML和CSS。

<form action="#">
<fieldset>
<legend>发表留言</legend>
<dl>
<dd>
<label for="name">名字: </label>
<input name="name" type="text" id="name" class="input" tabindex="1" />
</dd>
<dd>
<label for="email">E-mail : </label>
<input name="email" type="text" id="email" class="input" tabindex="2" />
</dd>
<dd>
<label for="title">标题 : </label>
<input name="title" type="text" id="title" tabindex="3" />
</dd>
<dd>
<label for="introduce">内容 : </label>
<textarea name="introduce" rows="8" id="introduce" tabindex="4"></textarea>
</dd>
</dl>
</fieldset>
<p class="center">
<input name="cmdOk" type="submit" class="button" value="发送" tabindex="5" />
<input name="cmdReset" type="reset" class="button" value="重置" tabindex="6" />
</p>
</form>


fieldset{
border: solid 1px #999;
padding: 0.5em 1.5em;
margin:0 1em;
}
legend{
font-size: 1.2em;
padding:0 0.2em;
color:#008;
}
label {
display:block;
margin-top:0.3em;
cursor: pointer;
}
.center{
text-align: center;
margin: .5em;
}
input ,textarea{
width: 96%;
}
.input{
width: 55%;
}
.button {
width: 5em;
margin-left: 1em;
cursor: pointer;
}
dl{
margin:10px 0;
}
dd{
margin:0 5px;
}


表单可用性的一些资料和想法：标签和输入框的位置

1.标签位置。从实验可知标签放在输入框上面的设计比较理想；
2.标签对齐方式。如果标签位于输入框左面，使用右对齐；如果放在上面，使用左对齐；
3.粗体标签文字。在不使用额外的样式以使输入框的边框变细的情况下，尽量不使用粗体标签文字。

Reference: http://www.heartstringz.net/blog/thoughts-about-usability-of-form-part-1/

标准化不是抛弃表格(table)，只是抛弃表格布局的角色，呈现数据仍然是他的工作，看下面的例子。

一个用于呈现数据的表格包括：caption(标题)、summary(数据描述)、tbody(主题)、thead(表头)、tfoot(表尾)、col(列)、colgroup(列组合)、tr(行)、th(表头项)、td(数据项)... ...

<table summary="盒子模型" id="data" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col />
<col />
<col class="blue" />
<col />
<col />
<col />
</colgroup>
<caption>盒子模型</caption>
<thead>
<tr>
<th> </th>
<th>width</th>
<th>margin</th>
<th>border</th>
<th>padding</th>
<th>实际宽</th>
</tr>
</thead>
<tfoot>
<tr>
<th>注</th>
<td>内容宽</td>
<td>外边距</td>
<td>边框</td>
<td>内空白</td>
<td class="td_b">整个模块宽</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>微软</th>
<td>100px</td>
<td>15px</td>
<td>10px</td>
<td>1px</td>
<td>100px</td>
</tr>
<tr>
<th>标准</th>
<td>100px</td>
<td>15px</td>
<td>10px</td>
<td>1px</td>
<td>152px</td>
</tr>
</tbody>
</table>


明了的结构，利于我们在css中对表格进行格式化，进行后期修改和维护。

#data{
border-top:1px solid #ccc;
border-left:1px solid #ccc;
margin-left:1.2em;
}
caption{
font-size:13px;
font-weight:bold;
}
td,th{
font-size:12px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
padding:4px 10px 2px;
}
th{
background: #f3f3f3;
color:#aaa;
}
.td_b{
background: #ddd;
}
.blue{
color:#00f;
} 

当页面很长时，我们一般使用锚<a name="xxx"></a>和<a href="#xxx">yyy</a>，来进行页内跳转。可是仅仅只是用作跳转，并不包含具体的内容，从标准化的角度来说，就是内容不够语义化。以下提供两种解决方法：

方法一：把具体内容放到<a name="xxx"></a>中，变成<a name="xxx">具体内容</a>。

方法二：用id="xxx"来代替<a name="xxx"></a>如<div id="xxx">...</div>或者<p id="xxx">...</p>。同样可以应用<a href="#xxx">yyy</a>。注：此方法不支持Netscape 4 和部分手机浏览器

此外，<a name="xxx"></a>中的name的值，也就是xxx部分，或者id的值，尽量避免用数字，而是遵照W3C标准用以字母开头的字符组合。