表格标签和列表标签综合案例练习

最新推荐文章于 2023-03-28 19:02:41 发布

数缘科技营销

最新推荐文章于 2023-03-28 19:02:41 发布

阅读量346

点赞数

分类专栏： html语法 Web开发文章标签： webview 蓝桥杯 elementui

本文链接：https://blog.csdn.net/weixin_66455621/article/details/123224797

版权

Web开发同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

html语法

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>综合案例练习</title>
</head>
<body>
    <h2><b>表格标签和列表标签综合案例练习</b></h2>
    <p><font color="red"><b>案例：注册页面</b></font></p>
    <p>
        <ol>
            <li>表格标签，可以让内容排列整齐。</li>
            <li>列表标签</li>
        </ol>
    </p>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <table width="600" >
        <!--第一行-->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="nan" >&#160;<label for="nan"><img src="man.jpg">&#160;男</label>
                <input type="radio" name="sex" id="nv" checked="checked">&#160;<label for="nv"><img src="woman.jpg">&#160;女</label>
            </td>
        </tr>
        <!--第二行-->
        <tr>
            <td>生日</td>
            <td>
                <select>
                  <option>--请选择年--</option> <option>1977年</option><option>1978年</option><option>1979年</option><option>1980年</option><option>1981</option><option>1982年</option><option>1983年</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>
                </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>
                </select>
            </td>
        </tr>
        <!--第三行-->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京"></td>
        </tr>
        <!--第四行-->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marital status" id="unmarried" checked="checked"> <label for="unmarried">未婚</label>
                <input type="radio" name="marital status" id="married"> <label for="married">已婚</label>
                <input type="radio" name="marital status" id="divorce"> <label for="divorce">离婚</label>
            </td>
        </tr>
        <!--第五行-->
        <tr>
            <td>学历</td>
            <td><input typt="text" value="本科"></td>
        </tr>
        <!--第六行-->
        <tr>
            <td>喜欢的类型</td>
            <td><input type="radio" name="favorite type" id="charming"><label for="charming">妩媚的</label>
            <input type="radio" name="favorite type" id="lovely"><label for="lovely">可爱的</label>
            <input type="radio" name="favorite type" id="little fresh meat"><label for="little fresh meat">小鲜肉</label>
            <input type="radio" name="favorite type" id="old bacon"><label for="old bacon">老腊肉</label>
            <input type="radio" name="favorite type" id="I like all of them" checked="checked"><label for="I like all of them">都喜欢</label></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="#">我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><h3>我承诺</h3>
            <ul>
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
            </tb>
        </tr>
    </table>
   
</body>
</html>

表格标签和列表标签综合案例练习

案例：注册页面

表格标签，可以让内容排列整齐。
列表标签

青春不常在，抓紧谈恋爱

性别	男女
生日

所在地区
婚姻状况	未婚已婚离婚
学历
喜欢的类型	妩媚的可爱的小鲜肉老腊肉都喜欢
自我介绍	个人简介

我同意注册条款和会员加入标准

我是会员，立即登录

我承诺

年满18岁、单身
抱着严肃的态度
真诚寻找另一半

数缘科技营销

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
表格标签和列表标签综合案例练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>综合案例练习</tit.
复制链接

扫一扫