web前端学习——基础知识3-CSDN博客

本文链接：https://blog.csdn.net/m0_50272558/article/details/108204701

table
表格组成部分：标题表头主体表尾

table 定义一个表格
caption 定义表格的标题
thead 定义表头部分
tbody 定义表格主体部分
tfoot  定义表尾，一般来显示汇总信息

tr 定义一行
th、td 定义数据项（单元格）th一般用于表头，有加粗的样式；td 一般用于主体部分，没有加粗的样式

td rowspan和colspan分别定义了单元格跨行的行数，跨列的列数
cellspacing:表格之间的距离
cellpadding:表格与数据间的距离

table合并单元格及其他基础标签案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阶段练习</title>
</head>
<body>
<form action="#" method="post">
<table border="1" cellpadding="5" cellspacing="0" width="1100px" align="center">
    <caption><h2>新员工入职登记表</h2></caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th></th>
        <th>性别</th>
        <td>
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </td>
        <th>出生日期</th>
        <th></th>
        <td rowspan="5">
            一寸近照
            <input type="file" name="picture">
        </td>
    </tr>
    <tr>
        <th>曾用名</th>
        <th></th>
        <th>体重</th>
        <th></th>
        <th>身高</th>
        <th></th>
    </tr>
    <tr>
        <th>民族</th>
        <th>
            <select>
                <option>汉</option>
                <option>苗</option>
                <option>回</option>
            </select>
        </th>
        <th>籍贯</th>
        <th></th>
        <th>婚姻状况</th>
        <td><input type="radio" name="marry">已婚
            <input type="radio" name="marry">未婚
        </td>
    </tr>
    <tr>
        <th>政治面貌</th>
        <td><input type="radio" name="zz">党员<br>
            <input type="radio" name="zz">团员
        </td>
        <th>健康状况</th>
        <th></th>
        <th>血型</th>
        <td>
              <input type="radio" name="blood">A
              <input type="radio" name="blood">B
              <input type="radio" name="blood">AB
        </td>

    </tr>
    <tr>
        <th>身份证号码</th>
        <th colspan="5"></th>
    </tr>
    </thead>
</table>
</form>
</body>
</html>

div

 div定义一个分块
特点：在新的一行显示，块级标签

块级标签与行内标签的区别

块级标签会占满行，行内标签会按照顺序从左到右依次排列
块级标签：h1-h6,p,ul,ol,li,div,table,dl,dd,dt,form
行内标签：span,a,br,label,i,em
		i,em：字体斜体
		strong，b：字体加粗
行内块：img，input

块级元素特点：display：block

1.	每个块都是从新的一行开始，后面的元素会另起一行
2.	元素的宽度，高度，行高，内外边距都可以设置的
3.	如果不设置元素的宽度，默认是他父容器的100%，除非给他设定宽度
行

内元素的特点：display：inline

1.	和其他元素都在一行
2.	不能设置宽度，高度，行高，内外边距
3.	元素的宽度是他包含文字或图片的宽度，不能被改变
行

内块元素的特点：display：inline-block

1.	和其他元素都在一行
2.	元素的宽度，高度，行高，内外边距都可以设置的