阶段五-前端知识-Day01

酷寒的小蛮蛮

于 2023-09-26 21:57:52 发布

阅读量283

点赞数 3

分类专栏： java学习之路文章标签：前端 css html5 js

本文链接：https://blog.csdn.net/m0_59163770/article/details/133146249

版权

java学习之路专栏收录该内容

53 篇文章 1 订阅

订阅专栏

前言

前端与后端

前端: 为用户使用的,和用户进行交互,是指负责开发并处理用户前台交互的数据

后端:为前端做支撑,是指软件中负责处理逻辑运算,数据存储,数据库等相关操作的部分

前端与后端是彼此之间相互依存的

B/S架构与C/S架构

1.B/S架构

Browser浏览器/Server,也就是浏览器/服务器模式,可以直接通过浏览器实现对服务器的访问

2.C/S架构

Client客户端/Server服务器,也就是客户端/服务器模式,需要安装客户端软件才能对服务器进行访问

一. HTML回顾

1.Html(HyperText Markup Language) 超文本标记语言

超指的是超链接,可以实现从当前网页跳转到另一个网页

文本指的是数字,字母,中文,符号等

标记就是里面的各种标签及标签的属性

HTML不区分大小写,一般都是小写

注释:

2.Html标签

标签可以有0到多个属性

标签支持嵌套

标签的分类
1.行级标签：可以和文本,行级标签一行展示,宽和高为内荣的宽和高,没有内荣没有宽和高

不可以设置宽和高
2.块级标签：独占一行,宽度为父标签的宽度,高度内容的高度,没有内容,没有高度

1.标题标签: <h1></h1> h1~h2数字越大字体越小

2.段落标签: <p></p>

3.换行: <br>

4.水平线: <hr>

5.图片标签: <img src="图片的路径" title="鼠标悬浮时提示的信息" alt="图片加载失败的提示的信息"/>

6.超链接: <a href="跳转的路径" target="打开的方式"></a>

target： _self(默认)当前页打开
_blank 新的标签页打开
自定义值

7.列表:

有序列表 <ol><li></li></ol> 无序列表 <ul><li></li></ul>

8.表格

属性:

table属性：
1.border：边框
2.height：表格的高度
3.width：表格的宽度
4.bgcolor：表格的背景颜色
5.align：表格的水平对齐方式（左中右）
6.cellpadding：内边距（内容和单元格边框的距离）
7.cellspacing：外边距（单元格边框和表格边框的距离）

tr属性：
1.height：行的高度
2.bgcolor：行的背景颜色
3.align：行中内容的水平对齐方式（左中右）

td|th属性：
1.width：列的宽度
2.bgcolor：列的背景颜色
3.align：列中内容的水平对齐方式（左中右）

9.实体空格： 

10. 表单（form）

1.介绍: 标识着一个整体,提交时可以将表单元素中的值提交到后端

2.form标签的属性

1.action: 提交的后端路径

2.method: 提交方式

get：地址栏拼接参数，有大小的限制，只能进行url编码，不安全

post：请求体中传递参数，没有大小的限制，可以使用其他方式编码，安全

3.entype: 参数格式的处理,只有post请求时才有效

1.application/x-www-form-urlencoded：普通的参数（post请求默认）
2.multipart/form-data：普通参数和文件（有文件上传时必须指定）

3.表单元素：
1.文本框：<input type="text" name="xxx"/>
2.密码框：<input type="password" name="xxx"/>
3.日期框：<input type="date" name="xxx"/>
4.文件域：<input type="file" name="xxx"/>
5.单选按钮：
<input type="radio" name="sex" value="xxx"/>
<input type="radio" name="sex" value="xxx"/>
注意事项：
1.name属性值相同的为一组单选按钮
2.name属性值相同才能有单选效果
3.提交时将value中的属性值提交到后端
4.出现多组单选按钮
5.checked默认选中
6.复选框：
<input type="checkbox" name="hobby" value="xxx"/>
<input type="checkbox" name="hobby" value="xxx"/>
注意事项：
1.name属性值相同的为一组复选框
2.提交时将value中的属性值提交到后端
3.出现多组单选按钮
4.checked默认选中
7.下拉列表：
<select name="xxx">
<option value="xxx"></option>
</select>
注意事项：
1.提交时将选中的option中value属性值提交到后端
2.selected默认选中
8.文本域:
<textarea name="xxx"></textarea>
9.按钮：
1.提交按钮：具有提交功能
<input type="submit" value="按钮中提示的文字"/>
<button type="submit">按钮中提示的文字</buuton>

