web前端实验2

最新推荐文章于 2024-11-14 15:33:48 发布
最新推荐文章于 2024-11-14 15:33:48 发布
阅读量879 收藏 14
点赞数 24
分类专栏： 前端学习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ngczx/article/details/137087973
版权
这篇文章描述了web前端课程中的两次实验，包括HTML结构（Home.html）展示了一个简单的网站布局，包含了图片、链接和表格；以及Information.html和Login.html中的表单设计，涉及个人信息填写和登录功能。同时，Register.html展示了用户注册表单，而shopping.html则展示了购物车功能，包括书籍选择和删除选项。
摘要由CSDN通过智能技术生成

web前端课程第二次实验。

Home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <img src="1.png">
 <br> <br>
 <div>
     欢迎您来到叮当图书网,<a href="Information.html">注册</a>或者<a href="Login.html">登录</a>成为我们的会员，然后就可以享受本站提供的各种会员服务
 </div>

      <table>
         <caption style="text-align: center">图书热销榜</caption>
          <tr>
              <td width="50px" >名次</td>
              <td width="200px">书名</td>
              <td width="200px">作者</td>
              <td width="100px">出版社</td>
              <td width="50px">定价</td>
              <td width="50px">叮当价</td>
          </tr>
          <tr>
              <td>1</td>
              <td>快乐的邮递员</td>
              <td>[英] 艾伦阿尔伯格住等著</td>
              <td>北京联合出版公司</td>
              <td>￥215.00</td>
              <td>￥215.00</td>
              <td> <a href="">去看看</a></td>
          </tr>
          <tr>
              <td>1</td>
              <td>快乐的邮递员</td>
              <td>[英] 艾伦阿尔伯格住等著</td>
              <td>北京联合出版公司</td>
              <td>￥215.00</td>
              <td>￥215.00</td>
              <td> <a href="">去看看</a></td>
          </tr>
          <tr>
              <td>1</td>
              <td>快乐的邮递员</td>
              <td>[英] 艾伦阿尔伯格住等著</td>
              <td>北京联合出版公司</td>
              <td>￥215.00</td>
              <td>￥215.00</td>
              <td> <a href="">去看看</a></td>
          </tr>
          <tr>
              <td>1</td>
              <td>快乐的邮递员</td>
              <td>[英] 艾伦阿尔伯格住等著</td>
              <td>北京联合出版公司</td>
              <td>￥215.00</td>
              <td>￥215.00</td>
              <td> <a href="">去看看</a></td>
          </tr>
      </table>
    <div>叮当图书网(中国)有限公司2019(c)版权所有</div>
</body>
</html>

information.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container {
        width: 80%; /* 容器宽度 */
        height: 400px; /* 容器高度 */
        overflow-y: auto; /* 启用垂直滚动条 */
        border: 1px solid #ccc; /* 边框样式，可选 */
        padding: 10px; /* 内边距，可选 */
        margin: 0 auto; /* 水平居中，可选 */
    }
</style>
<body>
<form action="http://localhost">
    <fieldset>
        <legend style="text-align: center">个人资料</legend>
        姓名:<input type="text" name="username"> <br>  <br>  <br>
        性别:<input type="radio" name="sex"> 男
        <input type="radio" name="sex"> 女 <br>  <br>  <br>
        出生日期 <input type="text" name="birthday"> <br>  <br>  <br>
       主要经历<textarea rows="4" cols="50"></textarea>
        <br>  <br>  <br>
        兴趣爱好 <input type="checkbox" name="fruit">
        <label>唱歌</label>
        <input type="checkbox" name="fruit">
        <label>打球</label>
        <input type="checkbox" name="fruit">
        <label>下棋</label>
        <input type="checkbox" name="fruit">
        <label>上网</label>
    </fieldset>
   <fieldset>
       <legend style="text-align: center">专业与课程</legend>
       所学专业:
       <select id="major">

           <option>计算机科学与技术</option>
           <option>大数据</option>
           <option>网络工程</option>
           <option>软件工程</option>
       </select>


           <!-- 添加更多内容 -->


   </fieldset>
    <input type="button" value="提交按钮">
    <input type="submit" value="真正的提交按钮">
    <input type="reset" value="重置按钮">
</form>

</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
<form  action="https://www.acwing.com/solution/content/110471/">
    <h2>用户登录</h2>
    <div>
        用户名:<input type="text" name="username">
    </div>
    <div>
        密码 : <input type="password" name="password">
    </div>
    <br>
    <div class="form-group">
        <button type="submit" class="btn"><img src="login.png" alt="Login Icon"></button>
        <button type="button" class="btn"><img src="register.png" alt="Register Icon" ></button>
    </div>
</form>

</body>
</html>

Register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <fieldset>
        <div>
            *用户名<input type="text" name="username">
        </div>
        <div>
            *密码<input type="password" name="Repassword">
        </div>
        <div>
            *确认密码<input type="password" name="Repassword">
        </div>
        <div>
            性别<input type="radio" name="sex"> 男
            <input type="radio" name="sex"> 女生
        </div>
        <div>
            出生年月<input type="text" placeholder="mm/dd//yyyy" name="birthday">
        </div>
        <div>
            邮箱<input type="email" name="email">
        </div>
        <div>
            职业:<select>
            <option>学生</option>
            <option>老师</option>
            <option>医生</option>
        </select>
        </div>
        <div>
            个人爱好:
            <input type="checkbox" name="hobby">
            <label>电脑网络</label>
            <input type="checkbox" name="hobby">
            <label>影视娱乐</label>
            <input type="checkbox" name="hobby">
            <label>棋牌娱乐</label>
            <input type="checkbox" name="hobby">
            <label>读书读报</label>
            <input type="checkbox" name="hobby">
            <label>美酒佳肴</label>
            <input type="checkbox" name="hobby">
            <label>绘画书法</label>
        </div>
        <div>
            <label>个人说明</label>
            <textarea cols="50" rows="5"></textarea>
        </div>
        <div>
            <input type="submit"> 提交
            <input type="reset"> 清除
        </div>

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

