WEB前端
文章平均质量分 90
前端
脑袋不灵光的小白羊
这个作者很懒,什么都没留下…
展开
-
诱人的TypeScript
TypeScript介绍:微软推出,JavaScript 的超集,其目的是为了更好的编写JavaScript,实际上最终运行在浏览器当中的仍然是JavaScript官网:https://www.typescriptlang.org/中文网:https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html【版本更新可能会比官网慢一些,版本会比较低】TypeScript所应用于的框架:Vue 、 React 、 AngularTS的优点原创 2022-03-17 11:23:52 · 130 阅读 · 0 评论 -
前后端交互
服务器网络相关知识网站分类静态网站动态网站静态网站技术:HTML + CSS + JavaScript + jQuery特点:网页内容是固定,数据是静态的,可维护性差动态网站技术:HTML + CSS + JavaScript + jQuery + 前后端交互 + 服务器特点:数据是可变的,数据是动态获取的,通过前后端交互从服务器获取数据服务器常用语言:Java、Python、PHP(本套课程要了解的知识)前后端的关系(客户端和服务器端)服务器端是为客户端服务的,客户端就原创 2022-02-15 11:22:12 · 3137 阅读 · 1 评论 -
PHP、数据库编程模块:PHP、数据库编程与设计
PHP基础1.php简介2.php概述与名词解释3.php常见数据类型4.php运算符5.php流程控制语句6.php函数7.php类与对象8.php会话session与缓存cookie(扩展)PHP简介PHP,即“PHP: Hypertext Preprocessor”,是一种被广泛应用的开源通用脚本语言,尤其适用于 Web 开发并可嵌入 HTML 中去。它的语法利用了 C、Java 和 Perl,易于学习。该语言的主要目标是允许 web 开发人员快速编写动态生成的 web 页面,但原创 2022-02-07 14:42:07 · 1292 阅读 · 0 评论 -
Http服务与Ajax模块
什么是AjaxAjax的技术的产生Ajax被认为是(Asynchronous JavaScript and XML的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术 都被叫做Ajax.“Ajax”这个名字是在2005年2月,Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。而Ajax这项技术,是 Google 在Google Labs发布Google Maps和Google Su原创 2022-02-07 10:30:14 · 813 阅读 · 0 评论 -
BootStrap框架模块:BootStrap4实战
BootStrap4实战微票儿 (opens new window)本项目是由BootStrap3升级到BootStrap4,笔者心得是,如果没有必须要求,最好不要升级。如果是新项目在3和4之间做选择。建议使用4版本。1.1 项目实战一全局公共CSS文件/* 导航 */.navbar-brand{ padding: 0 15px; height: 70px;}/* banner */.banner{ /* height: 500px; */ padding原创 2022-01-14 14:18:51 · 1432 阅读 · 0 评论 -
BootStrap框架模块:BootStrap4组件
BootStrap4组件1.1 BootStrap组件部分一警告提示框(Alert)警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供常见的上下反馈消息和提示。 警报是一组颜色控件(共八个颜色样式),可用于任何长度的文本,以及可选的关闭按钮,系统提供8个可用的正确的样式(如,.alert-success),如你还可以使用jQuery插件方法来解除内联元素。<div class="alert alert-primary" role="alert"> A simple prim原创 2022-01-14 14:18:35 · 1824 阅读 · 0 评论 -
BootStrap框架模块:BootStrap4基础
BootStrap简介Bootstrap 是全球最受欢迎的前端开源工具库,它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能,能够让你快速设计并自定义你的网站。利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架,用于构建响应式、移动设备优先的 WEB 站点。BootStrap中文官网第一章 BootStrap4基础下载 Bootstr原创 2022-01-14 14:06:28 · 4820 阅读 · 0 评论 -
jQuery:源码与扩展
源码与扩展源码jQuery有很多设计是⾮常优秀的The Write Less,Do More(写更少,做更多),⽆疑是JQuery的核⼼理念,简洁的API、优雅的链式、强⼤查询与便捷的操作。经典细节1_⽴即执⾏函数(function(global, factory){ ...})(typeof window !== "undefined" ? window : this, function( window,noGlobal(){...});Q:采⽤⽴即执⾏函数,这样做,有什么好处呢?A原创 2022-01-13 11:34:11 · 196 阅读 · 0 评论 -
jQuery:Swiper
Swiper开源、免费强大的触摸滑动插件 官网地址Swiper 使⽤⽅法首先加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css⽂件,不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.cs原创 2022-01-13 11:33:27 · 2833 阅读 · 0 评论 -
jQuery:应用
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"> &l原创 2022-01-13 11:32:42 · 112 阅读 · 0 评论 -
jQuery:基础知识
jQuery基础知识jQuery简介jQuery是一个高效、精简并且功能丰富的JavaScript工具库。它提供的API易于使用并兼容众多浏览器,这让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单。jQuery版本说明jQuery分为三个⼤版本:1.x 2.x 3.x1.x 版本兼容ie678,使⽤最为⼴泛的,官⽅只做BUG维护,功能不再新增。因此⼀般项⽬来说,使⽤1.x版本就可以了,最终版本:1.12.4 (2016年5⽉20⽇)2.x 版本不兼容ie678,很少有⼈使⽤原创 2022-01-13 11:25:34 · 178 阅读 · 0 评论 -
JavaScript:编程风格
编程风格(上)“编程风格”(programming style)指的是编写代码的样式规则。不同的程序员,往往有不同的编程风格。有人说,编译器的规范叫做“语法规则”(grammar),这是程序员必须遵守的;而编译器忽略的部分,就叫“编程风格”(programming style)好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。所以,编程风格的选择要考虑如何尽量使代码清晰易读、减少出错缩进行首的空格和Tab键,都可以产生代码缩进效果(indent)Tab键可以节省击键次数,但不同的文本原创 2022-01-13 09:04:12 · 222 阅读 · 0 评论 -
JavaScript:算法与数据
排序之冒泡排序比较相邻的两个元素,如果前一个比后一个大,则交换位置比较完第一轮的时候,最后一个元素是最大的元素这时候最后一个元素是最大的,所以最后一个元素就不需要参与比较大小function sort(arr) { for (var i = 0; i < arr.length-1; i++) { for (var j = 0; j < arr.length - 1 -i; j++) { // 相邻元素两两对比,元素交换,大的元素交原创 2022-01-12 16:26:36 · 174 阅读 · 0 评论 -
JavaScript:正则对象
正则表达式基础正则表达式(regular expression)用来按照“给定模式”匹配文本。比如,正则表达式给出一个 Email 地址的模式,然后用它来确定一个字符串是否为 Email 地址。新建正则表达式有两种方法。一种是使用字面量,以斜杠表示开始和结束var regex = /xyz/;另一种是使用RegExp构造函数var regex = new RegExp('xyz');正则执行方法正则的执行的方法主要有两种,一种是 test() 方法,另一种是 exec() 方法test(原创 2022-01-12 16:25:46 · 960 阅读 · 0 评论 -
JavaScript:面向对象编程
面向对象简介面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式为什么要使用面向对象《大话设计模式》中大鸟给小菜讲的故事非常经典:“话说三国时期,曹操带领百万大军攻打东吴,大军在长江赤壁驻扎,军船连成一片,眼看就要灭掉东吴,统一天下,曹操大悦,于是大宴众文武,在酒席间,曹操诗性大发,不觉吟道:‘喝酒唱歌,人生真爽……’众文武齐呼:‘丞相好诗!’于是一臣子速命印刷工匠刻版印刷,以便流传天下。”“样张出来给曹操一看,曹操感觉不妥,说道:‘喝与唱,此话原创 2022-01-12 16:04:27 · 447 阅读 · 0 评论 -
JavaScript:浏览器环境概述(BOM)
浏览器环境概述(BOM)JavaScript是浏览器的内置脚本语言,一旦网页内嵌了JavaScript脚本,浏览器加载网页,就会去执行脚本,从而达到操作浏览器的目的,实现网页的各种动态效果代码嵌入网页的方法<script> 元素直接嵌入代码。<script> var x = 1 + 5; console.log(x);</script><script> 标签加载外部脚本<scriptsrc="https://www.examp原创 2022-01-11 15:00:31 · 589 阅读 · 0 评论 -
JavaScript:DOM模型
DOM概述DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JavaScript 对象,从而可以用脚本进行各种操作(比如对元素增删内容)浏览器会根据 DOM 模型,将结构化文档HTML解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口DOM 只是一个接口规范,可以用各种语言实现。所以严格地说,DOM 不是 JavaScript 语法的一部分,但原创 2022-01-11 14:55:48 · 1136 阅读 · 0 评论 -
JavaScript:Math与Date
Math对象_静态属性Math是 JavaScript 的原生对象,提供各种数学功能。该对象不是构造函数,不能生成实例,所有的属性和方法都必须在Math对象上调用Math对象的静态属性,提供以下一些数学常数Math.E:常数e。Math.LN2:2 的自然对数。Math.LN10:10 的自然对数。Math.LOG2E:以 2 为底的e的对数。Math.LOG10E:以 10 为底的e的对数。Math.PI:常数 PI。Math.SQRT1_2:0.5 的平方根。Math.SQRT2原创 2022-01-10 14:32:29 · 472 阅读 · 0 评论 -
JavaScript:函数与对象
函数概述函数是一段可以反复调用的代码块函数的声明JavaScript 有三种声明函数的方法function 命令: function命令声明的代码区块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函数体放在大括号里面。function print(s) { console.log(s);}函数表达式 除了用function命令声明函数,还可以采用变量赋值的写法var print = function(s) { console原创 2022-01-10 11:44:44 · 547 阅读 · 0 评论 -
JavaScript:字符串与数组
字符串字符串就是零个或多个排在一起的字符,放在单引号或双引号之中'itbaizhan'"itbaizhan"单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号'key = "value"'"It's a long itbaizhan"如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号,也是如此'Did she say \'Hello\'?'// "Did she say 'Hello'?""Did s原创 2022-01-06 11:39:09 · 1406 阅读 · 0 评论 -
JavaScript:运算符_数据类型和流程循环语句
数据类型数据类型分类JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值,这里暂不涉及)原始类型(基础类型)var age = 20;var name = "北京";var learn = true;合成类型(复合类型)对象:因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器var user = { name:"北京", age:20,原创 2022-01-05 17:02:55 · 551 阅读 · 0 评论 -
JavaScript基础与变量
JavaScript简介JavaScript介绍JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多,只能用来做一些数学和逻辑运算。为什么学习 JavaScript操控浏览器的能力广泛的使用领域易学性JavaScript与ECMAScript的关系ECMAScript和JavaScript的关系是,前者是后原创 2022-01-05 15:03:17 · 545 阅读 · 0 评论 -
响应式项目
响应式项目_导航<!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"> <ti原创 2021-12-23 09:55:16 · 401 阅读 · 0 评论 -
小米官网项目
小米官网项目_分析与顶部广告<!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-12-22 17:02:02 · 1053 阅读 · 0 评论 -
CSS应用技巧
雪碧图CSS Sprite也叫CSS精灵图、CSS雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去优点1 减少图片的字节2 减少网页的http请求,从而大大的提高页面的性能原理1 通过background-image引入背景图片2 通过background-position把背景图片移动到自己需要的位置实例<i class="icon1"></i><i class="icon2"></i>原创 2021-12-22 16:35:29 · 269 阅读 · 0 评论 -
CSS3新特性
圆角使用 CSS3 border-radius 属性,你可以给任何元素制作 “圆角”border-radius 属性,可以使用以下规则:1 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角2 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角3 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角4 一个值: 四个圆角值相同<div class="box1"></div><div class="b原创 2021-12-22 16:03:33 · 457 阅读 · 0 评论 -
浮动与定位
Displaydisplay 可以修改元素的类型,让块级元素和内联元素相互转换元素隐藏属性对比文档流文档流是文档中可显示对象在排列时所占用的位置/空间例如:块元素自上而下摆放,内联元素,从左到右摆放标准流里面的限制非常多,导致很多页面效果无法实现1 高矮不齐,底边对齐2 空白折叠现象 1 无论多少个空格、换行、tab,都会折叠为一个空格 2 如果我们想让img标签之间没有空隙,必须紧密连接文档流产生的问题高矮不齐,底边对齐<span>我是文本内容</sp原创 2021-12-22 15:06:40 · 485 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型(Box Model)概念所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin),边框(border),内边距(padding),和实际内容(content)1 Margin(外边距) - 清除边框外的区域,外边距是透明的2 Border(边框) - 围绕在内边距和内容外的边框3 Padding(内边距) - 清除内容周围的区域,内边距是透明的4 Co原创 2021-12-22 14:39:04 · 6410 阅读 · 0 评论 -
CSS选择器
关系选择器关系选择器分类后代选择器子代选择器相邻兄弟选择器通用选择器后代选择器定义选择所有被E元素包含的F元素,中间用空格隔开语法E F{}<ul> <li>宝马</li> <li>奔驰</li></ul><ol> <li>奥迪</li></ol>ul li{ color:green;}子代选择器定义选择原创 2021-12-22 14:16:45 · 285 阅读 · 0 评论 -
CSS常用属性
字体属性CSS字体属性定义字体,加粗,大小,文字样式color规定文本的颜色div{ color:red;}div{ color:#ff0000;}div{ color:rgb(255,0,0);}div{ color:rgba(255,0,0,.5);}font-size设置文本的大小能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。h1 {font-size:40px;}h2 {font-size:30px;原创 2021-12-21 15:32:52 · 327 阅读 · 0 评论 -
初识CSS
CSS简介CSS概念CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表CSS文件后缀名为 .cssCSS用于HTML文档中元素样式的定义为什么需要CSS使用css的目的就是让网页具有美观一致的页面CSS和HTML之间的关系1 HTML用于构建网页的结构2 CSS用于构建HTML元素的样式3 HTML是页面的内容组成,CSS是页面的表现语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明选择器通常是您需要改变样式的 HTML原创 2021-12-21 15:11:54 · 532 阅读 · 0 评论 -
HTML5新增元素
容器元素(div)<div> 可定义文档中的分区或节(division/section)<div> 标签可以把文档分割为独立的、不同的部分<div> 是一个块级元素。这意味着它的内容自动地开始一个新行<div> 主要应用在布局上,作为布局的每个区域的容器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-12-21 14:52:37 · 334 阅读 · 0 评论 -
实体字符与元素分类
实体字符我们考虑⼀个问题,如果我们要在页面上显示⼀个 < 的时候,应该如何来写,如果直接写符号显然是不合理的,毕竟,它是属于标签的关键字,那我们应该如何来实现呢?如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体<p>¥</p><p>®</p>温馨提示实体名称对大小写敏感!块元素与行内元素(内联元素)HTML5出现之前,经常把元素按照块级元素和内联元素来区分。在HTML5中原创 2021-12-21 14:34:53 · 249 阅读 · 0 评论 -
Form表单
Form表单表单在 Web 网页中用来给用户填写信息,从而能采用户信息,使网页具有交互的功能。所有的用户输入内容的地方都用表单来写,如登录注册、搜索框表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件<form action="url" method="get|post"name="myform"></form>属性说明action服务器地址name表单名称met原创 2021-12-21 14:28:08 · 512 阅读 · 0 评论 -
HTML5基础元素
标签之标题标题介绍与应用标题(Heading)是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题 <h6> 定义最小的标题<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>原创 2021-12-21 11:42:17 · 328 阅读 · 0 评论 -
HTML5+CSS3模块
第一个前端程序两步完成一个网页程序第一步:使用记事本,编写代码<html> <head> <title>我的网页</title> </head> <body> Hello,我的第一个网页 </body></html>在E盘下保存路径 E:/itbaizhan/... , 文件名 Welcome.html注意事项1 文件后缀名以 .html 结尾2 在编写代码的过程中原创 2021-12-21 11:11:09 · 301 阅读 · 0 评论