【前端HTML】表格、列表、表单

表格

 <!-- 表格:tr，行；td,单元格数据；th,表头 -->
    <!-- align:表格对齐方式（默认left,center，right） -->
    <!-- border:边框（默认"",1） -->
    <!-- cellpadding:单元格内文字与单元格的距离 -->
    <!-- cellspacing:单元格之间的距离 -->
    <h3>表格：</h3>
    <img src="images/table.png">
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="300" height="150">
        <!-- 表格结构标签:thead 头部,tbody主体 -->
        <thead>
            <!-- tr:(table raw)单元格的一行 -->
            <tr>
                <!-- th:(table head)表头，加粗居中显示 -->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- td:(table data)单元格内数据 -->
                <td>张三</td>
                <td>男</td>
                <td>19</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>29</td>
            </tr>
        </tbody>
    </table>

---

合并单元格

<h3>合并单元格:</h3>
    <!-- 合并单元格步骤：1.选择相应单元格写合并代码，2.删除多余单元格 -->
    <!--跨行合并:rowspan ="合并单元格个数",代码写在上侧单元格-->
    <!--跨列合并:colspan ="合并单元格个数"，代码写在左侧单元格-->
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th colspan="5">个人简历</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>姓名：</td>
                <td width="60"></td>
                <td>性别：</td>
                <td width="60"></td>
                <td rowspan="4" width="60">照片：</td>
            </tr>
            <tr>
                <td>婚姻状况：</td>
                <td></td>
                <td>出生年月：</td>
                <td></td>

            </tr>
            <tr>
                <td>民族：</td>
                <td></td>
                <td>政治面貌：</td>
                <td></td>

            </tr>
            <tr>
                <td>身高：</td>
                <td></td>
                <td>学历：</td>
                <td></td>

            </tr>
        </tbody>
    </table>

---

列表

无序列表

<!-- 无序列表：ul(un list) -->
    <h4>无序列表</h4>
    <ul>
        <li>《全世界陪我失眠》</li>
        <li>《小星星》</li>
        <li>《巴赫旧约》</li>
        <li>《告别前要跳舞》</li>
    </ul>

有序列表

<!-- 有序列表：ol(ordered list) -->
    <h4>有序列表</h4>
    <ol>
        <li>泰坦尼克号</li>
        <li>肖生克的救赎</li>
        <li>哈利波特</li>
    </ol>

自定义列表

<!-- 自定义列表：dl(defined list) -->
    <dl>
        <!-- dt:(term)名词 -->
        <dt>线下门店</dt>
        <!-- dd:(description)对名词的解释 -->
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>授权体验店</dd>
    </dl>

---

表单

<!-- 表单标签(收集用户信息):表单域、表单元素、提示信息-->
    <!-- action="url地址",method="提交方式",name="表单域名称"-->
    <h4>表单</h4>
    <form action="" ,method="post" ,name="form1">

        <!-- input标签:输入框，单标签。type属性:text，password,radio等等 -->
        <!-- file：上传文件 -->
        头像：<input type="file"> <br>
        <!-- label标签，扩大点击区域,for与id对应 -->
        <label for="username">用户名：</label>
        <input type="text" id="username"> <br>
        <!-- maxlength属性:可输入的最大字符 -->
        密码：<input type="password" maxlength="10"> <br>
        性别：<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <br>
        爱好：<input type="checkbox">美食 <input type="checkbox">旅游 <input type="checkbox">逛超市 <br>
        <!-- submit属性值:提交按钮，reset属性值:重置按钮 -->
        <input type="submit"><input type="reset"> <input type="button" value="普通按钮"> <br>
        <!-- checked属性:是否默认选中 -->
        <input type="checkbox" checked="checked">同意用户隐私协议 <br>

        <!-- select标签：下拉列表 -->
        下拉列表:
        <select>
            <option>选项A</option>
            <!-- selected属性：默认选择 -->
            <option selected="selected">选项B</option>
            <option>选项C</option>
        </select>
        <br>

        <!-- textarea标签：文本域。-->
        个人简介：
        <textarea>默认文字</textarea>

    </form>