javaweb实训第一天作业练习

最新推荐文章于 2022-08-15 02:19:12 发布
最新推荐文章于 2022-08-15 02:19:12 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dearQiHao/article/details/117149366
版权

目录

练习1

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
    <style>
        .work1 {
            border-collapse: collapse;
            width: 500px;
            height: 300px;
        }
        
        .work1 th {
            background-color: aqua;
            border: 2px solid blue;
        }
        
        .work1 td {
            border: 2px solid blue;
        }
    </style>
</head>

<body>
    <table class="work1" border="1">
        <tr>
            <th>ID</th>
            <th>新闻标题</th>
            <th>点击量</th>
            <th>发布时间</th>
            <th>操作</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

练习2

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
    <style>
        img {
            width: 100px;
        }
        
        .work2 {
            border-collapse: collapse;
            width: 500px;
            height: 300px;
        }
        
        .work2 th,
        .work2 td {
            border: 2px solid rgb(223, 67, 176);
        }
    </style>
</head>

<body>
    <table class="work2">
        <tr>
            <th colspan="3">星期一菜谱</th>
        </tr>
        <tr>
            <td rowspan="2">素菜</td>
            <td>青草</td>
            <td>花椒</td>
        </tr>
        <tr>
            <td>小葱</td>
            <td>炒白菜</td>
        </tr>
        <tr>
            <td rowspan="2">荤菜</td>
            <td>油焖</td>
            <td>海参</td>
        </tr>
        <tr>
            <td>红烧肉
                <img src="./images/i1.jpg" alt="">
            </td>
            <td>烤全羊</td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

练习3

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
    <style>
        .work3 th,
        .work3 td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <table class="work3">
        <caption>课程表</caption>
        <tr>
            <th>项目</th>
            <th colspan="5">上课</th>
            <th colspan="2">休息</th>
        </tr>
        <tr>
            <th>星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

练习4

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
    <style>
        img {
            width: 100px;
        }
        
        .work4 {
            border-collapse: collapse;
            box-sizing: border-box;
        }
        
        .work4 td {
            border: 1px solid black;
        }
        
        .work4 img {
            padding: 3px;
        }
    </style>
</head>

<body>
    <table class="work4">
        <tr>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
            <td>
                <img src="./images/4.jpg" alt="">
            </td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

练习5

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
</head>

<body>
    <h3>今天你要去哪里呢</h3>
    <ul type="disc">
        <li><a href="#">新浪</a></li>
        <li><a href="#">搜狐</a></li>
        <li><a href="#">百度</a></li>
        <li><a href="#">腾讯QQ</a></li>
        <li><a href="#">网易</a></li>
        <li>
            <h4>去我自己的页面看看：</h4>
            <ol>
                <li><a href="#">page1</a></li>
                <li><a href="#">page1</a></li>
                <li><a href="#">page1</a></li>
                <li><a href="#">page1</a></li>
            </ol>
        </li>
    </ul>
</body>

</html>

在这里插入图片描述

练习6

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
</head>

<body>
    <h2>定义列表</h2>
    <p style="color: red;">说明：定义列表相当于词条解释说明</p>
    <hr>
    <dl>
        <dt>HTML的概念</dt>
        <dd></dd>
        <dt>CSS层叠样式表</dt>
        <dd></dd>
        <dt>Javascript脚本程序</dt>
        <dd></dd>
    </dl>
</body>
</html>

在这里插入图片描述

