web前端入门
文章平均质量分 76
入门以一个项目的方式引入,围绕此项目进行学习。
September_MOTH
这个作者很懒,什么都没留下…
展开
-
BootStrap(day05)
六、其他组件巨幕(巨大的内边距, 边框和背景色)<div class="jumbotron"> <h2>信息张贴栏</h2> <p>本轮疫情在此结束</p> <p>全球新冠肺炎疫情</p></div>徽章(把徽章看作小按钮)基本类: .badge徽章颜色 .badge-danger/warning...胶囊徽章: .badge-pill分页ul.pag原创 2022-05-12 21:35:54 · 129 阅读 · 1 评论 -
BootStrap(day04)
五、组件总结:boot 中的事件, 关注两件事1. 如何触发的,自定义属性触发,触发方式是这个属性的值2. 事件触发的目标button 绑定目标使用 data-target=“#ID”a 绑定目标使用 href=“#ID”导航① 水平导航ul.nav > li.nav-item > a.nav-linkul.nav: 弹性布局, 去 ul 圆点, 主轴方向默认 X 轴li.nav-item: 配合 ul.nav-justified 让 li 等宽显示a.nav-link原创 2022-05-06 19:02:25 · 336 阅读 · 0 评论 -
BootStrap(day03)
二、boot 的使用栅格布局① web 页面中,布局的有三种方式table布局div+cssboot的栅格简单, 容易控制语正确, 渲染效率高容易控制语义正确,渲染效率高,支持响应式语义错误控制起来很麻烦,尤其在响应式布局中非常复杂的页面不建议使用...原创 2021-11-22 18:30:25 · 211 阅读 · 0 评论 -
BootStrap(day02)
二、BootStrap如何使用 Boot全局样式组件+Js插件定制 Sasshttps://www.bootcss.com/库 与 框架的概念:库: 是一个工具框架: 框架是一个半成品的项目Boot 的使用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2021-11-07 20:41:01 · 98 阅读 · 0 评论 -
BootStrap(day01)
BootStrap响应式布局(css3)什么是响应式的网页Responsive web page 响应式网页可以根据浏览器设备不同(pc, pad, phone)而自动改变布局, 图片, 文字效果, 不会影响用户体验响应式布局(必须做到下面几件事)① 布局, 不能固定元素宽度, 必须使用 流式布局(默认布局 + 浮动) + 弹性布局 + 栅格布局② 文字和图片随着容器大小变化③ 媒体查询技术(CSS3) 代码复杂程度几何性的增加 复杂的网页, 不合适使用响应式布局原创 2021-11-06 20:35:57 · 84 阅读 · 0 评论 -
CSS(day06 AND day07)
伪类选择器:link :visited :hover :active :focus① 目标伪类(:target {})在锚点被激活时, 让锚点元素应用的样式② 结构伪类选择器:first-child {}匹配的元素是父元素的第一个元素, 同时, 这个元素符合选择器的元素选择器:last-child {}匹配的元素属于其父元素的最后一个子元素, 同时, 这个元素符合选择器的元素选择器:nth-child(n) n 从 1 开始③ :empty 匹配内部没有任何元素的标签,原创 2021-09-12 15:15:47 · 78 阅读 · 0 评论 -
CSS(day05)
显示显示方式决定元素在网页中的变现形式(块级、行内、行内块, table)属性display取值:block 让元素以块级的方式显示inline 让元素以行内的方显示inline-block 让元素以行内块的方式显示table 让元素以 table 的方式显示none 让元素隐藏, 脱离文档流, 不占位置显示效果显示/隐藏属性 visibility取值:visible 默认值, 可见的hidden 隐藏问题:visibility: hidd原创 2021-08-26 16:08:59 · 47 阅读 · 0 评论 -
CSS(day04)
文本格式化文本属性① 文本颜色color: 合法的颜色值② 文本对齐方式text-align取值left / center / right / justify(两端对齐)注意:一个元素写了 text-align, 控制的是内部的文本这个元素自己想居中对齐, margin: 0 auto;text-align 对是行内元素的孩子, 都生效孩子如果是块级元素, 只会继承 text-align, 而块级本身不会居中③ 行高line-height取值 px 为单位的数字特原创 2021-08-24 20:40:40 · 59 阅读 · 0 评论 -
CSS(day03)
box-sizing定义盒子模型的计算方式box-sizing: content-box; 默认我们定义的宽高是在定义内容区域的宽高元素占地宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-rightbox-sizing: border-box;我们定义的 width/height 包含了 border 和 padding元素占地宽度 = marg原创 2021-08-23 13:51:25 · 50 阅读 · 0 评论 -
CSS(day02)
尺寸和边框尺寸属性① 作用设置元素的宽度和高度② 属性width 宽度height 高度注意: 如果不写宽高默认的宽高是, 各个元素的宽是多少?块级元素不写宽, 默认宽度占父元素的 100%块级元素不写高, 默认高度靠内容撑起来行内元素, 设置宽高无效。它的宽高靠内容撑起。...原创 2021-08-20 19:08:18 · 78 阅读 · 0 评论 -
CSS(day01)
CSS 概述什么是 csscss: cascading style sheets (层叠样式表 | 级联样式表) 简称样式表css 作用设置 html 网页中元素的样式HTML 于 CSS 的关系HTML: 负责网页的搭建, 内容的展示CSS: 负责网页的修饰对于元素样式的修饰建议使用 css 而不使用 html 的属性html的属性, 代码不能能重用, 没有维护性CSS 的语法规范使用 css 的方式① 行内样式(内联样式)将 css 的样式写在原创 2021-08-17 20:32:00 · 43 阅读 · 0 评论 -
Ajax理论总结
1. URLURLhttps://editor.csdn.net/md/?not_checkout=1结构:协议+主机名+目录结构+文件名URL 完整的结构< scheme >://< user >:< pwd >@< host >:< port >/< path >< params >?< query >#< frag >...原创 2021-08-16 17:21:58 · 70 阅读 · 0 评论 -
Ajax(day04 项目总结)
Ajax 项目总结如果接口使用的 http 的 get 方法 > 这个接口可以使用 浏览器的地址栏直接验证 > 注意: restful 的无参的 get 方法 和 http 的 get 无参方法相同restful 的 post 方法, 和 http 的 post 相同功能模块编写思路前端后端1.收集整理数据1. 接收前端传过来的数据2. ajax 的 xhr 的四步2. 写 sql 语句3.在 if(xhr.readyState =原创 2021-08-15 09:36:22 · 59 阅读 · 0 评论 -
Ajax(day03)
1. restful 规则接口getrestful 接口定义规则/接口名称:参数值&:参数值注意: 使用 restfult 不能把非空验证放在后台, 而要把非空验证放在前端完成post 传参注意1、xhr.send(formdata) 必须带着请求主体发送2、在 xhr.open 和 xhr.send 之间设置请求头信息, 把 content-Type 设置为可以发送特殊字符xhr.setRequest("Content-Type", "appliction/x-www-fo原创 2021-08-13 21:18:21 · 58 阅读 · 0 评论 -
Ajax(day02)
二、DOM操作(简单DOM操作)Ajax 提交请求, 不使用 form 表单但是form表单自带收集数据的功能如果不使用 form, 就没有自动收集数据的功能了需要手写 DOM 操作, 收集数据完整的 JavaScript 组成1、js 核心代码: Ecmascript ES62、DOM: Document Object Model 文档对象模型为了能够操作 html 中元素的(内容, 值, 样式)。3、BOM: Browser Object Model 浏览器对象模型让 JS 动原创 2021-08-11 11:25:22 · 118 阅读 · 0 评论 -
Ajax(day01大理论)
AJAX一、HTTP协议URLhttp://www.link.com/public/index.html结构: 协议+主机名称+目录结构+文件名称URL 完整的结构< scheme >://< user >:< pwd >@< host >: < port >/< path >;< params >?< query >#< frag >< scheme >方案原创 2021-08-09 16:13:04 · 68 阅读 · 0 评论 -
HTML(day03)
1. 列表列表的使用让数据有条理的显示, 在数据之前添加标识但是现在的页面布局, 经常会使用到无序列表列表的组成有序列表 <ol> <li></li> ... </ol>属性:type: 设置列表标识的类型取值: 1 默认值 / a A 字母 / i I 罗马数字start: 设置标识项的起始值无序列表<ul> <li></li> .原创 2021-08-08 14:40:46 · 48 阅读 · 0 评论 -
HTML(day02)
作业:NodeJs 6 个接口完成文本和图片1. 文本样式< b > < strong > 加粗< i > < em > 斜体< s > < del > 删除线H5 语义 推荐使用有于意的标签< u > 下划线< sup > 上标< sub > 下标2. 分区元素块分区 < div >用于页面布局的特点: 独立成行行分区 <原创 2021-08-08 14:40:10 · 45 阅读 · 0 评论 -
HTML(day01)
第二阶段内容HTML5 Basic(2天)> 制作页面的标签, 搭建网站的结构> 使用标签完成页面骨架之后, 我们搭建的网页, 是 __静态__ 页面> 页面中的数据是访问服务器获取的, 这种页面是动态页面 Ajax 异步数据交互(3天)> 前端页面异步的与服务器做数据交换使用 h5 和 ajax 完成项目(2天)> 前端: html> 后台: js, nodejs, mysql> 页面与后台的交互: ajax CSS3(4原创 2021-08-08 14:38:57 · 78 阅读 · 0 评论 -
NodeJs(day05)
复习练习: 创建 web 服务器, 创建一个商品路由器, 添加路由, 挂载到 /productweb 服务器请求 request响应 response中间件为主要的业务逻辑服务的; 可以接收到请求, 以及做出响应应用及中间件、路由级中间件、内置中间件、第三方中间件、错误处理中间件路由级中间件路由器的使用应用级中间件也成为自定义中间件, 是一个函数(回调函数)app.use("/reg", callBack(req, res, next))拦截 url 为 /reg 的路由;原创 2021-08-07 14:59:05 · 58 阅读 · 0 评论 -
NodeJs(day04)
复习练习:2.1 创建 web 服务器, 监听端口 8080, 接收浏览器的请求, 根据请求做出不同的响应/login 响应内容 this is login page/reg 响应内容 this is reg page/study 跳转 http://www.163.com0fs 模块stat/mkdir/rmdir/readdir/wirteFile/appendFile/readFileunlink/createReadStream/crea原创 2021-08-07 14:58:23 · 68 阅读 · 0 评论 -
NodeJs(day03)
复习 + 练习练习:获取URL中查询字符串的数据https://www.tmooc.cn:80/course.html?cid=17&cname=web模块以路径开头不以路径开头文件模块reqiure("./circle.js")require(“url”)自定义模块核心模块目录模块require("./02_2")require(“mysql”)会找目录下 package.json到当前目录下找min 属性对用的文件原创 2021-08-07 14:56:40 · 64 阅读 · 0 评论 -
NodeJs(day02)
复习ES6块级作用域 let { }不允许多次使用 let 声明参数扩展 function fn(a, b, c = 0) {}箭头函数(回调函数)sort((a, b)=>a -b)模板字符串 ${JS表达式}nodeJs全局对象 global/process/console/Bufferprocess.arch/process.platform/process.env/process.version/processs.pid/process.kill()console.原创 2021-08-07 14:46:50 · 94 阅读 · 0 评论 -
NodeJs(day01)
复习练习:将一句英文单词的首字母大写其余小写hoW arE YOur -> HOW Are You随机产生 0~9之间的一个整数数组toString/join/concat/slice/splice/reverse/sort/push/pop/unshift/shift字符串new String(2) / String(3)转义字符 \length/charAt()/indexOf()/lastIndexOf()/toUpperCase()toLowerCase()/slice原创 2021-08-07 14:46:10 · 50 阅读 · 0 评论 -
JavaScript基础(day09)
复习练习:将一句英文单词的首字母大写其余小写hoW arE YOur -> HOW Are You随机产生 0~9之间的一个整数数组toString/join/concat/slice/splice/reverse/sort/push/pop/unshift/shift字符串new String(2) / String(3)转义字符 \length/charAt()/indexOf()/lastIndexOf()/toUpperCase()toLowerCase()/slice原创 2021-08-07 14:44:12 · 96 阅读 · 0 评论 -
JavaScript基础(day08)
复习判断对象是否含有某个属性对象.属性名 === undefeined对象.hasOwnProperty(“属性名”)“属性” in 对象方法 { say: function() { this } } 对象.say();数组数据的集合创建数组的两种方式[ 1, 2, 3 ] new Array()访问数组元素 数组[下标] 获取数组的长度 数组.length 数组[数组.lneght] = 值; 遍历数组数组的分类 索引数组/关联数组遍历数组 循原创 2021-08-07 14:43:13 · 44 阅读 · 0 评论 -
JavaScript基础(day07)
复习递归,在函数内部调用自身 return匿名函数: function() {}创建函数, 函数表达式 var fn = function() {}自调用 (function() { 私有作用域 })();回调函数function add(a) { a(); }add(function() { 多行代码; });全局函数parseInt/parseFlaot/isNaN/encodeURI/decodeURIisFinite/ eval 执行字符串内部的表达式对象内置对象/宿主对原创 2021-08-07 14:42:21 · 52 阅读 · 0 评论 -
JavaScript基础(day06)
1. 递归在函数的内部去调用自身,默认是一个死循环.使用方式: 要有跳出条件 结合 return 使用练习: 使用递归计算 1 - 任意数组之间所有整数的和2. 匿名函数没有名称的函数function () {}(1) 创建函数 function fn() { } //函数声明 var fn = function() { } //函数表达式 //变量名就是函数的名称· 对比函数声明域函数表达式的区别?- 函数声明创建函数存在提升,可以在任意位置创建- 函数表达式使用变量创建原创 2021-08-07 14:41:41 · 94 阅读 · 0 评论 -
JavaScript 基础(day05)
复习循环 循环条件 循环体while(循环条件) { 循环体 }do { 循环条件 } while(循环条件);for(初始值; 循环条件; 增量) { 循环体; }isNaN(); 是否为 NaNbreak/continue; var i = 0, sum = 0; do { i++; if(i%2===0) continue; if(i%5===0) break; sum+=i; } while(i<10); cons原创 2021-08-05 09:25:50 · 56 阅读 · 0 评论 -
JavaScript 基础(day04)
使用switch-case完成分数的判断分数除以 10 在取整复习赋值运算符 = += -= *= /= %=三目运算符选择执行if() { }if() { } else { }if() {} else if() {} else {}false: 0 NaN "" undefined nullswitch(条件) { case 1: 语句1; break; ... default: 语句n+1 break;}循环语句循环:一边又一原创 2021-08-05 09:25:09 · 86 阅读 · 0 评论 -
JavaScript基础(day03)
复习数据类型原始类型 | 引用类型数值型、字符串型、布尔型、未定义、空 null数据类型的转换隐式转换 + 1+null 1+true 1+undefined强制转换Number(null) -> 0Number(undfined) -> NaNNumber(“1a”) -> NaNparseInt() 整型转整型parseInt(true) -> NaNparseInt(“3.45”)->原创 2021-08-07 11:21:14 · 64 阅读 · 0 评论 -
JavaScript 基础(day02)
练习使用变量保存圆的半径, 常量保存圆周率, 计算圆的周长和面积声明多组变量保存商品的单价和数量, 计算商品的总价复习开发环境 JS 引擎(JS解释器)服务器端 NodeJs浏览器变量var $a_1 = 2,b = 5;常量const PI = 3.14;数据类型//检测数据类型 typeof数据分为两种类型原始类型1.1 数值型(Number)整型 在内存中占用 4个字节八进制特点 以 0 开头哦十六进制 0X 开头 a ~ f 代表原创 2021-08-05 09:22:59 · 123 阅读 · 0 评论 -
JavaScript 基础(day01)
学习一门编程语言的基本步骤了解背景知识: 历史、现状、特点、应用场景搭建开发环境: 编写一个 Hello world常量和变量数据类型运算符逻辑结构通用小程序函数和对象第三方框架、库实用的项目程序必做 50 题: https://wenku.baidu.com/view/af66e2f14afe04a1b071de42.html《JavaScript高级程序语言设计》JS概述java于JavaScript是没有关系的历史1995年, Js最早出现 在 Netsca原创 2021-08-05 09:15:59 · 59 阅读 · 0 评论 -
mysql(day04)
1.复杂查询1.1 聚合查询 / 分组查询实例: 查询出所有员工的数量SELECT COUNT(eid) FROM emp;练习: 使用员工的部门编号来计算员工的数量 SELECT COUNT(deptId) FROM emp; 推荐写法 SELECT COUNT(*) FROM emp;练习: 计算所有员工的工资总和 SELECT SUM(salary) FROM emp;练习: 查询所有男员工的平均工资 SELECT SUM(salary) / COUNT(*) F原创 2021-08-05 09:13:29 · 79 阅读 · 0 评论 -
mysql(day03)
复习DDL 定义数据 CREATE / DROP / ALTERDML 操作数据据 INSERT / UPDATAE / DELETEDQL 查询数据 SELECTDCL 控制权限 FRANI / REVOKE编码 ASCII/Latin-1/GB2312/GBK/Unicode数库中的中文乱码:脚本文件 utf8客户端连接服务器的编码 utf8服务器创建数据库 utf8列类型数值型 TINYINT / SMALLINT / INT / BIGINT / BOOLFLOA原创 2021-08-05 09:11:04 · 57 阅读 · 0 评论 -
mysql(day02)
1.复习关系型数据库Server -> Database -> Table -> Row -> ColumnMySQL服务端 开启服务 (mysqld.exe服务端的服务)客户端 连接服务器(mysql.exe客户端工具)1.1 交互模式mysql.exe -hloaclhost -P3306 -uroot -pmysql -uroot1.2 脚本模式mysql -uroot<文件的完整路径常用的管理命令2.1 show database原创 2021-08-05 08:59:47 · 68 阅读 · 0 评论 -
mysql(day01)
复习 - 软件的生命周期 1. 软件的定义期 1.1 可行性研究阶段 1.2 需求分析阶段 2. 软件的开发期 2.1 概要设计阶段 2.2 详细设计阶段 2.3 编码实现阶段 2.4 项目测试阶段 3. 项目维护期 3.1 项目部署阶段 3.2 项目维护阶段 - 服务器原创 2021-08-05 08:57:40 · 50 阅读 · 0 评论 -
项目导入-学子商城
1. 课成体系1.1 阶段1(服务器端):1.1.1 项目导入 / 数据库(MySql) / JS基础 / NodeJS1.2 阶段2(前端核心技术):1.2.1 HTML / Ajax / CSS / Bootstrap1.3 阶段3(前端进阶技术):1.3.1 JS高级 / DOM&BOM / jQuery / VueJS1.4 阶段4(H5移动开发):1.4.1 HTML5 / 微信开发 / HybridApp1.5 阶段5(框架技术):1.5.1 AngularJS /原创 2021-08-05 08:45:22 · 473 阅读 · 0 评论