zoukankan      html  css  js  c++  java
  • html第二天--表单控件和表格

    html第二天学习计划:掌握网页最常见的表单元素和表格,前面我们已经学习了网页常用的html 标签,今天我学点稍微复杂点的东西,网页常见的表单输入、单选框、多选框、文本域等

    一表单:

    表单的作用:

      用于收集用户信息,不管是现实生活中还是网页中,表单无处不不在,接下来我们就来学习表单

    表单的使用场景:

      用户登录注册、提交、用户信息提交等

    表单的三大组成:
      表单域:表单的整个区域

      表单控件 : 表单元素

      表单提示 : 表单提示信息  比如账号、密码等

    表单域:

      通过 form 标签来定义     <form></form>

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <!-- action: url地址,表示要提交到哪个页面进行处理 -->
        <!-- method: 提交方式 -->
        <!-- name:  用于后台区分不同的表单域 -->
        <!-- 现阶段,只需知道表单域标签是form 就行,里面参数无需记忆-->
        <form action="deemo.php" method="POST" name="name1">
    
        </form>
    
    </body>
    
    </html>

    表单元素(表单控件):

      input 元素:输入元素

      select 元素:下拉元素

      textarea 元素:文本域元素

     我们先来学input元素,input元素通过type来 区分不同的形态 (输入框、密码框、单选框、复选框、提交按钮、重置按钮、按钮)

      输入文本框:type="text"

      输入密码框:type="password"

      单选框:type="radio"

      复选框:type="checkbox"

      提交按钮:type="submit"

      重置按钮: type="reset"

      普通按钮:typee="button"

      上传文件:type="file"

    文本框、密码框、单选框、复选框(多选)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <!-- 写表单元素前,需要有 form标签 -->
        <form action="deemo.php" method="POST" name="name1">
            <!-- input元素 -->
            <!-- 文本框 -->
            用户名:<input type="text"><br>
            <!-- 密码框 -->
            密码:<input type="password"><br>
            <!-- 单选框:单选-->
            <!-- 单选按钮必须有一个相同的name属性值 -->
            性别:男:<input type="radio" name="sex"> 女:<input type="radio" name="sex"><br>
            <!-- 复选框:多选效果 -->
            爱好:吃饭 <input type="checkbox">睡觉 <input type="checkbox">写代码 <input type="checkbox"><br>
        </form>
    
    </body>
    
    </html>

     一般我们会给input 标签加上name属性,用于区分不同的input

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <form action="deemo.php" method="POST" name="name1">
            用户名:<input type="text" name="username"><br>
            密码:<input type="password" name="password"><br>
            <!-- 单选框:单选-->
            <!-- 单选按钮必须有一个相同的name属性值,才能保证单选 -->
            性别:男:<input type="radio" name="sex"> 女:<input type="radio" name="sex"><br>
            <!-- 复选框:多选效果 -->
            爱好:吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input type="checkbox" name="checkbox"><br>
        </form>
    
    </body>
    
    </html>

     input的value 属性,给默认值,input的name和value属性 主要是给你后台人员 做标识用的,用来区别选了什么

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <form action="deemo.php" method="POST" name="name1">
            用户名:<input type="text" name="username" value="苗苗"><br>
            密码:<input type="password" name="password" value="29"><br>
            <!-- 单选框:单选-->
            <!-- 单选按钮必须有一个相同的name属性值,才能保证单选 -->
            性别:男:<input type="radio" name="sex"> 女:<input type="radio" name="sex" value="男"><br>
            <!-- 复选框:多选效果 -->
            爱好:吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input type="checkbox" name="checkbox"><br>
        </form>
    
    </body>
    
    </html>

     对于单选框和复选框,可以设置 checked 属性,设置为 默认选中 状态

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <form action="deemo.php" method="POST" name="name1">
            <!-- 单选按钮必须有一个相同的name属性值,才能保证单选 -->
            性别:男:<input type="radio" name="sex"> 女:<input type="radio" name="sex" value="男" checked><br>
            <!-- 复选框:多选效果 -->
            爱好:吃饭 <input type="checkbox" name="checkbox" checked>睡觉 <input type="checkbox" name="checkbox" checked>写代码 <input type="checkbox" name="checkbox" checked><br>
        </form>
    
    </body>
    
    </html>

     input的maxlength 属性:限制输入最大位数

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <form action="deemo.php" method="POST" name="name1">
            用户名:<input type="text" name="username" maxlength="6"><br>
            密码:<input type="password" name="password" maxlength="6"><br>
        </form>
    
    </body>
    
    </html>

     input 的type设置为 submit :提交按钮;reset 为重置按钮;button为普通按钮

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>

    <body>
        <form action="demo.php" method="POST" name="name1">
            <!-- 输入框 -->
            用户名:<input type="text" name="username"><br>
            <!-- 密码框 -->
            密码:<input type="password" name="password"><br>
            <!-- 单选框:单选-->
            性别:男:<input type="radio" name="sex"> 女:<input type="radio" name="sex"><br>
            <!-- 复选框:多选效果 -->
            爱好:吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input
                type="checkbox" name="checkbox"><br>

            <!-- 提交按钮 -->
            <!-- value:提交按钮文字 -->
            <input type="submit" value="注册"><br>
            <!-- reset:重置按钮 -->
            <!-- 重置按钮的作用:还原表单元素的默认状态-->
            <input type="reset" vlaue="重置"><br>
            <!-- 普通按钮 -->
            <input type="button" value="点我呀,苗苗"><br>
            
        </form>

    </body>

    </html>

     input的type属性设置为 file,上传文件

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <form action="demo.php" method="POST" name="name1">
            <!-- 输入框 -->
            用户名:<input type="text" name="username"><br>
            <!-- 密码框 -->
            密码:<input type="password" name="password"><br>
            <!-- 单选框:单选-->
            性别:男:<input type="radio" name="sex"> 女:<input type="radio" name="sex"><br>
            <!-- 复选框:多选效果 -->
            爱好:吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input
                type="checkbox" name="checkbox"><br>
    
            <!-- 提交按钮 -->
            <!-- value:提交按钮文字 -->
            <input type="submit" value="注册"><br>
            <!-- reset:重置按钮 -->
            <!-- 重置按钮的作用:还原表单元素的默认状态-->
            <input type="reset" vlaue="重置"><br>
            <!-- 普通按钮 -->
            <input type="button" value="点我呀,苗苗"><br>
            <!-- 文件上传 -->
            上传文件:<input type="file">
        </form>
    
    </body>
    
    </html>

     <label>标签

      使用场景:绑定一个表单元素,当点击<label>标签内的文本时,浏览器会自动聚焦光标,选择上对应的表单元素,用来提示用户体验

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html表单域</title>
    </head>
    
    <body>
        <form action="demo.php" method="POST" name="name1">
            <!-- label标签:自动聚焦光标 -->
            <label for="name">用户名:</label><input type="text" name="username" id="name"><br>
    
            <!-- 不使用lable -->
            性别:<input type="radio" name="radio">男<br>
            <!-- 使用label -->
            性别:<input type="radio" name="radio" id="nan"><label for="nan">男</label>
        </form>
    
    </body>
    
    </html>

     select 下拉框:

      使用场景:选择国家、城市等

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>select</title>
    </head>
    <body>
        籍贯:
        <select name="" id="input" class="form-control" required="required">
            <!-- 至少包含一个option,不然无选项 -->
            <!-- selected:默认选中 -->
            <option value="">山东</option>
            <option value="">广东</option>
            <!-- 默认选中北京 -->
            <option value="" selected>北京</option>
            <option value="">天津</option>
    
            
        </select>
        
    
        
    </body>
    </html>

     textarea 文本域:

      使用场景:大量的书写文字的时候,比如留言、备注等

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>textarea</title>
    </head>
    
    <body>
    
        <form action="">
            今日反馈:
            <textarea name="" id="" cols="30" rows="10">
                  生活就是生活,你会遇到很多事情。曾经我总是紧皱着眉头想改变一切,不过现在我更愿意微笑,或许多一点调侃。你也许会清楚生活的味道。——科比
    
    
    
    
            </textarea>
    
    
    
        </form>
    
    
    </body>
    
    </html>

     文本提示语:   placeholder:"请输入内容"

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>提示语</title>
    </head>
    
    <body>
        <form action="deemo.php" method="POST" name="name1">
            <!-- 文本框 -->
            用户名:<input type="text" placeholder="请输入内容"><br>
            <!-- 文本域 -->
            
            <div>
                详细信息: 
    
            </div>
    
            <textarea name="" id="" cols="200" rows="5" placeholder="请输入内容">
    
            </textarea>
    
    
        </form>
    
    </body>
    
    </html>

    任务二表格:

      表格的作用: 用于直观形象的展示、统计、对比用户信息

    最简单的表格(原始表格):

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>原始表格</title>
    </head>
    
    <body>
        <!-- 最简单的表格 -->
        <table>
            <!-- tr:行,有多少个tr就有多少行 -->
            <!-- 第一行 -->
            <tr>
                <!-- 列 -->
                <td>1111</td>
                <td>1222</td>
                <td>1333</td>
                <td>1444</td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>2111111111</td>
                <td>2222222222</td>
                <td>2333333333</td>
                <td>2444444444</td>
            </tr>
        </table>
    
    
    </body>
    
    </html>

    带有边框的表格:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带有边框的表格</title>
    </head>
    
    <body>
        <!-- 带有边框、内容居中 -->
        <!-- border:边框厚度 -->
        <!-- bordercolor:边框颜色 -->
        <table border="1" bordercolor="pink">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>籍贯</td>
                <td>爱好</td>
            </tr>
            <tr>
                <td>小郑</td>
                <td>女</td>
                <td>保密</td>
                <td>广东-汕尾</td>
                <td>听歌、刷抖音</td>
            </tr>
            <tr>
                <td>小陈</td>
                <td>男</td>
                <td>保密</td>
                <td>江西-赣州</td>
                <td>篮球、写代码</td>
            </tr>
    
        </table>
    
    </body>
    
    </html>

     表格间距为0、内容居中:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带有边框的表格</title>
    </head>
    
    <body>
        <!-- 带有边框、没有间距、内容居中 -->
        <!-- border:边框厚度 -->
        <!-- bordercolor:边框颜色 -->
        <!-- algin:table居中 -->
        <!-- cellspacing:单元格间距为0,就是没有间距;你可设置为10 尝试一下 -->
        <!-- 设置宽度,高度 -->
        <table border="1" bordercolor="skyblue" cellspacing="0">
            <tr align="center" style="font-weight:bold;">
                <td width="100px;">姓名</td>
                <td width="50px;">性别</td>
                <td width="100px;">年龄</td>
                <td width="200px;">籍贯</td>
                <td width="500px;">爱好</td>
            </tr>
            <tr align="center">
                <td>小郑</td>
                <td>女</td>
                <td>保密</td>
                <td>广东-汕尾</td>
                <td>听歌、刷抖音</td>
            </tr>
            <tr align="center">
                <td>小陈</td>
                <td>男</td>
                <td>保密</td>
                <td>江西-赣州</td>
                <td>篮球、写代码</td>
            </tr>
    
        </table>
    
    </body>
    
    </html>

    将 表格 显示在网页中间: algin="center"

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带有边框的表格</title>
    </head>
    
    <body>
        <!-- 将表格放在网页中间 -->
        <!-- align="center" 即可 -->
        <!-- 后续会通过css方式 让表格居中显示 -->
        <table border="1" bordercolor="skyblue" align="center" cellspacing="0">
            <tr align="center" style="font-weight:bold;">
                <td width="100px;">姓名</td>
                <td width="50px;">性别</td>
                <td width="100px;">年龄</td>
                <td width="200px;">籍贯</td>
                <td width="500px;">爱好</td>
            </tr>
            <tr align="center">
                <td>小郑</td>
                <td>女</td>
                <td>保密</td>
                <td>广东-汕尾</td>
                <td>听歌、刷抖音</td>
            </tr>
            <tr align="center">
                <td>小陈</td>
                <td>男</td>
                <td>保密</td>
                <td>江西-赣州</td>
                <td>篮球、写代码</td>
            </tr>
    
        </table>
    
    </body>
    
    </html>

     合并列: colspan

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带有边框的表格</title>
    </head>
    
    <body>
        <!-- 合并 -->
        <table border="1" bordercolor="black" align="center" cellspacing="0">
            <!-- 行 -->
            <tr height="40" align="center">
                <td style="font-weight:bold;">姓名</td>
                <td>苗苗</td>
                <td style="font-weight:bold;">汉语拼音</td>
                <td>miaomiao</td>
                <td style="font-weight:bold;">身份证号码</td>
                <!-- colspan:合并列 -->
                <td colspan="3">360781199903027010</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">性别</td>
                <td>女</td>
                <td style="font-weight:bold;">年龄</td>
                <td>23</td>
                <td style="font-weight:bold;">出生日期</td>
                <td>1999</td>
                <td style="font-weight:bold;">民族</td>
                <td>汉</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">籍贯</td>
                <td>广东</td>
                <td style="font-weight:bold;">出生地</td>
                <td>深圳</td>
                <td style="font-weight:bold;">户口所在地</td>
                <td>广东省汕尾市</td>
                <td style="font-weight:bold;">户口类型</td>
                <td>城镇</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">档案所在单位</td>
                <td>深圳市</td>
                <td style="font-weight:bold;">社保缴纳单位</td>
                <td>深圳市龙岗区</td>
                <td style="font-weight:bold;">住房公积金缴纳单位</td>
                <td>爱都科技有限公司</td>
                <td style="font-weight:bold;">婚姻状况</td>
                <td>未婚</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">配偶所在地</td>
                <td>暂无配偶</td>
                <td style="font-weight:bold;">父母所在地</td>
                <td>深圳</td>
                <td style="font-weight:bold;">血型</td>
                <td>保密</td>
                <td style="font-weight:bold;">健康状况</td>
                <td>健康</td>
            </tr>
    
    
    
        </table>
    
    </body>
    
    </html>

    合并行:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带有边框的表格</title>
    </head>
    
    <body>
        <!-- 合并 -->
        <table border="1" bordercolor="black" align="center" cellspacing="0">
            <!-- 行 -->
            <tr height="40" align="center">
                <td style="font-weight:bold;">姓名</td>
                <td>苗苗</td>
                <td style="font-weight:bold;">汉语拼音</td>
                <td>miaomiao</td>
                <td style="font-weight:bold;">身份证号码</td>
                <td colspan="3">360781199903027010</td>
                <!-- rowspan:合并行 -->
                <td rowspan="5">
                    <!-- 照片框:存放照片 -->
                    <img src="./kb.jpg" alt="暂无照片" height="100">
                </td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">性别</td>
                <td>女</td>
                <td style="font-weight:bold;">年龄</td>
                <td>23</td>
                <td style="font-weight:bold;">出生日期</td>
                <td>1999</td>
                <td style="font-weight:bold;">民族</td>
                <td>汉</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">籍贯</td>
                <td>广东</td>
                <td style="font-weight:bold;">出生地</td>
                <td>深圳</td>
                <td style="font-weight:bold;">户口所在地</td>
                <td>广东省汕尾市</td>
                <td style="font-weight:bold;">户口类型</td>
                <td>城镇</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">档案所在单位</td>
                <td>深圳市</td>
                <td style="font-weight:bold;">社保缴纳单位</td>
                <td>深圳市龙岗区</td>
                <td style="font-weight:bold;">住房公积金缴纳单位</td>
                <td>爱都科技有限公司</td>
                <td style="font-weight:bold;">婚姻状况</td>
                <td>未婚</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">配偶所在地</td>
                <td>暂无配偶</td>
                <td style="font-weight:bold;">父母所在地</td>
                <td>深圳</td>
                <td style="font-weight:bold;">血型</td>
                <td>保密</td>
                <td style="font-weight:bold;">健康状况</td>
                <td>健康</td>
            </tr>
    
    
    
        </table>
    
    </body>
    
    </html>

    表格案例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带有边框的表格</title>
    </head>
    
    <body>
        <!-- 合并 -->
        <table border="1" bordercolor="black" align="center" cellspacing="0">
            <!-- 行 -->
            <tr height="40" align="center">
                <td style="font-weight:bold;">姓名</td>
                <td>苗苗</td>
                <td style="font-weight:bold;">汉语拼音</td>
                <td>miaomiao</td>
                <td style="font-weight:bold;">身份证号码</td>
                <td colspan="3">360781199903027010</td>
                <!-- rowspan:合并行 -->
                <td rowspan="5">
                    <!-- 照片框:存放照片 -->
                    <img src="./kb.jpg" alt="暂无照片" height="100">
                </td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">性别</td>
                <td>女</td>
                <td style="font-weight:bold;">年龄</td>
                <td>23</td>
                <td style="font-weight:bold;">出生日期</td>
                <td>1999</td>
                <td style="font-weight:bold;">民族</td>
                <td>汉</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">籍贯</td>
                <td>广东</td>
                <td style="font-weight:bold;">出生地</td>
                <td>深圳</td>
                <td style="font-weight:bold;">户口所在地</td>
                <td>广东省汕尾市</td>
                <td style="font-weight:bold;">户口类型</td>
                <td>城镇</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">档案所在单位</td>
                <td>深圳市</td>
                <td style="font-weight:bold;">社保缴纳单位</td>
                <td>深圳市龙岗区</td>
                <td style="font-weight:bold;">住房公积金缴纳单位</td>
                <td>爱都科技有限公司</td>
                <td style="font-weight:bold;">婚姻状况</td>
                <td>未婚</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">配偶所在地</td>
                <td>暂无配偶</td>
                <td style="font-weight:bold;">父母所在地</td>
                <td>深圳</td>
                <td style="font-weight:bold;">血型</td>
                <td>保密</td>
                <td style="font-weight:bold;">健康状况</td>
                <td>健康</td>
            </tr>
    
            <tr height="40" align="center">
                <td style="font-weight:bold;">获奖名称</td>
                <td>最佳学员奖</td>
                <td style="font-weight:bold;">获奖日期</td>
                <td></td>
                <td style="font-weight:bold;">获奖信息</td>
                <td colspan="4"></td>
            </tr>
            <tr height="40" align="center">
                <td rowspan="3" style="font-weight:bold;">紧急情况联系人</td>
                <td style="font-weight:bold;">姓名</td>
                <td colspan="2">陈福中</td>
                <td style="font-weight:bold;">本人关系</td>
                <td colspan="2">good friend</td>
                <td style="font-weight:bold;">联系电话</td>
                <td colspan="2">13549345011233</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">工作单位</td>
                <td colspan="8">深圳市爱都科技有限公司</td>
            </tr>
            <tr height="40" align="center">
                <td style="font-weight:bold;">家庭地址</td>
                <td colspan="7">广东省深圳市龙岗区*********</td>
            </tr>
    
        </table>
    
    </body>
    
    </html>
  • 相关阅读:
    Jest | expect常用匹配方法
    typescript | typeScript 笔记
    好用的思维脑图
    VSCode launch.json 配置详解
    各种语法技术栈文档汇总|api文档集合
    浏览器的运行机制
    js字符串转数字长度限制|超过长度有误差
    css对话框| 气泡框| css箭头
    nginx和php-fpm的用户权限
    mac安装redis拓展
  • 原文地址:https://www.cnblogs.com/KoBe-bk/p/14665371.html
Copyright © 2011-2022 走看看