Review summary during the project period: Table, DIV CSS, tag nesting rules_html/css_WEB-ITnose

2014-5-12 Qing Review Summary

① What is the meaning of the table?

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

② What are the elements of the table?

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

③ What should you pay attention to when using tables?

table>

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

 
  这里乱插入
 
    这里少了th
   
 
 
   
   
 

Monthly savings

Savings
January	0

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

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

1) When using tables, pay attention to reasonable nesting and follow the semantics of tags. The table can only contain thead, tbody, tfoot. When using When making tables, pay attention to using them in appropriate places. tbody and thead include tr, th, and td. The title is placed outside the table using the caption tag.

2) The content in the table must be written in tr or td cells, otherwise the content will run outside the table and cannot be included, for example:

Insert

randomly here

There is missing th here

Savings

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

    3) Disable the table layout page, which will cause code redundancy and inconvenient maintenance.

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

4) The table element can only contain caption, colgroup, col, thead, tbody, tfoot, and cannot directly contain tr or any other element

块元素： 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

④ Table layout, what are the advantages and disadvantages of table layout?

Advantages: Table layout is easy to use, can form complex changes, is simple and fast, more "rigorous" in performance, and can be used well in different browsers Compatible Disadvantages: Not conducive to maintenance, lots of code, redundant, if the table exceeds 3 layers, the search engine will no longer crawl it. If your website needs layout changes, the layout of the table will be reset. Design, coupled with table rows and columns, etc., the proportion of page changes will be slightly larger, which will affect your preparation of some ranking and search foundations in the early stage. ① Bloated code ② Page rendering performance issues ③ Not conducive to search engine optimization ④ Poor accessibility ⑤ Insufficient semantics ⑥ Setting the basic attributes of the table (merging rows and columns)? Column merging: colspan means merging columns, and "3" refers to three columns. colspan="3" means to merge three columns into one column. In other words, it is to merge three vertical cells into one cell. Row merging: rowspan code to merge rows, the "7" here means merging 7 rows. Code practice: open

What are the advantages and disadvantages of DIV CSS layout?

Advantages: Convenient for maintenance and changes, conducive to SEO crawling, (note the comparison of table layouts), reasonable structural nesting, separation of structural styles, reducing web page loading time, Page rendering performance is higher than table Disadvantages: ① High development technology As we all know, div css must be compatible with various browsers, which increases the difficulty of div css development. ② Long development time. Compared with table layout, div css layout takes much longer than table layout. In addition, considering browser compatibility issues, testing between various browsers is also a time-consuming matter. ③ The development cost is high. As mentioned in the above two points, high technology and long time determine its cost.

What is the difference between row elements and block elements? tr>

Block elements: h div p title ol ul dl dt dd fieldset form … 1. By default, it occupies a whole row, and the block contains row/block elements 2. Setting width and height is valid 3. Margin and padding settings are valid 4. Convert to row element display: inline Row element: a span i em strong b 1. Will not occupy the entire row Can only contain row elements, not block elements 2. Setting width and height is invalid 3. Setting vertical margin is invalid 4. Convert to block element: display: block

Reasonable nesting of tags and semantics of tags

Nesting rules of tags

标签的嵌套规则
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或者其他任何元素

1. The body can be directly Contains block elements, ins, del, script. Inline elements cannot be included directly
2. ins and del (inline elements) can contain block elements or inline elements, and any other inline elements are not allowed to contain block elements 3. p, h1-h6 can be directly included Contains inline elements and text information, but block elements are not allowed 4. The dl element is only allowed to contain dt and dd, while dt cannot contain block elements, only inline elements are allowed, and dd can contain any element 5. Form elements cannot directly contain input elements. The reason is that the input element is an inline element, and the form element can only contain block elements 6. The table element can only contain caption, colgroup, col, thead, tbody, tfoot, and cannot directly contain tr or any other element