前端
关注
分享
扫一扫
H5全栈学习笔记
珵、、、雪
这个作者很懒，什么都没留下…
展开
-
HTML学习之表单
表单作用：收集用户填写的数据，目的是把数据扔给服务器form叫表单action="" 表示你要把数据提交给哪个服务器method=“get” 表示提交方法通过get方式把数据扔给服务器还有其他方式表单元素input 是一个人妖标签：并排显示，可设置宽高type=“text、password、radio、checkbox、submit、reset、button”buttontextareaselect + option...原创 2022-01-08 21:23:53 · 176 阅读 · 0 评论 -
表单练习2
目标图问题1：如何消除单元格之间的空隙答：table { border-spacing: 0;}border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2022-01-08 21:47:51 · 233 阅读 · 0 评论 -
H5练习：小米部分页面实现
Document<style type="text/css"> a{ text-decoration: none; } td{ -webkit-transform: scale(1); -webkit-transition-duration: 0.5s; } td:hover{ -webkit-transtorm:scale(1.1); -w...原创 2022-01-06 09:04:22 · 405 阅读 · 0 评论 -
H5第二课：常用标签
1、文字文字可以直接写在body中，但是不推荐！ 空格和换行只是为了代码优美，在页面上没有效果。（1）常用标签h1 – h6：标题加粗，字体大小逐渐缩小，前后自带换行，有间距。p：段落前后自带换行，有间距。br：换行hr：水平线（2）过时的标签（css3取代）font、b、i、u、s、center2、图片 <img src="images/1.jpg" height="200" width="200">...原创 2022-01-06 13:13:31 · 359 阅读 · 0 评论 -
H5第一课
HTML5开发一、前端开发1、工作内容主要做软件界面的设计，调用后端接口。2、前端开发分类Android前端开发：Android APP。IOS前端开发：IOS APP。微信小程序开发：腾讯提供的技术。HTML5前端开发：PC网页、移动端网页、Android APP，IOS APP、微信公众号。二、网页设计1、第一步，设计网页的内容学习HTML5语言。2、第二步，添加内容的样式学习CSS3语言。3、第三步，给内容添加特效（动画效果）学习JavaScript语言：语法，事件处理，原创 2022-01-05 21:36:19 · 1126 阅读 · 0 评论 -
form表单练习
问题一：下拉列表中的请选择一个问题如何设置？答：<option value="none" selected disabled hidden>请选择</option>问题二：个人介绍如何从文本域的左下角移动到左上角？<style> textarea{ vertical-align: top; } </style>问题三：如何将左对齐改为列表对齐？代码如下：...原创 2022-01-08 20:52:53 · 601 阅读 · 0 评论 -
移动端开发一：基本概念
b/s架构：b:browser浏览器s:server服务器浏览器向服务器发起N次请求，包括html页面，css，图片，js等等服务器向浏览器响应数据。1）PC端： 网站 系统2）手机端： webapp 手机的网站c/s架构c:client 客户端 手机上安装的软件 电脑上安装的软件s:server 服务器app：1）nativeapp 原生app（基于c/s架构）android/ios原生app是运行在手机的操作系统上的优点：速度快，访问本地资源（体验好，动画效果也原创 2022-01-19 19:47:49 · 2718 阅读 · 0 评论 -
css伪元素
::before表示在该元素内部的最前面插入一个元素::after表示在该元素内部的最后面插入一个元素<标签 class=“类名”> （这里是元素内部的最前面） 内容 （这里是元素内部的最后面） </标签>.类名::before{ display:block; content:""; }效果图：（伪元素来实现分割线）HTML<div class="channel_list"> <div class="c.原创 2022-01-19 20:23:05 · 118 阅读 · 0 评论 -
JS高级四：IIFE
IIFE立即调用函数表达式Immediately Invoked Function Expression在定义函数时直接调用函数IIFE详细的写法请参考：https://blog.youkuaiyun.com/qq_42683219/article/details/104161466这里浅记一下对返回结果不进行处理的两种写法：写法一：(function fn(形参) { console.log("fn...");})(实参)写法二：(function fn(形参) { console.原创 2022-03-07 20:59:59 · 86 阅读 · 0 评论 -
一、JS介绍
js是什么？首先，JavaScript是一门编程语言，和C、java、python一样，但和html、css不一样，他们不是编程语言。其次，JavaScript和Java没有半毛钱关系，只是为了蹭热度，原来叫liveScript，后来发行Java的SUN公司决定和研发javaScript的网景(netscape)公司合作这个项目，改名为JavaScript。ESECMAScript，简称ES，ECMA是欧洲计算机制造联合会，是一个组织，用来定义标准，这个组织推出来的标准就叫ECMAScript。JS原创 2022-02-25 17:20:55 · 582 阅读 · 0 评论 -
JS高级十四、迭代器
迭代器是一个对象迭代器是一个对数据解构进行遍历的对象迭代器是一个需要满足迭代器协议的帮我们对数据解构进行遍历的对象在JS中这个协议就是一个特定的next方法可迭代对象和迭代器不是一个概念一个可迭代对象需要实现iterable protocol协议要求必须实现@@iterator方法，在JS代码中，我们使用Symbol.iterator访问@@iterator只要使用for of可以遍历的，都是可迭代对象。生成器（ES6）控制函数暂停是一个函数function前面有一个*可以通过y原创 2022-03-17 20:57:58 · 294 阅读 · 0 评论 -
面试题vuex
搜集的一些vuex相关面试题，答案有参考也有自己的理解原创 2022-06-07 21:51:48 · 189 阅读 · 0 评论 -
块级标签、行内标签、行内块标签
标签性别男标签：独占一行，可以设置宽高，可以设置对齐方式人妖标签：并排显示，可以设置宽高，不能设置对齐方式女标签：并排显示，不能设置宽高，不能设置对齐方式不能设置宽高的女标签可以嵌套于男标签中。男标签h标签（属性：align）p标签（属性：align）hr标签（属性：color、width、size、align）人妖标签img标签（属性：src、alt、width、height、title）alt属性：规定图像的替代文本。title属性：鼠标悬停在土拍你上给予提示。女标原创 2022-01-08 21:38:32 · 384 阅读 · 0 评论 -
react中的ref
refs的三种形式：字符串形式、回调函数形式、容器形式原创 2022-06-07 19:45:54 · 137 阅读 · 0 评论 -
十、流程控制
1、流程控制区分语句和表达式：1、所有的有值的内容都是表达式2、语句是JS中定义好的，如：声明语句 var a = 110、if语句、for语句、while语句…3、通常情况下，语句建议使用分号结束，在JS中，分号也可以不加1、选择结构if语句，格式如下：if(条件表达式){ }else if(条件表达式){}else{}1、条件表达式的结果是布尔值，如果不是，则会发生隐式类型转化null、und、0、-0、NaN、空串会转化成false，其他都会转化成true原创 2022-03-01 20:27:45 · 69 阅读 · 0 评论 -
八、JS数据类型转换
1、转换成String类型1、toString()方法布尔类型转字符串true.toString()数值类型转字符串(123).toString()不能处理null和undefined2、借String类型函数String(数据)可以将null和undefined直接转成字符串3、字符串拼接任何数据 + 字符 = 字符串 “hello” + 123;程序处理时，会先把非字符串数据，使用String，转换成字符串，再做字符串拼接2、转换成Number类型1、借Number类原创 2022-02-25 21:02:09 · 209 阅读 · 0 评论 -
css中需要注意的，容易忽略的点
margin在行级标签的垂直方向上不起作用原创 2022-01-19 20:02:58 · 90 阅读 · 0 评论 -
CSS第一课：css引入、选择器
CSS语言一、css介绍1、用途html添加了网页的内容，css专门用来定义内容的样式。css: casecading style sheet 样式表2、css引入（1）标签式（行内式）通过标签的style属性引入css代码，只能作用于当前标签的内容。（2）内部样式（文档式）通过style标签，引入css代码，可以作用于整个页面。（3）外部样式（外部链接式）将css代码写入*.css文件，通过link标签引入，必须加rel=“stylesheet”。可以作用于多个页面。二原创 2022-01-06 15:23:19 · 196 阅读 · 0 评论 -
二、写JS代码的三种方式
写JS代码的三种方式1、行内式格式：<button onclick="alert('hello js');">点我</button>2、内部JS（页内式）格式：<!-- type="text/javascript" 表示你写的脚本类型是JS --><!-- 如果不写，默认也是type="text/javascript" --><script type="text/javascript"> alert("hello js");&原创 2022-02-25 17:44:57 · 2190 阅读 · 0 评论 -
reset.css重置样式设置
内容一般有：/* 为什么不写“ * ”，“ * ”效率低，一般情况下，网页上用到什么标签，就写什么标签*/body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}/* text-align font-family有继承性 */body{text-原创 2022-01-19 20:52:25 · 539 阅读 · 0 评论 -
三、JS注释
JS注释1、单行注释：//vscode快捷键：Ctrl + /2、多行注释：/* 注释内容*/vscode快捷键：alt + Shift +a3、文档注释1、函数描述/*** 计算两个数值的和* @param a {number} 参数1* @param b {number} 参数2* @returns {number} 两个数值的和* @author Sz 2022/05/20* @example* 6, 10 => 16*/2、文档描述/*** 文件名原创 2022-02-25 18:50:00 · 354 阅读 · 0 评论 -
react中的props
1、props如何传参通信2、传参限定3、配置默认值4、批量传值原创 2022-06-07 17:35:12 · 92 阅读 · 0 评论 -
六、JS命名规则和规范
1、标识符标识符就是一个单词，一个名字常量名、变量名、函数名都是标识符关键字、保留字也是标识符2、命名规则1、由字母、数字、下划线和$符号组成，不能以数字开头2、不能是关键字和保留字3、严格区分大小写3、命名规范1、变量名最好见名知意2、小驼峰命名法：首字母小写，后面单词的首字母需要大写**（推荐）**var userName = "wc"; // 小驼峰命名法var UserName = "xq"; // 大驼峰命名法var user_name = "xx"; // 下划线原创 2022-02-25 19:55:45 · 2263 阅读 · 0 评论 -
十二、hanshu
函数在JS中，函数是JS的核心。在JS高级中，最主要的就是函数。在JS中，函数是引用数据类型，引入数据类型是存储在堆区，在栈区保存了堆区所对应的地址。1、创建函数在JS中创建函数有两种形式：1）函数声明 function 函数名称（参数列表）{ 函数体 }2）函数表达式var 函数名称 = function（参数列表）{ 函数体}注意：调用函数时解析器不会检查实参的类型，所以开发中一般需要对参数进行类型的检查函数的实参可以是任意的数据类型调用函数时，解析器不会原创 2022-03-03 16:16:10 · 100 阅读 · 0 评论 -
JS高级一、预解析
1、代码段一个script标签就是一个代码段JS代码在执行时，是一个代码段一个代码段执行代码段彼此独立，上面的代码段报错了，不会影响下面的代码段下面代码段可以使用上面代码段中定义的数据，但上面代码段不能使用下面代码段中定义的数据JS代码的执行分两个阶段：预解析和执行，预解析结束后，才会进入到执行阶段2、预解析预解析期间做了什么？1、提升声明：var声明的变量和function声明的函数会被提升到代码段的最前面。2、变量的提升仅仅是声明，不包括赋值，函数的提升不只提升声明，也提升赋值（原创 2022-03-05 21:11:59 · 128 阅读 · 0 评论 -
JS高级十、继承
1、原型链继承2、构造函数继承（call继承）3、组合继承4、寄生组合继承原创 2022-03-10 22:02:19 · 114 阅读 · 0 评论 -
css练习-新闻页
CSS练习-新闻页HTML5<!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="stylesheet原创 2022-01-06 21:41:09 · 407 阅读 · 0 评论 -
Sass基础
Sass是为了让我们更优雅地写CSS，可以让我们使用编程语言中的特性来写CSS浏览器不能识别Sass，写好的Sass需要编译成CSSvscode使用插件easy sass。Sass写法：文件后缀：.scss例：$fs：10px；$声明变量fs：变量名；10px：变量值...原创 2022-04-05 16:35:20 · 501 阅读 · 0 评论 -
react中的state
简单介绍如何对react中的state（状态）进行初始化并使用原创 2022-06-07 17:13:40 · 192 阅读 · 0 评论 -
JS高级十一、ES6
1、对象中属性和方法的简写属性的简写简写前简写后uname: unameunameage: ageage方法的简写简写前简写后fn:function(){console.log(“fn…”)}fn(){console.log(“fn…”)}2、数组的解构和对象的解构解构的目的：从数组或对象中快速获取数据1、数组的解构赋值：let names = ["aa","bb","cc"];let [x,y,z] = names;原创 2022-03-14 22:22:12 · 862 阅读 · 0 评论 -
七、JS数据类型
为什么会有数据类型的额概念？为了更加合理地使用内存空间1、基本数据类型1、string使用单引号或双引号包裹，单引号和双引号之间可以互相嵌套，但不能自己嵌套自己，如果确实需要嵌套，可以使用转义字符2、number在JS中，不区分小数和整数，都是number类型特殊数值：最大值：Number.MAX_VALUE最小值：Number.MIN_VALUE无穷大：Infinity 10 / 0无穷小：-Infinity -10 / 0非法数字 NaNJS中当对数值进.原创 2022-02-25 20:36:57 · 175 阅读 · 0 评论 -
十四、字符串
创建字符串通过字面量的形式创建 var str1 = "hello"; var str2 = ""; //空串，隐式转化成false通过new的形式创建 var str = new String("hello string");原创 2022-03-03 16:46:31 · 78 阅读 · 0 评论 -
五、常量、变量
1、字面量（常量）1、字符串使用单引号或双引号包起来的2、数字不区分整数和小数3、布尔两个值：true、false4、Object（数组、对象）5、自定义常量ES6版本中新增的，通过const来自定义常量，常量名通常大写，如果由多个单词构成，可以用下划线隔开const PI = 3.14const MY_SITE = 'http://www.baidu.com'2、变量1、变量 = 变量名 + 变量值2、声明变量：var没有赋值的变量存储的是undefinedvar a原创 2022-02-25 19:46:04 · 174 阅读 · 0 评论 -
十一、数组（JS）
Js中的数据类型:√基本数据类型: number string boolean undefiend null√引用数据类型:数组，函数，对象I不同的数据类型，在内存中存储的地方是不一样的，基本数据类型是存储在栈区的，引用数据类型是存储在堆区。如下:在栈区保存了堆区数据|;的地址...原创 2022-03-03 15:48:11 · 419 阅读 · 0 评论 -
四、JS-ES5-输入输出
1、输入1、prompt<script> prompt("使用prompt进行输入"); </script>2、confirm<script> comfirm("使用confirm来进行输入"); </script>2、输出1、alert<script> alert("弹窗效果"); </script>2、console<script> conso原创 2022-02-25 19:18:39 · 364 阅读 · 0 评论 -
安装vue调试插件
插件：vue-devtoolsvue_devtools_chrome_5.3.4百度网盘下载链接：https://pan.baidu.com/s/1xXHRHX9UByEMEDkXiDlwgA提取码：bmtwchrome示例：设置：更多工具→扩展程序（chrome://extensions/）将vue_devtools_chrome_5.3.4.crx文件拖到chrome扩展程序页面即可...原创 2022-05-14 20:48:45 · 473 阅读 · 0 评论 -
九、JS中的运算符
1、运算符两侧的操作数的数据类型一定是一样的，如果不一样，会发生隐式类型转化2、NaN与任何数据计算都是NaN，在关系运算符中任何数据和NaN进行比较，结果都是false1、运算符从功能上分类：1、算数运算符：+ - * / %优先级：* / % 高于+ -，如果优先级一样，则从左到右计算（左结合性）加号运算符：任何非数值（非字符串）的数据在参与加法运算之前，都会自动隐式转化成数值类型，再参与计算（true→1、null→0）任何数据和字符串相加，+就变成了字符串拼接运算符，不再.原创 2022-02-28 16:56:50 · 152 阅读 · 0 评论 -
响应式原理
1、数据驱动1、什么是数据驱动？- 数据驱动视图，改变数据，模板自动刷新- 不需要操作DOM1.1、数据响应式1、什么是数据响应式？- 模板基于数据驱动，改变数据，模板自动刷新2、Jquery操作DOM，vue操作数据，靠数据驱动视图1.2、双向绑定1、视图随数据改变而改变，数据也随视图改变而改变2、可以使用v-model在表单元素上创建双向数据绑定。2、响应式原理vue2与vue3均有自己的响应式原理2.1、Vue2.x响应式原理1、官方文档：https://cn原创 2022-05-28 21:18:38 · 143 阅读 · 0 评论 -
JS高级十五：JSON
1、JSON什么是JSON？JSON：JavaScript Object NotationJSON是服务器响应给客户端的数据格式也可以把JSON数据给服务器JSON是客户端与服务器之间通信的一种数据格式JSON的语法要求：支持的数据类型：数字、字符串、布尔值、null值、数组、对象不支持的数据类型：函数、undefined对象的key必须用双引号包起来JSON中没有注释可以通过某些网站进行格式化校验常见格式：第一种："hello json"第二种{ "nam原创 2022-03-17 16:46:12 · 784 阅读 · 0 评论 -
margin塌陷问题
margin塌陷问题是发生在垂直方向上的1、兄弟元素上盒子设置了margin-bottom下盒子设置了margin-top则两个盒子之间的距离取决于两个值中较大的一方2、父子元素1）子元素设置了margin-top则父元素和子元素一起下落子元素在父元素中的相对位置不变 2）父元素设置了margin-top子元素设置了margin-top则父子元素一起下落，下落的px值取决于较大的一方子元素相对父元素位置不变...原创 2022-01-13 14:21:37 · 101 阅读 · 0 评论