根据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是最低的。

<h1>Document heading</h1>                                                                                                   <h2>Sub heading</h2>

段落

用p标签来标记段落。别用<br/>元素来增加段落之间的空白，用margin这个属性。

<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Donec risus. Ed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.</p>

列表

在html里有三种列表:无序列表,有序列表，定义列表。

无序列表以<ul>开头,</ul>结束,中间的列表项用<li></li>标记；

有序列表以<ol>开始,</ol>结束；

定义列表有点不同，它用来标记一系列的术语和定义。以<dl>开始，<dl>结束，术语用<dt></dt>标记，定义用<dd></dd>标记。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>                                                                                                                   </ul> 

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

 

<dl>
    <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来源。

<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elementsdepends on the user agent.</q>.</p> 

强调

em元素用来表示强调，它所标记的文本是斜体的；strong元素也用来强调，是语气更强烈的强调，它所标记的内容呈现的是黑体。当你只想用斜体或是黑体是不要用em或是strong。

<p><em>Emphasized</em> text is normally displayed in italics,
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>