一、前端: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/>
<!-- 密码输入框 -->
密  码:<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">«</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">»</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服务器的使用
- 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 :网站全局配置文件
http://web工程名称:8080/web目录下面的静态资源文件