HTML第一次作业

发布于：2025-07-31 ⋅ 阅读:(19) ⋅ 点赞:(0)

作业一

  • 要求
  • 代码 
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
</head>
<body>
    <form action="https://www.baidu.com" method="post">
    <table border="3px" width="300px" height="250px"  align="center">
        <thead>
            <tr>
                <th colspan="2" bgcolor="gray" >用户注册</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th align="right">用户名</th>
                <th align="left"><input type="text" name="username" size="15px" maxlength="20"></th>
            </tr>
            <tr>
                <th align="right">密码</th>
                <th align="left"><input type="password" name="userpass" size="15px" maxlength="20"></th>
            </tr>
            <tr>
                <th align="right">性别</th>
                <th align="left">
                    <input type="radio" name="sex" value="男" checked >男  
                    <input type="radio" name="sex" value="女" >女
                </th>
            </tr>
            <tr>
                <th align="right">爱好</th>
                <th align="left">
                    <label><input type="checkbox" name="like" value="写作">写作</label>
                    <label><input type="checkbox" name="like" value="听音乐">听音乐</label>
                    <label><input type="checkbox" name="like" value="体育">体育</label>
                </th>
            </tr>
            <tr>
                <th align="right">省份</th>
                <th align="left">
                    <select name="province">
                        <option value="">请选择省份</option>
                        <option value="宁夏回族自治区" selected>宁夏回族自治区</option>
                        <option value="辽宁省">辽宁省</option>
                        <option value="重庆市">重庆市</option>
                    </select>
                </th>
            </tr>
            <tr>
                <th align="right">自我介绍</th>
                <th align="left"><textarea name="intro" cols="25" rows="5" placeholder="这个家伙什么也没留下"></textarea></th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th bgcolor="gray" colspan="2">
                    <input type="submit" name="send" value="提交" >
                    <input type="reset" name="reset" value="重置" >
                </th>
        </tfoot>

    </table>
    </form>
</body>
</html>
  • 实现

作业二

  • 要求
  • 代码 
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <title>作业2</title>
</head>
<body>
    
    <h1>工商银行电子汇款单</h1>
    <table border="1px" style="border-collapse: collapse"  width="700px" hetght="200px" >
        <tr>
            <td colspan="2"><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4" align="center"><b>收<br>款<br>人</b></td>
            <td >户名</td>
            <td>老牟</td>
            <td rowspan="4" align="center"><b>付<br>款<br>人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>00000000001</td>
            <td><b>卡号</b></td>
            <td>00000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南金</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <td><b>网点</b></td>
            <td>工商江苏南京业务处理中心</td>
            <td><b>网点</b></td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td><ins>钞票</ins></td>
        </tr>
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币（大写）：壹圆整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td><i>2017年6月1日</i></td>
            <td colspan="2"><b>时间戳</b></td>
            <td><i>2017-06-01-13.00.00.00000</i></td>
        </tr>
    </table>
    <small>票据打印时间 : 20217-06-01 15:00:12 <br>
    <del>票据打印单位：江苏徐州业务中心</del><br>
    操作员 : 大曾</small>

</body>
</html>
  • 实现

作业三

  • 要求
  • 代码 
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业3</title>
</head>
<body>
    <h1>将进酒  <small>君不见黄河之水天上来</small></h1>
        <table>
            <tr>
                <td rowspan="14">
                    <img src="./李白.jpg" alt="" width="300px" height="440px"> 
                </td>
            </tr>
            <tr>
                <td>君不见黄河之水天上来，奔流到海不复回</td>
            </tr>
            <tr>
                <td>君不见高堂明镜悲白发，朝如青丝暮成雪。</td>
            </tr>
            <tr>
                <td>人生得意须尽欢，莫使金樽空对月。</td>
            </tr>
            <tr>
                <td>天生我材必有用，千金散尽还复来</td>
            </tr>
            <tr>
                <td>烹羊宰牛且为乐，会须一饮三百杯。</td>
            </tr>
            <tr>
                <td>岑夫子，丹丘生，将进酒，杯莫停。</td>
            </tr>
            <tr>
                <td>与君歌一曲，请君为我侧耳听。</td>
            </tr>
            <tr>
                <td>钟鼓馔玉不足贵，但愿长醉不复醒。</td>
            </tr>
            <tr>
                <td>古来圣贤皆寂寞，惟有饮者留其名。</td>
            </tr>
            <tr>
                <td>陈王昔时宴平乐，斗酒十千恣欢谑。</td>
            </tr>
            <tr>
                <td>主人何为言少钱，径须沽取对君酌。</td>
            </tr>
            <tr>
                <td>五花马，千金裘，</td>
            </tr>
            <tr>
                <td>呼儿将出换美酒，与尔同销万古愁。</td>
            </tr>     
