《Web前端开发修炼之道》读书笔记

一、HTML篇

　　1、使用语义化标签（搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义）

　　2、table布局的网页特点

　　　　-代码量大，结构混乱；

　　　　-标签语义不明确，对搜索引擎不友好。

　　3、css布局特点

　　　　-代码量少、结构精简、语义清晰（代码量少，浏览器的下载时间就会更短，语义清晰就会对搜索引擎更友好）

　　　　-css是把双刃剑，使用误区：只要不是table布局，只要不是通过css布局的，就是对的，就是符合Web标准的。

　　注意：在HTML、CSS、Javascript中，HTML是最重要的，结构才是重点，样式是用来修饰结构的。正确的做法是，先确定HTML，确定语义的标签，再来选用合适的CSS。

　　4、如何确定你的标签是否语义良好

　　　　-浏览器会根据标签的语义给定一个默认的样式。

　　　　-去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

　　5、常见模块

　　　　-标题和内容：只有当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。

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

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

　　注意：为了保证网页去样式后的可读性，并且又符合Web标准，我们应该注意以下几点：

　　　　　　-尽可能少的使用无语义标签div和span；

　　　　　　-在语义不明显，既可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；

　　　　　　-不要使用纯样式标签，例如b、font和u等，改用css设置。语义上需要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，其中strong的默认样式是加粗，而em的默认样式是斜体。