首页 > 代码库 > 项目期复习总结2：Table， DIV+CSS，标签嵌套规则
项目期复习总结2：Table， DIV+CSS，标签嵌套规则
 |
文件夹：
1、表格的意义，含义？
2、表格有哪些元素？
3、表格布局，表格布局的优缺点
4、行元素，块元素的差别？
5、标签的合理嵌套及标签的语义性
|
① 表格的意义，含义？
| 表格应该用来展现那些适合表格化显示的信息,比方数据的显示，统计或者二维报表之类的信息，而不是作为一种而已的工作 |
② 表格有哪些元素？
| 表格元素：table thead tbody tfoot caption tr th td .... 较经常使用 |
③ 表格的使用应该注意哪些？
|
1）使用表格时注意合理嵌套，遵循标签的语义性，table下仅仅能包括thead。tbody，tfoot。在使用表格的时候，注意用在合适的地方。tbody，thead里包括tr，th。td。标题是在表格外面用caption标签。
2）表格里的内容要写在tr或者td单元格里面，否则内容会跑到表格外面。包括不起来，比如： <table border="1" width="200px"> <caption align="center">Monthly savings</caption> 这里乱插入 <tr> 这里少了th <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 3）禁用表格布局页面，这样会带来代码冗余以及维护不方便。 4）table元素仅仅可以包括caption、colgroup、col、thead、tbody、tfoot，不可以直接包括tr或者其它不论什么元素 |
④ 表格布局，表格布局的优缺点？
| 长处：Table的布局easy上手。能够形成复杂的变化。简单高速，表现上更加“严谨”，在不同的浏览器中都能得到非常好的兼容 缺点：不利于维护，代码多，冗余。table假设超过了3层收索引擎就不再抓取。假设你的站点有布局变化的须要时，这样table的布局就会又一次设计。再加table分行分列什么的，页面变化的比例会稍大一些，这就会影响你前期做好一些排名和搜索基础了。 ①代码臃肿 ②页面渲染性能问题 ③不利于搜索引擎优化 ④可訪问性差 ⑤不够语义 ⑥ 表格基本属性的设置（行列的合并）？ 列合并：colspan是合并列的意思，“3”是指三列。colspan="3"的意思就是把三列合并为一列，换句话来说，就是把竖向的三个单元格合并为一个单元格了。 行合并：rowspan合并行的代码，这里的“7”，表示合并7行。
|
| 长处：方便维护更改。有利于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元素只可以包括块状元素 |
项目期复习总结2：Table， DIV+CSS，标签嵌套规则
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。