2.重置按钮：具有重置功能
<input type="reset" value="按钮中提示的文字"/>
<button type="reset">按钮中提示的文字</buuton>

3.普通按钮：没有功能
<input type="button" value="按钮中提示的文字"/>
<button type="button">按钮中提示的文字</buuton>

                 4.表单元素的属性
                1.placeholder：提示信息(文本框自带的提示信息)
                  2.autofocus：自动获得焦点
                  3.minlength | maxlength：最小|最大长度
                  4.readonly：只读
                  5.disabled：禁用

11.内联框架

<iframe src = "默认内联的路径" frameborder="边框" width="" height="" name=""></iframe>

一般与a标签配合使用,a标签跳转的资源在iframe中打开
<a href="..." target="iframe标签的name属性值"></a>

12.常用布局标签
div：块级元素（标签）
span：行级元素（标签）

二.CSS回顾

1.CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。层叠指的是可以使用多种方式对同一个标签设置样式。用来给 HTML 标签及内容设置样式的。

2.CSS引入方式

1.行内式: 在标签中添加style属性，通过style属性值设置样式

2.内部式：head标签中的style标签中设置样式

3.外部式：样式编写在单独的.css文件中，需要使用该样式的页面引入外部的.css文件

优先级: 行内式>内部式|外部式

3. 选择器

单个选择器

1.id选择器: #id属性值

2.class选择器: .class属性值

3.标签选择器: 标签名

优先级: id选择器 > class选择器 > 标签选择器

多个选择器

4. 并集选择器 : 选择器,选择器

5. 后代选择器: 选择器(空格)选择器

6. 子选择器: 选择器 > 选择器

7. 兄弟选择器:

选择器+选择器: 后边的第一个兄弟

选择器~选择器: 后边的所有兄弟

4. float浮动

left: 左浮动
right: 右浮动
none: 不浮动

浮动元素不会占用空间，不浮动元素占空间。

如果先出现浮动元素，后出现不浮动元素，会出现两个元素重叠效果。

如果先出现不浮动元素，后出现浮动元素，浮动元素不会和不浮动元素重叠。
当浮动元素和文字同时存在时，文字会环绕浮动元素，不会和浮动元素重叠。英文以空格区分单词，中文一个字是一部分。

1.行级元素浮动：可以去除空格
2.块级元素浮动：可以在一行展示
注意事项：浮动后让出空间

5. 盒子模型

组成：
1.内容(content)实际的宽和高
2.内边距(padding)（内容和边框的距离）
3.边框(border)
4.外边距(margin)（边框到其他标签的距离）

内容区、内边距、边框会影响盒子的大小。外边距不会影响盒子大小,但会影响盒子的位置。

内容区(content)

width：元素的宽度
height：元素的高度

块级元素默认宽度是父元素的百分之百，高度由内容撑起来。
行内元素默认宽度和高度都是由内容撑起来的。
块级元素可以设置宽度和高度；行内元素设置宽度和高度不生效。(img 标签是个特例，它其实属于行内块元素)]

边框(border)

