前端复习

技术2024-08-11 77

前端基础HTML1.基本标签2.页面结构分析3.高级标签 CSS1.基础知识1.1简介1.2简单示例1.3三种基本选择器（重点)1.4层次选择器1.5属性选择器（重点) 2.美化网页2.1 span标签2.2字体样式2.3文本样式2.4 超链接伪类2.5 列表样式练习2.6盒子模型2.7 浮动2.8 定位 JS1.基础知识1.1显示hello1.2基础语法1.3调试js代码1.4数据类型1.5严格检查模式 2.数据类型详解2.1字符串2.2数组2.3对象2.4流程控制2.5map和set2.6 迭代器 3.函数3.1 函数定义3.2 方法 4.面向对象编程4.1 继承 5.操作BOM对象(重点)5.1 window5.2 screen5.3 location5.4 document 6.操作DOM对象(重点）6.1 获取节点（后用jQuery()）;6.2 更新Dom节点6.3删除节点6.4插入节点 7.操作form表单7.1 表单提交验证7.2 md5密码加密 8. jQuery8.1 事件 9.总结9.1、巩固JS9.2、巩固HTML9.3.相关文档

前端基础

前一阵子学习了 servlet和jsp完了一个javaweb学生管理系统，发现自己前端好多东西忘记了，这两天复习了一下子，下面是笔记，课程听的是b站狂神说：狂神说笔记有些是借鉴csdn博主：夜里的雨

HTML

1.基本标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签</title> </head> <body>  <P> 粗体：<strong>hello</strong> </P> <p> 斜体: <em>hello</em> </p>  <hr/>  空    格 >大于号 <br/> <小于号 <br/> ©版权符号 <br/> </body> </html>

img标签

<img src="../resources/image/01.jpg" alt="没找到图片" title="鼠标悬停显示文字">

超链接

<a href="https://www.baidu.com" target="_blank">百度</a>

列表

<Ol> <li>数学</li> <li>语文</li> <li>英语</li> </Ol> <br/>  <ul> <li>数学</li> <li>语文</li> <li>英语</li> </ul>  <dl> <dt>学科</dt> <dd>数学</dd> <dd>语文</dd> <dd>英语</dd> <dt>成绩</dt> <dd>99</dd> <dd>96</dd> <dd>55</dd> </dl>

表格table

border:加边框

rowspan跨行

colspan跨列

<table border="1px">  <tr> <td colspan="3">学科及成绩</td> </tr> <tr> <td>java</td> <td>python</td> <td>c++</td> </tr> <tr> <td>99</td> <td>92</td> <td>80</td> </tr> </table>

视频和音频

视频：video

src为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后

音频：audio

src为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后

2.页面结构分析

3.高级标签

iframe:内联标签

CSS

1.基础知识

1.1简介

css1.0 css2.0 div + css,html与css分离思想，网页变得简单 css2.1 浮动加定位 css3.0 圆角，阴影，动画，浏览器兼容

练习格式：

1.2简单示例

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>css测试</h1> </body> </html>

css

h1{ color: chartreuse; }

1.3三种基本选择器（重点)

