首页 > 代码库 > 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）
这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）
系列知识点汇总
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（知识点：表格操作、代码编写规则）