淡水鳗鱼的梦Z-CSDN博客

原创 Web前端自学记录（二十二） ES6新特性

ES6新特性1.let<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt

2021-05-13 13:24:20 317

原创 Web前端自学记录（二十一） Node.js

Node.js1.命令行窗口<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-05-11 09:03:28 109

原创 Web前端自学记录（二十）jQuery

jQuery1.初识jQuery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-05-06 09:18:03 129

原创 Web前端自学记录（十九） JS高级知识

JS高级知识1.数据类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

2021-04-27 15:32:55 233

原创 Web前端自学记录（十八）DOM&BOM

DOM&BOM1.滚轮事件onmousewheel(onwheel)鼠标滚动的事件，会在滚轮滚动时触发判断鼠标滚轮滚动的方向event.wheelDelta 可以获取鼠标滚轮滚动的方向向上滚120 向下滚-120wheelDelta这个值我们不看大小只看正负wheelDelta这个属性火狐中不支持在火狐中使用event.detail来获取滚动的方向向上滚-3 向下滚3当滚轮滚动时，如果浏览器有滚动条，该滚动条会随之滚动这是浏览器的默认行为，如果不希望发生，则可以取消默认行为

2021-04-21 08:55:29 117

原创 Web前端自学记录（十七） DOM

DOM1.使用DOM操作CSS通过JS修改元素的样式语法：元素.style.样式名 = 样式值注意：如果CSS的样式名中含有-这种名称在JS中是不合法的需要将这种样式名修改为驼峰命名法去掉-，然后将-后的字母大写我们通过style属性设置的样式都是内联样式而内联样式有较高的优先级，所以通过JS修改的样式往往会立即执行但是如果在样式中写了!important，则此时样式会有最高的优先级即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效读取元素的样式语法：元素.sty

2021-04-20 09:09:07 41

原创 Web前端自学记录（十六） DOM

DOM1.DOM简介节点文档节点：整个HTML文档元素节点：HTML文档中的HTML标签属性节点：元素的属性文本节点：HTML标签中的文本内容节点的属性 nodeName nodeType nodeValue文档节点 #document 9 null元素节点标签名 1 null属性节点属性名 2 属性值文本节点

2021-04-19 09:07:59 92

原创 Web前端自学记录（十五） JavaScript

JavaScript1.DateDate对象在JS中使用Date对象来表示一个时间创建一个Date对象如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间var d = new Date();创建一个指定的时间对象需要在构造函数中传递一个表示时间的字符串作为参数日期的格式月份/日/年时:分:秒var d2 = new Date("04/15/2021 12:12:30");方法getDate() 获取当前时间对象是几日getDay() 获取当前时间对象

2021-04-16 09:27:58 65

原创 Web前端自学记录（十四） Javascript

Javascript1.toString当我们直接在页面中打印一个对象时，实际上时输出的对象的toString()方法的返回值如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法2.垃圾回收当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁我们需要做的只是要将不再使用的对象设置nu

2021-04-15 09:04:39 200

原创 Web前端自学记录（十三） JS对象和函数

JS对象和函数1.对象对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性对象的分类： 1.内建对象由ES标准中定义的对象，在任何的ES的实现中都可以使用比如：Math String Number Boolean Function Object... 2.宿主对象由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象比如：BOM DOM 3.自定义对象由开发人员自己创建的对象创建对象使用new关键字

2021-04-14 09:59:11 85

原创 Web前端自学记录（十二） JavaScript流程控制语句

JavaScript流程控制语句1.流程控制语句流程控制语句JS中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行流程语句的分类： 1.条件判断语句 2.条件分支语句 3.循环语句2.条件判断语句条件判断语句使用条件判断语句可以再执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行if语句语法一： if(条件表达式){ 语句... } if语句在执行时，会先对条件表达式进行求值判断，

2021-04-13 09:06:04 51

原创 Web前端自学记录（十一） Javascript基础

Javascript基础1.强制类型转换指将一个数据类型转换为其他的数据类型，类型转换主要指，将其他的数据类型转换为String，Number，Boolean将其他的数据类型转换为String方式一：调用被转换数据类型的toString()方法 var b = a.toString(); 该方法不会影响到原变量，它会将转换的结果返回但是注意：null和undefined这两个值没有toString()方法，方式二：调用String()函数，并将被转换的

2021-04-12 09:18:58 57

原创 Web前端自学记录（十）Javascript基础

Javascript基础1.初识JavascriptJS代码需要编写到script标签中<script> // 控制浏览器弹出一个警告框 // alert("这是我的第一行JS代码"); // 让计算机在页面中输出一个内容 // document.write()可以向body中输出一个内容 // document.write("Hello World"); // 向控制台输出一个内容

2021-04-09 08:45:27 66

原创 Web前端自学记录（九）（flex）（less）