</body>
</html>
  • 实现

作业四

  • 要求
  • 代码 
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业4</title>
</head>
<body>
    <h1>热门电影板块</h1><hr>
    <b>最近热门电影</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    热门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    最新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    豆瓣高分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    冷门佳片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    华语&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    欧美&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    韩国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    日本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    更多>> <hr>

    <table>
        <tr>
            <td>
                <a href="https://www.baidu.com/link?url=kv4V7ZQeDj8Q-BByo0xrLoXB-jqhemN-t02Iu4019ZB1Ky4UV5cZeetmZMKZSUHjeWqIuHfBnEr4n-t0QlYTJ8cbOysbUq7cOEbJGHbLgBroli4wgbS934q7z52Xwqb5&wd=&eqid=bb329db20000980600000002688a23de">
                    <img src="./1.jpg" alt="哈利·波特与魔法石"  width="200px" height="310px>"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=rxwnk-_CN0Mw-upEgXammXv4Kjpqv5HAgf9uXvVfHEXzR7XpqiQbtzHjGwNpEqhMUDXNrFBq7tMh3lA2Gi19AUu5dGvSKzEHPcLTZEcYUcA_VcuOF5o_Eab04asOGKvw&wd=&eqid=b8d45ccd0001954600000002688a23fa">
                    <img src="./2.jpg" alt="哈利·波特与密室"  width="200px" height="310px>"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=D7zm-rOtc77-dcpFxJ891H6QrDyGxroAg-jWMsyYs4WzeC9-otIG7YinnI9j9iT3QPm5UbFPP94MuMKSFGlim8KAbSRF4w8zc3jslcU7MoFOMYSwTodQguXODlZ9yPJR&wd=&eqid=b529c734000157f000000002688a2540">
                    <img src="./3.jpg" alt="哈利·波特与阿兹卡班的囚徒"  width="200px" height="310px>"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=TNyUjzyOskrKZS5HTzsOs5_8JAR4TMSENV2c2G1-30UZ5h2A2anUj5DxAPaTePuPUp5JOC364MisLipI8UyK7VlnuMQFczbuxmn3vS38fbobuQHkHhYrpiKWU6v_0B5l&wd<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业4</title>