边框的宽度(border-width)
- 单独设置每个边框的宽度，使用 border-xxx-width。xxx 是 top、right、bottom、left（不推荐使用，太麻烦）。
- border-width:数值1 数值2 数值3 数值4; 表示上边框是数值1，右边框是数值2，下边框是数值3，左边框是数值4。
- border-width:数值1 数值2 数值3; 表示上边框是数值1，左右边框是数值2，下边框是数值3。
- border-width:数值1 数值2; 表示上下边框宽度是数值1，左右边框的宽度是数值2。
- border-width:数值；表示4个边框的宽度都是这个值。
边框的颜色(border-color)
- 使用 border-color 或者 border-xxx-color。结合上面的规律使用。
边框的样式(border-style)
- 使用 border-style 或者 border-xxx-style。结合上面的规律使用。
  - solid 实线
  - dashed 虚线
  - dotted 点线
  - double 双实线
  - none：没有
边框的圆角样式(border-radius)：
- 使用 border-radius 或者 border-xxx-xxx-radius。
- border-radius：数值; 左上右上右下左下
- border-radius：数值数值; 左上右下右上左下
- border-radius：数值数值数值数值; 左上右上右下左下

边框的简写

border-xxx: width style color; 比如 xxx 是 top

内边距(padding)

内边距有4个：
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
内边距都是 padding-xxx 的形式，所以可以简写为：
- padding：value; 4个方向的内边距都一样
- padding：value1 value2; 上下左右
- padding：value1 value2 value3; 上左右下
- padding：value1 value2 value3 value4; 上右下左

外边距(margin)

一个元素有4个方向，所以margin外边距也有4个：
- margin-top：上外边距
- margin-right：右外边距
- margin-bottom：下外边距
- margin-left：左外边距
外边距也可以简写：
- margin: value; 4个方向外边距
- margin: value1 value2; 上下左右
- margin: value1 value2 value3; 上左右下
- margin: value1 value2 value3 value4; 上右下左

display属性

1.none：隐藏该元素
2.inline：将元素变为内联元素，特殊的行级元素，行级元素不可以设置高和宽该元素为内联元素
3.block：将元素变为块级元素，变为块级元素后具备了块级元素的特点
4.inline-block：将元素变为内联块元素，内联块元素可以设置高和宽，可以和其它行级元素或内容一行展示

6.字体相关属性：

1.color：字体颜色
2.font-size：字体大小
3.font-weight：字体加粗
4.font-style：字体（宋体，楷体，微软雅黑，...）
5.line-height：行高（内容的垂直方向的展示位置），特殊用法：行高和父元素高度相同实现内容垂直居中

7.文本属性

text-align

text-align 属性可以设置元素中内容的水平对齐方式。

left：左对齐

center：居中对齐
right：右对齐

text-decoration

text-decoration：文本装饰的意思，可以给文本内容设置下划线、上划线、删除线等等。

none：默认，就是普通的文本
underline：给文本加下划线
overline：给文本加上划线
line-through：给文本加删除线
该属性最重要的一个用法就是去掉超链接默认的下划线。

8.伪类：

元素获取的伪类，改变元素的样式，失去伪类，恢复为原有样式
1.鼠标悬浮伪类：选择器:hover{}
2.获得焦点伪类：选择器:focus{}

9.定位：position

left right bottom top z-index(优先级)

1. 静态定位

position:static; 静态定位（默认值）。

在这种定位下top、bottom、left、right、z-index属性都无效。

2. 绝对定位

position:absolute; 绝对定位。

以最近非默认定位的祖先元素定位。如果，祖先元素为默认定位或者没有祖先，它将使用文档主体（body）进行定位

如果祖先元素是没有定位(默认定位)，会以body为参照进行定位。
如果祖先元素有定位（可以是相对定位，绝对定位，固定定位），会以最近的祖先元素为参照进行定位。
具有定位的元素重叠后可以控制显示顺序

可以通过z-index:无单位整数;来设置元素的层叠顺序。数字越大显示时越在上面。只要数字大就显示在上面，大多少都无所谓。

注意：对于没有设置定位的元素z-index属性是无效果的。

3.相对定位

position:relative; 相对定位。相对于自身没有设置定位时的位置进行移动。不需要考虑父元素。

相对定位因为是相对自身元素的位置进行移动。所以配合的top、left、right、bottom可以取值为正数或负数。

