HTML基础实践——综合表格

综合表格

HTML
table——表格
tr——行
td——列
select——下拉列表
option——下拉列表选项
textarea——文本框
ul——有序列表
a——超链接
input——输入框
label——有助于用户体验，点击附近可触发
CSS
value——默认值
type——类型
radio——单选
checkbox——多选

<h3>信息表</h3>
    <table>
        <tr>
            <td>账号：</td>
            <td>
                <input value="请输入账号：">
            </td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td>
                <input type="text" value="请输入邮箱：">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="text" value="请输入密码：">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <label for="1"><input type="radio" name="sex" id="1"> 男</label>
                <label for="0"> <input type="radio" name="sex" id="0"> 女</label>
            </td>
        </tr>
        <tr>
            <td>生日：</td>
            <td>
                <!-- 年 -->
                <select>
                    <option>请选择年份</option>
                </select>
                <!-- 月 -->
                <select>
                    <option>请选择月份</option>
                </select>
                <!-- 日 -->
                <select>
                    <option>请选择日期</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区：</td>
            <td>
                <select>
                    <option>请选择所在地区</option>
                </select>
            </td>
        <tr>
            <td>婚姻状况：</td>
            <td>
                <label for="unmarried"> <input type="radio" name="marry" id="unmarried">未婚</label>
                <label for="divorce"><input type="radio" name="marry" id="divorce">离婚</label>
                <label for="widowed"> <input type="radio" name="marry" id="widowed">丧偶</label>
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="hobby">唱
                <input type="checkbox" name="hobby">跳
                <input type="checkbox" name="hobby" checked="checked">篮球
            </td>
        </tr>
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="免费注册">
                <input type="reset" value="取消">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>
                        年满18岁，单身
                    </li>
                    <li>
                        抱着严肃的态度
                    </li>
                    <li>
                        真诚寻找另一半
                    </li>
                </ul>
            </td>
        </tr>

    </table>