1、表格元素
在网页中，我们通常用表格来显示数据表格默认是没有样式的，我们添加了border属性来设置边框，
width属性设置表格的宽度。在实际开发中，我们用css来设置表格的样式，而不是用表格的属性。
table标签：表格容器
thead标签：表示表头
tbody标签：表示表体
tr标签：表示行，内部一定是只有td或th
th标签：表示表头单元格，字体会加粗
td标签：表示单元格
2.合并单元格
通过colspan属性可以合并行，colspan属性可以让单元格在同行占据两个单元格的位置。
| 小明 | 2岁 |
| 小红 | 3岁 |
通过rowspan属性可以合并列，rowspan属性可以让单元格在同一列占据3行的位置
3.表单
在网页中，我们通常用表单向服务器发送数据，例如下面一个最简单的登录功能。
3.1 form标签
form标签是表单的容器，为了实现采集数据的功能，其他表单标签应当放在form标签之内。
3.2 input标签
input标签通过type属性可以分为多个类别，常用的input上面的代码已经列出：
type="text"：文本框，用于文本的输入。
type="password"：密码输入框，用于密码的输入，与文本框的区别是，输入的内容不能被用户看到。
type="radio":单选框，通过name控制类别，name想通的radio只能被选择一个。
type="checkbox":复选框，用过name控制类别，但是可以选择多个。
type="button":按钮，如果不做进一步处理，没有任何功能。
type="submit":提交按钮，可以将表单数据提交至网站后台，关于数据传输，后续会深入讲解。
3.3 label
通过label标签，可以指定文字相对应的表单空间，例如下面的示例，使用for属性对应input的id，这样当鼠标点击label标签的文字时，光标就会聚焦到相对的input标签之上。
3.4 placeholder属性
placeholder可以设置文本框默认的提示信息，示例效果和代码如下所示：
3.5下拉菜单
select标签定义了网页中的下拉菜单，下拉菜单的选项用option标签。
4.盒子模型概述
我们可以把一个网页分解成一个个区域，大的区域内部可以嵌套小的区域
每个区域都可以看做一个盒子，一个网页就是由一个个大大小小的盒子嵌套而成。
盒子之间或内外是有边距的，通过属性控制盒子的边距
margin：外边距
padding：内边距
盒子模型还会涉及到我们之前学过的一个属性
border:设置元素的边框
5.盒子模型属性讲解
5.1 margin
margin属性可以控制元素的外边距，设置margin的这个元素与其相邻的元素或外部容器元素的距离，
对应有四个属性，上下左右：
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
margin:value - 将上下左右都设置成value值
margin:value1 value2 value3 value4; - 4个值分别是上右下左
margin:value1 value2; - 第一个值表示上下，第二个值表示左右
margin:value1 value2 value3; -第一个值表示上，第二个值表示左右，第三个值表示下。
margin属性还有一个常用的技巧，将块元素水平居中展示
.box{
width:100px;
height:100px;
background-color:red;
margin: 0 auto; /* 为margin设置两个值，第一个值为上下的外边距，第二个值为左右的外边距。 */
}
左右外边距的值设置为auto，元素就会根据其父级容器的实际宽度，将元素左右两边的外边距设置为相同的值，这样元素就实现了水平居中的效果。
5.2 padding
padding属性可以控制元素的内边距，简单的说就是控制容器与内部元素之间的距离，
与margin一样，padding也有对应的四个属性分别表示上下左右
padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距
以padding-top为例
.box1{
width:300px;
height:300px;
background-color:#f00;
padding-top:50px;
}
.box2{
width:100px;
height:100px;
background-color:#0f0;
}
5.3 border
.box{
/* 设置一像素，红色，实现边框 */
border: 1px solid red;
}
5.3.1其实设置border样式是一个简写，它其实包含了三个属性
border-style
border-width
border-color
完整的写法
.box{
/* 边框宽度 */
border-width:1px;
/* 边框样式 */
border-style:solid;
/* 边框颜色 */
border-color:red;
}
5.3.2 border-style比较常用的值如下所示
none定义无边框
dotted定义点状边框
dashed定义虚线
solid定义实线
double定义双线
border属性简写的三个值是没有顺序要求的
.box{
border: blue 1px solid;
}
/* 或者 */
.box{
border: blue solid 1px;
}
都不会影响显示效果。
6 宽高计算
通过width和height属性可以设置元素的宽高，但元素的实际宽高可能与我们设置的width和height属性不同。因为在默认情况下：
元素的实际宽度 = border-left + border-right + width + padding-left + padding-right;
元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom;
但是在实际开发中，为了方便计算，我们希望设置的width的值就是原生的实际宽度，不再希望考虑padding和border的加减运算，我们可以通过box-sizing属性实现这个功能
.box{
width:300px;
height:300px;
background-color:#f00;
padding-left:50px;
border-right: 50px solid blue;
box-sizing: border-box;
/*原生的实际宽度就是width的宽度*/
}
通过设置box-sizing: border-box; 元素的实际宽度就是width设置的宽度，
而padding和border的值是显示在width值内部的。
其实在实际开发中，将元素设置box-sizing: border-box;确实会给开发带来便利，
所以我们可以在元素初始化的时候，将box-sizing: border-box;赋值给所有元素。
*{
margin: 0px;
padding:0px;
box-sizing:border-box;
}
这样，我们既能清楚所有元素的默认边距，又能便利地设置元素的宽度和高度值。