html 页面制作_收据html-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_82293065/article/details/145042567

一网上转账电子账单

1 运用的网页标签

p 段落标签，一段是一个内容，段落之间存在间隙

中划线 del

表格标签

table

tr （table row）

td (table data cell)

thead

tbody

2代码编写

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
        meta表示不可见标签
        主要作用是用来修改页面属性
        如：页面的编码
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <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">
        <thead>
        <tr> 
            <td colspan="2"><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH000000000000000000005114</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>000000000000001</td>
            <td><b>卡号</b></td>
            <td>000000000000009</td>
           
        </tr>
        <tr>
            <td><b>地区</b></td>
            <td>吉林</td>
            <td><b>地区</b></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>5.11元</td>
             <td colspan="2"><b>手续费</b></td>
            <td>0.4元</td>
         </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币（大写）：壹圆整</td>
        </tr>
        <tr> 
            <td colspan="2"><b>交易时间</b></td>
            <td>2024年5月11日</td>
             <td colspan="2"><b>时间戳</b></td>
            <td>2024-06-01-13.00.00。00000</td>
         </tr>
        
        </body>
        
    </table>
    <p>票据打印时间：2024-06-01 15:00:12</p>
    <p><del>票据打印单位：江苏徐州业务中心</del></p>
    <p>操作员：大曾</p>

</body>
</html>

3.运行结果

二. 将进酒

1.使用标签

p 段落标签，一段是一个内容，段落之间存在间隙

table

tr （table row）

td (table data cell)

thead

tbody

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>将进酒<small>君不见黄河之水天上来</small></h1>
    <table>
        <tr>
            <td>
                <img src="./libai .png">
            </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>

3.运行结果

注意：

图片插入

三.热门电影

使用标签

p 段落标签，一段是一个内容，段落之间存在间隙

table

tr （table row）

td (table data cell)

thead

tbody

代码编写

<!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/>
    <table width="800">
        <tr>
            <td><b>最近热门电影</b></td>
            <td>热门</td>
            <td>最新</td>
            <td>豆瓣高分</td>
            <td>冷门佳片</td>
            <td>华语</td>
            <td>欧美</td>
            <td>韩国</td>
            <td>日本</td>
            <td width="100"></td>
            <td>更多&gt;&gt</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <td><img width="200" height="243" src="./猜火车.png"></td>
            <td><img width="200" height="243" src="./贝尔科实验.png"></td>
            <td><img width="200" height="243" src="./加州公路.png"></td>
            <td><img width="200" height="243" src="./歌声不绝.png"></td>
        </tr>
        <tr>
            <td><p>猜火车</p></td>
            <td>贝尔科实验 6.0</td>
            <td>加州公路巡警 6.8</td>
            <td>歌声不绝 6.3</td>
        </tr>
        <tr>
            <td><img width="200" height="243" src="./明日得我.png"></td>
            <td><img width="200" height="243" src="./速度与激情9.png"></td>
            <td><img width="200" height="243" src="./极速特工.png"></td>
            <td><img width="200" height="243" src="./jinganglang .png"></td>
        </tr>
        <tr>
            <td><p>明日的我与昨日的我</p></td>
            <td><p>速度与激情8</p></td>
            <td><p>极速特工</p></td>
            <td><p>金刚狼3：殊死一战</p></td>
        </tr>
    </table>
    
    
</body>
</html>

运行结果