4. 固定定位

position:fixed; 相对于浏览器的定位，无论怎么移动滚动条，都是在当前窗口固定位置。

注意：
1.绝对定位：让出定位之前所占的空间
2.相对定位：不会让出定位之前所占的空间

10.背景属性：
background-color：颜色; 背景颜色
background-image：url("图片路径"); 背景图片
background-repeat：是否平铺
* repeat   背景图像将向垂直和水平方向重复。默认值。
* repeat-x   只有水平位置会重复背景图像。
* repeat-y   只有垂直位置会重复背景图像。
* no-repeat   背景图像不会重复。
background-size：值px 值px;
background-attachment：否固定或者随页面滚动
* scroll   背景图片随着页面的滚动而滚动，这是默认的。
* fixed   背景图片不会随着页面的滚动而滚动。

三. JavaScript

1.JS简介

JavaScript 简称 JS，是一种脚本语言、弱类型的语言。客户端脚本语言，可以使页面和用户产生交互的行为。

JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。

2.JS的组成

ECMAScript（ES）：提供了js的核心语法
BOM：浏览器对象模型
DOM：文档对象模型

3. 输出

1.输出到浏览器控制台：console.log(xxx);
2.输出到页面中：document.write(xxx);
3.弹框输出：alert(xxx);

4.引入方式

1.内部式:将js脚本写在script标签中

xxx

</script>

2.外部式

将js脚本写在单独的.js文件中,需要使用js脚本的页面引入外部.js文件.

5.注释

// 单行注释 /**/多行注释

6.标识符

java中标识符: 包名,类名,方法名,变量名,...

js中的标识符: 类名,方法名,变量名,...

语法规则: 数字,字母,下划线,不能以数字开头,不能为关键字和保留字

语法要求:

类名: 大驼峰命名法

方法名: 小驼峰命名法

变量名: 小驼峰命名法

7.数据类型

1.数值类型(整数和浮点数) : number

2.字符串类型:string

3.布尔类型: boolean

4.null 空值

5. "" 空串

6.特殊类型

not a number

7.对象类型

8.var可以存储所有数据类型

8.变量

1.先声明，后赋值
var i;
i = 1;

var a,b,c;
a = 1;
b = "a";
c = true;
2.声明同时完成赋值
var a = 1;

9.常量

const PI = 3.14;

10.js中的运算符

1.算数运算符: + - * / % ++ --

2.赋值运算符: = += -= *= /+ %=

3.比较运算符: > >= < <= == === != !==

== : 两侧数据类型不一致, 转换为数字类型进行比较

=== : 数据类型不一致直接返回false, 两侧数据类型相等才进行比较

!= : 两侧数据类型不一致, 转换为数字类型进行比较

!== : 数据类型不一致直接返回false, 两侧数据类型相等才进行比较

4.逻辑运算符: || && !

5.三元运算符: 条件 ? 值 1 : 值 2;

6. 类型运算符:

1.type of : 判断存储值的实际类型

2.instanceof : 是否为对象

11. 流程控制语句

1.顺序执行结构: 按照顺序依次执行

2.分支结构:

1.if系列：if if else if else if else
2.switch

3.循环结构

1.for循环
2.while循环
3.do while循环
4.循环控制语句：
break：终止循环
continue：终止本次循环，进入下次循环
for使用continue，终止本次循环，执行迭代因子
while do while使用continue，终止本次循环，执行boolean表达式（容易造成死循环）

12.自定义函数

1. 无参数,无返回值

function 函数名(){}

var 函数名 = function(){}
2.有参数，无返回值
function 函数名(参数, ...){}
var 函数名 = function(参数, ...){}

3.无参数，有返回值
function 函数名(){
return 值;
}
var 函数名 = function (){
return 值;
}

4.有参数，有返回值
function 函数名(参数, ...){
return 值;
}
var 函数名 = function (参数, ...){
return 值;
}

2.内置函数（JS对象中提供的函数）

1.Array 对象中的函数

2.Date 对象中的函数

