您的位置：首页 > 职场人生

这些HTML、CSS知识点，面试和平时开发都需要 No10-No11

2016-05-25 00:53 573 查看

系列知识点汇总

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（tablerow）、td（tabledata）、th（tablehead）。

（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>
<tdcolspan="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:1pxsolidred;
}


（5）如何显示行分割线：首先要设置border间隙border-collapse为collapse，然后设置th和td的border-bottom。样式代码如下：

table{
border-collapse:collapse;
}

td,th{
border-bottom:1pxsolid#cecfd5;
}

tfoottr:last-childtd{
border-bottom:none;
}



（6）交替行背景设置：通过伪类选择器:nth-child()方法以及参数even和odd选中奇数或偶数行可实现奇偶行交替显示。样式代码如下：

table{
border-collapse:collapse;
}

thead{
background:#395870;
color:#fff;
}
tbodytr: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:10px15px;
}

td{
border-bottom:1pxsolid#cecfd5;
border-right:1pxsolid#cecfd5;
}

td:first-child{
border-left:1pxsolid#cecfd5;
}

tbodytr: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):选择奇、偶元素。在表格交替设置背景色中用的比较多，例如:tbodytr:nth-child(even)表示赛选tbody中tr是偶数行的tr。

（3）:first-of-type、last-of-type、only-of-type：和first-child或者last-child相似，分别表示选择包含父类的第一个元素、选择包含父类的最后一个元素、选择父元素只有一个元素的元素。例如下面代码表示赛选tr下只有一个td元素的所有所有td元素：

tbodytd: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元素都筛选到了。

<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<styletype="text/css">
p:first-child{
color:red;
}
p:first-of-type{
color:blue;
}
</style>
</head>
<body>
<divclass="box">
<div>
<p>111</p>
</div>
<div>
<span>
</span>
<p>222</p>
</div>
</div>
</body>
</html>


No11.怎样写出好的代码
1.常见规则

（1）添加DOCTYPE:正确的文档结构都必须包含<DOCTYPEhtml>声明。

（2）小写规则：元素名称、属性、值都使用小写。

（3）引号使用：坚持使用双引号而不使用单引号。

（4）boolean值属性：属性的值类型为布尔类型时省略布尔值。例如：<checkboxchecked></checkbox>。

（5）id和class命名：使用实际使用场景来命名，例如设置一个class为red，red表示的展示效果而不是场景。代码如下：

Bad：<pclass="red">Error!Pleasetryagain.</p>
Good：<pclass="alert">Error!Pleasetryagain.</p>


（6）image标记alt属性：image必须标记可代替图片的文本信息alt属性。例如：

Bad：<imgsrc="puppy.jpg">
Good：<imgsrc="puppy.jpg"alt="Abeautiful,two-year-oldhoundmixpuppy">


（7）内容和样式分割：不要把样式嵌入到html内容中。一方面增加页面加载，另一方面难维护。例如：

Bad：<pstyle="color:#393;font-size:24px;">Thankyou!</p>
Good：<pclass="alert-success">Thankyou!</p>


（8）少使用div元素：尽量多使用结构化元素，div使用太多导致页面太臃肿并且难维护。例如：

Bad：
<divclass="article">
<divclass="headline">HeadlinesAcrosstheWorld</div>
</div>
</div>
Good：
<divclass="container">
<article>
<h1>HeadlinesAcrosstheWorld</h1>
</article>
</div>


2.CSS代码规则

（1）使用注释组织代码：使用注释组织分组样式

Bad：
header{...}
article{...}
.btn{...}
Good：
/*Primaryheader*/
header{...}

/*Featuredarticle*/
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级，中间过度定位的选择器尽量移除。像.newlia中的li就可移除掉。例如：

Bad：
#aside#featuredul.newslia{...}
#aside#featuredul.newsliaem.special{...}
Good：
.newsa{...}
.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:00020px;
}
Good：
img{
margin:5px10px;
}
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:20px0px;
letter-spacing:0%;
padding:0px5px;
}
Good：
div{
margin:20px0;
letter-spacing:0;
padding:05px;
}


（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;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航