![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
【HTML & CSS & JS】相关
文章平均质量分 92
关于 HTML & CSS & JS.
江湖人称菠萝包
这个作者很懒,什么都没留下…
展开
-
【JS】Chapter15-高阶技巧
相同点:都可以改变函数内部的this指向.区别点:call 和 apply 会调用函数, 并且改变函数内部this指向.call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式,apply 必须数组形式[arg]bind 不会调用函数, 可以改变函数内部this指向.主要应用场景:call 调用函数并且可以传递参数apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值。原创 2023-11-22 23:00:00 · 616 阅读 · 0 评论 -
【JS】Chapter14-深入面向对象
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。面向对象是以对象功能来划分问题,而不是步骤。在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。面向对象的特性:封装性继承性多态性。原创 2023-11-21 23:00:00 · 431 阅读 · 0 评论 -
【JS】Chapter13-构造函数&数据常用函数
推荐使用字面量方式声明对象,而不是 Object 构造函数。Object.keys 静态方法获取对象中所有属性(键)Object.values 静态方法获取对象中所有属性值。Object. assign 静态方法常用于对象拷贝。Object 是内置的构造函数,用于创建普通对象。原创 2023-11-20 23:00:00 · 605 阅读 · 0 评论 -
【JS】Chapter12-作用域&解构&箭头函数
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在,许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制,我们同样非常容易成内存泄漏(内存无法被回收)的情况不再用到的内存,没有及时释放,就叫做内存泄漏。原创 2023-11-10 23:00:00 · 331 阅读 · 0 评论 -
【JS】Chapter11-正则&阶段案例
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本。正则表达式在 JavaScript 中的使用场景:例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)比如用户名要求用户小写英文字母,数字,下划线或者短横线组成,并且用户名长度为 3~16位:过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。原创 2023-11-09 23:00:00 · 1109 阅读 · 0 评论 -
【JS】Chapter10-Bom 操作
为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。- 数据存储在用户浏览器中- 设置、读取方便、甚至页面刷新不丢失数据- 容量较大,sessionStorage和localStorage约 5M 左右- 常见的使用场景:- https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失。原创 2023-11-08 23:00:00 · 279 阅读 · 0 评论 -
【JS】Chapter9-Dom 节点&移动端滑动
touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。使用场景:如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成。原创 2023-11-07 23:00:00 · 215 阅读 · 0 评论 -
【JS】Chapter8-Dom 事件进阶
页面加载事件有哪两个?如何添加?load 事件监听整个页面资源给 window 加给 document 加无需等待样式表、图像等完全加。原创 2023-11-06 23:00:00 · 211 阅读 · 0 评论 -
【JS】Chapter7-Dom 事件基础
事件监听三要素:事件源:那个dom元素被事件触发了,要获取dom元素事件类型:用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等事件调用的函数:要做什么事例子:注意:事件类型要加引号函数是点击之后再去执行,每次点击都会执行一次1.2 拓展阅读——事件监听版本DOM L0事件源.on事件 = function() { }DOM L2事件源.addEventListener(事件,事件处理函数)区别:on方式会被覆盖,addEv原创 2023-11-02 22:00:00 · 144 阅读 · 0 评论 -
【JS】Chapter6-Dom 获取&属性操作
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能DOM作用开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如:disabled、checked、selected自定义属性:在html5中推出来了专门的data-自定义属性在标签上一律以data-开头。原创 2023-11-01 22:00:00 · 198 阅读 · 0 评论 -
【JS】Chapter5-对象
属性名可以使用 “” 或 ‘’,一般情况下省略,除非名称遇到特殊符号如空格、中横线等。数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法。JavaScript内部提供的对象,包含各种属性和方法给开发者调用。属性都是成对出现的,包括属性名和值,它们之间使用英文 : 分隔。属性就是依附在对象上的变量(外面是变量,对象内是属性)多个属性之间使用英文 , 分隔。原创 2023-10-31 22:00:00 · 95 阅读 · 0 评论 -
【JS】Chapter4-函数
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。全局作用域(全局有效):作用于所有代码执行的环境(整个 script 标签内部) 或者一个独立的 js 文件。局部作用域(局部有效):作用于函数内的代码环境,就是局部作用域。运算结果:无论 && 还是 ||,运算结果都是最后被执行的表达式值,一般用在变量赋值。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。作用域链:采取就近原则的方式来查找变量最终的值。原创 2023-10-30 22:00:00 · 46 阅读 · 0 评论 -
【JS】Chapter3-数组
数组本质是数据集合, 操作数据无非就是 增 删 改 查。原创 2023-10-29 23:00:00 · 48 阅读 · 0 评论 -
【JS】Chapter2-流程控制
众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。多分支if语法:(使用场景:适合于有多个结果的时候, 比如学习成绩可以分为:优 良 中 差)== 是判断,只要求值相等,不要求数据类型一样即可返回true。以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构。=== 是全等,要求值和数据类型都一样返回的才是true。有的时候要根据条件选择执行代码,这种就叫分支结构。开发中判断是否相等,强烈推荐使用 ===自增运算符的用法:前置自增和后置自增。原创 2023-10-23 22:00:00 · 53 阅读 · 0 评论 -
【JS】Chapter1-基础语法
JavaScript(是什么?是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。作用(做什么?– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)JavaScript的组成(有什么?规定了js基础语法核心知识。比如:变量、分支语句、循环语句、对象等等。Web APIs :DOM:操作文档,比如对页面元素进行移动、大小、添加删除等操作。原创 2023-10-22 21:07:50 · 64 阅读 · 0 评论 -
【Mobile】Chapter6-bilibili 项目
目标:能够使用 vw 单位设置网页元素的尺寸。相对单位。相对视口的尺寸计算结果。1vw = 1/100 视口宽度1vh = 1/100 视口高度。原创 2023-07-21 20:00:00 · 97 阅读 · 0 评论 -
【Mobile】Chapter5-黑马面面布局开发
最后,如果提交网站,你不愿意用 git 提交,可以直接找到仓库,里面有文件,选择上传本地文件即可。但是,1个小时内只能上传 20 个以内的文件。git 可以把我们的本地网站提交上传到远程仓库(码云 gitee)里面,类似以前的 ftp。官网地址:https://www.swiper.com.cn。准备工作:需要下载git软件、需要码云注册账号。前端设计师可以直接摹客或蓝湖测量取值。小技巧:如何批量下载全部字体图标呢?码云,就是远程仓库,类似服务器。原创 2023-07-21 19:45:00 · 89 阅读 · 0 评论 -
【Mobile】Chapter4-移动端 WEB 开发之响应式布局
Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。中文官网:http://www.bootcss.com/官网:http://getbootstrap.com/推荐使用:http://bootstrap.css88.com/框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。原创 2023-07-21 19:30:00 · 242 阅读 · 0 评论 -
【Mobile】Chapter3-移动 WEB 开发之 rem 适配布局
媒体查询(Media Query)是 CSS3 的新语法。使用@media查询,可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。目前针对很多苹果手机、Android 手机、平板等设备都用得到多媒体查询。Less(Leaner Style Sheets 的缩写)是一门 CSS 扩展语言,也称为 CSS 预处理器。原创 2023-07-21 19:15:00 · 81 阅读 · 0 评论 -
【Mobile】Chapter2-移动 WEB 开发之 flex 布局
数值越小,排列越靠前,默认为0。注意:和z-index不一样。.item {原创 2023-07-21 19:00:00 · 71 阅读 · 0 评论 -
【Mobile】Chapter1-移动 WEB 开发之流式布局
移动端浏览器我们主要对 webkit 内核进行兼容。我们现在开发的移动端主要针对手机端开发。现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一。学会用谷歌浏览器模拟手机界面以及调试。视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。我们移动端布局想要的是理想视口,就是手机屏幕有多宽,我们的布局视口就有多宽。想要理想视口,我们需要给我们的移动端页面添加 meta 视口标签。现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案。现在市场。原创 2023-06-24 19:52:07 · 208 阅读 · 1 评论 -
【CSS】Chapter9-CSS3 其他新特性
转换 transform,我们简单理解就是变形,有 2D 和 3D 之分。我们暂且学了三个,分别是位移、旋转和缩放。2D 移动 translate(x,y) 最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的。可以分开写,比如 translateX(x) 和 translateY(y)。2D 旋转 rotate(度数) 可以实现旋转元素,度数的单位是deg。2D 缩放 scale(x,y) 里面参数是数字,不跟单位,可以是小数,最大的优势是不影响其他盒子。原创 2023-06-05 22:00:00 · 90 阅读 · 0 评论 -
【CSS】Chapter8-品优购项目
SEO(Search Engine Optimization),汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化,从而帮助网站获得免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。对于我们前端人员来说,我们只需要准备好这三个标签,具体里面的内容,有专门的 SEO 人员准备。注意:一般稳定的服务器都是需要收费的。原创 2023-06-05 21:45:00 · 89 阅读 · 0 评论 -
【CSS】Chapter7-HTML5 与 CSS3 提高
音频标签和视频标签使用方式基本一致。浏览器支持情况不同。谷歌浏览器把音频和视频自动播放禁止了。我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过 JavaScript 解决)。视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性。原创 2023-06-05 21:30:00 · 112 阅读 · 0 评论 -
【CSS】Chapter6-CSS 高级技巧
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites. CSS 雪碧)。不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对 HTML 文本呈现的差异,照顾浏览器的兼容,我们需要对 CSS 初始化。网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。原创 2023-06-05 21:15:00 · 79 阅读 · 0 评论 -
【CSS】Chapter5-定位
定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否 (占有位置)相对于自身位置移动常用absolute 绝对定位是(不占有位置)带有定位的父级常用fixed 固定定位是(不占有位置)浏览器可视区常用sticky 粘性定位否 (占有位置)浏览器可视区当前阶段少一定记住相对定位、固定定位、绝对定位两个大的特点:是否占有位置(脱标否)。以谁为基准点移动位置。学习定位重点要学会子绝父相。原创 2023-05-30 09:35:14 · 56 阅读 · 0 评论 -
【CSS】Chapter4-CSS 浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 {float : 属性值;属性值描述none元素不浮动(默认值)left元素向左浮动right元素向右浮动为什么需要清除浮动?父级没高度。子盒子浮动了。影响下面布局了,我们就应该清除浮动了。清除浮动的方式优点缺点额外标签法(隔墙法)通俗易懂,书写方便添加许多无意义的标签,结构化较差。父级overflow:hidden;书写简单溢出隐藏。原创 2023-05-30 00:15:00 · 145 阅读 · 0 评论 -
【CSS】Chapter3-CSS 盒子模型
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值(即父元素的上外边距取两者的最大值,而且子元素相对于父元素的上外边距是不变的、紧贴左上角的)。使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。原创 2023-05-29 00:00:00 · 50 阅读 · 0 评论 -
【CSS】Chapter2-CSS 复合选择器与特性
选择器作用特征使用情况隔开符号及用法后代选择器用来选择后代元素可以是子孙后代较多符号是空格.nav a子代选择器选择最近一级元素只选亲儿子较少符号是大于.nav>p并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a{}和a:hover{}实际开发的写法:focus 选择器选择获得光标的表单跟表单相关较少记住这个写法。原创 2023-05-28 00:00:00 · 99 阅读 · 0 评论 -
【CSS】Chapter1-CSS 简介与基础选择器
CSS 的主要使用场景就是美化网页,布局页面的。基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签,比如p不能差异化选择较多类选择器可以选出1个或多个标签可以根据需求选择非常多id 选择器一次只能选择1个标签ID 属性只能在每个 HTML 文档中出现一次一般和 js 搭配通配符选择器选择所有的标签选择的太多,有部分不需要特殊情况使用每个基础选择器都有使用场景,都需要掌握。如果是修改样式,类选择器是使用最多的。字体属性表示注意font-size字号。原创 2023-05-27 00:00:00 · 75 阅读 · 0 评论 -
【HTML】Chapter3-HTML 标签(下)
标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>注意<dl>原创 2023-05-26 00:00:00 · 136 阅读 · 0 评论 -
【HTML】Chapter2-HTML 标签(上)
注意:上面语法是必须要写的代码,否则可能引起乱码的情况,一般情况下,统一使用 UTF-8 编码,尽量统一写成标准的UTF-8,不要写成utf8或UTF8。在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。其实对于文档显示来说,定义成 en 的文档也可以显示中文,定义成 zh-CN 的文档也可以显示英文。等效果,这时就需要使用 HTML 中的文本格式化标签,使文字以特殊的方式显示。根据标签的语义,再合适的地方给一个最合理的标签,可以让页面结构更清晰。原创 2023-05-25 00:00:00 · 268 阅读 · 0 评论 -
【HTML】Chapter1-HTML 简介
网站是根据因特网上一定的规则,使用 HTML 等制作的用于展示特定内容的网页集合。网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。HTML 指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。原创 2023-05-24 00:15:00 · 232 阅读 · 0 评论