Java学习日志Day33_前端html其他标签_CSS基本使用_javascript的基本语法(原生)_tomcat(初窥)

最新推荐文章于 2021-12-27 17:31:52 发布

igfff

最新推荐文章于 2021-12-27 17:31:52 发布

阅读量117

点赞数

分类专栏：学习文章标签： java css tomcat

本文链接：https://blog.csdn.net/igfff/article/details/117790965

版权

学习专栏收录该内容

42 篇文章 1 订阅

订阅专栏

一、前端:html其他标签

图像标签的属性

 		src:加载图片的资源地址
 		alt:替代文本:当图片链接失效时,提供文字描述
 		title:当鼠标悬浮在图片的文字提示
 		height和width:设置图像高度和宽度(指定px/执行百分比)
 
 <div>
 	<img src="img/loginbg.jpg" alt="背景图片" title="小米商城图片" width="100%" height="400px"  />
 </div>

页面跳转的标签:超链接a

 		href属性:加载url地址
 		target:打开资源文件方式
 				_blank:新建窗口
 				_self:在当前窗口直接打开(默认值)
 				
 	  普通方式使用:仅仅传统载入新的url
 	方式2: 作为"锚链接使用"
 		在同一个页面中:
 			1)打锚点   (跳转位置)
 				<a name="锚点名称"></a>
 			2)创建跳到链接---	跳到锚点处
 				<a href="#锚点名称">跳转</a>
 				
 		在不同页面中打锚点
 				1)在指定的页面处的某个位置 打锚点
 						打锚点   (跳转位置)
 							<a name="锚点名称"></a>
 				2)在当前页面创建链接地址
 							 <a href="链接的指定的页面地址#锚点名称">文本内容</a>
 	
 	BOM:  window对象的location(地址栏对象)
 		window对象:窗口对象:顶级对象(可以省略不写)
 	
 						href="重载载入新的url地址"

<a href="01_文本标签.html#text" target="_self">在不同页面下的锚点</a><br />
		 
		 <a href="#footer">跳转</a><br/>
		 <a href="02_图像标签.html" target="_blank">点我试试</a><br/>
		 <p>XXX</p>

		 <!-- 打锚点-->
		 <a name="footer"></a>

table

 	border:边框属性
 	width:宽 height:高(px/百分比:跟分辨率有关系)
 	bgcolor:背景色
 	align:center/left/right:对齐方式
 	cellspacing:设置边框的边框线和单元格距离
 		子标签
 		caption:表格标题标签
 		th:表头(自动居中加粗)
 		tr：行标签
 		td:单元格

举例：
<table border="1px" cellspacing="0" align="center" width="500px"
		  height="400px" bgcolor="greenyellow">
			 <tr>
				 <th>
					 <input type="checkbox" />
				 </th>
				 <th>员工编号</th>
				 <th>员工姓名</th>
				 <th>员工性别</th>
				 <th>员工工资</th>
				 <th>入职日期</th>
				 <th>操作</th>
			 </tr>
			 
			 <tr>
				 <td>
					  <input type="checkbox" />
				 </td>
				 <td>1</td>
				 <td>文章</td>
				 <td>男</td>
				 <td>7500</td>
				 <td>19-10-12</td>
				 <td>
					 <a href="#">修改</a>
					 <a href="#">删除</a>
				 </td>
			 </tr>
		</table>
	</body>
</html>

td单元格合并

 	合并行:rowspan 
 			占当前多少单元格的数量
 	合并列:colspan
 			占多少单元格数量
 					
 table标签早期使用来布局,现在使用table都是用来做后台系统(查询相关业务数据)
 现在布局---div+css来完成(层级布局)

举例：
</head>
	<body>
		<table border="1px" align="center" cellspacing="0" width="500px" height="400px">
			<tr>
				<th>id</th>
				<th>name</th>
				<th>class</th>
				<th>avg_socre</th>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>计算机1班</td>
				<td rowspan="2">89</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>李四</td>
				<td>计算机1班</td>
				<!-- <td>75</td> -->
			</tr>
			<tr align="center">
				<td>3</td>
				<td>王五</td>
				<td>计算机1班</td>
				<td>95</td>
			</tr>
			<tr align="center">
				<td colspan="3">平均分</td>
				<!-- <td></td>
				<td></td> -->
				<td>85</td>
			</tr>
		</table>
	</body>
</html>

两种场景:
注册
登录

 		注册
 			跟用户相关的基本信息
 			用户名,密码,确认密码,邮箱(激活用户),电话号码(短息验证码)...
 		
 		登录:
 			用户
 			密码
 			手动短信登录
 			
 		需要用户将数据提交后台地址

get提交方式:
url地址后面?name属性的属性值=赋值内容&key2=value2&key3=value3
1)提交到地址栏上(只要在浏览器中发送请求:都是get)
2)相当于post提交不安全,不适合提交隐私数据
3)因为是将用户的提交到地址栏上,所有提交的内容大小限制的!

