一些关于HTML的总结

1. 为什么要标签语义化

搜索引擎看不到页面效果，只能看到代码，只能通过标签判断内容的语义。同时因为标签有默认样式，去掉css后，语义化标签依然有良好的可读性。

当页面标签无法满足设计需求时，才会适当添加div和span等无语义标签来辅助实现

例如：

<div>
    <h1>标签的语义</h1>
    <a>更多（这里不要放在h1里面，而用div包裹，因为“更多”不属于标题内容）</a>
<div>
<p>
    段落一的内容。。。
    <strong>强调内容</strong>
</p>

2. table布局的特点

• 代码量大，结构混乱
• 标签语义不明确，对搜索引擎不友好

现在一般采用div+css的布局，而不是table布局

3. 表单语义化

表单域要用 fieledset 标签包起来，用 legend 标签说明表单用途

fieldset 默认有边框，可用 border: none 去掉。legend 用 display: none 隐藏。以此兼顾语义和设计。

每个 input 标签都需要 label 标签，label 的 for 指向 input 的 id

<form action="" method="">
    <fieldset>
        <legend>登录表单</legend>
        <p>
            <label for="name">帐号：</label>
            <input type="text" id="name">
        </p>
    </fieldset>
</form>

4. 表格语义化

表格用 table，表格标题用 caption，表头 thead 包围，主体 tbody 包围，尾部 tfoot 包围。表头单元格 th，一般单元格 td，行 tr。

5. 语义化标签的注意事项

• 尽可能少用无语义标签 div 和 span。
• 语义不明显，既可以用 p 又可以用 div，尽量用 p。因为 p 默认有样式，去样式后可读性更好，对兼容特殊终端有利。
• 不用使用纯样式标签，例如 b 、font 、u 等。

6. xhtml和HTML的区别