3.Global 全局对象中的函数(直接使用)

eval(): 将字符串中的内容变为可执行的js脚本

isNaN: 是否不是一个数字

parseFloat(): 转换为浮点类型

parseInt() : 转换成整数类型

Number : 转换为数字类型

4.Math 对象中的函数

5. Number 对象中的函数

6. String 对象中的函数

13.数组

1.创建
var arr = [元素,元素,...];
var arr = new Array(数组长度);

2.操作数组

1.添加| 修改元素 : 数组名[索引] = 值

2.获取元素 : var 元素名 = 数组名[索引]

3.数组的遍历

1.普通for 循环

for (var i = 0; i< 数组名.length;i++){

数组名[i](获取数组中每一个元素)

}

2. 增强for循环

for(var i in 数组名){

数组名[i](获取数组中每一个元素)

}

14. 事件（事件驱动）

1. 介绍

元素绑定事件, 监听到元素触发使劲按,驱动函数执行

2. 常用事件:

onclick：单击事件
onmouseover：鼠标移入事件
onmousemove：鼠标移动事件
onmouseout：鼠标移出事件
onsubmit：form表单提交事件
onfocus：获得焦点事件
onblur：失去焦点事件
onchange：改变事件（通常用在下拉列表中）
onload：页面加载完成的事件

3. 事件使用

1.方式一:

直接给元素绑定事件

2.方式二:

通过js获取标签,再绑定事件

<button id="btn">xxx</button>
<script>
document.getElementById("btn").onclick = function () {}
</script>

15.BOM与DOM

1.BOM（浏览器对象模型，window使用时可以省略）：使用js操作浏览器

1.属性:

history:

history.back():回到上一个历史页面

history.forward():回到下一个历史页面

history.go(数字): 回退到指定个数的历史, 负数

前进到指定个数的历史,正数

location：
location.reload()：刷新页面
location.href：获取地址栏的url
location.href = "url"：访问指定的url，当前标签页中打开

         2.函数：
          1.弹框
          1.警告框（只有确认按钮）：alter(xxx)
          2.提示框（确认按钮和取消按钮）：confirm(xxx)
          var b = confirm(xxx);
          3.对话框（输入内容，确认按钮，取消按钮）prompt(xxx)
          var b = prompt(xxx);
          2.访问指定的资源
          open(url)，打开指定的url，新的标签页中打开
          3.setInterval()：周期性执行，循环执行
        4.setTimeout()：延时执行，只执行1次

2.DOM（文档对象模型，document对象）
1.获取元素节点：
1.根据id属性值获取，返回唯一元素节点对象
document.getElementById("id属性值");
2.根据class属性值获取，返回元素节点对象的数组
document.getElementsByClassName("class属性值");

3.根据标签名获取，返回元素节点对象的数组
document.getElementsByTagName("标签名");

4.根据name属性值获取，返回元素节点对象的数组
document.getElementsByName("name属性值");

2.操作文本节点：
1.操作纯文本
获取元素节点中的文本内容
var val = 元素节点对象.innerText;
将新的内容添加到元素节点中，覆盖元素节点中之前的内容
元素节点对象.innerText = "内容";
2.操作文本或html
获取元素节点中的html和文本内容
var val = 元素节点对象.innerHTML;
将新的内容添加到元素节点中，覆盖元素节点中之前的内容
元素节点对象.innerHTML = "html + 内容";(直接写标签)

3.操作属性节点：
1.获取元素节点的属性节点值
var val = 元素节点对象.属性名;
var val = 元素节点对象.getAttribute("属性名");

2.修改元素节点的属性节点值
元素节点对象.属性名 = "值";
元素节点对象.setAttribute("属性名", "值");

4.操作css样式：
1.方式一：修改style属性值
var val = 元素节点对象.style.样式名; 获取样式值
元素节点对象.style.样式名 = "值"; 修改样式值

2.方式二：修改class属性值
var val = 元素节点对象.className; 获取class属性值
元素节点对象.className = "值" 修改class属性值