℡☞-CSDN博客

原创前端面试题-1

1 块级与行内区别：块级独占一行，行内共享一行块级可以直接设置宽高，而行内不行（通过CSS的display:block / inline-block属性可以给行内元素设置宽高）块级可以包含行内与块级，而行内只能包含行内2 清除浮动：1. 兄弟级：（1）额外标签法：在浮动元素后添加一个空元素，为其添加clear:both2. 父子级：（1）额外标签法在子级元素（最后一个浮动元素）后添加一个空元素，为其添加clear:both 弊端：增加了无意义

2021-08-19 11:01:29 110

原创 HTML与CSS重构网易严选页面

花了两天时间利用html与CSS重构的网易严选的页面，在次纪念一下，以下展示部分代码，完整代码可见下方链接或者联系我头部导航栏<div class="siteNav"> <div class="g-row"> <div class="navLeft"> <div class="icon"></div> <a href="#..

2021-08-18 19:29:11 1237

原创 jQuery-ajax

jQuery AjaxjQuery为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。1 原生中ajax的使用<script> // 1.创建一个XMLHttpRequest的实例 var xhr=new XMLHttpRequest(); // 2.open('请求方式',url) 获取所有咨讯分类 xhr.open('get','http://106.14.64.171:8002/index/findAllCateg

2021-09-13 15:26:42 209 1

原创 jQuery-基础

jQueryjQuery是一个Javascript工具库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。1 jQuery入门1 .1 引入jQuery（1）通过本地文件引入js文件可从https://jquery.com/download/下载<script src="./jquery-3.6.0.js"></script>（2）通过引入CDN的链接引入<script src="https://cdn.bootcdn.net/aja

2021-09-13 15:24:06 167

原创 js-函数

函数函数声明//由function关键字声明，后面紧跟函数名，函数名后面为形参列表，列表后大括号括起来的内容为函数体function 函数名(形参列表){ //函数体}函数表达式//将一个匿名函数（没有函数名的函数）赋值给一个函数变量var 函数名 = function(形参列表){ //函数体}this但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。在方法中，this 表示该方法所属的对象。如果单独使用，this

2021-09-10 14:23:08 108

原创 js-面向对象

1. 基本包装类型为了便于操作基本类型值，ECMAScript提供了3个特殊引用类型（基本包装类型）：Boolean, Number, String。每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以调用一些方法操作这些数据。//1.基本数据类型 --变量和值保存在栈区 --没有方法和属性可以调用var str='hello'; //string类型str.split("");//自动装箱和自动拆箱当有基本数据类型可以调用方法的时候，将基本数据类型包装成了引用数据类

2021-09-10 14:20:57 70

原创 js-DOM

DOMDOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）1 节点DOM的最小组成单位叫做节点文档节点（document）：整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。元素节点（Element）：HTML文档中的HTML标签。属性节点（Attribute)：元素的属性表示的是标签中的一个一个的属性文本节点（Text）：HTML标签中的文本内容。DocumentTypedoctype:标签（比如

2021-09-10 14:19:00 227

原创 javaScript知识点

JavaScript的组成部分（面试）：ECMAScript，描述了该语言的语法和基本对象。（js的核心语法标椎）文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。变量 var、let、const的区别：var 声明全局变量，作用域为全局let 只在其所在的代码块内有效，存在暂时性死区const 同样存在暂时性死区var 存在声明变量提升，var声明的变量可在声明前使用，只不过值为undefinedlet、

2021-09-10 14:15:53 150

原创 js-AJAX

AJAXAJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。谈谈AjaxAJAX是异步的

2021-09-08 15:24:28 223

原创 js-对象

对象的创建（1）字面量模式var obj = { name:"terry", age:12, sayName:function(){ console.log("my name is ",this.name); }}（2）构造函数模式var obj = new Object();//等价于 <==>// var obj={};obj.name = "terry";obj.age = 12;obj.sayName = function(){ cons

2021-09-08 14:47:16 74

原创 js-继承的实现方式

JS继承的实现方式想要继承就必须先有父类，但js中并没有类这个概念，只是一个语法糖而已// 父“类"function Animal() { this.name="animal"; this.categorys=['cat','rabbit'];}// 原型方法Animal.prototype.getAnimalName=function () { console.log(this.name);}1 原型链继承将父类的实例作为子类的原型// 子"类”functi

2021-09-05 11:17:18 68

原创 js-创建对象的几种方式

javascript创建对象的几种方式一、字面量模式var obj = { name:"terry", age:12, sayName:function(){ console.log("my name is ",this.name); }}缺点: 对象是一次性的，复用性较差，如果要创建多个对象，代码冗余度太高二、Object构造函数//实例化一个对象var obj = new Object(); //等价于 var obj = {};//为实例化对象添加属性ob

2021-09-04 23:24:17 121

原创 js-数组API

数组的创建方式字面量创建数组var names = ["terry","larry","tom"]//字符串数组var name = "name"// 可以接收任何类型的数据当做数组的元素var arr = [12,name,true,"larry",{},function(){},[],null];使用构造函数通过Array构造函数来创建数组var names = new Array(); // 等价于 var names = []; // 如果一个参数，并且是numb.

2021-08-31 20:18:25 83

原创 12-animation动画