练习7

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
    <style>
        table{
            background-color:seashell;
        }
        th {
            color: rosybrown;
            font-size: 20px;
        }

        button {
            color: seagreen;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <form action="#">
        <center>
            <table border="1">
                <tr>
                    <th colspan="3">1. 会员登录名和密码</th>
                </tr>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>5-15位，请使用英文(a-z，A-Z)、数字(0-9)</td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" name="" id="">
                    </td>
                    <td>5-15位，请使用英文(a-z) 、数字(0-9)注意区分大小写;密码不能与登录名相同;易记;难猜
                    </td>
                </tr>
                <tr>
                    <td>再次输入密码：</td>
                    <td>
                        <input type="password" name="" id="">
                    </td>
                    <td>两次输入的密码必须一致</td>
                </tr>
                <tr>
                    <th colspan="3">2. 姓名和联系方式</th>
                </tr>
                <tr>
                    <td>真实姓名：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <input type="radio" name="gender" id="">先生
                        <input type="radio" name="gender" id="">小姐
                    </td>
                </tr>
                <tr>
                    <td>电子邮箱：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        非常重要！这是客户与您联系的首选方式，请一定填写真实。

                    </td>
                </tr>
                <tr>
                    <td>固定电话：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>区号+电话号码</td>
                </tr>
                <tr>
                    <td>公司所在地：</td>
                    <td colspan="2">
                        <select>
                            <option value="">北京</option>
                        </select>
                        <select>
                            <option value="">东城</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td>街道地址：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        填写县(区)、街道、门牌号

                    </td>
                </tr>
                <tr>
                    <td>传真号码：</td>
                    <td colspan="2">
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td>手机号码：</td>
                    <td colspan="2">
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td>邮政编码：</td>
                    <td colspan="2">
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <th colspan="3">3. 公司名称和主营业务</th>
                </tr>
                <tr>
                    <td>贵公司名称：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>请填写在工商注册的公司/商号全称;
                    </td>
                </tr>
                <tr>
                    <td>你的职位：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>无商号的个体经营者填写执照上的名字，如:张三（个体经营)
                    </td>
                </tr>
                <tr>
                    <td>主营行业：</td>
                    <td>
                        <select name="" id="">
                            <option value="">电子电工</option>
                        </select>
                    </td>
                    <td>请正确选择</td>
                </tr>
                <tr>
                    <td>主营产品/服务：</td>
                    <td>
                        <input type="text">
                    </td>
                    <td>3个主要相关产品名/服务名，最少要填一个。例如:太阳帽，布料，拉链
                    </td>
                </tr>
                <tr>
                    <td>公司网址：</td>
                    <td>
                        <input type="text">
                    </td>

                </tr>
                <th colspan="3">
                    <button type="submit"> 确认提交</button> &emsp14;
                    &emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;
                    <button type="reset">重置</button>
                </th>
            </table>
        </center>
    </form>
</body>

</html>

在这里插入图片描述

HTML和CSS总结

Html：
超文本标签语言
常用的标签：
i 倾斜
b：加粗
u:下划线
p:段落
br:换行
hr：分割线
hx：1~6级标题
div 行标签 span行内标签
a:超链接（路径） img:图片 video：视频 audio：音频
列表标签： ul无序 ol有序 （li列表中选项）
table:表格
tr：行
td：列
th:表头
rowspan合并行 colspan合并列
form表单：
input：输入框
常见类型: type
text 文本
password 密码
radio 单选
checkbox 复选
file 文件
image 图片
number 数字
email 邮件
button 按钮
submit 提交
reset 重置
hidden 隐藏域
其他属性: readonly 只读 但是会随表单提交
disable 禁用 不会提交
required 必填
placeholder 阴影提示
textarea：文本域
select:下拉框
option
表单提交 ：是以name属性为key 输入值为value提交
提交的方式：
get：所有参数会拼接在url后面 大小限制
url?key=值&key=值
post：
参数不会拼接在url后面
css：
选择器：
1.所有元素
*{}
2.标签选择器
标签名{}
3.类选择器
.类名{}
4.id选择器
#id名称{}
引入方式:
1.行内样式 写在标签中 使用style属性定义 当前标签
2.页面样式 写在head标签内部 使用选择器 整个页面
3.外部引用 在head中引用 引用的地方生效
样式就近原则

