当前位置： 首页 > article >正文

【前端基础】Day 2 HTML

article 2025/2/27 21:30:06

目录

1.表格标签

2.列表标签

3.表单标签

4.综合案例 

5.查阅文档

1.表格标签

<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="100">
        <thead>    <!-- 可以不用thead和tbody -->
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">百科</a> <a href="#">图片</a></td>
            </tr>
        </tbody>
    </table>
</body>

<body>
    <table align="center" border="1" cellspacing="0" width="500" height="250">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- 合并第一行的2、3列，再把第一行第3列的格子删掉 -->
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <!-- 合并第1列的三、四行，再把第1列第四行的格子删掉 -->
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

2.列表标签

<body>
    <h4>无序标签</h4>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨</li>
    </ul>
    <h4>有序标签</h4>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨</li>
    </ol>
    <h4>自定义列表</h4>
    <dl>
        <dt>名词1</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        <dt>名词2</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
    </dl>
</body>

3.表单标签

<body>
    <form action="">
        <!-- test文本框，用户可以输入任何文字 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        <!-- password密码框，用户看不见输入的密码 -->
        密码：<input type="password" name="pwd"> <br>
        <!-- radio单选按钮，若加上表单元素名字name（必须相同）实现单选 -->
        性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女"> <br>
        <!-- checkbox复选框，实现多选 -->
        <!-- 单选按钮和复选框可以设置checked属性，实现打开页面时默认选中 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉<input type="checkbox" name="hobby"
            value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"> <br>
        <!-- value值可更改提交按钮上显示的文字，默认“提交” -->
        <!-- 点击了提交按钮可以把表单域form里表单元素里面的值提交的后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- reset重置按钮 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮button 后期结合js 搭配使用 -->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域：上传文件使用的 -->
        上传头像：<input type="file"> <br>

        <!-- label标签，绑定一个表单元素 -->
        <label for="num">QQ号码：</label> <input type="text" id="num">
    </form>
</body>

<body>
    <form action="">
        籍贯：
        <select>
            <option>火星</option>
            <option>月球</option>
            <option selected="selected">地球</option>
        </select>
    </form>
</body>

    <form action="">
        今日反馈：
        <textarea cols="50" rows="5">这个反馈留言由textarea做的</textarea>
    </form>

4.综合案例 

<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600">
        <form action="">
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
                    <input type="radio" name="sex" id="nv"> <label for="nv">女</label>
                </td>
            </tr>

            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option>--请选择年--</option>
                        <option>1996</option>
                        <option>1997</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                    </select>
                    <select>
                        <option>--请选择月--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                    </select>
                    <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" value="湖南长沙">
                </td>
            </tr>

            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="con" checked="checked"> 未婚<input type="radio" name="con">已婚 <input
                        type="radio" name="con">离婚
                </td>
            </tr>

            <tr>
                <td>学历</td>
                <td>
                    <input type="text" value="本科生">
                </td>
            </tr>

            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox">妩媚的
                    <input type="checkbox">可爱的
                    <input type="checkbox">小鲜肉
                    <input type="checkbox">老腊肉
                    <input type="checkbox">都喜欢
                </td>
            </tr>

            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>自我介绍</textarea>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <a href="#" target="_blank">我是会员，立即登录</a>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>
        </form>
    </table>
</body>

5.查阅文档


http://www.kler.cn/a/563652.html

相关文章：

  • KIMI K1.5：大规模强化学习在大语言模型中的应用与工程实践
  • 子组件如何通过v-model实现数据的双向绑定
  • Holoens2开发报错记录02_通过主机获取彩色和深度数据流常见错误
  • Java 面试篇-Redis 专题
  • Django项目开发的网站展示来自fasta文件的蛋白质名称和序列的可视化表格
  • 【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
  • androidstudio 运行项目加载很慢，优化方法
  • 什么是大语言模型
  • nodejs用ws模块反向代理socks5数据，即用ws写服务端和客户端及加密
  • Dify私有化部署自己的AI Agent
  • 【工作流】Spring Boot 项目与 Camunda 的整合
  • Gartner发布安全地响应 DeepSeek指南：DeepSeek相关关键安全挑战及其安全控制措施
  • TS二次封装axios学习总结
  • 开源模型应用落地-DeepSeek-R1-Distill-Qwen-7B-Docker助力-模型部署 “光速” 指南
  • Linux下原子操作`__atomic_store_n`和`__atomic_load_n`的消耗问题
  • 验证码介绍及生成与验证（HTML + JavaScript实现）
  • Python爬取某云热歌榜：解析动态加载的歌曲数据
  • AI安全相关漏洞
  • 朴素贝叶斯分类
  • Maven+SSM+SpringBoot+Mybatis-Plus