亖伍-CSDN博客

原创前端学习之JavaScript——内置对象

1. 内置对象JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于我们JS 独有的内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）内置对象最大的优点就是帮助我们快速开发JavaScript 提供了多个内置对象：Math、 Date 、Array、String等2. 查文档2.1 MDN学习一个内置对象的使用，只要

2020-08-11 08:09:04 769

原创前端学习之JavaScript——对象

1. 对象1.1 什么是对象？在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）2. 创建对象的三种方式在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：利用字面量创建对象利用 new Object 创建对象利用构造函数创建对象2.1 利用字面量创建对象

2020-08-11 07:35:59 550

转载前端学习之JavaScript——预解析

1. 预解析JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。代码执行：从上到下执行JS语句。预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefine

2020-08-10 15:59:37 373

原创前端学习之JavaScript——作用域

1. 作用域1.1 作用域概述通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。JavaScript（es6前）中的作用域有两种：全局作用域局部作用域（函数作用域）1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件1.3 局部作用域（函数作用域）作用于函数内的代码环境，就是局部作用域。因为跟函数有关系

2020-08-10 15:14:45 269

原创前端学习之JavaScript——函数

1. 函数的概念在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。2. 函数的使用函数在使用时分为两步：声明函数和调用函数。2.1 声明函数// 声明函数function 函数名() { //函数体代码}function 是声明函数的关键字,必须小

2020-08-10 14:49:23 414

原创前端学习之JavaScript——数组

1、数组的概念数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。// 普通变量一次只能存储一个值var num = 10; // 数组一次可以存储多个值var arr = [1,2,3,4,5];2、创建数组JS 中创建数组有两种方式：利用 new 创建数组利用数组字面量创建数组2.1 利用 new 创建数组var 数组名 = new Array() ；var arr = new Array(

2020-08-10 14:23:00 569

原创前端学习之JavaScript——流程控制循环

1、循环循环目的在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句JS 中的循环在Js 中，主要有三种类型的循环语句：for 循环、while 循环、do…while 循环2、for 循环在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句2.1 语法结构for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：for(初始化变量; 条

2020-08-02 17:06:00 267

转载前端学习之JavaScript——流程控制分支

1、流程控制在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。2、顺序流程控制顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。3、分支流程控制 if 语句3.1 分支结构由

2020-08-02 16:12:38 723

原创前端学习之JavaScript——运算符

1、算数运算符1.1 算术运算符概述概念：算术运算使用的符号，用于执行两个变量或值的算术运算。1.2 浮点数的精度问题浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004console.log(0.07 * 100); // 结果不是 7，而是：7.000000000000001所以：**不要直接判断两个浮点数是否相等 ! **1.3

2020-08-02 15:52:08 414

原创前端学习之JavaScript——数据类型

1、数据类型简介1.1 为什么需要数据类型在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。1.2 变量的数据类型变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。**JavaScript 是一种弱类型或者说动态语言。**这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。var age = 10;

2020-07-31 20:58:55 308

原创前端学习之JavaScript——变量

1、变量概述1.1 什么是变量通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。1.2 变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间。2、变量的使用2.1 声明变量// 声明变量 var age; // 声明一个名称为age 的变量 var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管age 是程序员定义的变量名，我们要

2020-07-30 22:46:14 359

原创前端学习之JavaScript简介

1、JavaScript 是什么JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行现在也可以基于 Node.js 技术进行服务器端编程2、JavaScript 的作用-表单动态校验（密码强度检测）（ JS 产生最初的目的）网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)

2020-07-30 22:07:17 236

原创前端学习之——SEO优化

TDK三大标签SEO优化1、SEO是什么SEO（Search Engine Optimization汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合 SEO 优化2、TDK是什么2.1 T – Title（网站标题）title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳

2020-07-30 16:17:54 295

原创前端学习之——网站 favicon 图标

网站 favicon 图标favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。1、制作favicon图标把图标切成 png 图片把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/2、使用favicon图标favicon图标放到网站根目录下HTML页面引入favicon图标在html 页面里面的 <head> <

2020-07-30 16:17:25 636

原创前端学习之CSS3新特性

1、CSS3 的现状新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛现阶段主要学习：新增选择器和盒子模型以及其他特性2、CSS3 新增选择器CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器2.1 属性选择器属性选择器，按照字面意思，都是根据标签中的属性来选择元素属性选择器，按照字面意思，都是根据标签中的属性来选择元素属性选择器可以根据元素特定属性的来选择元素。这样就

2020-07-30 15:55:19 240

原创前端学习之HTML5新特性

概述HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。1、语义化标签以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的<div class=“header”> </div><div class=“nav”> </div><div class=“content”&g

2020-07-30 15:39:36 299

原创前端学习之CSS——常见布局技巧

1. margin负值运用让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）2. 文字围绕浮动元素效果布局示意图巧妙运用浮动元素不会压住文字的特性3. 行内块巧妙运用页码在页面中间显示:把这些链接盒子转换为行内块，之后给父级指定 text-align:center;利用行内块元素中间有缝隙，并且给父级添加 text-align:cen