弹性盒（Flex）1.flex(弹性盒、伸缩盒)flex是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局，flex可以使元素具有弹性，让元素可以根据页面的大小改变而改变弹性容器要使用弹性盒，必须先将一个元素设置为弹性容器我们通过display来这是弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器弹性元素弹性容器的子元素是弹性元素(弹性项)一个元素可以同时是弹性容器和弹性元素2.弹

2021-04-06 08:36:57 142

原创 Web前端自学记录（八）（animation）

animation1.过渡(transition)通过过渡可以指定一个属性发生变化时的切换方式，提升用户的体验transition-property:指定要执行过渡的属性多个属性间用，隔开，或者用all 大部分属性都支持过渡效果注意过渡时必须是从一个有效数值向另一个有效数值过渡transition-duration:指定过渡效果的持续时间

2021-04-05 09:13:48 171

原创 CSS Web端小米主页练习

base.css/* 公共样式 */.clearfix::before,.clearfix::after{ content: ""; display: table; clear: both;}/* 去除a的下划线 */a{ text-decoration: none; color: #333;}body{ font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino

2021-04-04 12:12:47 150 1

原创 CSS电影卡片练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

2021-03-31 09:03:53 239

原创 Web前端自学记录（七）（表格和表单）

表格和表单1.表格table在table中使用tr表示表格中的一行在tr中使用td表示单元格colspan 横向的合并单元格rowspan 纵向的合并单元格表格的样式border-spacing:指定边框之间的距离border-collapse: collapse; 设置边框合并默认情况下元素在td中是垂直居中的可以通过vertical-align设置2.表单表单（form）action 的值是表单要提交的服务器的地址<form action="">

2021-03-31 08:43:37 114

原创 CSS顶部导航条练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东

2021-03-30 08:22:10 90

原创 Web前端自学记录（六）（字体和背景）

字体和背景1.字体字体相关样式 color 用来设置字体颜色 font-size 字体的大小和font-size相关的单位 em 相当于当前元素的一个font-size rem 相当于根元素的一个font-size font-family 字体族(字体的格式) 可选值： serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体

2021-03-29 09:13:24 352

原创 Web前端自学记录（五）（Position）

定位（Position）1.定位的简介定位(position)定位是一种更加高级的布局手段通过定位我们可以将一个元素摆放到页面的任意位置使用positin属性来设置位置可选值： static 默认值，元素使静止的，没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位偏移量(offset)当元素开启了定位后，可以通过偏移量来设置元素的位置 t

2021-03-26 09:07:45 363

原创 Web前端自学记录（四）（Float）

浮动（Float）1.浮动的简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用float属性来设置子元素的浮动可选值： none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动注意：元素设置浮动后，水平布局的等式不需要强制成立元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置所以元素下边的还在文档流中的元素会自动向上移动2.浮动的特点基础特点1.浮动元素会完全脱离文档流，不再占据文档流中的位置2.设置浮动以后

2021-03-26 08:43:03 437

原创 CSS基础练习

图片列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

2021-03-25 12:17:33 167

转载 CSS重置样式表

reset.csshtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd,

2021-03-24 11:47:41 669

原创 Web前端自学记录（三）（Layout布局）

Layout布局基础1.文档流文档流（normal flow）网页是一个多层结构，一层压一层，通过CSS可以为每一层设置样式，作为用户只能看到最顶上的一层这些层中最底下的一层称为文档流，是网页的基础，我们所创建的元素默认都是在文档流中进行排列对于我们来说元素主要有两个状态：在文档流中不在文档流中，脱离文档流元素在文档流中的特点块元素块元素会在页面中独占一行默认宽度是父元素的宽度默认高度是被内容（子元素）撑开的高度行内元素

2021-03-24 11:42:05 465

原创 Web前端自学记录（二）（CSS基础知识）

CSS基础知识1.CSS简介网页分成3各部分结构(HTML)表现(CSS)行为(JavaScript)CSS层叠样式表网页实际上是一个多层的结构，通过CSS为网页的每一层设置样式用来设置网页中元素的样式使用CSS修改元素的样式第一种方式：内联样式/行内样式在标签内部通过style属性设置样式问题：内联样式只能对一个标签生效当样式发生变化时，需要一个一个修改注意：开发时

2021-03-24 08:53:22 65

原创 Web前端自学记录（一）（Html基础知识）

一.Html1.编辑器根据自身习惯，下载适合自己的编辑器，新手推荐使用VS Code，我现在使用的也是这个。2.实体在网页中编写多个空格默认分析为一个空格在html中有些时候，不能直接书写一个特殊符号比如空格、大于小于号如果我们需要在网页中书写这些特殊符号，则需要使用html的实体实体的语法&实体名字; ...

2021-03-23 14:07:22 63

zqc382750716的博客