shopping.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>您的位置:<a href="Home.html">首页</a> >我的购物车</div>

<form action="Home.html">
     <table>
         <tr>
             <td  width="100px"> <input type="checkbox"> 全选 </td>
             <td width=""></td>
             <td width="200px"> 书籍名称</td>
             <td width="70px"> 单价</td>
             <td width="70px"> 数量</td>
             <td width="70px"> 小计元</td>
             <td width="70px"> 删除</td>
         </tr>
         <tr>
             <td width="50px"> <input type="checkbox"> </td>
             <td width="100px"> <img src="a.png" width="50px" height="50px"></td>
             <td>零基础设计自学入门到职场进阶</td>
             <td>52.70f</td>
             <td> <input type="number"></td>
             <td></td>
             <td><a href="">删除</a></td>
         </tr>
         <tr>
             <td width="50px"> <input type="checkbox"> </td>
             <td width="100px"> <img src="a.png" width="50px" height="50px"></td>
             <td>零基础设计自学入门到职场进阶</td>
             <td>52.70f</td>
             <td> <input type="number"></td>
             <td></td>
             <td><a href="">删除</a></td>
         </tr>
         <tr>
             <td width="50px"> <input type="checkbox"> </td>
             <td width="100px"> <img src="a.png" width="50px" height="50px"></td>
             <td>零基础设计自学入门到职场进阶</td>
             <td>52.70f</td>
             <td> <input type="number"></td>
             <td></td>
             <td><a href="">删除</a></td>
         </tr>
     </table>
    <button>批量删除</button>   <div style="text-align: right" >商品总价（不包含运费）:元</div>
    <br>
     <div style="text-align: right">
         <button  >立刻购买</button>
     </div>
</form>
</body>
</html>
全栈阿星
关注
专栏目录
如何设计前台网页
Mind_programmonkey的博客
08-09 5797
这里介绍一个网站，bootstrap的UI库，点击打开链接  ，设计一个简单的登录界面 , 这里给出源码： 管理员登录界面 管理员登录 用户名
web前端开发实验——1
qq_46476515的博客
10-15 1325
web前端开发应用作业 1
web前端开发实验——2
qq_46476515的博客
10-16 2166
web前端开发实验——2
Web前端2
clshz_hwk的博客
10-28 1769
Web前端学习
web前端开发实验——4
qq_46476515的博客
10-17 792
web前端开发实验——4
Web前端 实验 实验三（1）.7z
11-19
实验的标题"Web前端 实验 实验三（1）.7z"表明这是一个关于Web前端开发的学习项目，可能是一个逐步指导或实战练习，旨在帮助学习者掌握网页制作的基本技能。 首先，HTML（HyperText Markup Language）是网页内容的...
Web前端开发技术（第2版）储久良课后实验材料及源代码
07-15
《Web前端开发技术（第2版）》是储久良教授编著的一本关于Web前端开发的教科书，此压缩包包含该书的课后实验材料与源代码，是学习Web前端技术的重要辅助资源。储久良教授在Web开发领域有着深厚的理论基础和丰富的...
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
web前端实验项目叮叮书店.zip
12-20
web前端实验项目叮叮书店
----web前端 实验二
TobEABetterMan_的博客
03-22 545
学习目标： 前两道 第一题： 提示：仅做参考，记得修改class 和 id <!DOCTYPE html> <html lang = "en"> <head> <meta charset='utf-8'> <title>Document-2</title> </head> <body> <div id="root">
web前端开发课后实验六答案
01-24
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理，由浅入深、循序渐进地引导读者快速...
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 498
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端（1）——快速入门HTML
最新发布
m0_63086198的博客
11-14 623
参考： W3school 1. HTML 我使用的是vs code，在使用之前，先安装以下几个插件： Auto Rename Tage HTML CSS Support Live Server 1.1 HTML标签 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键 字。 标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如
前端 Flex 布局语法详解
ning的博客
11-10 1128
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
Vue中的常用指令
m0_62388400的博客
11-12 1143
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
后端一次性返回数据，前端分页
qq_39307266的博客
11-14 175
vue 结合elementUI 分页组件，后端一次性返回数据，前端做分页。1.template中。js从后端获取总数据。
【前端基础】Javascript取整函数以及向零取整方式
警警的博客
11-11 725
在JavaScript中，有多种方式可以对数字进行取整操作，即去掉小数部分，只保留整数部分。在JavaScript中，有多种方法可以对数字进行取整操作。这些方法各有特点，适用于不同的场景。方法会去掉一个数字的小数部分，返回其整数部分，但不进行四舍五入。在处理数字时，会将操作数转换为32位整数，从而截断小数部分。每种方法都有其适用的场景和限制，选择时需根据具体需求进行权衡。也是一种按位取整的方式，效果与。类似，会截断小数部分。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 977
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
springboot整合websocket实现复制目录进度推送
前人栽树，后人乘凉。
11-14 225
/ 替换为你的WebSocket地址。启动Spring Boot应用程序，然后访问前端页面并触发文件复制操作。例如，通过浏览器访问。你应该能够在前端看到实时的复制进度。创建一个控制器来触发复制操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈阿星

您的支持是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值