《编写高质量代码--web前端开发修炼之道》笔记-HTML

此篇为本笔记的第一篇

语义化

• 让HTML可以从样式、结构混杂的局面中挣脱出来，专注于结构
• 标签的职能只限于描述功能，弱化其“布局”能力，将“布局”完全放到样式中控制
• 检验方法
  1）去掉样式，看网页结构是否组织良好有序，是否仍然有良好的可读性
  2） Firefox插件——Web Developer（禁用CSS、网页信息-查看文件大纲）

h标签

搜索引擎对h标签很敏感，应保证h标签的完整有序，没有断层

表单域

• 表单域要用<fieldset>标签包起来，并用<legend>标签说明表单的用途（因这两个标签有默认样式，故可将<fieldset>的“border”设为“none”，把<legend>的“display”设为“none”）
• 每个<input>标签对应的说明文本都需要使用<label>标签，并通过为<input>设置id属性，在<label>标签中设置“for = ‘someId’”来让说明文本和相应的<input>关联起来

表格

• 表格标题要用<caption>
• 表头要用<thead>包围
• 主体部分用<tbody>包围
• 尾部要用<tfoot>包围
• 表头和一般单元格要区分开，表头用<th>，一般单元格用<td>

语义化标签

• 尽可能少的使用无语义标签<div>和<span>
• 在语义化不明显，既可以用<p>标签也可以用<div>标签的地方，尽量用<p>，因为<p>标签默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利
• 不要使用纯样式标签，如<b>，<font>，<u>，语义上需要强调的文本可以包在<strong>或<em>里