列表/表格与表单

列表/表格与表单

列表

<!-- 无序列表 -->
<ul>
    <li>张无忌</li>
    <li>张三丰</li>
    <li>张翠山</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>
<!-- 自定义列表 -->
<dl>
    <dt>水果类</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>桃子</dd>
</dl>

表格

caption表格标题
thead表格头部
tbody表格主题
rowspan行合并
colspan列合并

<!-- 课程表 -->
<table>
    <caption>课程表</caption>
    <thead>
        <tr>
            <th colspan="2"></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">早上</td>
            <td colspan="5">晨读</td>
            <td rowspan="13"></td>
            <td rowspan="13"></td>
        </tr>
        <tr>
            <td colspan="7" class="rest">早上休息</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>2</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>3</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>4</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td colspan="7" class="rest">中午休息</td>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>2</td>
            <td>体育</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>3</td>
            <td>体育</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td colspan="7" class="rest">下午休息</td>
        </tr>
        <tr>
            <td rowspan="2">晚自习</td>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>2</td>
            <td>英语</td>
            <td>数学</td>
            <td>物理</td>
            <td>英语</td>
            <td>化学</td>
        </tr>
    </tbody>
</table>

表单

action 处理表单的程序
method 表单提交类型，分别有GET和POST两种，默认为GET
GET: 数据直接放在url地址中，POST: 表单的数据在请求体中
enctype 表单数据编码，文件上传使用 multipart/form-data，请求类型必须是POST

<form action="" method="post" enctype="multipart/form-data">
    <!-- 1，单行文本框 -->
    <!-- type: 控件类型 -->
    <!-- name: 数据的变量名 -->
    <!-- value: 数据的内容 -->
    <!-- required: 必填项 -->
    <!-- 单行文本框 -->
    <div>
        <label for="username">账号：</label>
        <input type="text" name="username" id="username" value="" placeholder="请输入用户名" required>
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" value="" placeholder="请输入邮箱" required>
    </div>
    <div>
        <label for="pwd">密码：</label>
        <input type="password" name="pwd" id="pwd" value="" placeholder="请输入密码6-16位字母加数字加字符组合" required>
    </div>
    <!-- 单选按钮 -->
    <!-- checked: 默认值 -->
    <div>
        <label for="secret">性别：</label>
        <input type="radio" name="gender" id="male" value="male">
        <label for="male">男</label>
        <input type="radio" name="gender" id="female" value="female">
        <label for="female">女</label>
        <input type="radio" name="gender" id="secret" value="secret" checked>
        <label for="secret">保密</label>
    </div>
    <!-- 复选框 -->
    <!-- 复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接受到一组值 -->
    <div>
        <label for="">兴趣爱好：</label>
        <input type="checkbox" name="hobby[]" id="game" value="game">
        <label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="shoot" value="shoot">
        <label for="shoot">摄影</label>
        <input type="checkbox" name="hobby[]" id="travel" value="travel" checked>
        <label for="travel">旅游</label>
        <input type="checkbox" name="hobby[]" id="program" value="program" checked>
        <label for="program">编程</label>
    </div>
    <!-- 下拉列表 -->
    <div>
        <label for="edu">学历：</label>
        <!-- <select name="edu" id="edu" multiple size="2"> -->
        <select name="edu" id="edu">
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3">中专</option>
            <option value="4" selected>大专</option>
            <option value="5">本科</option>
        </select>
    </div>
    <!-- 隐藏域 -->
    <div>
        <label for="user-pic">头像：</label>
        <!-- 隐藏域：在前端页面中看不到，它的值供后端处理时使用 -->
        <input type="hidden" name="MAX_FILE_SIZE" value="80000">
        <input type="file" name="user_pic" id="user-pic">
        <!-- 头像占位符 -->
        <div class="user-pic" style="grid-column: span 2;"></div>
    </div>
    <div>
        <label for="user-resume">简历：</label>
        <input type="hidden" name="MAX_FILE_SIZE" value="100000">
        <input type="file" name="user_resume" id="user-resume">
        <div class="user-resume" style="grid-column: span 2;"></div>
    </div>
    <!-- 文本域 -->
    <div>
        <label for="comment">备注：</label>
        <textarea name="comment" id="comment" cols="30" rows="5" placeholder="备注信息"></textarea>
    </div>
    <button>提交</button>
</form>