標籤：targe 情境 顯示 data 內容 header display toolbar lock
系列知識點匯總1.基礎篇
這些HTML、CSS知識點，面試和平時開發都需要 No1-No4（知識點：HTML、CSS、盒子模型、內容布局）
這些HTML、CSS知識點，面試和平時開發都需要 No5-No7（知識點：文字設定、設定背景、資料列表）
這些HTML、CSS知識點，面試和平時開發都需要 No8-No9（知識點：媒體操作、構建表單）
這些HTML、CSS知識點，面試和平時開發都需要 No10-No11（知識點：表格操作、代碼編寫規則）
2.進階篇
如何提升我的HTML&CSS技術，編寫有結構的代碼
No10.表格式資料操作1.Table 元素
（1）一般元素：table、tr（table row）、td（table data）、th（table head）。
（2）結構化元素：caption、thead、tbody、tfoot。
（3）元素說明：table的head、body、foot可把表格分組顯示，頭部資訊放在thead中，body放在tbody中，末尾總結資訊放在tfoot中。例如：
<table> <caption> 遲到人員統計 </caption> <thead> <tr> <th>姓名</th> <th>遲到次數</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>2</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">總人數： 33</td> </tr> </tfoot></table>
（4）table邊框border間隙設定：border-collapse（值包含collapse、separate、inherit）邊框間隙是否可見、border-spacing儲存格與儲存格之間border的空隙寬度。例如下面的樣式設定border間隙可見，間隙寬度為5px：
table{ border-collapse: separate; border-spacing: 5px; border: 1px solid red;}
（5）如何顯示行分割線：首先要設定border間隙border-collapse為collapse，然後設定th和td的border-bottom。樣式代碼如下：
table{ border-collapse: collapse;}td, th{ border-bottom: 1px solid #cecfd5;}tfoot tr:last-child td{ border-bottom: none;}
（6）交替行背景設定：通過偽類別選取器:nth-child()方法以及參數even和odd選中奇數或偶數行可實現奇偶行交替顯示。樣式代碼如下：
table{ border-collapse: collapse;}thead{ background: #395870; color: #fff;}tbody tr:nth-child(even){ background: #f0f0f2;}
展示效果如下：
（7）border-collapse屬性說明：建議設定值為separate，如果不設定為separate，帶邊框的body和foot比head寬一些。所以一般都建議設定border-collapse為separate並且border-spacing為0。下面代碼實現帶邊框的交替行背景：
table{ border-collapse: separate; border-spacing: 0;}thead{ background: #395870; color: #fff;}th, td{ padding: 10px 15px;}td{ border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5;} td:first-child{ border-left: 1px solid #cecfd5; }tbody tr:nth-child(even){ background: #f0f0f2;}
實現效果如下：
2.本文對齊
（1）對齊屬性：通過text-align、vertical-align設定儲存格對象方式。
（2）對齊規則：name和desc等文本資訊一般靠左對齊，而數字類型一般靠右對齊。
3.選取器
（1）:first-child、:last-child:例如p:first-child{}選擇父元素中第一個子項目並且這個元素名稱是p。last-child同理。
（2）:nth-child(even/odd):選擇奇、偶元素。在表格交替設定背景色中用的比較多，例如: tbody tr:nth-child(even)表示賽選tbody中tr是偶數行的tr。
（3）:first-of-type、last-of-type、only-of-type：和first-child或者last-child相似，分別表示選擇包含父類的第一個元素、選擇包含父類的最後一個元素、選擇父元素只有一個元素的元素。例如下面代碼錶示賽選tr下只有一個td元素的所有所有td元素：
tbody td:only-of-type { padding-left: 0; padding-right: 0;}
（4）:first-child和:first-of-type區別：first-child篩選的元素必須是父元素的第一個元素，而first-of-type篩選的元素可以不用是父元素的第一個元素，只要被父元素包含即可篩選到。下面的代碼中first-child值篩選到第一個div下的p元素，而first-of-type兩個div下的p元素都篩選到了。
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <style type="text/css"> p:first-child{ color: red; } p:first-of-type{ color: blue; } </style> </head> <body> <div class="box"> <div> <p>111</p> </div> <div> <span> </span> <p>222</p> </div> </div> </body></html>No11.怎樣寫出好的代碼
1.常見規則
（1）添加DOCTYPE:正確的文檔結構都必須包含<DOCTYPE html>聲明。
（2）小寫規則：元素名稱、屬性、值都使用小寫。
（3）引號使用：堅持使用雙引號而不使用單引號。
（4）boolean值屬性：屬性的實值型別為布爾類型時省略布爾值。例如：<checkbox checked></checkbox>。
（5）id和class命名：使用實際使用情境來命名，例如設定一個class為red，red表示的展示效果而不是情境。代碼如下：
Bad：<p class="red">Error! Please try again.</p>Good：<p class="alert">Error! Please try again.</p>
（6）image標記alt屬性：image必須標記可代替圖片的文本資訊alt屬性。例如：
Bad：<img src="puppy.jpg">Good：<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
（7）內容和樣式分割：不要把樣式嵌入到html內容中。一方面增加頁面載入，另一方面難維護。例如：
Bad：<p style="color: #393; font-size: 24px;">Thank you!</p>Good：<p class="alert-success">Thank you!</p>
（8）少使用div元素：盡量多使用結構化元素，div使用太多導致頁面太臃腫並且難維護。例如：
Bad：<div class="article"> <div class="headline">Headlines Across the World</div> </div></div>Good：<div class="container"> <article> <h1>Headlines Across the World</h1> </article></div>
2.CSS代碼規則
（1）使用注釋組織代碼：使用注釋組織分組樣式
Bad：header { ... }article { ... }.btn { ... }Good：/* Primary header */header { ... }/* Featured article */article { ... }/* Buttons */.btn { ... }
（2）使用多行和空格分割樣式
bad：a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}Good：a,.btn { background: #aaa; color: #f60; font-size: 18px; padding: 6px;}
（3）class命名：命名要表示實際意義，保持和css語義一致，使用小寫字母和連字號。例如：
Bad：.Red_Box { ... }Good：.alert-message { ... }
（4）選取器定義：不要使用id來定義，選取器深度最好不要超過2到3級，中間過度定位的選取器盡量移除。像.new li a中的li就可移除掉。例如：
Bad：#aside #featured ul.news li a { ... }#aside #featured ul.news li a em.special { ... }Good：.news a { ... }.news .special { ... }
（5）使用簡短屬性：一個border如果同時設定了border-bottom、border-top、border-right、border-left，那麼可使用border的簡寫方式。如果border只需設定一個方向，其他保持繼承。那麼可使用單個方向如border-left。例如：
Bad：img { margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}button { padding: 0 0 0 20px;}Good：img { margin: 5px 10px;}button { padding-left: 20px;}
（6）color屬性值：盡量使用簡單的十六進位表示，並且都小寫。例如：
Bad：.module { background: #DDDDDD; color: #FF6600;}Good：.module { background: #ddd; color: #f60;}
（7）value為0規則：刪除屬性值為0的單位。例如：
Bad：div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px;}Good：div { margin: 20px 0; letter-spacing: 0; padding: 0 5px;}
（8）供應商屬性：把供應商屬性分組排列。雖然現在很多瀏覽器都支援CSS3樣式，但為了保證相容性還是需要添加上供應商樣式。例如：
div { background: -webkit-linear-gradient(#a1d3b0, #f6f1d3); background: -moz-linear-gradient(#a1d3b0, #f6f1d3); background: linear-gradient(#a1d3b0, #f6f1d3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
這些HTML、CSS知識點，面試和平時開發都需要 No10-No11（知識點：表格操作、代碼編寫規則）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
