系列知识点汇总

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的更多相关文章

  1. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  5. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  6. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 (转)

    http://www.cnblogs.com/w-wanglei/p/5414979.html No1.HTML 1.网页结构 网页结构一般都包含文档声明DOCTYPE,并且在head中的meta应该 ...

  9. 这些Javascript知识点,面试和平时开发都需要

    No1.语法和类型 1.声明定义 变量类型:var,定义变量:let,定义块域(scope)本地变量:const,定义只读常量.    变量格式:以字母.下划线“_”或者$符号开头,大小写敏感.    ...

随机推荐

  1. Xamarin.Android经验之谈

    1.Fragment如何做到显示才加载数据 有些界面我们会采用套用多个Fragment来显示的效果,但是我们不会在一显示这个活动的时候就把所有的Fragment加载并加载数据,而是会让显示出来的Fra ...

  2. 可在广域网部署运行的QQ高仿版 -- GG叽叽V3.5,增加自拍头像功能、细节优化(源码)

    距离上次发版本(GG叽叽V3.4,增加系统设置.最近联系人.群功能)又有1个月了,在这个月内,由于空闲时间不是很多,所以,GG增加的主要功能只是拍照并设定其为自己头像.修改密码.删除好友.以及一些bu ...

  3. mongodb(副本集)

    副本集是mongo下的一种集群配置方式: 1.通过oplog的方式将主节点数据同步到副本节点,oplog不记录查询语句(因为不改变数据): 2.mongo的副本集可以有一个主节点,多个副本节点,主节点 ...

  4. [.net 面向对象编程基础] (9) 类和类的实例

    [.net 面向对象编程基础] (9) 类和类的实例 类 ,顾名思义就是分类.类别的意思.我们要面向对象编程,就需要对不同的事物进行分类.类可以说是.net面向对象的核心. 类:就是具有相同的属性和功 ...

  5. (文摘)彻底理解webservice SOAP WSDL

    WebServices特点介绍 WebServices 提供一个建立分布式应用的平台,使得运行在不同操作系统和不同设备上的软件,或者是用不同的程序语言和不同厂商的软件开发工具开发的软件,所有可能的已开 ...

  6. C#Lite Unity热更新开源解决方案改名C#Light

    因为此脚本语言与C#Lite Framework 开源项目重名,故修改名称,发音不变.

  7. Unity3d使用经验总结 数据驱动篇

    我这里说的数据驱动,不是指某种框架,某种结构,或者某种编码方式. 我要说的,是一种开发方式. 大家都知道,U3D中,我们可以为某个对象编写一个脚本,然后将这个脚本挂在对象上,那这个对象就拥有了相应的能 ...

  8. 如何在CRM系统中集成ActiveReports最终报表设计器

    有时候,将ActiveReports设计器集成到业务系统中,为用户提供一些自定义的数据表,用户不需要了解如何底层的逻辑关系和后台代码,只需要选择几张关联的数据表,我们会根据用户的选择生成可供用户直接使 ...

  9. java API:AtomicInteger

    An int value that may be updated atomically. See the java.util.concurrent.atomic package specificati ...

  10. 桃小蛋 简单粗暴BFC总结—附代码图和效果图

    说明:问题图与解决图的区别:黄色箭头那行代码的有和无. BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域, ...