HTML示例

最新推荐文章于 2024-07-09 19:50:17 发布
最新推荐文章于 2024-07-09 19:50:17 发布
阅读量112 收藏
点赞数 2
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65466288/article/details/136850655
版权
这篇文章展示了四个不同主题的HTML页面示例：古诗词展示、工商银行电子汇款单详情、用户注册表单以及豆瓣电影热门动漫板块。这些页面包含了基础的HTML结构和内容，展示了在实际应用中网页设计和技术的结合。
摘要由CSDN通过智能技术生成

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>
    <h1>将进酒 &nbsp; <small>君不见黄河之水天上来</small></h1>
   <div>
    <img src="D:\OPEN\WEB--Q\code\作业\素材\lib.jpg"
    width="400px" height="600px" align="lift">
     <h7>君不见黄河之水天上来，奔流到海不复回。</h7>
      君不见高堂明镜悲白发，朝如青丝暮成雪。
      人生得意须尽欢，莫使金樽空对月。
      天生我材必有用，千金散尽还复来。
     烹羊宰牛且为乐，会须一饮三百杯。
     岑夫子，丹丘生，将进酒，杯莫停。
    与君歌一曲，请君为我倾耳听。
    钟鼓馔玉不足贵，但愿长醉不复醒。
    古来圣贤皆寂寞，惟有饮者留其名。
    陈王昔时宴平乐，斗酒十千恣欢谑。
    主人何为言少钱，径须沽取对君酌。
    五花马，千金裘，
  呼儿将出换美酒，与尔同销万古愁。</h7> 
   </div>
    
</body>
</html>

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><br>
    <table border="3px">
        <tr>
            <th colspan="2">回单类型</th>
            <td>网上转账汇款</td>
            <th colspan="2">指令序号</th>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <th rowspan="4">收款人</th>
            <td>户名</td>
            <td>老牟</td>
            <th rowspan="4">付款人</th>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <th>卡号</th>
            <td>000000000001</td>
            <th>卡号</th>
            <td>000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <th>网点</th>
            <td>工商江苏南京业务处理中心</td>
            <th>网点</th>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <th colspan="2">币种</th>
            <td>人民币</td>
            <th colspan="2">钞汇标志</th>
            <td>钞票</td>
        </tr>
        <tr>
            <th colspan="2">金额</th>
            <td>1.00元</td>
            <th colspan="2">手续费</th>
            <td>0.57元</td>
        </tr>
        <tr>
            <th colspan="2">合计</th>
            <td colspan="4">人民币（大写）：壹元整</td>
        </tr>
        <tr>
            <th colspan="2">交易时间</th>
            <td>2017年6月1日</td>
            <th colspan="2">时间戳</th>
            <td>2017-6-1-13.00.00. 00000</td>
        </tr>
    </table>
    <h7>票据打印时间：2017-06-01 15:00:12</h7><br>
        <h7> <s>票据打印单位：江苏徐州业务中心</s></h7><br>
        操作员：大曾


    
</body>
</html>

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>
    <form action="https:www.baidu.com">
        <table border="3px">
            <tr><td>用户注册</td></tr>
            <tr><td>
                    <p>用户名：<input type="text" name="用户名"><br>
                    </p></td></tr>
            <tr><td>
                <p> 密码：<input type="password" name="密码"><br></p>
                    </td></tr>
            <tr><td>
                <p>性别：
                <input type="radio" name="gendar" value="男">男
                <input type="radio" name="gendar" value="女">女
               </p></td></tr>
               <tr><td><p>爱好：
                <input type="checkbox" name="game" value="摄影">摄影
                <input type="checkbox" name="game" value="摄影">血战沙场
                <input type="checkbox" name="game" value="摄影">醉生梦死
               </p></td></tr>
       <tr><td><p>邮箱
        <input type="email" name="email">
       </p></td></tr>
       <tr><td><p>
        <select name="province">
            <option value="">省份</option>
            <option value="province1">陕西</option>
            <option value="province1">甘肃</option>
            <option value="province1">宁夏</option>
            <option value="province1">青海</option>
            <option value="province1">新疆</option>
            <option value="province1">四川</option>
            <option value="province1">三亚</option>
           </select>
       </p></td></tr>
       <tr><td>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </td></tr>

        
    </form>
</body>
</html>

4.豆瓣电影