post提交方式:
1)不会将用户的数据提交到地址栏上
提交到:请求信息中的实体内容(浏览器—network可以查看)
Form Data :表单数据
key1=value1&key2=value2&key3=value3…
2)相当于get方式,安全,适合提交隐私数据(针对密码:md5工具进行加密)
3)提交的数据没有限制

举例：
</head>
	<body>
		<!-- 表单标签:form 
			get提交方式:默认的
		-->
<form action="server.html" method="post">
	
<!-- 
	表单项中必须填写name属性  如果不填写,无法给后台地址标记用户书写的内容是什么...
 -->	
	<!-- 文本输入框 -->
用户名:<input type="text" name="username"  placeholder="请您输入用户名" /><br/>
	
	<!-- 密码输入框 -->
密&ensp;&nbsp;码:<input type="password" name="userpassword"  placeholder="请您输入用户密码" /><br/>
<!-- 日期组件 -->
出生日期:
<input type="date" name="date" /> <br/>
性别:
<!-- 
	单选按钮
		input type="radio"
		给后台提交的时候name属性必须一致
 -->
 <input type="radio" value="男" name="gender" />男
 <input type="radio" value="女" name="gender" />女<br />
爱好:
<!-- 
	复选框:
		input type="checkbox"
		给后台提交的时候name属性必须一致
 -->
 <input type="checkbox" name="hobit" value="足球" />足球
 <input type="checkbox" name="hobit" value="跑步" />跑步
 <input type="checkbox" name="hobit" value="游泳" />游泳
 <input type="checkbox" name="hobit" value="篮球" />篮球<br />

邮箱:
<!-- 填写的内容必须为邮箱格式@
		没有提交的
 -->
<input type="email" name="email" /><br />
籍贯:
<!-- 
	select:下拉菜单
		multiple="multiple" 可以多选
	option:下拉选项
 -->
 <!-- -->
<select name="jg">
	<option value="西安市">西安市</option>
	<option value="北京市">北京市</option>
	<option value="延安市">延安市</option>
	<option value="宝鸡市">宝鸡市</option>
</select><br />

上传文件:
<!-- 
	input type="file"
-->
<input type="file" name="img"  /> <br />
<!-- 
	普通按钮
		input type="button"
 -->
 <input type="button" value="这是一个普通按钮" />
	
	
	<!-- 提交按钮 -->
	<input type="submit" value="注册"/> <input type="reset" value="重置" />
	
</form>
	</body>
</html>

二、CSS基本b使用

举例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格样式</title>
		<!-- 导入前端框架的起步环境 -->
		<!-- css样式文件 -->
		<!-- 导入css -->
		<!-- 导入jquery的js文件 -->
		<script src="js/jquery-1.11.3.min.js"></script>
		
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入boostrap的js文件 必须在后面 
			bootstrap.js底层依赖于Jquery的
		-->
		<script src="js/bootstrap.min.js"></script>
		
		
	</head>
	<body>
		<!-- 看boostrap官网文档 -->
		<!-- <table class="table table-striped" width="500px" height="400px"> -->
			<table class="table  table-hover" width="300px" height="400px">
			<tr>
				<th>
					编号
				</th>
				<th>姓名</th>
				<th>性别</th>
				<th>住址</th>
				
			</tr>
			<tr  class="info">
				<td>1</td>
				<td>zhangsan</td>
				<td>男</td>
				<td>西安市</td>
			</tr>
			<tr class="danger">
				<td>2</td>
				<td>lisi</td>
				<td>男</td>
				<td>北京市</td>
			</tr>
			<tr class="active">
				<td>3</td>
				<td>高圆圆</td>
				<td>女</td>
				<td>延安市</td>
			</tr>
		</table>
	</body>
</html>

