自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(22)
  • 收藏
  • 关注

原创 Web前端开发笔记-----24.正则表达式、字符、正则练习

Web前端开发笔记-----24.正则表达式、文章目录Web前端开发笔记-----24.正则表达式、一、正则表达式1.创建正则表达式2.正则表达式方法3.在字符串中使用正则的方法二、元字符1.单个数字和字符的元字符一、正则表达式概念:假设用户需要在HTML表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理前, JavaScript 程序会检查表单以+确认用户确实输入了信息并且这些信息是符合要求的。正则表达式:super string。正则表达式( regular express

2021-04-06 21:29:05 134

原创 Web前端开发笔记-----23.阻止默认行为、拖拽、事件委托

Web前端开发笔记-----23.阻止默认行为、拖拽、事件委托文章目录Web前端开发笔记-----23.阻止默认行为、拖拽、事件委托一、阻止默认行为1.阻止浏览器中右键默认菜单。2.阻止超链接默认行为二、拖拽三、事件委托一、阻止默认行为1.阻止浏览器中右键默认菜单。阻止默认行为: <script> window.onload = function(){ document.oncontextmenu = function(){

2021-03-29 15:35:31 395

原创 Web前端开发笔记-----22.认识事件、事件类型、事件对象、事件对象属性

Web前端开发笔记-----22.事件文章目录Web前端开发笔记-----22.事件一、认识事件1.什么是事件2.事件绑定方式3.绑定事件格式:二、事件类型1.鼠标事件2.键盘事件3.HTML事件window事件表单事件一、认识事件1.什么是事件事件是发生并得到处理的操作,即:事件来了,人后处理。2.事件绑定方式1.内联模式<button onclick="btnClick">内联模式</button>2.外联模式var oBtn = document.getE

2021-03-27 16:50:34 343

原创 Web前端开发笔记-----21.认识BOM、认识DOM

Web前端开发笔记-----21.认识BOM文章目录Web前端开发笔记-----21.认识BOM一、认识BOM1.系统对话框2.open方法3.history对象二、认识DOM一、认识BOMBOM(browser object model)浏览器对象模型1.系统对话框 alert() 弹出警告框 confirm() 弹出一个带确定和取消的提示框   如果点击确定,返回true   如果点击取消,返回false prompt() 弹出一个带输入框的提示框   参数:    第一个参数

2021-03-18 23:12:04 146 1

原创 Web前端开发笔记-----20.认识对象、Math对象、定时器

Web前端开发笔记-----20.认识对象、Math对象、定时器文章目录Web前端开发笔记-----20.认识对象、Math对象、定时器一、认识对象1.面向对象编程思想:直接将生活逻辑映射到我们的程序2.语法3.对象的代码二、Math对象日期对象1.声明日期对象2.日期对象的方法三、定时器实时显示当前时间:一、认识对象1.面向对象编程思想:直接将生活逻辑映射到我们的程序(1)分析有哪些实体(2)设计实体属性和功能(3)实体之间相互作用2.语法类:一类具有相同特征事物的概念对象:具体某一个

2021-03-16 22:53:18 101

原创 Web前端开发笔记-----19.js字符验证码、表单验证

Web前端开发笔记-----19.js验证码文章目录Web前端开发笔记-----19.js验证码一、js验证码1.纯数字组成的验证:2.数字和字符组成的验证码:3.点击按钮获取验证码4.敏感词过滤二、一、js验证码1.纯数字组成的验证:6位验证码0-9 随机数:parseInt(Math.random()*10)<script>function numTestCode(n){ var arr=[]; //存储生成的数字 for(var i=0;i<n;i+

2021-03-15 21:10:30 214

原创 Web前端开发笔记-----18.布局扩展、Flex弹性盒模型、Grid网格布局

Web前端开发笔记-----18.布局扩展文章目录Web前端开发笔记-----18.布局扩展一、布局扩展1.等高布局2.双飞翼布局二、Flex弹性盒模型一、布局扩展1.等高布局利用margin负值和padding正值实现等高。margin-bottom:-2000px; padding-bottom:2000px;2.双飞翼布局左右固定,中间自适应。利用margin负值.container .center{ height :200px; float:left; width:100%;}

2021-03-12 20:19:14 187

原创 Web前端开发笔记-----17.阴影、遮罩、倒影、模糊与计算、分栏布局

Web前端开发笔记-----17.阴影文章目录Web前端开发笔记-----17.阴影一、阴影1.文字阴影2.盒子阴影二、遮罩三、倒影四、模糊与计算五、分栏布局一、阴影1.文字阴影text-shadow x y blur color 多阴影注:阴影的默认颜色是跟文字样色相同text-shadow:10px 10px 20px bule;向右向下偏移10px 模糊程度20px 阴影颜色bluetext-shadow:10px 10px 20px bule,10px 10px 2

2021-03-11 18:08:20 224

原创 Web前端开发笔记-----16.3D、背景扩展、css3渐变、字体图标

Web前端开发笔记-----16.3D、背景扩展、css3渐变、字体图标文章目录Web前端开发笔记-----16.3D、背景扩展、css3渐变、字体图标一、3D1.transform3D相关属性2.3D相关属性3D效果之旋转木马3d效果之翻转图片二、背景扩展三、css3渐变1.线性渐变2.径向渐变(用的不多)四、字体图标阿里巴巴矢量图标库自定义字体图标一、3D1.transform3D相关属性rotateX():正值向上翻转rotateY():正值向右翻转rotateZ():正值向前,负值向右

2021-03-10 17:29:56 125

原创 Web前端开发笔记-----15BFC规范、transition过渡、transform变形、animation动画

Web前端开发笔记-----15BFC规范文章目录Web前端开发笔记-----15BFC规范一、BFC规范二、transition过渡三、transform变形一、BFC规范Formatting context(格式化上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。BFC即Blo Formatting Context(块级格式化上下文),它属于上述中的其中一种规范。具有BFC特性的元素可以看作

2021-03-08 21:06:47 215

原创 Web前端开发笔记-----14.css精灵、css圆角、引用标签、iframe嵌套页面、map与area、audio与video

Web前端开发笔记-----14.css精灵、css圆角、引用标签、iframe嵌套页面、map与area、audio与video文章目录Web前端开发笔记-----14.css精灵、css圆角、引用标签、iframe嵌套页面、map与area、audio与video一、css精灵二、css圆角三、引用标签四、iframe嵌套页面五、map与area六、audio与video一、css精灵Css Sprite特性:   CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉

2021-03-07 15:32:55 227

原创 Web前端开发笔记-----13.float浮动、position定位

Web前端开发笔记-----13.float浮动、position定位文章目录Web前端开发笔记-----13.float浮动、position定位一、float浮动1.float浮动概念和原理2.清除float浮动二、position定位1.relative相对定位2.absolute绝对定位3.fixed绝对定位4.sticky黏性定位5.z-index定位层级三、定位小练习实现下拉菜单一、float浮动1.float浮动概念和原理文档流:  文档流是文档中可显示对象在排列时所占的位置。f

2021-03-03 21:55:42 199

原创 Web前端开发笔记-----12.css默认样式、css重置样式、Photoshop工具

Web前端开发笔记-----12.css默认样式文章目录Web前端开发笔记-----12.css默认样式一、css默认样式二、css重置样式三、Photosh工具png等图片切图流程psd源文件切图流程企业中的切图流程一、css默认样式有些标签由默认样式,有些标签没有没有默认样式的:div、span有默认样式的:body -> margin:8pxh1 -> margin:上下21.440pxp -> margin:上下10pxul -> margin:上下16p

2021-03-01 15:58:50 329

原创 Web前端开发笔记-----11.标签分类、display显示框类型、标签嵌套规范、溢出隐藏、透明度与手势

系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例

2021-02-28 21:59:50 266 1

原创 Web前端开发笔记-----10.css盒子模型以及一些常见问题和扩展

Web前端开发笔记-----10.css盒子模型以及一些常见问题和扩展文章目录Web前端开发笔记-----10.css盒子模型以及一些常见问题和扩展一、css盒子模型二、盒子模型的一些常见问题1.margin叠加2.margin传递三、css盒子模型之扩展一、css盒子模型组成:content -> padding ->border ->margin      物品    填充物   包装盒   盒子与盒子之间的间距content:内容区域,width和hei

2021-02-07 14:13:11 271

原创 Web前端开发笔记-----9.css样式继承,css优先级

Web前端开发笔记-----9.css样式继承文章目录Web前端开发笔记-----9.css样式继承一、css样式继承二、css优先级一、css样式继承css样式继承:文字相关的样式可以被继承 如:字体样式,颜色布局相关的样式不能被继承 如:大小,边框默认是不能继承的,但是可以设置继承属性 利用inherit值。<style> div{width: 300px;height: 300px;border: 1px solid red;font-size: 20px

2021-02-06 13:54:09 216

原创 Web前端开发笔记-----8.css选择器

Web前端开发笔记-----8.css选择器文章目录Web前端开发笔记-----8.css选择器一、css选择器1.ID选择器2.CLASS选择器3.标签选择器4.群组选择器(分组选择器)5.通配选择器6.层次选择器7.属性选择器8.伪类选择器a.hover等伪类选择器:b.after等伪类选择器:c.结构型伪类选择器一、css选择器1.ID选择器ID选择器:css:#elem{}hrml:id=“elem”注:1.在一个页面中,ID值是唯一的。2.命名规范:由字母 _ - 数字组成(第

2021-02-05 23:34:11 84

原创 Web前端开发笔记-----7.css文字样式,css段落样式,css复合样式

Web前端开发笔记-----7.css文字样式,css段落样式,css复合样式文章目录Web前端开发笔记-----7.css文字样式,css段落样式,css复合样式一、css文字样式1.字体类型2.字体样式font-size:字体大小font-weight:字体粗细font-style:字体样式color:字体颜色二、css段落样式text-decoration:文本装饰text-transform:文本大小写(针对英文段落)text-indent:文本缩进(首行缩进)line-height:定义行高le

2021-02-04 14:59:18 366

原创 Web前端开发笔记-----6.div和span,css基础语法和引入方式,颜色表示法,背景样式,边框样式

Web前端开发笔记-----6.div和span文章目录Web前端开发笔记-----6.div和span前言一、div和span二、css基础1.css基础语法2.css样式的引入方式a.内联样式和内部样式b.外部样式前言一、div和spandiv (块):div全称为division,“分割、分区”的意思,<div>标签用来划分一个区域,相当于一块区域容器,可 以容纳段落、标题、表格、图像等各种网页元素.即HTML中大多数的标签都可以嵌套在<div&g

2021-02-03 22:17:34 403

原创 Web前端开发笔记 -----4.文本修饰标签、图片标签与图片属性、跳转链接和锚点、特殊字符

4.文本修饰标签文章目录4.文本修饰标签前言一、文本修饰标签二、图片标签与图片属性三、跳转链接和锚点四、特殊字符前言 小编是初次创作博客,经验不足;对web开发这一块也只是以前零散的学习过,但当我真正一个人从头到尾去实现时,总会有不记得的地方。所以我就决定从头再学习一遍并想到了通过写博客(课程笔记)的形式去学习它,虽然写博客会让我多花几倍的时间去学习它,但是当我完成一篇博客所获得的成就感和认同感,让我很满足,能够鼓励我一天天的坚持下去,也希望和我一起学习的"同道"们也能给一直坚持下去。我们大家一起加

2021-02-02 17:01:04 282

原创 Web前端开发笔记 -----3.html基础结构与属性、初始代码、注释

3.html基础结构与属性以及初始代码文章目录3.html基础结构与属性以及初始代码一、html基础结构与属性二、初始代码一、html基础结构与属性超文本标记语言(HyperText Markup Language)超文本:文本内容 + 非文本内容(图片,视频,音频等)标记(也叫标签):<单词>语言:编程语言标签分为单标签和双标签单标签:<img>双标签:<div></div>创建标签的快捷键:单词+tab格式:<标签 属性=”值

2021-02-02 13:18:11 212

原创 Web前端开发笔记 -----2.vs code 和 chrome浏览器

2.vs code 和 chrome浏览器文章目录2.vs code 和 chrome浏览器一、下载地址二、vs code编辑器1.设置为中文2.常用插件3.编辑器的基本使用一、下载地址vs code官网下载地址:https://code.visualstudio.com/编辑器:chrome浏览器下载地址:https://www.google.cn/chrome/二、vs code编辑器1.设置为中文vs code默认是英文,我们可以通过下载插件来变成中文模式。点击安装就能使用。

2021-02-01 23:16:35 152

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除