Web前端开发修炼之道-HTML篇

1.标签的语义化

• 先确定HTML，确定语义的标签，再来选用合适的CSS。
• 浏览器会根据标签的语义给定一个默认的样式。

2.表单

• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途。
• 每一个input标签对应的说明文本都要用label标签，并通过为input设置id属性，在label标签中设置“for = someID” 来让说明文本和相应的input关联起来。

如：<form action = "" method ="" class = "fieldset">

<filedset>

<legend>XXXX</legend>

<p><label for = "name"> XXX:<input type = "text" id = "name/></p>

</filedset>

</form>

3.表格

表格标题要用caption，表头要用thead包围，主题用tbody包围，表头和一般单元格要去分开，表头用th，一般表格用td。

如：<table>

<caption>XXXX</caption>

<thead>

<tr><th>XXXX</th><th>XXXX</th></tr>

</thead>

<tbody>

<tr><td >XXXX</td ><td >XXXX</td ></tr>

</tbody>

</table>

4.注意:

• 尽可能少的使用无语义标签div和span
• 语义不明确既可用div又可用p时，用p，默认有上下间距。
• div不能在p中，div、p不能在a中。

5.XHTML与HTML的区别

在XHTML中要严格，但在HTML中不严格要求，应该尽量按照XHTML规范来编写：

• 1.标签名必须都小写
• 2.属性名称小写，属性值写在双引号中,属性-值必须用完整的形式，属性=“值”
• 3.标记严格嵌套
• 4.标记必须封闭，空元素标记也要封闭<img /><br />
• 5.区分内容标记和结构标记。内容标记中不能嵌套结构标记。<p>中不能嵌套<table>