举例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>boostrap的表单样式</title>
		<!-- 依赖Jquery的库 -->
		<script src="js/jquery-1.11.3.min.js"></script>
		<!-- 导入boostrap的css样式 -->
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<!-- 导入boostrap的js库 -->
		<script src="./js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 
			最基本的实例
		
		<form>
		  <div class="form-group">
		    <label for="exampleInputEmail1">邮箱</label>
		    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请您输入邮箱">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">密码</label>
		    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请您输入密码">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputFile">File input</label>
		    <input type="file" id="exampleInputFile">
		   
		  </div>
		  <div class="checkbox">
		    <label>
		      <input type="checkbox"> 记住用户名
		    </label>
		  </div>
		  <button type="submit" class="btn btn-default">登录</button>
		</form> -->
		
		<!-- 内联表单  :后台系统中: "搜索使用"
		form-inline :在同一行上 添加多个表单样式 (同时带两个条件进行搜索)
			
		-->
		<!-- <form class="form-inline :在同一行上 添加多个表单样式 (同时带两个条件进行搜索)">
		  <div class="form-group">
		    <label for="exampleInputName2">用户名</label>
		    <input type="text" class="form-control" id="exampleInputName2">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">邮箱</label>
		    <input type="email" class="form-control" id="exampleInputEmail2">
		  </div>
		  <button type="submit" class="btn btn-default">搜索</button>
		</form>
		 -->
		 
		 
		 <!-- 
			水平排列表单
			form-horizontal样式:水平排列
			
			col-sm(平板:尺寸>=768px)-所占的格子数量(2)
			
			
		 -->
		 <form class="form-horizontal">
		   <div class="form-group">
		     <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
		     <div class="col-sm-10">
		       <input type="text" class="form-control" id="inputEmail3" placeholder="请您输入用户名">
		     </div>
		   </div>
		   <div class="form-group">
		     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
		     <div class="col-sm-10">
		       <input type="password" class="form-control" id="inputPassword3" placeholder="请您输入密码">
		     </div>
		   </div>
		   <div class="form-group">
		     <div class="col-sm-offset-2 col-sm-10">
		       <div class="checkbox">
		         <label>
		           <input type="checkbox"> 记住用户名
		         </label>
		       </div>
		     </div>
		   </div>
		   <div class="form-group">
		     <div class="col-sm-offset-2 col-sm-10">
		       <button type="submit" class="btn btn-default">登录</button>
		     </div>
		   </div>
		 </form>
		
		<table class="table-hover table-bordered" width="600px">
					 <tr>
						 <th>
							 <input type="checkbox" />
						 </th>
						 <th>员工编号</th>
						 <th>员工姓名</th>
						 <th>员工性别</th>
						 <th>员工工资</th>
						 <th>入职日期</th>
						 <th>操作</th>
					 </tr>
					 
					 <tr>
						 <td>
							  <input type="checkbox" />
						 </td>
						 <td>1</td>
						 <td>文章</td>
						 <td>男</td>
						 <td>7500</td>
						 <td>19-10-12</td>
						 <td>
							 <a href="#">修改</a>
							 <a href="#">删除</a>
						 </td>
						 
					 </tr>
					 
					 <tr>
						 <td>
							  <input type="checkbox" />
						 </td>
							 <td>1</td>
							 <td>文章</td>
							 <td>男</td>
							 <td>7500</td>
							 <td>2019-10-12</td>
							 <td>
							 					 <a href="#">修改</a>
							 					 <a href="#">删除</a>
							 </td>		 
					 </tr>
					 <tr>
						<td>
							 <input type="checkbox" />
						</td>
						 <td>1</td>
						 <td>文章</td>
						 <td>男</td>
						 <td>7500</td>
						 <td>2019-10-12</td>
						 <td>
						 					 <a href="#">修改</a>
						 					 <a href="#">删除</a>
						 </td>			
					 </tr>
		</table>
		
		
		<!-- 分页组件 -->
		<nav aria-label="Page navigation">
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="上一页">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="下一页">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
		
		
	</body>
</html>

三、javascript的基本语法(原生)

<h3>BOM之  location对象中的href属性</h3>
		 <input type="button" value="点击跳转" onclick="myClick()" />
	</body>
	<!-- javascript -->
	<script>
			function myClick(){
				//alert("点击事件触发了..." ) ;
				//页面跳转
				window.location.href="02_图像标签.html" ;
			}
	</script>

四、tomcat服务器的使用

01_tomcat目录结构介绍

tomcat:web应用服务器
tomcat是Apache组织结构的开源的项目---- 免费的web应用服务器(轻量级服务器)
针对并发访问量不是很大的或者一些中小型系统使用!
理论并发访问量:500个

Apache服务器 web应用服务器

nginx:服务器 web应用服务器 (后期去使用)

轻量级:高性能的并发访问能力----支持50000个并发连接数量
特点: 具有负载均衡和反向代理

tomcat服务器基本使用

下载地址:https://tomcat.apache.org/download-80.cgi
windows平台使用:.zip格式
Linux平台使用:.tar.gz

tomcat启动失败原因

可能出现tomcat在bin目录中:
双击:start.bat 出现闪屏

1)jdk环境变量是否配置好, 看是否有JAVA_HOME变量名
tomcat启动时候寻找系统变量名字:JAVA_HOME
2)如果配置类还出现闪屏,配置JRE_HOME
path:%JRE_HOME%\bin

startup.bat:windows里面启动
startup.sh :linux启动

shutdown.bat :windows里面关闭
shutdown.sh:linux关闭
启动成功示意图

访问tomcat首页

地址栏:http://localhost:8080/

本地启动成功!

在IDEA中创建web项目,通过外部tomcat部署web项目

src下面:书写java代码
web目录:就可以存放静态资源文件
html,css,js

WEB-INF
html---->不能直接访问,需要通过"请求转发" 访问
存储web.xml :网站全局配置文件
IDEA中创建web项目2
IDEA中创建web项目3
http://web工程名称:8080/web目录下面的静态资源文件

igfff

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java学习日志Day33_前端html其他标签_CSS基本使用_javascript的基本语法(原生)_tomcat(初窥)

一、前端:html其他标签二、CSS基本使用三、javascript的基本语法(原生)四、tomcat服务器的使用
复制链接

扫一扫