学习JavaWeb的第1天（2021-11-07）
脚本宝典收集整理的这篇文章主要介绍了学习JavaWeb的第1天（2021-11-07），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
学习JavaWeb的第1天（2021-11-07）
https://www.bilibili.com/video/BV1gE411x7Q1?from=search&seid=3515337612903275595&spm_id_from=333.337.0.0
学习javaWeb的目标： 整个下来都是学习一个案例。 了解整个javaWeb的技术体系。
1、javaWeb的技术体系；
cookie是属于客户端这边的会话控制 session是属于服务器这边的会话控制。
两种软件架构： BS架构：（火） B：客户端/典型的客户端就是浏览器(browser) S：服务端/典型的服务器端就是Tomcat
CS架构： C：client客户端 S：Server 这种架构必须要有软件的安装包。游戏。
1、登陆页面的开发：
HTML： Hyper Text Markup Language 超文本标记语言 文本：txt…只能出现普通文字 超文本：除了文字，还有超链接，图片，视频，音频。 标记：一个html页面都是由各种各样的标记组成的。
前端三剑客： html+css+js（jQuery） html：是网页的内容 css：是样式 js：动态行为
常用的html的标签：
1、
<html>
<head></head>
<body>
我想写什么就写什么！！！
</body>
</html>
在<body>标签里面还可以写哪些标签呢？
1、标题标记。h1 - h6
h1 - h6 现在学习的标记都是双标记，有开始，也有结束。
<html>
<head></head>
<body>
我想写什么就写什么！！！
<h1>E</h1>
<h2>E</h2>
<h3>E</h3>
<h4>E</h4>
<h5>E</h5>
<h6>E</h6>
</body>
</html>
<html>
<head></head>
<body>
我想写什么就写什么！！！
<h1 align="center">E</h1>
<h2 align="center">E</h2>
<h3>E</h3>
<h4>E</h4>
<h5 align="right">E</h5>
<h6 align="right">E</h6>
</body>
</html>
2、超链接标记 a
可以在href里面去指定你想要跳转的地址（应用内或者应用外）互联网任意一个网站
<a></a>
<html>
<head></head>
<body>
我想写什么就写什么！！！
<h1 align="center">E</h1>
<h2 align="center">E</h2>
<h3>E</h3>
<h4>E</h4>
<h5 align="right">E</h5>
<h6 align="right">E</h6>
<a href="http://www.baidu.com">点我查看宋老师私密照片</a>
</body>
</html>
3、表格标签table
<table>
<tr></tr>
</table>
table:表格 tr：行 td或者th：表示列 th：标题列自带标题的效果（居中并且加粗） td：普通列 我们把列的标签写在行标签里面。 总结： table标签里面有行标签tr，行标签里面有列标签，列标记又分为普通列和标题列。 标题列：自带居中和加粗效果 普通列：啥也没有
<html>
<head></head>
<body>
我想写什么就写什么！！！
<h1 align="center">E</h1>
<h2 align="center">E</h2>
<h3>E</h3>
<h4>E</h4>
<h5 align="right">E</h5>
<h6 align="right">E</h6>
<a href="http://www.baidu.com">点我查看宋老师私密照片</a>
<h1 align="center">员工信息列表</h1>
<table>
<tr>
<th>员工ID</th>
<th>员工名</th>
<th>员工性别</th>
<th>员工描述</th>
</tr>
</table>
</body>
</html>
<html>
<head></head>
<body>
我想写什么就写什么！！！
<h1 align="center">E</h1>
<h2 align="center">E</h2>
<h3>E</h3>
<h4>E</h4>
<h5 align="right">E</h5>
<h6 align="right">E</h6>
<a href="http://www.baidu.com">点我查看宋老师私密照片</a>
<h1 align="center">员工信息列表</h1>
<table border="1px" align="center" width="60%">
<tr>
<th>员工ID</th>
<th>员工名</th>
<th>员工性别</th>
<th>员工描述</th>
</tr>
<tr align="center">
<td>1001</td>
<td>饶滕龙</td>
<td>男</td>
<td>深圳第一帅哥</td>
</tr>
</table>
</body>
</html>
给第3行加上数据。
现在我们发现每个格子之间会有空隙。想要把这个空隙去掉：
5、body标签里面可以放的标签五：表单form（用的非常多，重要）
表单的作用：手机用户填入的信息，提交给服务器使用（注册/登陆） 其中： form标签里面有两个非常重要的属性。 1、action： 这个填入的是你这个表单需要提交的地址。类似于超链接标签a里面的href属性。这个地址就是指明，你收集的用户信息应该提交到什么地方去。 2、method：就是提交方式。 这里的提交方式有两种。 GET POST
form表单里面可以写的东西： input输入框里面有个重要的属性type，不同的type可以显示不同的效果。
type=text：普通的文本框
<form action="MyFirstHTML.html" method="get">
用户名：<input type="text">
</form>
type=：
补充： br就是一个换行。
input输入框里面还有个重要的属性name 还有个value，要配合name一起学习 value设置输入框的默认值 不写value，那么输入框就是空的。
type = password讲解：
type = radio 单选框
单选框（形成互斥的效果，不能同时选中） 这样的，就要求他俩的name值是一样的。
<br>
用户性别：男 <input type="radio" name="gender" value="1">
女 <input type="radio" name="gender" value="0">
type=checkbox 多选框
用户兴趣：吃饭 <input type="checkbox" name="hobby" value="eat">
睡觉 <input type="checkbox" name="hobby" value="sleep">
打豆豆 <input type="checkbox" name="hobby" value="ddd">
<br>
select 下拉列表
每一个选项是一个option
用户地址：省份 <select name="province">
<option value="sx">山西省</option>
<option value="jx">江西省</option>
<option value="gd">广东省</option>
</select>
type = submit 提交表单的按钮
CSS样式。
现在网页里面做布局不会用table标签， 样式的一些标签需要写在head标签里面。 例如： style
元素选择器 div{}
id选择器 #id名{}
class选择器：.类名{}
引入外部的样式文件：
现在我们定义样式都是直接写在head标签里面的style标签里面的。如果有很多个样式，写起来就会很乱。所以，支持外部引入的形式link
1、在你页面的同一个路径下新建mycss.css文件
<link rel="stylesheet" type="text/css" href="mycss.css">
登陆页面的制作：
第一步：
新建文件：login.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div>
<h1>欢迎登录</h1>
<form action="" method="">
用户名称 <input type="text" name="username">
<br><br>
用户密码 <input type="password" name="password">
<br>
<br>
<input type="submit" name="Login">
</form>
</div>
</body>
</html>
login.css文件
div{
width: 300px;
height: 200px;
background-color: lightcoral;
}
登陆功能的实现–环境搭建。
涉及到的技术： 1、web服务器 2、动态的web工程。
Web服务器： 与它类似的技术是：socket技术网络编程
Tomcat服务器的安装及配置。 下载地址： https://archive.apache.org/dist/tomcat/tomcat-7/v7.0.77/bin/
使用tomcat
1、双击运行startup.bat
2、在浏览器上输入 localhost:8080
3、如果你把这个窗口给关了，那么浏览器访问http://localhost:8080/就进不去了。
正常关闭Tomcat： ctrl+C
接下来就是将Tomcat服务器配置在idea里面。
https://www.bilibili.com/video/BV16e411s7R4?p=228
脚本宝典总结
以上是脚本宝典为你收集整理的学习JavaWeb的第1天（2021-11-07）全部内容，希望文章能够帮你解决学习JavaWeb的第1天（2021-11-07）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15