HTML--简单网页基础

原创 已于 2025-01-09 22:31:29 修改
· 216 阅读 · 5 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #javascript

于 2025-01-08 22:28:20 首次发布

一，网上转账电子账单

1.利用到的标签

P   段落标签，一段是一个内容，段落之间存在间隔

hn (1-6) 标题标签

br   换行

文本修饰标签（加粗，加斜，加下划线，中划线等等效果）

加粗：strong / b

中划线：del

2.代码编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>工商银行电子汇款单</title>

</head>

<body>

    <h1>工商银行电子汇款单</h1>

    <table border="1" cellpadding="5" cellspacing="0" width="1000">

    <tr>

        <td colspan="2"><b>回单类型</b></td>

        <td>网上转账汇款</td>

        <td colspan="2"><b>指令序号</b></td>

        <td>HQH000000000000013878172</td>

    </tr>

   <tr>

        <td rowspan="4" width="10" ><b>收款人</b></td>

        <td width="50">户名</td>

        <td>老牟</td>

        <td rowspan="4" width="10" ><b>付款人</b></td>

        <td width="50">户名</td>

        <td>老刘</td>

   </tr>

   <tr>

    <td><b>卡号</b></td>

    <td>0000000000001</td>

    <td><b>卡号</b></td>

    <td>000000000002</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>钞票</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>人民币（大写）：壹元整</td>

   </tr>

   <tr>

    <td colspan="2"><b>交易时间</b></td>

    <td>2017年6月1日</td>

    <td colspan="2"><b>时间截止</b></td>

    <td>2017-06-01-13.00.00 00000</td>

   </tr>

<table>

    <p>票据打印时间：2017年-06-01 15：00：12</p>

    <p><del>票据打印单位：江苏徐州业务中心</del></p>

    <p>操作员：大曾</p>

</table>

</body>

</html>

3.运行结果

二，李白将进酒

1.所用到的标签

图片标签：展示图片的标签， “ <img> ”标签就是图片标签。

属性：一般以键值对形式在标签的开始部分

2.图片编辑

控制图片宽度，在百度搜索张李白的图片并复制地址

<img width="600"  src="https://img0.baidu.com/it/u=3477470085,2384262406&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800">

3.代码编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>李白诗词</title>

</head>

<body>

    <h1>将进酒   <small>君不见黄河之水天上来</small></h1>

<table>

    <tr>

        <td>

            <img width="600"  src="https://img0.baidu.com/it/u=3477470085,2384262406&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800">

        </td>

        <td>

            <p>君不见黄河之水天上来，奔流到海不复回。</p>

            <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>

            <p>人生得意须尽欢，莫使金樽空对月。</p>

            <p>天生我材必有用，千金散尽还复来。</p>  

            <p>烹羊宰牛且为乐，会须一饮三百杯。</p>

            <P>岑夫子，丹丘生，将进酒，杯莫停。</P>

            <p>与君歌一曲，请君为我倾耳听。</p>

            <p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>

            <p>古来圣贤皆寂寞，惟有饮者留其名。</p>

            <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>

            <p>主人何为言少钱，径须沽取对君酌。</p>

            <p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>

        </td>

    </tr>

</table>
</body>
</html>

4.运行结果

三，豆瓣电影

1.代码编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>豆瓣电影</title>

</head>

<body>

    <h2>热门电影板块</h2>

    <hr/>
    <title width="800"></title>

        <tr>

            <td><b>最近的热门电影</b></td>

            <td>热门 </td>

            <td>最新 </td>

            <td>豆瓣高分 </td>

            <td>冷门佳片 </td>

            <td>华语 </td>

            <td>欧美 </td>

            <td>韩国 </td>

            <td>日本 </td>

            <td width="300"></td>

            <td>更多>></td>

        </tr>

    </table>

        <hr/>