2020-07-29 23:39:17 262

原创前端学习之CSS——用户界面样式

什么是界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式表单轮廓防止表单域拖拽1、鼠标样式 cursor li { cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。2、轮廓线 outline给表单添加 outline: 0; 或者 outline: none;样式之后，就可以去掉默认的蓝色边框。 input { outline: none; }3、防止拖拽文本域

2020-07-29 23:24:48 606

原创前端学习之CSS——字体图标

1. 字体图标1.1 字体图标的产生字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的，但是缺点很明显。图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。1.2 字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了

2020-07-29 23:16:21 546

原创前端学习之CSS——精灵图

1. 精灵图1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为什么使用精灵图（目的）：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。精灵图举例:1.2 精灵图（sprites）的使用

2020-07-29 23:07:47 1264

原创前端学习之CSS——定位

1.为什么使用定位浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。2. 定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。2.1 边偏移（方位名词）边偏移就是定位的盒子移动到最终位置。有 top、bo

2020-07-29 22:51:14 207

原创前端学习之CSS——浮动

1、传统网页布局的三种方式CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。2、标准流（普通流/文档流）所谓的标准流: 就是标签按照规定好默认方式排列块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序

2020-07-29 22:24:44 300

原创前端学习之CSS——盒子模型

1、网页布局的本质网页布局的核心本质：就是利用 CSS 摆盒子。网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式，然后摆放到相应位置。往盒子里面装内容2、盒子模型（Box Model）组成盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容3、边框（border）3.1、边框的使用

2020-07-29 22:05:44 315

原创前端学习之CSS——CSS三大特性

1、层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠2、继承性CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：text-，font-，line-这些元素开头的可以继承，以及color属性继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打

2020-07-29 22:04:26 165

原创前端学习之CSS——背景

通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1、背景颜色样式名称：background-color 定义元素的背景颜色使用方式：其他说明：元素背景颜色默认值是 transparent（透明）2、背景图片样式名称：background-image 定义元素的背景图片使用方式：其他说明：实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是

2020-07-29 21:25:57 182

原创前端学习之CSS——元素显示模式

1、什么是元素的显示模式定义：元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。2、元素显示模式的分类2.1、块元素常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><div> 标签是最典

2020-07-29 21:02:05 364

原创前端学习之CSS——复合选择器

1、什么是复合选择器？在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等2、后代选择器 (重要）定义：后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时

2020-07-27 23:05:39 176

原创前端学习之CSS——emmet语法

1、简介Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。2、快速生成HTML结构语法生成标签直接输入标签名按tab键即可。比如 div 然后tab 键，就可以生成 <div></div>如果想要生成多个相同标签加上 * 就可以了。比如 div*3 就可以快速生成3个div如果有父子级关系的标签，可以用 >。比如 ul > li就可以了如果有兄弟关系的标签，用

2020-07-27 23:01:55 287

原创前端学习之CSS——字体、文本

css字体属性:字体大小：CSS 使用 font-size 属性定义字体大小。语法： p { font-size: 20px; }px（像素）大小是我们网页的最常用的单位谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小可以给 body 指定整个页面文字的大小字体粗细：CSS 使用 font-weight 属性设置文本字体的粗细。语法： p {

2020-07-27 17:32:11 358

原创前端学习之CSS——选择器的种类

css选择器的作用选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。例如：找到所有的 h1 标签，选择器（选对人）。设置这些标签的样式，比如颜色为红色（做对事）。css基础选择器基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器。标签选择器标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。语法：标签选择器{ 属性：属性值

2020-07-27 17:10:50 282

转载前端学习之CSS简介

CSS简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。CSS 最大价值: 由 HTML 专注去做结构呈现，样

2020-07-27 16:48:14 256

原创前端学习之HTML——表单

为什么需要表单：使用表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。表单的组成：在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。表单域：表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器.实现代码：<form action=“url地址

2020-07-27 16:21:27 399

原创前端学习之HTML——列表

列表表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。无序列表<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。无序列表的基本语法格式如下： <ul> <li>列表项1</li> <li>列表项2</l

2020-07-27 11:08:51 374

原创前端学习之HTML——表格

表格的主要作用表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理表格不是用来布局页面的,而是用来展示数据的。表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr>

2020-07-26 23:27:12 629

原创前端学习之HTML简介

一、HTML语法规则1.HTML 标签是由尖括号包围的关键词，例如。2.HTML 标签通常是成对出现的，例如和，我们称为双标签。3.HTML 标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签（极少情况），例如，我们称为单标签。二、标签的关系双标签关系可以分为两类：包含关系和并列关系包含标签：<head><title> </title></head>并列关系：<head> <

2020-07-26 22:58:03 204

原创【网页开发】网页的相关概念

一、什么是网页网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。1、网页的组成：网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。2、什么是HTML：HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描

2020-07-26 21:42:24 444

Jane_xxxxxy的博客