Review of Project period summary 2:table, DIV+CSS, tag nesting rules

folder: 1. What does the meaning of the table mean? 2 . What are the elements of the table? 3 . table layout , table layout Advantages and disadvantages 4, row elements, block elements of the difference? 5 . proper nesting of tags and semantics of tags

What is the meaning of the ① table?

Tables should be used to show information that is appropriate for tabular display, such as data display, statistics, or two-dimensional reports, rather than as a kind of work

What are the elements of the ② table?

Table elements: Table thead tbody tfoot caption TR th TD .... More frequently used

What should I pay attention to when using ③ forms?

1) When using the table to be careful nesting, follow the semantics of the label, table can only include thead. Tbody,tfoot. When using the form, be careful to use it in the right place. Tbody,thead includes tr,th. Td. The title is the caption label outside the table. 2) The contents of the table should be written in the TR or TD cells, otherwise the content will go outside the table. Not included, such as: <table border= "1" width= "200px" > <caption align= "center" >monthly savings</caption> This is a random insertion. <tr> This is missing th. <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 3) Disable the table layout page, which can lead to code redundancy and maintenance inconvenience. 4) Table elements can only include caption, Colgroup, col, Thead, tbody, TFOOT, not directly including TR or any other element

④ table layout, the advantages and disadvantages of table layout?

Advantage: Table layout easy to get started. Capable of forming complex changes. Simple high-speed, more "rigorous" performance, in different browsers can be very good compatibility Cons: Not conducive to maintenance, code, redundancy. Table assumes that the 3-layer collection engine is no longer crawling. Assuming that your site has the need for layout changes, the table layout will be designed again. Plus Table Branch Breakdown of what, the ratio of page changes will be slightly larger, which will affect your early to do some ranking and search basis. ① Code bloated ② page rendering performance issues ③ not conducive to search engine optimization ④ accessibility poor ⑤ not enough semantics ⑥ settings for the basic properties of a table (a combination of columns)? column Merging: colspan is the meaning of the merged column, and "3" refers to three columns. colspan= "3" means to merge the three columns into one column, in other words, to merge the vertical three cells into a single cell. row Merge: RowSpan The code of the merged lines, where "7", which represents the merging of 7 rows. Code Combat: Open

What are the advantages and disadvantages of div+css layout?

Strengths: Easy to maintain changes. Facilitates the crawl of SEO. (Note table layout control), structure nesting reasonable, structural style separation. Reduce page loading time, page rendering performance is higher than table Disadvantage: ① Development technology is highly known. Div+css to be compatible with a variety of browsers, so add div+css development difficulty. ② development time DIV+CSS layout compared to the table layout, the div+css time is much longer than the table layout for a long time, in addition to the browser-compatible issues, a variety of browser testing is also an expensive thing. ③ development cost is high, on the two points said. High technology and long time determine his cost.

row element, block element difference?

block elements: H Div p title ol ul DL DT DD fieldset form ... 1. The default occupies a whole line, the block includes the row/block element 2. Set the width of the high effective 3.margin and padding settings are valid 4. Convert rows Element display:inline row element: A span I em strong b 1. Does not occupy the entire row line can only include the row element, cannot include the block element 2. Setting the width height is invalid 3. The setting of the vertical margin is invalid 4. Convert to block element: Display:block

The proper nesting of tags and the semantics of labels

nested rules for tags 1.body can directly include block elements, ins, Del, script. Can not directly include inline elements 2.ins and del (inline elements) can include block elements or inline elements. Any other element in the line does not agree to include block elements 3.P, H1-h6 can directly include inline elements and text information, but do not agree to include block elements the 4.DL element only agrees to include DT and DD, and at the same time DT cannot include block elements, only agreeing to include inline elements. For DD to include no matter what element 5.form elements cannot be directly included with input elements. The reason is that the input element belongs to the inline element. Form elements can only include block elements 6.table elements can only include caption, Colgroup, col, Thead, Tbody, TFOOT, and can not directly include TR or any other element

Review of Project period summary 2:table, DIV+CSS, tag nesting rules