第一周总结

最新推荐文章于 2024-05-23 17:45:07 发布

伴我所爱

最新推荐文章于 2024-05-23 17:45:07 发布

阅读量165

点赞数

文章标签： java 开发语言

本文链接：https://blog.csdn.net/weixin_53836127/article/details/127465796

版权

引入

一阶段（认知阶段）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中常用的转义字符

&nbsp相当于敲了一个空格

&ensp相当于两个空格

&gt在浏览器将>进行转义

&lt在浏览器将<进行转义

版权信息&copy,转义为©

注册商标&reg转义成®

上标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;