<!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><br>
    <hr>

    <h7>
        <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;
        更多&gt;&gt;
    </h7>
    <hr>

    <div>
        <img src="D:\OPEN\WEB--Q\code\作业\素材\遮天.jpg"
    width="200px" height="300px" >
    <img src="D:\OPEN\WEB--Q\code\作业\素材\仙逆.jpg"
    width="200px" height="300px" >
    <img src="D:\OPEN\WEB--Q\code\作业\素材\龙族.jpg"
    width="200px" height="300px" >
    <img src="D:\OPEN\WEB--Q\code\作业\素材\反套.jpg"
    width="200px" height="300px" >
    </div><br>
    <p>
        <h7>&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;&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;最强反套路系统
        </h7>
    </p>
    <p>
        <div>
            <img src="D:\OPEN\WEB--Q\code\作业\素材\斗罗大陆.jpg"
    width="200px" height="300px" >
    <img src="D:\OPEN\WEB--Q\code\作业\素材\神印王座.jpg"
    width="200px" height="300px" >
    <img src="D:\OPEN\WEB--Q\code\作业\素材\完美世界.jpg"
    width="200px" height="300px" >
    <img src="D:\OPEN\WEB--Q\code\作业\素材\诛仙.jpg"
    width="200px" height="300px" >
        </div>
    </p>
    <p>
        <h7>&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;&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;诛仙
        </h7>
    </p>

    
</body>
</html>

STARS-M
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
简单的index.html示例,HTML option index用法及代码示例
weixin_29807369的博客
06-09 1975
DOM选项索引属性用于设置或返回下拉列表中选项值的索引位置。索引从零开始。用法:它用于返回index属性。optionObject.index用于设置索引属性。optionObject.index = integer属性值：它在下拉菜单列表中定义选项值的索引位置的整数值。返回值：它返回一个数字值，表示一个选项值的索引位置。示例1：本示例说明了如何在下拉列表中返回选项值。DOM option ind...
HTML代码示例和介绍
weixin_45568391的博客
10-22 4543
HTML基本的格式 <!DOCTYPE html> <!-- 声明文档。定义html --> <html lang="en"> <!-- 元素是页面的根元素 --> <head> <!-- 元素包含文档的元数据 --> <meta charset="UTF-8"> <!-- 定义网页编码格式 --> <title&gt
Nginx配置静态html示例
热门推荐
dujianxiong的博客
01-23 1万+
server { listen 8180; server_name localhost; charset utf-8; access_log /usr/local/nginx/nginx/logs/v_access.log main; error_log /usr/local/nginx/nginx/logs/v...
HTML 实例
一个臭小孩的修炼之路
12-14 324
HTML教程-------HTML简介
一个商品展示页面的html示例模板
09-15
商品展示页面html模板 这个示例包含了一个简单的页面结构，包括页眉、商品容器以及商品项目。每个商品项目包括商品图片、标题和价格。您可以根据自己的需求，替换示例中的图片、商品标题和价格，并根据需要添加更多...
2024龙年烟花html示例
02-27
2024龙年春节烟花效果的 HTML代码示例，在黑色天空随机出现黄色闪烁烟花
前端、B端HTML示例
08-16
B端（Business-end）HTML示例通常指的是为企业级应用设计的前端页面模板，这些模板通常用于后台管理系统、数据分析平台或其他面向企业内部员工的工具。在本压缩包“B端示例”中，我们可以预见到包含了一系列用于展示...
ampHtmlFirebaseBHC:波士顿hotcars amp html示例2018
04-01
【标题】"ampHtmlFirebaseBHC:波士顿hotcars AMP HTML 示例2018" 涉及到的是一个2018年的项目，它使用了AMP (Accelerated Mobile Pages) 技术和Firebase集成，创建了一个针对移动设备优化的网页应用。AMP是一种开源...
去除HTML标签删除HTML示例代码
01-03
代码如下: /// <summary> /// 去除HTML标签 /// </summary> /// ”Htmlstring”></param> /// <returns></returns> public static string DeleteHTML(string Htmlstring) { //删除HTML Htmlstring = Regex.Replace...
HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
朝阳39的博客
07-05 473
访问接口，返回文件流进行下载时，也会用到！
JS之防抖和节流
喵喵的博客
07-09 589
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 300
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
【HTML】-解决页面内容无法选择、复制问题
宣晨光
07-06 269
1、使用【Simple AllowCopy】 插件 2、移除CSS样式webkit-user-select: none; user-select: none;
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 138
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
html&css基础
antyuki的博客
07-09 404
/</</</</
HTML_表单 和 表单案例
secret010的博客
07-05 276
【代码】HTML_表单 和 表单案例。
【前端从入门到精通：第二课：HTML头部标签常用标签】
weixin_50556117的博客
07-06 623
可参考百度百科。
HTML(30)——动画
最新发布
m0_74386799的博客
07-09 372
实现步骤@keyframes 动画名称{from{}to{}@keyframes 动画名称{0%{}10%{}....100%{}2.使用动画示例：盒子的宽度从200变到400px，两个状态一般用from to的形式。
html示例代码
06-02
以下是一个简单的 HTML 示例代码： ```html <!DOCTYPE html> <html> <title>My Website <h1>Welcome to my website! <li><a href="#">Home</a></li> <li><a href="#">About</a></li> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值