項目期複習總結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的布局容易上手，可以形成複雜的變化，簡單快速，表現上更加“嚴謹”，在不同的瀏覽器中都能得到很好的相容 缺點：不利於維護，代碼多，冗餘，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或者其他任何元素