一、表格
1、表格标签:
table 表格
thead 表格头
tbody 表格主体
tr 表格行
th 元素定义表头
td 元素定义表格单元
2、表格样式重置
1、table{border-collapse:collapse;} 单元格间隙合并
2、th,td{padding:0;}重置单元格默认填充
3、colspan 属性规定单元格可横跨的列数。 <td colspan="2"></td>
4、rowspan 属性规定单元格可横跨的行数。 <td rowspan="2"></td>
5、给表格加边框
1、<table border="1">给表格加边框,不能改变颜色
2、可以自定义边框样式
td,th{
border:1px solid red;
padding:0;
}
5、边框合并
table{
border-collapse: collapse;//边框合并
}
二、表单
1、表单元素
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
textarea 文本域
2、小知识点
1、输入框的样式outline:none;可去除input外围光圈;
2、改变输入框提示如下:
input::-webkit-input-placeholder{
color: blue;
text-align:center;
}
3、文本域
textarea{
outline:none;
resize:none;/*是否让用户调整文本域大小*/
padding:none;
}
4、表单元素的name属性是用来和后台交互的,后台和js就是通过name来锁定元素然后取值赋值的。
5、一般label和input radio和CheckBox联合使用,label的for属性和input的id相同即可把两者关联起来,点击文字时就选中了radio和checkbox。
三、补充
1、怎么给以为页面添加标题图片?
在HTML的head里面添加<link rel="icon" href="xxxxxx.ico"/>
用link标签引入文件rel属性值为icon引入标题图片,href为图片地址,图片是ico格式。
2、a标签的伪类
a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。
<style>
/*a{
border:1px solid red;
a:link 链接颜色
a:active 点击那一刻
a:hover 鼠标悬停
}*/
a:link{
color: red;
}
a:active{
color:blue;
}
a:hover{
color:yellow;
}
a:visited{
color:green;
}
</style>
鼠标样式cursor ;例如当鼠标移动到某元素上时变为小手,在该元素的style里面加上cursor:pointer;
即可。