02.html的列表、表格、表单

最新推荐文章于 2024-09-25 18:08:46 发布

意中晚星.

最新推荐文章于 2024-09-25 18:08:46 发布

阅读量253

点赞数 9

文章标签： html 前端数据库

本文链接：https://blog.csdn.net/2303_77324444/article/details/141964523

版权

一、列表

分类：无序列表、有序列表、定义列表

无序列表：

    <ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
        <li>......</li>
    </ul>

有序列表：

    <ol>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
        <li>......</li>
    </ol>

定义列表：

<table border=“1”>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
    </tr>
    <tr>
        <td>张翰</td>
        <td>99</td>
        <td>80</td>
        <td>179</td>
    </tr>
   </table>

效果：

二、表格

合并单元格：

跨行合并，保留最上单元格，添加属性rowspan

跨列合并，保留最左单元格，添加属性colspan

<table border=“1”>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张翰</td>
            <td>99</td>
            <td rowspan="2">80</td>
            <td>179</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            
            <td>179</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="3">第一</td>
            
        </tr>
    </tfoot>
   </table>

三、表单

占位文本：提示信息

文本框：<input type="text" placeholder="请输入用户名">
    <br>
    密码框：<input type="password" placeholder="密码">
    <br>
    单选框：<input type="radio" >
    <br>
    多选框：<input type="checkbox">
    <br>
    上传文件： <input type="file">

单选框：

 性别：
    <input type="radio"name="gender" >男
    <input type="radio" name="gender" checked>女

多选框：

多选框：<input type="checkbox"checked>我同意<a href="#">注册条款</a> 和<a href="#">会员加入标准</a>
    <br>
    兴趣爱好：
    <input type="checkbox"> 敲代码
    <input type="checkbox" checked>学习