<table>

    <tr>

        <td><img width="205" heigth="100" src="https://ts1.cn.mm.bing.net/th/id/R-C.7a70696d3280b51b902ee9b280a7182c?rik=RxzJncxOgTmBYA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20110%2f115%2fw2048h2867%2f20241228%2f7d0b-be049e6cf11cb7fb6a47df7d228f6300.jpg&ehk=BWviJKwTU%2bopHc2msRllu0pdJ9GgkoaA81eaEdi0JBc%3d&risl=&pid=ImgRaw&r=0"></td>

        <td><img width="195" heigth="300" src="https://image11.m1905.cn/uploadfile/2023/0921/20230921053152968951.jpg"></td>

        <td><img width="195" heigth="300" src="https://ts1.cn.mm.bing.net/th/id/R-C.0788775000fd232fa6550023b3b337b2?rik=A%2bFe1D4B39ehSA&riu=http%3a%2f%2fk.sinaimg.cn%2fn%2fsinakd20230809ac%2f200%2fw2000h3000%2f20230809%2fc808-bac12d6b80257c821ad3ecd299fdd03e.jpg%2fw700d1q75cms.jpg%3fby%3dcms_fixed_width&ehk=Y5t1uEGnnqRednqTA3vDt1siZ1xuHgpUto1oMJysEN8%3d&risl=&pid=ImgRaw&r=0"></td>

        <td><img width="215" heigth="100" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.z8_RXlKpAltTKSM1744CWwHaKD?rs=1&pid=ImgDetMain"></td>

       

    </tr>

    <tr>
        <td><p>小小的我</p></td>
        <td>野孩子</td>
        <td>孤注一掷</td>
        <td>毒液</td>
    </tr>

    <tr>

        <td><img width="200" heigth="200" src="https://blog.bigbigwork.com/upload/image/20240726/1721984545544016703.jpg"></td>

        <td><img width="210" heigth="200" src="https://img.zcool.cn/community/01de95623a9ea10002c3290fd5626a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100"></td>

        <td><img width="200" heigth="200" src="https://ts1.cn.mm.bing.net/th/id/R-C.4830a3a699d7ce8f3f77c60e8b980c57?rik=0cDsdDS%2bifD0lg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20241118ac%2f300%2fw1080h1620%2f20241118%2f08b4-2a7478f7ed4bb0edf8a888dd3e46aa60.jpg&ehk=A%2bEUj32EYqqYGCWuB26%2fihdmeWTa8zGTPdDvIbk2Bx4%3d&risl=&pid=ImgRaw&r=0"></td>

        <td><img width="210" heigth="200" src="https://ts1.cn.mm.bing.net/th/id/R-C.99079213a25e8f260b72c38326ac44f0?rik=VGsGcFCMfIEbzg&riu=http%3a%2f%2fpuui.qpic.cn%2fvcover_vt_pic%2f0%2fpb69zpzabgg1t7n1566977168%2f0&ehk=rXww%2bdqCmhuM5zw5A%2f%2bwSUZMBR8IZ7bc4li9rq5lLp4%3d&risl=&pid=ImgRaw&r=0"></td>
    </tr>
    <tr>
        <td><p>抓娃娃</p></td>
        <td><p>误杀</p></td>
        <td><p>好东西</p></td>
        <td><p>哈利波特</p></td>
    </tr>
</table>
</body>
</html>

2.运行结果

四，用户信息的登录和注册页面

1.代码编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登陆注册</title>

</head>

<body>

    <form name="form1" method="post" action="">

    <table width="300" border="0" cellpadding="1" cellspacing="2">

        <tr height="30">

            <td colspan="2" align="center" bgcolor="#CCCCCC">用户注册</td>

        </tr>

        <tr height="30">

            <td width="91" align="right" bgcolor="#E6E6E6">用户名</td>

            <td width="198" bgcolor="#E6E6E6">

                <input name="UserName" type="text" maxlength="20" size="15">

            </td>

        </tr>

    <tr height="30">

        <td align="right" bgcolor="#E6E6E6">性别</td>

        <td bgcolor="#E6E6E6">

            <input name="sex" type="radio" value="男" checked> 男

            <input type="radio" name="sex" value="女"> 女

        </td>

    </tr>

    <tr height="30">

        <td align="right" bgcolor="#E6E6E6">爱好</td>

        <td bgcolor="#E6E6E6">

            <input name="like" type="checkbox" value="checkbox" > 写作

            <input name="like" type="checkbox" value="checkbox" > 听音乐

            <input name="like" type="checkbox" value="checkbox" > 体育

            <input name="like" type="checkbox" value="checkbox" > 唱歌

            <input name="like" type="checkbox" value="checkbox" > 刷抖音

        </td>

    </tr>

    <tr height="30">

        <td align="right" bgcolor="#E6E6E6">省份</td>

        <td bgcolor="#E6E6E6">

            <select name="province">

              <option value="shanxi" selected>陕西省</option>

              <option value="shanxi" selected>山西省</option>

              <option value="shanxi" selected>河北省</option>

              <option value="shanxi" selected>河南省</option>

              <option value="shanxi" selected>西藏省</option>

              <option value="shanxi" selected>四川省</option>

            </select>

        </td>

    </tr>

    <tr height="30">

        <td align="right" bgcolor="#E6E6E6">自我介绍</td>

        <td bgcolor="#E6E6E6">

        <textarea name="intro" cols="25" rows="5" id="intro"></textarea>

        </td>

    </tr>

     <tr height="30">

        <td colspan="2" align="center" bgcolor="#ccccc">

        <input type="submit" name="send" value="提交">

        <input type="submit" name="send" value="重置">

       </td>

     </tr>

     </table>

    </form>

    </body>

</html>

2.运行结果

五，QQ注册页面

1.代码编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>QQ注册页面</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <div class="container">

        <div class="image-container">

            <img width="220" heigth="200" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EkVoXf0woJQl96dh9nUHDQHaHa?rs=1&pid=ImgDetMain">

        </div>

        <div class="form-container">

            <h1>欢迎注册QQ</h1>
            <form>

                <div class="form-group">

                    <label for="nickname">昵称</label>

                    <input type="text" id="nickname" placeholder="昵称">

                </div>

                <div class="form-group">

                    <label for="password">密码</label>

                    <input type="password" id="password" placeholder="密码">

                </div>

                <div class="form-group">

                    <div class="phone-code">

                        <select>

                            <option value="+86">+86</option>

                        </select>

                        <label for="phone-number">手机号码</label>

                        <input type="text" id="phone-number" placeholder="手机号码">

                    </div>

                </div>

                <div class="form-group">

                    <button type="submit">立即注册</button>

                </div>

                <div class="agreement">

                    <input type="checkbox" id="agree">

                    <label for="agree">我已阅读并同意相关服务协议和隐私政策</label>

                </div>

            </form>

        </div>

    </div>

</body>

</html>

2.运行结果

Aa hui
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值