根据web标准进行开发：结构与表现
原文：http://www.456bereastreet.com/lab/developing_with_web_standards/structure/
当谈论到web标准，讨论最多的就是结构和表现分离的重要性。理解结构和样式的不同，开始的时候可能有点困难，尤其是如果你不习惯考虑文档的语义结构。然而，理解这些是很重要的，因为如果把语义与表现分离开来，用css控制文档的样式就会变得更加容易。
- 结构
- html文档必不可少的部分组成，包括语义和结构化的标记
- 表现
- 你给内容所加的样式。在很多情况下，表现就是一个文档的看起来的样子，在有些情况下也会影响它听起来如何--并不是每个人都用图形化的浏览器。
尽可能的分离表现与样式，理想情况下，你的html文档应该只包括内容和结构，在一个独立的css样式文件里包含控制表现的所有东西。
用表格布局
为了将结构与样式分离开来，我们应该用css而不是表格来控制页面的表现。如果你的习惯是用表格，开始尝试css可能感觉很奇怪和不舒服，但是它实际上不像看起来那么难。
语义化的HTML
将结构和表现分离的另一个重点是，使用语义化的标签来结构化html文档内容。一个标签用在这里，应该是有结构上的意义来匹配它所标记的内容的。换言之，你不应该用css来修饰一个标签，来是它看起来像另一个标签。举个例子，那你不应该将span这个标签用在标题上，因为用在标题上的应该是hx这一系列的标签，虽然你用css把span的修饰的跟hx一样。
标题
为了标记标题，应该用h1-h6元素，h1是最级别最高的,h6是最低的。
段落
用p标签来标记段落。别用<br/>元素来增加段落之间的空白，用margin这个属性。
列表
在html里有三种列表:无序列表,有序列表，定义列表。
无序列表以<ul>开头,</ul>结束,中间的列表项用<li></li>标记；
有序列表以<ol>开始,</ol>结束；
定义列表有点不同，它用来标记一系列的术语和定义。以<dl>开始，<dl>结束，术语用<dt></dt>标记，定义用<dd></dd>标记。
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li> </ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<dt>website</dt>
<dd>A collection of linked web pages that represent a company
or an individual.</dd>
<dt>web page</dt>
<dd>The basic unit of information on the Web, containing text,
graphics and other media.</dd>
</dl>
引用
q元素用来行内引用，web浏览器会自动在用q标记的内容前后加上双引号，不幸的是ie不支持这个标记，所以不推荐使用它。长的，跨越几个段的引用，用blockquote元素来标记。有一点要注意，文本不能直接放在blockquote里面，它要被一个块级别的元素包含，经常是p标签。
q元素和blockquote元素都有个属性叫cite。这个用来描述引用字段的url来源。
struct/text.html#h-9.2.1">The presentation of phrase elementsdepends on the user agent.</q>.</p>
强调
em元素用来表示强调，它所标记的文本是斜体的；strong元素也用来强调，是语气更强烈的强调，它所标记的内容呈现的是黑体。当你只想用斜体或是黑体是不要用em或是strong。
while <strong>strongly emphasized</strong> text is usually displayed in bold.</p>
表格
不要用表格来布局，用它来呈现数据。
<table class="example" summary="The Swedish population increased
by approximately 115 000 between 1999 and 2003.">
<caption>Annual population increase in Sweden, 1999–2003</caption>
<thead>
<tr>
<td> </td>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
<th scope="col">2003</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Population</th>
<td>8 861 426</td>
<td>8 882 792</td>
<td>8 909 128</td>
<td>8 940 788</td>
<td>8 975 670</td>
</tr>
<tr>
<th scope="row">Increase</th>
<td>7 104</td>
<td>21 366</td>
<td>26 368</td>
<td>31 884</td>
<td>34 882</td>
</tr>
</tbody>
</table>
