项目期复习总结：Table， DIV+CSS，标签嵌套规则_html/css_WEB-ITnose

2014-5-12 晴 复习总结

① 表格的意义，含义？

表格应该用来展现那些适合表格化显示的信息,比如数据的显示，统计或者二维报表之类的信息，而不是作为一种而已的工作

② 表格有哪些元素？

表格元素：table thead tbody tfoot caption tr th td .... 较常用

③ 表格的使用应该注意哪些？

1）使用表格时注意合理嵌套，遵循标签的语义性，table下只能包含thead，tbody，tfoot，在使用表格的时候，注意用在合适的地方，tbody，thead里包含tr，th，td。标题是在表格外面用caption标签。
2）表格里的内容要写在tr或者td单元格里面，否则内容会跑到表格外面，包含不起来，例如：

这里乱插入

这里少了th

Monthly savings

Savings
January	$100

3）禁用表格布局页面，这样会带来代码冗余以及维护不方便。

4）table元素只能够包含caption、colgroup、col、thead、tbody、tfoot，不能够直接包含tr或者其他任何元素

④ 表格布局，表格布局的优缺点？

优点：Table的布局容易上手，可以形成复杂的变化，简单快速，表现上更加“严谨”，在不同的浏览器中都能得到很好的兼容
缺点：不利于维护，代码多，冗余，table如果超过了3层收索引擎就不再抓取，如果你的网站有布局变化的需要时，这样table的布局就会重新设计，再加table分行分列什么的，页面变化的比例会稍大一些，这就会影响你前期做好一些排名和搜索基础了。
①代码臃肿 ②页面渲染性能问题 ③不利于搜索引擎优化 ④可访问性差 ⑤不够语义
⑥ 表格基本属性的设置（行列的合并）？
列合并：colspan是合并列的意思，“3”是指三列。colspan="3"的意思就是把三列合并为一列，换句话来说，就是把竖向的三个单元格合并为一个单元格了。
行合并：rowspan合并行的代码，这里的“7”，表示合并7行。
代码实战：打开

DIV+CSS布局的优缺点？

优点：方便维护更改，有利于SEO的抓取，（注意table布局的对比），结构嵌套合理，结构样式分离，减少网页加载时间，页面渲染性能较table高
缺点：① 开发技术高 众所周知，div+css要兼容各种浏览器，这样增加div+css开发的难度。② 开发时间长 div+css布局相对于table布局来说，div+css的耗费时间要比table布局的时间长很多，另外考虑到浏览器兼容的问题，各种浏览器间的测试也是一个费时的事情。③ 开发成本高，就上两点所说，高技术和长时间决定了他的成本。

行元素，块元素的区别？

块元素： h div p title ol ul dl dt dd fieldset form …
1. 默认占据一整行, 块包含行/块元素
2. 设置宽高有效
3.margin和padding设置有效
4. 转换成行元素display：inline
行元素： a span i em strong b
1. 不会占据整行 行只能包含行元素，不能包含块元素
2. 设置宽高无效
3. 纵向margin的设置是无效的
4. 转换成块元素：display：block

标签的合理嵌套以及标签的语义性

标签的嵌套规则
1. body可以直接包含块状元素、ins、del、script。不可以直接包含行内元素
2. ins和del（行内元素）可以包含块状元素或者行内元素，其他任何行内元素都不允许包含块状元素
3. p、h1-h6可以直接包含行内元素和文本信息，但是不允许包含块状元素
4. dl元素只允许包含dt和dd，同时dt不能包含块状元素，只允许包含行内元素，对于dd可以包含任何元素
5. form元素不能够直接包含input元素。原因在于input元素属于行内元素，form元素仅仅能够包含块状元素
6. table元素只能够包含caption、colgroup、col、thead、tbody、tfoot，不能够直接包含tr或者其他任何元素