引入
一阶段(认知阶段)5周Javase Java基础 Java高级特性 Java语法 封装,继承,多态,Java常用类
二阶段:(知识蓄力阶段)对开发流程有一定的认识 5周Javaweb(javaee核心基础+前端基础)jdbc、mysql,servlet,jsp 前端:html,css,js,Ajax,jQuery,前端
三阶段(主流框架)6周spring,springmvc,mybatis,spring boot+shiro+linux+Vue(前后端分离项目)
四阶段 6周是spring cloud微服务(高并发应用场景)本周内容1~3天(包括周四上午)前端一些基本的html标签以及css(网页修饰)--完成简单的登录、注册、一些首页的页面布局前后端都要写 Java工程师(半个全栈工程师)
周五上午总结,下午测试引入前端的扫盲
1.html:超文本标记语言,可以针对文本,图片,动画,文档等都可以标记(设置图片大小、设置字体颜色....)<br换行 <a href="" 超链接
2.html的标准结构通过访问www.baidu.com--->浏览器F12或右键--->检查元素
<!DOCYTPE html html 文档声明(默认h5的文档类型 还有h4.0.1的版本)
<html> <head> </head> <body> </body> </html>
3.hbuilderX开发工具的使用3.1创建web项目(一个网站就是一个web项目)
HTML常见文本标签
-
段落标签p
-
标签换行标签br 它会在浏览器中标记一个空行
-
i,b,strong,em标签
-
b和strong区别:
共同点:都是加粗,对文本内容进行加粗标记
不同点:没有语义上的强调,那么用b标签。如果有,那就用strong
-
i和em区别:
共同点:都是斜体,对文本内容进行斜体标记
不同点:没有语义上的强调,那么用i标签。如果有,那就用em列表标签
-
无序列表ul和li
ul是父标签,li是列表项
ul标签的默认属性
type:给列表项前面的标记值,默认值disc,实心圆点 circle:空心圆点 aquare:实心小正方形
<ul type="disc"> <li> </li> </ul>
-
有序列表ol和li
li是ol子标签,列表项元素
ol的默认属性type,默认值为1,其他值AIai
<ol type="1"> <li></li> </ol>
-
水平线hr
-
自定义列表
以 dl标签开始。每个自定义列表项以 dt开始。每个自定义列表项的定义以 dd开始。
<dl> <dt><dt> <dd></dd> </dl>
HTML之图像标签以及他的应用场景
-
滚动标签marquee
属性:背景颜色bgcolor
behavior:滚动的方式,滑动一次到浏览器边框结束
direction:滚动的方式:默认属性值left从右到左
alternate来回滚动,right从左到右
scrollamount表示运动速度,值是正整数
<marquee bgcolor="" direction="left" scrollamount="2"> </marquee>
-
div和span区别
div:块元素,占一行空间,多个div之间具有换行效果 应用场景:结合css,完成层级页面布局
span:行内标签,不会像div元素--,处在同一行上的 应用场景:前端完成表单校验,使用 span标签动态完成文本内容的设置
-
-
pre原样输出:使用pre包裹,浏览器会按照自己写的展示出来
-
html中常用的转义字符
 相当于敲了一个空格
