表格和表单

一、表格

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;即可。