</head>
<body>
    <h1>热门电影板块</h1><hr>
    <b>最近热门电影</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    热门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    最新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    豆瓣高分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    冷门佳片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    华语&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    欧美&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    韩国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    日本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    更多>> <hr>

    <table>
        <tr>
            <td>
                <a href="https://www.baidu.com/link?url=kv4V7ZQeDj8Q-BByo0xrLoXB-jqhemN-t02Iu4019ZB1Ky4UV5cZeetmZMKZSUHjeWqIuHfBnEr4n-t0QlYTJ8cbOysbUq7cOEbJGHbLgBroli4wgbS934q7z52Xwqb5&wd=&eqid=bb329db20000980600000002688a23de">
                    <img src="1.jpg" alt="哈利·波特与魔法石"  width="200px" height="310px"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=rxwnk-_CN0Mw-upEgXammXv4Kjpqv5HAgf9uXvVfHEXzR7XpqiQbtzHjGwNpEqhMUDXNrFBq7tMh3lA2Gi19AUu5dGvSKzEHPcLTZEcYUcA_VcuOF5o_Eab04asOGKvw&wd=&eqid=b8d45ccd0001954600000002688a23fa">
                    <img src="2.jpg" alt="哈利·波特与密室"  width="200px" height="310px"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=D7zm-rOtc77-dcpFxJ891H6QrDyGxroAg-jWMsyYs4WzeC9-otIG7YinnI9j9iT3QPm5UbFPP94MuMKSFGlim8KAbSRF4w8zc3jslcU7MoFOMYSwTodQguXODlZ9yPJR&wd=&eqid=b529c734000157f000000002688a2540">
                    <img src="3.jpg" alt="哈利·波特与阿兹卡班的囚徒"  width="200px" height="310px"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=TNyUjzyOskrKZS5HTzsOs5_8JAR4TMSENV2c2G1-30UZ5h2A2anUj5DxAPaTePuPUp5JOC364MisLipI8UyK7VlnuMQFczbuxmn3vS38fbobuQHkHhYrpiKWU6v_0B5l&wd=&eqid=df5185a10001acb200000002688a2556">
                    <img src="4.jpg" alt="哈利·波特与火焰杯"  width="200px" height="310px"></a></td>
        </tr>
        <tr>
            <td align="center">哈利·波特与魔法石</td>
            <td align="center">哈利·波特与密室</td>
            <td align="center">哈利·波特与阿兹卡班的囚徒</td>
            <td align="center">哈利·波特与火焰杯</td>
        </tr>
        <tr>
            <td>
                <a href="https://www.baidu.com/link?url=rFpUWWdOQ09Ry3fIf4d7VSmNOXdlBWVGLd2lKCdfC5NamK7jG6sBfxGGtBu5gEZ_-YIKCyHtSSTjwp6JQl__nZ2t94yNSkhX7jjHo5Kg-BCdnuWsconkgXKSqUanysA9&wd=&eqid=a49ce9820004e5b400000002688a25e7">
                    <img src="./5.jpg" alt="哈利·波特与凤凰社"  width="200px" height="310px"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=gtAiQo875PjUpHmo10iiTaj0ejQIherBe_dJ_ShQXf7s7ykX3Dbzq-d9qDI0p4bf2fuqAKo95oB_bBr9I-2B0fST0Q7RNXuRI0qF5hb8DxAikNfTPUk6_O74c90QhQq5&wd=&eqid=c22eb8bc0004cf3800000002688a25f4">
                    <img src="./6.jpg" alt="哈利·波特与混血王子"  width="200px" height="310px"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=pOtr3I1cOFNM2rQZ4qaZoT_FSVcdWnU4OBIOksJUy2zw_O4lBLfFCSZzYN_b5zEHvhGZkDFvJE4Om3la6kTEjkkwBmwpuP0gqLmPn7kywVMSH1vmTxEr2ke_gN0xiaI5&wd=&eqid=d9f787a10001bf2900000002688a2608">
                    <img src="./7.jpg" alt="哈利·波特与死亡圣器（上）"  width="200px" height="310px"></a></td>
            <td>
                <a href="https://www.baidu.com/link?url=e6bdT9yhYEJ-YZW49V8k0-CezW1L2uRZg3pg43T6-g5e-zrIx73eIbPEdLWjTzJoWZu7dnvLgH7VomY7yoGDhJpH8k3o43Gsvuh_rmV31pBqbqINNHdRH9iaFYorJFP1&wd=&eqid=bfea1f110005371200000002688a2616">
                    <img src="./8.jpg" alt="哈利·波特与死亡圣器（下）"  width="200px" height="310px"></a></td>
        <tr>
        <tr>
            <td align="center">哈利·波特与凤凰社</td>
            <td align="center">哈利·波特与混血王子</td>
            <td align="center">哈利·波特与死亡圣器（上）</td>
            <td align="center">哈利·波特与死亡圣器（下）</td>
        </tr>
  • 实现
    • 点击图片可以跳转相关播放页面

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布