AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

javaweb实训第一天作业练习

2024-01-10 39
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 练习1

练习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>


2021052209060076.png

练习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>


20210522090625815.png

练习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>


20210522090642243.png

练习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>


20210522090719485.png

练习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>


20210522090757734.png

练习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>


       202105220908214.png                        

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中引用 引用的地方生效

样式就近原则

文章标签：
前端开发
数据安全/隐私保护
关键词：
javaweb Java
作业Java
实训Java
dearQiHao
目录
相关文章
dream_ready
|
3月前
|
Java Apache Maven
Java百项管理之新闻管理系统 熟悉java语法——大学生作业 有源码！！！可运行！！！
文章提供了使用Apache POI库在Java中创建和读取Excel文件的详细代码示例，包括写入数据到Excel和从Excel读取数据的方法。
dream_ready
71 6
Java百项管理之新闻管理系统 熟悉java语法——大学生作业 有源码！！！可运行！！！
编程千纸鹤
|
7月前
|
存储 前端开发 JavaScript
基于JavaWeb实现停车场管理系统
基于JavaWeb实现停车场管理系统
编程千纸鹤
125 1
编程千纸鹤
|
7月前
|
前端开发 JavaScript Java
图书借阅管理平台|基于JavaWeb实现图书借阅系统
图书借阅管理平台|基于JavaWeb实现图书借阅系统
编程千纸鹤
158 1
程序员小海绵
|
4月前
|
设计模式 Java 关系型数据库
【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析
本文是“Java学习路线”专栏的导航文章，目标是为Java初学者和初中高级工程师提供一套完整的Java学习路线。
程序员小海绵
510 37
不愿透漏名字的帅哥
|
7月前
|
安全 小程序 Java
基于Java实训中心管理系统设计和实现(源码+LW+调试文档+讲解等)
基于Java实训中心管理系统设计和实现(源码+LW+调试文档+讲解等)
不愿透漏名字的帅哥
45 0
iamzfh
|
3月前
|
前端开发 Java 应用服务中间件
Javaweb学习
【10月更文挑战第1天】Javaweb学习
iamzfh
42 2
陈佳烨
|
7月前
|
前端开发 Java 关系型数据库
JavaWeb开发简介
JavaWeb开发简介
陈佳烨
73 0
GG2020gg
|
3月前
|
安全 Java Android开发
JavaWeb解压缩漏洞之ZipSlip与Zip炸弹
JavaWeb解压缩漏洞之ZipSlip与Zip炸弹
GG2020gg
103 5
程序员小海绵
|
4月前
|
缓存 前端开发 Java
【Java面试题汇总】Spring,SpringBoot,SpringMVC,Mybatis,JavaWeb篇（2023版）
Soring Boot的起步依赖、启动流程、自动装配、常用的注解、Spring MVC的执行流程、对MVC的理解、RestFull风格、为什么service层要写接口、MyBatis的缓存机制、$和#有什么区别、resultType和resultMap区别、cookie和session的区别是什么？session的工作原理
程序员小海绵
116 4
GG2020gg
|
4月前
|
安全 Java Android开发
JavaWeb解压缩漏洞之ZipSlip与Zip炸弹
JavaWeb解压缩漏洞之ZipSlip与Zip炸弹
GG2020gg
140 2

热门文章

最新文章

  • 1
    Java volatile关键字：你真的懂了吗？
  • 2
    Java最新图形化界面开发技术——JavaFx教程（含UI控件用法介绍、属性绑定、事件监听、FXML）
  • 3
    java项目中jar启动执行日志报错：no main manifest attribute, in /www/wwwroot/snow-server/z-server.jar-jar打包的大小明显小于正常大小如何解决
  • 4
    springboot java.lang.ClassNotFoundException: dm.jdbc.driver.DmDriver应该如何解决
  • 5
    Java多线程编程秘籍：各种方案一网打尽，不要错过！
  • 6
    【Bug合集】——Java大小写引起传参失败，获取值为null的解决方案
  • 7
    Java中的数据类型
  • 8
    Java中的字符集编码入门－增补字符（转载）
  • 9
    JAVA线程池有哪些队列？ 以及它们的适用场景案例
  • 10
    如何在 Java 代码中使用 JSqlParser 解析复杂的 SQL 语句？
  • 1
    基于Java的Hadoop文件处理系统：高效分布式数据解析与存储
    18
  • 2
    如何在 Java 代码中使用 JSqlParser 解析复杂的 SQL 语句？
    85
  • 3
    多领域智能客服：基于Java的智能分发与定制化问答系统
    45
  • 4
    Java快速入门之判断与循环
    55
  • 5
    java springboot监听事件和处理事件
    70
  • 6
    小团队 CI/CD 实践：无需运维，Java Web应用的自动化部署
    37
  • 7
    利用 Java 代码获取淘宝关键字 API 接口
    33
  • 8
    Java MyBatis 面试题
    25
  • 9
    Java JVM 面试题
    26
  • 10
    Java Dubbo 面试题
    30

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计
  • Java编程入门
  • Java面向对象编程
  • Java高级编程

    • 相关电子书

    更多
  • Spring Cloud Alibaba - 重新定义 Java Cloud-Native
  • The Reactive Cloud Native Arch
  • JAVA开发手册1.5.0

    • 相关实验场景

    更多
  • 阿里云平台上进行Java程序的编译与运行
  • 使用Java面向对象编写网络通信程序应用
  • 手动部署Java Web环境（Alibaba Cloud Linux 2）
  • 搭建Java Web开发环境（Anolis OS）
  • RocketMQ中使用Java客户端发送消息和消费的应用
  • 部署基于Dragonwell的Java运行环境
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