dearQiHao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javaweb实训大作业ljh
07-09
通过Oracle struts2以及hibernate框架技术开发，前端jsp采用精美css设计样式，适合实训大作业学习使用
javaweb项目实训
01-19
初学javaweb项目实训简单操作。运用MySQL数据库与前台连接实现数据调用，里面会涉及到图片和文件的传送问题。
Java Web实验作业1
qq_39927620的博客
03-06 1091
1、运用等标签，设计下列网页界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>学习无序列表</h1> <hr> <ul> <li>人工智能</li> <li&
JavaWeb实验作业
lumpsi的博客
09-12 470
JavaWeb实验作业JSP版HelloworldServlet版Helloworld连接数据库测试用循环连续输出三个你好，字体从小变大 实验要求： ①JSP版Helloworld 简单输出：Helloworld即可 ②Servlet版Helloworld 简单输出：Helloworld即可 ③连接数据库测试 参考：DBConn.jsp ④用循环连续输出三个你好，字体从小变大 JSP版与Servlet版都要完成 JSP版Helloworld <%@ page language="java" con
Java Web实训作业分析
su_zui的博客
11-13 2092
作业分析 作业前置准备 创建数据库并插入数据 项目搭建、建立实体类、JDBC连接数据库 三层架构知识（表示层-业务逻辑层-数据访问层） 作业一 描述 表单登录 实现方法 前端编写一个from表单，获取用户输入的用户名和密码，为登录按钮设置点击函数，点击函数中需要获取表单信息，并且发送到后端servlet。后端servlet获取前端数据之后封装成实体类对象，之后调用业务逻辑层（service）的方法进行登录判断，在service的方法中调用数据访问层（DAO）的方法，判断用户名和密码是否存在与数据库。之后
javaweb实训作业订单管理系统源码和数据库.zip
最新发布
05-05
javaweb实训作业订单管理系统源码和数据库.zip本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以...
javaweb实训5源代码
10-07
javaweb实训5源代码 资源结构 └─chapter05 ├─.settings ├─build ├─src │ └─cn │ └─itcast │ └─chapter05 │ ├─cookie │ │ └─example │ └─session │ ├─example01 │ └─...
Javaweb实训-EasyBuy.zip
10-27
Javaweb实训——EasyBuy.zipJavaweb实训——EasyBuy.zipJavaweb实训——EasyBuy.zipJavaweb实训——EasyBuy.zipJavaweb实训——EasyBuy.zipJavaweb实训——EasyBuy.zipJavaweb实训——EasyBuy.zipJavaweb实训——...
JAVAWEB实训心得体会.doc
11-24
摘要：本文记录了作者在JAVAWEB实训中的心得体会，通过十天的实训，作者学习了许多关于Java Web的知识，并了解了软件开发的整个过程，从需求分析到设计、实现、测试和维护等活动。 一、需求分析的重要性 需求分析...
javaweb实训-学生选课系统（实训报告+答辩ppt+源代码+sql文件）
01-23
在线选课系统通过Web应用程序的方式实现在线选课的流程。学生登录系统后可以查看所有课程的选课情况，并且可以对选课人数没有满员的课程进行选课操作，同时也可以查询自己已经选择了那些课程；教师登录系统后可以...
web小学期实训作业.rar
07-06
web实训—KEDI教育，个人做的一个简单网页，源代码，实验报告
java web 教务系统大作业实验报告含代码文档
12-03
内含完整的java web教务管理系统实验报告与代码。
HTML第一学期的实训作业
05-13
这是我第一学期的实训作业，做的不好的地方 还忘大家能提出和我一起解决，谢谢分享
web实验报告
03-27
图书馆管理系统是采用JAVA做前台，后台数据库则采用的是MySQL5.1，本系统提供7个功能模块，分别是系统设置、读者管理、图书管理、图书借还、系统查询、更改口令，以及退出系统模块。这7个模块里又有许多子模块，通过这些模块之间的相互连接与配合，完成操作员发出的各种指令。 图书馆管理系统是一个供内部人员使用的系统，管理员能够使用系统设置、读者管理、图书管理、图书借还、系统查询、更改口令，以及退出系统功能。
web前端实训作业 html+css+javascript 水果网页设计实例 企业网站制作
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-06 3046
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,
Java Web实训练习五
WHT869706733的博客
12-15 1678
一.单项选择题（共10题,100.0分） 1.下面选项，哪个是合法的EL表达式（ ） A、 $<request.name> B、 $[empty requestScope] C、 $(“aaa”+“bbb”) D、 ${header[“user-agent”]} 正确答案： D 2.下面选项中，用于供外界获取javaBean的price属性值的方法是（ ） A、 getPrice() B、 setprice() C、 C:...
EduCoder_web实训作业--表单的结构
weixin_45803282的博客
12-02 900
第一关 D A C B C 第二关 <!-- ********* Begin ********* --> <form name="selectForm" method="post" action="myselect.jsp"> <!-- ********* End ********* --> 欢迎大家关注！
JavaWeb学习第一天（实训）
gsq123sohu的博客
10-19 565
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录JavaWeb学习第一天一、C/S架构与B/S架构的区别？C/S架构的特点二、Web资源1.静态web资源2.动态web资源总结 JavaWeb学习第一天 主要学习了C/S架构与B/S架构,Javaweb的基本知识，还有tomcat的安装和配置。 提示：以下是本篇文章正文内容，下面案例可供参考 一、C/S架构与B/S架构的区别？ C/S架构的特点 C/S：C代表客户端，S代表服务器，通过客户端和服务器进行通信。例如：QQ，微信，
Javaweb作业大全
weixin_53415999的博客
08-15 727
jsp作业，我的作业，大二下学期的额外学习 这是第一章和第四章的有关练习题
javaweb实训项目
11-09
JavaWeb实训项目是一种通过使用Java技术和Web开发技术来进行实践练习的项目。这种项目通常由学生或初学者进行，旨在帮助他们提高Java编程和Web开发的技能。 在JavaWeb实训项目中，学生将学习如何使用Java编程语言和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值