前端
文章平均质量分 91
林一。
这个作者很懒,什么都没留下…
展开
-
前端基础 - 移动端(Flex伸缩布局)
移动端基础浏览器现状PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。手机屏幕的现状原创 2021-01-04 17:26:00 · 467 阅读 · 0 评论 -
前端基础 - WebApi (五)动画
动画动画核心通过一定的时间段不断处理元素的一些属性的值,实现元素的动态效果JS中提供的动画核心是通过定时器setInterval,不断的改变盒子的一些属性实现动画必须要有时间控制setInterval随着时间进行改变元素的样式属性或者属性进度条核心原理:随着时间改变元素的宽度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2020-12-25 09:27:06 · 120 阅读 · 0 评论 -
前端基础 - WebApi (四)键盘事件
键盘事件常用的三个onkeyup:当某个按键被松开的时候后触发onkeydown:当某个按键被按下的时候触发onkeypress:当某个按键被按下的时候触发,不识别功能按钮(方向键、shift)注意:如果使用addEventListener不需要加ononkeypress和前面的两个事件区别在于它不识别功能键三个时间的触发顺序是:keydown–keypress–keyup键盘事件对象属性KeyCode:返回该键的ASCII码值keydown和keyup事件对象是同样的,事原创 2020-12-25 09:17:16 · 417 阅读 · 0 评论 -
前端基础 - WebApi (三) 元素的结构创建
元素的创建总结元素的创建document.write();element.innerHTML();document.createElement();区别使用document.write是直接将内容写入到页面的内容流区域,当文档流执行完毕,会导致页面全部重绘element.innerHTML:是将内容写入当前这个节点内部,并且不会导致页面重绘,还可以创建多个元素,工作效率更高,(不需要连接字符串操作),但是写法结构比较复杂document.createElement,创建元素但是只是创建原创 2020-12-16 09:18:32 · 104 阅读 · 0 评论 -
前端基础 - WebApi (二) 自定义属性
自定义属性可以在使用DOM操作元素的时候,可以给元素添加一些其原本没有的属性,来记录一些数据获取属性值元素对象.属性名 获取属性值元素对象.getAttribute(属性名) 获取属性值区别:通过对象名点属性名获取到的是元素的属性值,并且对css属性以css形式返回。不能获取到自定义属性的值通过getAttribute获取属性值,返回的结果是以字符串体现,可以获取到自定义属性的值设置属性值元素对象.属性名=属性值元素对象.setAttribute(属性名,属性值);//属性名完全原创 2020-12-16 09:17:21 · 391 阅读 · 0 评论 -
前端基础 - 案例 (四) 排他思想 和 实现全选
案例排他思想先找到所有的元素消灭所有的元素样式,改成初始样式然后留下自己,设置特定样式注意:顺序不能颠倒,先消灭后自己 window.onload=function(){ // 【1】选择所有的相关元素 // .getElementsByTagName("li") var lis=document.querySelectorAll(".choose>li"); // lis是一原创 2020-12-16 09:16:11 · 221 阅读 · 0 评论 -
前端基础 - WebApi (一)
格式化字符串使用字符串方法formatJS中不存在format方法,因此也无法使用,需要手动添加ES6语法格式化var inter=`这个人的名字是${man.name},他的年龄是${man.age},他的性别是${man.sex}`;使用``符号将字符串进行括起来,然后字符串里面的变量数据使用${}括起来,在{}里面可以写变量、表达式toString方法 var a=20.00; console.log(a.toString(2));将数原创 2020-12-16 09:13:54 · 182 阅读 · 0 评论 -
前端基础 - 案例(三) 报时器
实现一个报时器,例如6:00-12:00显示早上好; 12:00-18:00显示下午好;18:00-6:00显示晚上好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS实现报时原创 2020-11-24 09:31:18 · 201 阅读 · 0 评论 -
前端基础 - JavaScript (七) 内置对象
内置对象JS中的对象总共分三种:自定义对象、内置对象、浏览器对象。前两种都是JS的基础内容属于ECMAScript。浏览器对象属于JS独有的,之后学习的Web API中专门讲解。内置独享包含哪些根据JS API(Application Program Interface),开发文档说明,讲解的内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或者最基础的最必要的功能(常用的属性、函数等)JavaScript内置对象:Math、Date、Array、String等内置对象原创 2020-11-24 09:25:48 · 433 阅读 · 0 评论 -
前端基础 - JavaScript (六) 预解析
预解析概念HTML、CSS、JS代码全部交由浏览器两个引擎,渲染引擎和JS引擎两个负责执行的。JS引擎负责对JavaScript代码进行执行处理,通过两个步骤完成JS代码的执行任务,分别是预解析和代码执行什么是预解析在当前变量或者函数等作用域下,JS代码在执行之前,浏览器默认会将JS代码中有关var或者function声明的变量或者函数在内存中进行提前声明以及提前定义代码执行:将预解析的结果进行从上往下逐步执行 console.log(num);原创 2020-11-24 09:24:13 · 120 阅读 · 0 评论 -
前端基础 - JavaScript (五) 函数
函数函数的概念在JS里面,在开发过程中经常会遇到一种情况,某种算法或某些代码要经常出现或使用多次,对于这种情况使用for循环不是一种比较好的办法,for循环只能解决一些简单的重复使用问题,而遇到复杂的情况则需要使用函数的概念函数:将一段可能会被大量重复调用执行的代码段进行封装成一个整体,通过这个整体的名称(函数名)的调用就可以实现大量代码的重复调用函数的使用声明函数 function getMax(){ var arr=[2,5,4,3,8,原创 2020-11-17 16:18:36 · 97 阅读 · 0 评论 -
前端基础 - JavaScript (四)
数组数组的概念数组是可以将一组相关的数据一起存放,并且提供了一些方便访问以及获取的方式数组的本质是一组数据的集合,里面的每个成员数据称为元素,一个数组里面可以存放任意多个以及任意类型的数据(一个JS数组中的元素类型可以不相同)数组的创建使用关键字new创建直接使用[]进行创建 var arr=["张三","男",23]; console.log(arr);数组的创建方式1里面new后面跟的是Array,添加数组元素可以使用数组索引的方式原创 2020-11-16 09:57:42 · 68 阅读 · 0 评论 -
前端基础 - JavaScript (三)
流程控制流程控制的概念在一个程序的执行过程中。每行代码的执行顺序如果不同,对于程序的执行结果是不一样的。一般情况下需要人为控制代码的执行过程以达到我们需要的效果通过一定的手段控制代码的执行顺序分类顺序结构:标准的从上往下执行的顺序分支结构:通过判断一定的条件选择所要执行的代码,而产生若干分支循环结构:通过一定的条件约束部分代码重复执行若干次顺序流程最简单最基本的流程控制,默认的程序代码按照从上往下的顺序依次执行分支流程分支结构代码由上往下执行的过程中,根据条件进行选择不同的代码执原创 2020-11-15 10:01:52 · 159 阅读 · 0 评论 -
前端基础 - JavaScript (二) 数据类型
JavaScript语言为什么需要数据类型在计算机中,不同的数据所需要占据的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,因此定义了不同的数据类型。数据类型能够代表数据的特征和属性注意:JS中的数据类型,是js代码在运行时,由js引擎根据=后面的数据值的数据类型来明确的数据类型分类简单数据类型:Number,String,Boolean,Undefined,Null复杂数据类型:object简单数据类型简单数据类型说明Number数字类型原创 2020-11-13 09:33:12 · 149 阅读 · 0 评论 -
前端基础 - JavaScript (一) 什么是JavaScript?
JS是什么JS的出处JS语言的性质弱类型的脚本语言弱类型数据类型?(DataType)1.声明变量不需要声明数据类型2.数据的类型取决于存储的数据的值脚本语言本质和编译语言不同,编译语言的运行是直接对CPU负责,CPU直接将编译语言先转变成二进制之后再进行执行。而脚本语言并不对CPU直接负责,脚本语言的执行核心是这个脚本的解释器,js的解释器是浏览器的JS引擎JS的执行并非是将JS转为二进制之后CPU执行,而是,首先通过JS引擎将JS代码进行解释执行JS基础语法(一)JS的引入J原创 2020-11-13 09:29:36 · 109 阅读 · 0 评论 -
前端基础 - 案例二:酱品购电商网站首页(精简版)
酱品购电商网页–精简版HTML :<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="style原创 2020-11-06 09:22:27 · 158 阅读 · 0 评论 -
前端基础 - 案例一:基础网站搭建
基础网站搭建案例:HTML :<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesh原创 2020-11-06 09:21:23 · 789 阅读 · 2 评论 -
前端基础 - CSS(四)
css提供了三种传统的布局方式 1.普通流(标准流) 所谓的普通流就是标签按照规定好的方式进行排列(块元素、行内元素 标准流布局) 2.浮动 3.定位 浮动(float) 本质-css摆放盒子 为什么需要浮动? 有很多的布局效果,标准流没有办法完成的,此时我们就需要利用浮动完成布局 因为浮动可以改变标签的默认的排列方式 浮动最典型的应用就是多个块元素一行排列显示.原创 2020-11-03 18:47:05 · 106 阅读 · 0 评论 -
前端基础 - CSS(三)
盒子模型三大核心:盒子、浮动、定位 ->布局的网页的布局过程 准备好相关的网页元素,Box 利用CSS设置好盒子样式,摆放位置 往盒子里装东西 核心的本质:利用CSS摆盒子盒子模型:矩形的盒子。容器 CSS盒子模型本质就是一个盒子 封装周围的HTML元素、边框、内边距、外边距 1.边框(border) border可以设置元素的边框的。边框是由三部分组成 粗细、颜色原创 2020-11-03 09:31:11 · 133 阅读 · 1 评论 -
前端基础 - CSS(二)
复合选择器 复合选择器是由两个或者多个基础选择器,通过不同的方式组合而成 快速定位到所需要的标签1.后代选择器->包含关系2.子代选择器 只能选择作为一种某元素最近的元素3.并集选择器 并集选择器可以选择多组标签,同时为他们定义相同的样式。 元素1,元素2{样式声明}表示选择元素1和元素2 元素1和元素2中间用逗号隔开 逗号可以理解为和的意思 并集选择器通常用于集体声明原创 2020-10-31 10:38:59 · 133 阅读 · 0 评论 -
前端基础 - CSS(一) 层叠样式表
CSS (层叠样式表)css也是一个标记语言作用: (1)设置HTML页面中的文本内容、图片的外形以及版面的排版显示 (2)页面布局更加灵活css样式规则:两部分组成:选择器 声明 选择器:用于指定css样式的HTML标签,花括号内是对这个对象设置的具体样式 属性和属性值 键值对出现 属性与属性值之间使用“ : ”分开 多个声明之间使用“ ; ”分开符合实际开发的书写方式1.样式格式的书写h4 { color: yello原创 2020-10-29 19:05:53 · 106 阅读 · 0 评论 -
前端基础 - HTML(一)html基本结构
html概述和基本结构html概述HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。ht原创 2020-10-29 19:04:10 · 3216 阅读 · 0 评论 -
前端基础 - HTML(二) 表格、表单、列表
表格table标签用于定义表格tr 必须嵌套在table标签中td 必须嵌套在tr中表格的基本语法:<table border="1" allign="center" cellspacing="2" cellpadding="1"> ↑---border代表边框线 align代表位置 right左边left(右边)center(中间) cellspacing规定单元格与单元格之间的空白 默认值为2像素原创 2020-10-28 18:50:32 · 166 阅读 · 0 评论