错误一：
行内元素和块级元素混用，例如：
<a href="#"><h2>This is wrong.</h2></a>
<h2><a href="#">This is right.</a></h2>
a 行内元素，hx 块级元素。
错误二：
img 元素未包括 alt 属性。
<img src="a.jpg" /> <!--Wrong-->
<img src="a.jpg" alt="this is a image" /> <!--Right-->
错误三：
正确的时候使用 lists 结构。例如：
<p>
This<br />
is<br />
very<br />
Wrong<br />
</p>
<ul>
<li>This</li>
<li>is</li>
<li>very</li>
<li>Right</li>
</ul>
错误四：
标签应该从语义触发，而非样式。例如：strong 更好
<b>This is bold.<b>
so<strong>is this, but this is better.</strong>
错误五：
最好用 css 而非结构控制，例如：
This is
<br />
<br />
Wrong.
错误六：
还是注意标签的语义化。例如：
<s>和<strike>已经被抛弃了。
<del>和<ins>才是新的可用的哦。
错误七：
使用内联样式，例如：
<h2 style="color:red;">This is Wrong.</h2>
错误八：
在 html 结构中使用已经被抛弃的属性，而应该使用 css 控制，例如：
<img src="a.jpg" alt="xxx" border="0" />
错误九：
没有正确使用 header 标签，例如：
<p><strong>This is header but wrong</strong></p>
<p>this is content.</p>
<h2>This is right header</h2>
<p>this is content.</p>
错误十：
不要使用非标准的和不推荐使用的标签，例如：
<blink>This is Wrong.</blink>
和
<marquee>This is Wrong.</marquee>
其实这个问题，我现在比较喜欢使用 float 毕竟对于很多东西，代码量明显减少，不用对很多元素都应用样式，但是各有各的好处，其实还是按个人习惯加上团队的开发习惯来比较好，这里转这篇文章，其实不是完整的一篇，而是来源于知乎 中的“在 CSS 布局中，用 float 好还是用 position 好？分别有什么优势？ ”这个问题，虽然问的是两种布局的优缺点，但是在后面的回答中，会有很多其他的知识出现，所以这才是转载的目的。
呃，其实这个命题有误，只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。
float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。
float从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。
而position顾名思义就是定位。他有以下这几种属性：static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。
比较可以发现，float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。
float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。
如果说到性能问题reflow问题，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等，用absolute或者fixed定位会更好。
说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。
PS：
补充一下float的问题。我们常说的文档流其实是指默认文档流。基本显示模型block和inline分别是块狀换行和连续多行模型，前者可以设定尺寸，后者不可以设定尺寸（根据内容决定尺寸和折行）。
不过我们总是遇到固定尺寸，或者固定部分尺寸且不折行的场景，这个时候我们马上会想到使用float来做布局，因为float会触发shrink to fit特性，实现根据内容决定尺寸，float还不会产生折行，我们通过clear来手工模拟折行。这个现状我觉得主要是因为对inline-block的兼容性顾忌产生的，在IE6的时候它没有被广泛支持。使用position实现这样的布局需要配合javascript修正，在某些场景它比float强，因为float模拟的流动布局不是多行连续布局，一些浮动元素经常因为意外的尺寸改变被卡在我们不希望它出现的位置。所以我们可以看到像pinterest这样的网站使用了javascript配合absolute position的方式，讲布局引擎的任务完全交给javascript来实现。从表现与行为分离的角度它不太合理，但是从结果上来说它很让人满意。
但是，我写这段的意思是说，很多时候我们希望控制的布局流问题不需要float和position实现，而应该通过显示模型定义来解决。比如现在的column layout、flex box等等，都是在这个角度解决我们遇到的问题，它们应该才是正解。而我们犯这个错误的最初原因也许就是对像inline-block这样的显示模型的不信任开始的。
希望CSS3的进化能够让我们重建这样的信任。
上面是两个人的回答，都比较有代表性，虽然有些内容是重复的，但是还是建议好好看完，并且最好理解了。
由于要写一篇有代码的日志，但是这个该死的默认编辑器不知道在什么时候哪些代码我想原样显示，那些代码我想作为代码执行之后显示，所以总是弄的一塌糊涂，虽然有WP-Syntax 这个插件，但是在一大段话中总不能也来一段一行很短的代码吧？比如这个：<button>正确显示</button> 如果不使用”<“和”>”的ASCII码的话，死活显示不好，就显示这样了：错误显示 ，但是又不想使用WP-Syntax 这个插件使它单独显示一行，那就只能使用ASCII码来代替相应的”<“和”>”符号了，所以解决问题。为了方便我以后使用，也为了方便大家，就整理一下，弄出来给大家留着使用，以防不时之需。
HTML与XHTML都是使用标准的7-位 ASCII码来进行页面间数据的传输的，7-位ASCII码代表了128个不同的字符值(0-127)
更多…