&ensp相当于两个空格
>在浏览器将>进行转义
<在浏览器将<进行转义
版权信息©,转义为©
注册商标®转义成®
上标sup下标sub
-
给页面上设置背景图片
body 里面加入属性background="图像地址"
如果图像本身的尺寸没有电脑分辨率那么大,这个图片会X轴/y轴重复法规则
src:连接到的图片地址 url(统一字符定位符) src:使用相对路径
相对路径:在当前这个WEB项目下的路径地址 当前这个页面要访问项目下的img文件夹里面的jpg
绝对路径:d:/EE_2211/10_18_code_resource/高圆圆.jpg
-
width:宽度 height:高度 可以指定像素px,还可以指定百分比(根据屏幕分辨率) 图像在设置的时候,本身就和图片尺寸有关系 (UI设计师 一张图像,给前端人员切图成各种尺寸)
-
title:当鼠标悬浮在图片上的文字提示
-
atl:替代文本 :当图片链接失效了, 这个时候替代文本起作用,显示文字描述什么图片加载本地图片 img文件夹下面子文件夹 jpg 下面才有具体图片文件 <img src="img/jpg/高圆圆.jpg /
-
文件需要访问img里面的jpg的高圆圆.jpg ../ 回退上一级目录
-
图像链接 给img图像标签外面使用a标签包裹 <a href="../07_广告页面.html"
超链接标签以及它的应用场景HTML超链接
-
a标签表示
通过使用 href 属性 - 创建指向另一个文档的链接
href="url" url称为网络资源定位符,可使用本地地址也可以使用网络地址
target:打开资源方式 默认打开方式:_self(当前窗口打开新地址) _blank:新建一个窗口打开
-
超链接的第二种用法:
通过使用 name 属性 - 创建文档内的书签 ,作为"锚链接来使用" ,在同一个html下
1)打锚点---(创建一个锚点(标记/书签)) <a name="锚点名称"
2)创建跳转链接(需要从某个位置跳转到上面的锚点位置) <a href="#锚点名称",跳转到锚点
-
在不同页面下进行锚点跳转
1)在另一个页面的某个位置 打锚点---(创建一个锚点(标记/书签)) <a name="锚点名称"
2)当前页面创建跳转连接,跳转到另一个页面的那个锚点位置 <a href="文件地址#锚点名称",跳转到锚点
表格标签 table 行标签tr 单元格td
1. 早期table可以布局,但是不好。 2. 表格标签table表示 子标签tr行 子标签td:一行指定的单元格 th:表头设置信息(自动居中加 粗、table里面的属性 : border:表格边框线,单位为像素 cellspacing:设置单元格与边框的空隙 width和height:宽度和高度 align:给表格设置对齐方式center居中 bgcolor:背景颜色 3. caption:表头 4. font:字体标签
1. 单元格合并
td标签的属性 rowspan:行合并(合并行) 你当前这个单元格行合并所占 的格子数量 colspan:列合并(合并列) 你当前这个单元格列合并所占的 格子数量
表单标签form标签--提交数据(给后端服务器
程序提交 JavaEE核心技术)
1. 表单标签form placeholder:提示信息,输入信息时提示信息会消失 value:输入框的默认值,输入信息时提示信息不会消失 2. 输入类型元素input <input type="text" / 文本输入框 <input type="password" / 密码输入框 <input type="submit" / 提交按钮 <input type="radio" / 单项按钮.radio单项按钮,男女同一组代表性别,给后端标记,指定相同 的name属性 <input type="checkbox" / checkbox:复选框 <input type="date" / date:日期组件 <table border="1px" cellspacing="0" width="300px" height="400px" align="center" bgcolor="red"> <caption><font></font></caption> </table> <td rowspan="3"></td> <td colspan="4"></td>
<input type="file" / file:文件上传组件 <input type="button" / button:普通按钮,结合value使用 <input type="submit" / submit:结合value属性 " 结合value属性="登录/注册" 特殊的提交按 钮,将用户的信息提交到了 action="服务器地址" <input type="reset" / reset:重置清空 <input type="hidden" / hidden:隐藏域 <input type="emil" / emil:邮箱组件,不含有@符号,不能提交,提交会提示缺少@
-
下拉菜单select 子标签option下拉选项
-
提交按钮将用户表单中的所有的表单项的内容提交到url地址上,进行服务器 校验
-
textarea文本域,rows:指定行数,cols:一行有多个字符 <textarea rows="4" cols="23"
-
每一个被标签都有一个Style属性:行内样式 指定一些样式内容
-
form表单method属性默认get,还有post
-
get和post区别: get:1.会将用户的信息提交到地址栏上,格式:在action的url地址后面?表单标签中name 属性值1=输入的值1&name属性值2=输入的值 2 2.不适合输入私密信息 3.由于在地址栏上,所以对数据大小有限制 post提交:hbuildX运行,提交,找不到地址- 1.不会将用户信息提交到地址栏上 2.相对get安全一些,但是密码还是需要加密 3.数据大小没有限制表单
-
表单标签中的元素 都需要必填name属性="值" ,服务器地址 就能够知道了用户输入的信息是什么
<select name="city"> <option value="请选择">请选择</option> <option value="宝鸡市">宝鸡市</option> </select>
框架标签
框架标签 frame 框架集标签:frameset
a标签超链接
target:打开方式 _self:默认 值在当前窗口打开 _blank:新建一个窗口打开
如果超链接需要 在指定的框架的页面中打开 需要指定为 target="框架标签的name属性值"
它可以模拟后台管理系统模板,整个结构的组成由多个页面组成,不能使用frame来表示,需要使用 frameset框架集标签;
css
Cascading Style Sheet:层叠样式表
前端三剑客
Html:理解"房屋的主体结构"
CSS :理解"具体的房屋里面加入修饰"
Js(Javascript):理解 "具体房屋里面的功能(前 端自己的逻辑)"
js:变量,数 据类型
CSS:Cascading Style Sheet:层叠样式表 我们自己书写的样式一定是系统里面有的样式(样式库规定 的) CSS使用方式
<frameset rows="20%,*,10%"> <frame src="logo页面.html"/> <frameset cols="15%,*"> <frame src="左边菜单页面.html" /> <frame src ="中间主页.html" name="main" /> </frameset> <frame src="底部信息页.html"/> </frameset>
第一种:行内样式 :html的每一个标签都有style属性:
设置样式 style="样式属性名称1:属性值1;样式属性名称2:属性值2;..."
弊端:一次只能控制一个标签去进行修饰(如果在 实际操作过程中,仅仅给某个标签去设置,就直 接用这个方式)
第二种:内联样式(内部样式) 在head标签体中书写
存在弊端:当前这个html只是写html标签 元素的,样式代码style标签 和html标签元素混合了,不利 于管理!
CSS使用方式3: 外联样式(外部样式) 前端开发人员:这种推荐,将css样式代码 和html标签代码分离了 1)单独需要在项目下创建css文件夹,然 后里面创建后缀名.css文件
2)css文件书写 选择器{ 样式属性名 称1:值1; 样式属性名 称2:值2; 样式属性名 称3:值3; ... }
3)在当前html页面中导入css文件 rel:关联样式库中的样式(关联 层叠样式表):固定写法
css常用选择器
最基础的选择器
标签名称选择器
class类选择器
id选择器
<h1 style="color: red;text-align: center;font-size:35px;"></h1> h1{ font-size: 35px; color: orange; text-align: center; } <link href="css/01.css" rel="stylesheet" /> css中: 选择器{ 样式属性名称1:值1; 样式属性名称2:值2;} div{ font-size: 30px; color: red ; } .c1{ font-size: 35px; color: blue; }
优先级: id选择器>class类选择器>标签选择器
其他选择器:
并集选择器(同时选中多个标签设置样式)
选择器1,选择器2,选择器3....{ 样式属性名称1:值1; 样式属性名称2:值2; ... }
子元素选择器(给选择器 2 标记的标签一定选择器 1 标记的标签的子标签 设置样式)
选择器 1 选择器2{ 样式属性名称1:值1; 样式属性名称2:值2; ... }
后代选择器: (选择器 2 一定是选择器 1 标记标签的后代元素)
选择器1 > 选择器2{ 样式属性名称1:值1; 样式属性名称2:值2; ... }
#d1{ font-size: 40px; color: green; } #d1,.c1{ text-align: center; color: yellowgreen; font-size: 25px; } #d1 p{ font-size: 20px; color: darkblue; } div > p{ color: green; }
css特殊选择器
1. 伪类用于定义元素的特殊状态
状态: 1)link状态:鼠标未访问状态 2)hover状态(使用居多):鼠标经过状态 3)avtive状态:鼠标获取焦点状态 (激活,点击了,但是没有松开),超链接就是这种 4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了) css代码书写格式: 选择器:状态名称{ 样式属性名称1:值1; 样式属性名称2:值2; ... } 2. 注意: 1)状态名称不区分大小写,但是建议小写 2)注意: 规定先后顺序才能出现循环的效果 a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后,才能生效! a:active 必须在 CSS 定义中的 a:hover 之后才能生效!
css文本样式
1. 文本对齐方式text-align center,right,left 2. 文本修饰 text-decoration 属性用于设置或删除文本装饰。 underline:设置下划线 none:不设置任何修饰 overline:上划线 line-through:中划线(电商平台:打折之后原件上面的中划线) 3. text-transform:文本转换 a:link{ /*link状态:鼠标未访问状态*/ font-size: 20px; color: aqua; } a:visited{ /*点击后的状态*/ font-size: 35px; color: honeydew; } a:hover{ /*hover状态,鼠标经过状态 */ font-size: 30px; color: aquamarine; } a:active{ /*点击但没有松开的状态*/ font-size: 25px; color: beige; text-decoration: blink; } capitalize:将每个单词首字母大写 uppercase:将英文单词转换成大写 lowercase:将英文单词转换成小写 4. text-indent:文本缩进 5. letter-spacing:指定文本中字符之间的间距。 6. 文本阴影 最简单的用法是只指定水平阴影(2px)和垂直阴影(2px) 后面添加文本颜色 text-shadow: 2px 2px red;
Java中jdk安装
安装
Java Development Kit:软件开发工具包
包含一个JRE(Java Runtime Environment: Java运行环境)
JRE 包含JVM(Java虚拟机:假象计算机)和运行Java程序的核心类库!
卸载
windows键+r键--->输入control ,打开控制面板,卸载程序