1 过渡和动画之间的异同1.1不同点过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画1.2相同点过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足三要素才会有动画效果2 动画的元素（1）animation-name 动画名称指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画div{ animation-name: leftToRight;}/* 新建动画的关

2021-08-19 10:58:27 104

原创 11-transition过渡

过渡三要素必须要有属性发生变化必须告诉系统哪个属性需要执行过渡效果必须告诉系统过渡效果持续时长过渡的元素（1）transition-property CSS 属性的名称 none 没有属性会获得过渡效果 all 所有属性都将获得过渡效果 property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔/* 告诉CSS width, background-color要添加过渡效果*/ transition-property:width,backgrou

2021-08-19 10:53:45 88

原创 10-CSS布局之flex布局

1 flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。2 基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。每根轴都有起点和终点，这对于元素的对齐非常重要。弹性容器中的所有子元素称为<弹性元素&gt

2021-08-19 10:48:37 813

原创 9-CSS布局之定位布局

文章目录1 静态定位2 相对定位注意3 绝对定位参考点注意子绝父相设置水平垂直居中4 固定定位注意5 粘滞定位注意z-index注意z-index注意1 静态定位默认定位方式，意味着将一个元素定位在默认文档流中position:static2 相对定位相对于其原本的位置来定位position: relative;注意相对定位是不脱离标准流的, 会继续在标准流中占用一份空间在相对定位中同一个方向上的定位属性只能使用一个由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行

2021-08-19 10:46:17 114

原创 8-CSS布局之浮动布局

文章目录1 浮动2 排版方式（1）字围现象（2）高度塌陷块级元素父子级，给子级设置浮动，为什么父级会受到影响？清除浮动（3）BFC两栏自适应布局三栏自适应布局1 浮动浮动布局用来解决块元素在x轴上排列的问题如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)可选值： none，默认值，元素默认在标准流(文档流/普通流)中排列 left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动 rig

2021-08-19 10:44:18 306

原创 7-CSS盒模型

文章目录1 盒子组成（1）外边距 margin上外边距 margin-top、下外边距 margin-bottom、左外边距 margin-left、右外边距 margin-right连写 margin: 上右下左;（2）边框border边框宽度 border-width边框样式 border-style边框颜色 border-color圆角边框 border-radious连写 border: 边框的宽度边框的样式边框的颜色;（3）内边距padding上内边距 padding-top、下内边

2021-08-17 16:40:36 68

原创 6-CSS字体及文本样式

1 文本属性1.1 color 为字体指定颜色格式：color：值取值类型：（1）英文单词颜色对应的英文单词，如red（红色）、blue、green、yellow、black…等（2）rgb rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色) 格式: rgb(0,0,0)（rgb中每个数字的取值为0-255）红色: rgb(255,0,0);绿色: rgb(0,255,0);蓝色: rgb(0,0,255)

2021-08-17 15:23:07 1113

原创 5-CSS三大特性

CSS三大特性（1）继承性作用: 子元素可以继承父元素的样式注意：不是所有元素都可以继承，只有以text-，font-，line-这些元素开头的都可以继承，以及color属性CSS继承中不仅仅是儿子可以继承, 只要是后代都可以继承特殊性：a标签的文字颜色和下划线是不能继承的h标签的文字大小是不能继承的<div class="div1"> <a href="#">百度一下</a> <h1>我是一个h标签</h1

2021-08-17 15:04:50 60

原创 4.2-CSS选择器

（1）标签选择器作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式：标签名称{属性:值;}/* 使用标签选择器给页面中的某一种标签设置样式 */div{ color: red; font-size: 40px;}（2）id选择器作用: 根据指定的id名称找到对应的标签, 然后设置属性格式：#设置的id值{ 属性：属性值}id的命名规范：只能由字母、数字、下划线，a-z 0-9 _不能以数字开头不能是HTML标签的名称，不

2021-08-16 19:37:53 348

原创 4.1-CSS引入方式

1 CSS概述层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。2 CSS的引入方式（1）内联样式(行内样式)把css代码直接写在现有的HTML标签，样式的内容写在元素的开始标签中<div styl

2021-08-16 19:29:43 66

原创 03-HTTP协议

1 HTTP协议超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是在网络上传输HTML的协议，用于浏览器和服务器的通信。HTTP报文分类：1.1 请求报文（1）定义：客户端向服务端发送请求的信号（2）组成：请求行、请求头、空行、请求体（3）请求格式1. 请求行：GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT，其中GET、POST最为常

2021-08-04 20:07:59 147

原创 02-功能元素

1 功能元素1.1 列表标签作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体分类：无序列表(最多)、有序列表（一般）、自定义列表（最少）1.1.1 无序列表一个没有特定顺序的列表项的集合(新闻列表、商品列表、导航栏)<ul> <li>列表项</li></ul>样式：ul无序列表标签的type类型属性的属性值属性值样式disc（默认值）

2021-08-04 20:00:03 325

原创 01-HTML与CSS

1 HTML与CSS1.1 什么是HTML？什么是CSSHTML(HyperText MarkUp Language)超文本标记语言HTML 不是一种编程语言，而是一种标记语言 (markup language)他是通过使用标记来描述文档结构以及表现形式的一种语言，然后由浏览器进行解析，最终把结果显示在网页上，它是网页构成的基础。HTML特点： 1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超

2021-08-04 11:27:41 574

qq_43975332的博客