标签选择器例：p{ }类选择器好处：可以使多个不同标签分类例：  <p class="wmp">java</p> <p>c++</p> /*css*/ .wmp{ color: #a03493; }

- id选择器好处：全局唯一，当只需要对一个标签特效时可以用例子：#id{ } 不遵循就近原则 id选择器 > class选择器 > 标签选择器

1.4层次选择器

（1）后代选择器

/* body后面的p标签都选择 */ body p{ color: chartreuse; }

（2）子选择器

/*儿子一代，注意是>不是-> */ body>p{ background-color: antiquewhite; }

（3）相邻兄弟选择器只有一个相邻的(向下相邻)

用加号 +

（4）通用选择器选择向下的所有兄弟

用 ~ 结构伪类选择器 /*ul标签里面的li标签的第一个和最后一个,也可以用id选择器*/ ul li:first-child{ background-color: chartreuse; } ul li:last-child{ background-color: aqua; }

或者

/*选择当前li标签的父级标签的第一个子标签,并且是当前元素才生效*/ li:nth-child(1){ background-color: #9c65a0; }

1.5属性选择器（重点)

正则表达式 *= 存在 ^= 以什么开头 $= 以什么结尾

/*a标签中有id的*/ a[id]{ background-color: chartreuse; } /*a标签中id = name的*/ a[id=name]{ background-color: antiquewhite; } /*通配，存在，因为class的名字可以有不同的多个，只用包含，不能绝对等于*/ a[class*="links"]{ background-color: #9a74a0; } /*选中href标签中以http开头的元素*/ a[href^=http]{ background-color: antiquewhite; } /*选中href标签中以pdf结尾的元素*/ a[href$=pdf]{ background-color: antiquewhite; }

2.美化网页

2.1 span标签

重点要突出的字，使用span标签套起来,然后用css样式美化

欢迎学习<span id="title1">java</span>

2.2字体样式

p{ font-family: 楷体; font-size: 10px; font-weight: bold; color: antiquewhite; }

2.3文本样式

p{ text-align: center; /*文本居中*/ text-indent: 2em; /*首行缩进2个英文字母*/ line-height: 400px; }

2.4 超链接伪类

a{ text-decoration: none; /*去掉下划线*/ color: black; /*默认颜色*/ } a:hover{ /*鼠标浮动到超链接产生变化*/ color: aqua; font-size: 40px; }

2.5 列表样式练习

list-style: none; li标签前面的黑点去掉 list-style: circle; 空心圆 list-style:decimal ; 有序前面有数字

html代码：

css代码

#nav{ width: 300px; height: 500px; } #tytle1{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 30px; background-color: crimson; } /* list-style: none; li标签前面的黑点去掉 list-style: circle; 空心圆 list-style:decimal ; 有序前面有数字 */ ul{ background-color: aliceblue; } ul li{ height: 30px; list-style: none; /*li标签前面的黑点去掉*/ } a{ text-decoration: none; color: black; } a:hover{ color: chartreuse; }

背景图片应用

ul li{ height: 30px; list-style: none; /*li标签前面的黑点去掉*/ background-image: url("../image/01.jpg"); background-repeat: no-repeat; background-position: 236px,2px; /*定位图片位置*/ }

background-image:url("");/默认是全部平铺的/ background-repeat:repeat-x/水平平铺/ background-repeat:repeat-y/垂直平铺/ background-repeat:no-repeat/不平铺/

2.6盒子模型

(1)什么是盒子模型

margin：外边距 padding：内边距 border：边框

(2)边框border

border：粗细样式颜色 (3)外边距----妙用：居中

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/ /*例1：居中*/ margin:0 auto /*auto表示左右自动*/ /*例2：*/ margin:4px/*表示上、右、下、左都为4px*/ /*例3*/ margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式： margin+border+padding+内容的大小

(4)圆角边框 border-radius有四个参数（顺时针），左上开始,左下结束圆圈：圆角=半径

2.7 浮动

使用浮动可以把行内元素变为块内元素块级元素：独占一行 h1~h6 、p、div、列表… 行内元素：不独占一行 span、a、img、strong 行内元素可以包含在块级元素中，反之则不可以。

(1)display 这也是一种实现行内元素排列的方式，但是我们很多情况用float 行内元素只占一行，改变height和width不起作用，可以在span标签里加display: inline-block;

block：块元素 inline：行内元素 inline-block：是块元素，但是可以内联，在一行 div{ height: 100px; width: 100px; border: 1px solid red; } span{ height: 100px; width: 100px; border: 1px solid red; }

（2）float 父级边框塌陷 clear： right：右侧不允许有浮动元素 left：左侧不允许有浮动元素 both：两侧不允许有浮动元素 none：解决父级边框塌陷的方法：方案一：增加父级元素的高度；方案二：增加一个空的div标签，清除浮动

<div class = "clear"></div> <style> .clear{ clear:both; margin:0; padding:0; } </style>

方案三:在父级元素中增加一个overflow：hidden

overflow:hidden/*隐藏*/ overflow：scoll/*滚动*/

方案四：父类添加一个伪类:after

#father:after{ content:''; display:block; clear:both; }

小结：

浮动元素增加空div----》简单、代码尽量避免空div 设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出 overflow----》简单，下拉的一些场景避免使用父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用 display：方向不可以控制 float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

2.8 定位

（1）相对定位相对定位：positon：relstive；相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

positon：relstive； top:-20px; left:20px; bottom:-10px; right:20px;

例子:实现如下 html

<div id="box"> <a href="#" class="a1">链接1</a> <a href="#" class="a2">链接2</a> <a href="#" class="a3">链接3</a> <a href="#" class="a4">链接4</a> <a href="#" class="a5">链接5</a> </div> #box{ height: 300px; width: 300px; border: 1px red solid; padding: 10px; } a{ width: 100px; height: 100px; text-decoration: none; background: #a05775; line-height: 100px; text-align: center; color: aliceblue; display: block; } a:hover{ background: chartreuse; } .a2,.a4{ position: relative; left: 200px; top:-100px } .a5{ position: relative; left: 100px; top:-300px }

(2)绝对定位定位：基于xxx定位，上下左右~ 1、没有父级元素定位的前提下，相对于浏览器定位 2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移 3、在父级元素范围内移动总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

（3）固定定位fixed

div{ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; }

视野拓展 cancas动画

JS

JavaScript是一门世界上最流行的脚本语言一个合格的后端人员,必须要精通 JavaScript

1.基础知识

1.1显示hello

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/wmp.js"></script> </head> <body> </body> </html> alert("hello");

1.2基础语法

定义变量 var a = 10;条件控制 if(1<2){ alert("true"); }

1.3调试js代码

console.log()在浏览器控制台打印调试器可以调试

1.4数据类型

数值，文本，图形，音频，视频…

NaN //not a number Infinity //最大的数 'abc' "abc"

注意（==和 ===)

== //只要内容一样，不管类型是否一样例如："1" == 1为真 === //绝对等于 "1" == 1为假

比较一定要用 ===

NaN === Nan 为false,只能通过isNaN(NaN)

java中数组一定要相同类型，js中可以不同例：

var arr = [1,2,3,"a",false]; new Array(1,2,3,'a');

数组越界会undefine

对象

1.5严格检查模式

在js代码开头加上 'user strict'(引号不能少)，局部变量建议用let定义，不用 var

2.数据类型详解

2.1字符串

（1）模板字符串

let name = "wmp"; let msg = `你好呀,${name}`; //注意：这里是电脑Tab键上面的反单引号 console.log(msg)

（2）字符串不可变

2.2数组

常用的方法slice（截取），push（压入），pop（弹出），shift（压入首部），unshift（弹出首部），concat（拼接）

2.3对象

（1）使用不存在的对象，不会报错，undefine （2）可以动态删减属性

(3)判断属性在不在对象中

2.4流程控制

if,while,for和java一样，forEach如下

var arr = [1,2,"wmp"]; // 函数 arr.forEach(function (value) { console.log(value) })

2.5map和set

ES6出来的 map (1)基本使用

var map = new Map([['tom',100],['wmp',0]]); var value = map.get('wmp'); console.log(value);

（2）新增 (3)删除

map.delet('lmy');

set 无序不重复

2.6 迭代器

ES6的新特性~

使用iterator来迭代Map和Set

var arr = [1,2,3]; for(let x of arr){ console.log(x) } //map set一样

3.函数

3.1 函数定义

两种定义，方法二是匿名函数

function fun(x) { } var fun = function (x) { }

调用：fun(10)； js可以传任意个参数，不会报错最好提前判断传入参数类型，用

if(typeof x != 'number'){ throw 'Not a Number' }

3.2 方法

js中也有const(和c++一样的作用)

定义方法

var person = { name:'wmp', age:12, birth:2000, now:function () { return this.age + this.birth; } };

内部对象 (1) Date

var now = new Date(); console.log(now.getHours());

注意now.getMonth();为0-11月

（2）JSON对象

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示

4.面向对象编程

4.1 继承

（1）原来的继承

（2）ES6之后

5.操作BOM对象(重点)

BOM:浏览器对象模型

5.1 window

代表浏览器窗口

(1)浏览器内外高宽

5.2 screen

获取屏幕宽高

5.3 location

获取当前页面URL信息

Location https://www.baidu.com/index.php?tn=monline_3_dg

5.4 document

document代表当前页面

document.title = '大火狐' "大火狐"

可以获取文档树节点

<div id="app"> ...... </div> <script> val div = document.getElementById('app') </script>

6.操作DOM对象(重点）

DOM：文档对象模型

6.1 获取节点（后用jQuery()）;

<div class="father"> <h1>标题一</h1> <P id="p1">p1</P> <p class="p2">p2</p> </div> //获取对应css选择器 var h1 = document.getElementsByTagName('h1'); //通过标签拿 var p1 = document.getElementById('p1'); //通过id获取 var p2 = document.getElementsByClassName('p2'); //通过class获取 var father = document.getElementsByClassName('father'); var children = father.children(); //获取父节点的子节点

6.2 更新Dom节点

6.3删除节点

先获得父节点再删除注意，删除多个节点的时刻，children是在时刻变化的，删除节点的时候一定要注意。

6.4插入节点

（1）追加

7.操作form表单

如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输入值：

// <input type="text" id="email"> var input = document.getElementById('email'); input.value; // '用户输入的值'

7.1 表单提交验证

<body> <P> <span>用户名：</span><input type="text" id="username"> </P> <p> <span>密码：</span><input type="password" id="password"> </P> <p>  <button type="button" οnclick="bbb()">提交</button> </p> <script> function bbb() { var username=document.getElementById("username").value; //注意一定要加.value属性 alert(username); } </script> </body>

7.2 md5密码加密

在 < head >标签里面加

8. jQuery

存在大量的js函数

获取jQuery - 公式：$(selector).action()

公式：$(选择器).** 事件(函数)**

注意开头要引入：<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

具体引入方法可以看下面网站点击

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <a href="#" id="test">点我</a> <script> $('#test').click(function () { alert("hello world"); }) </script> </body> </html>

文档工具站https://jquery.cuishifeng.cn/

8.1 事件

获取鼠标位置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divMove{ width: 500px; height: 500px; border: 1px solid red; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> mouse: <span id="mouseMove"></span> <div id="divMove"> 在这里移动试试： </div> <script> //$(选择器).text可以修改文本 //$(选择器).html可以html代码 $(function(){ $('#divMove').mousemove(function(e){ $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY) }) }); </script> </body> </html>

操作DOM

9.总结

9.1、巩固JS

看jQuery源码看游戏源码

9.2、巩固HTML

CSS —> 扒网站，全部下载下来，修改对应位置的样式，看效果

9.3.相关文档

jQuery 相关前后端模板和游戏：源码之家

Processed: 0.009, SQL: 9

前端复习

目录

前端基础

HTML

1.基本标签

2.页面结构分析

3.高级标签

CSS

1.基础知识

1.1简介

1.2简单示例

1.3三种基本选择器（重点)

1.4层次选择器

1.5属性选择器（重点)

2.美化网页

2.1 span标签

2.2字体样式

2.3文本样式

2.4 超链接伪类

2.5 列表样式练习

2.6盒子模型

2.7 浮动

2.8 定位

JS

1.基础知识

1.1显示hello

1.2基础语法

1.3调试js代码

1.4数据类型

1.5严格检查模式

2.数据类型详解

2.1字符串

2.2数组

2.3对象

2.4流程控制

2.5map和set

2.6 迭代器

3.函数

3.1 函数定义

3.2 方法

4.面向对象编程

4.1 继承

5.操作BOM对象(重点)

5.1 window

5.2 screen

5.3 location

5.4 document

6.操作DOM对象(重点）

6.1 获取节点（后用jQuery()）;

6.2 更新Dom节点

6.3删除节点

6.4插入节点

7.操作form表单

7.1 表单提交验证

7.2 md5密码加密

8. jQuery

8.1 事件

9.总结

9.1、巩固JS

9.2、巩固HTML

9.3.相关文档