![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端研习录
文章平均质量分 86
html、css、js
清风不渡
古之立大事者,不惟有超世之才,亦必有坚韧不拔之志也
展开
-
前端研习录(01)——html5基础标签汇总
html基础知识汇总原创 2022-06-21 09:27:55 · 95 阅读 · 0 评论 -
前端研习录(02)——CSS内联样式、内部样式及外部样式
重拾前端记忆,记录学习笔记,现在进入CSS部分,CSS的唯一作用就是美化我们的网页,通常由选择器+一条或多条声明组成,如下:二、内联样式 内联样式直接在标签内通过用style的方式实现,如下:三、内部样式 内部样式通常在标签中通过标签进行声明,如下:四、外部样式 在html文档外部建立css文档,通过link的方式引入html文档,然后在css文档中编写css代码,如下:......原创 2022-06-21 11:09:49 · 482 阅读 · 0 评论 -
前端研习录(03)——CSS元素选择器、类选择器及ID选择器
重拾前端记忆,记录学习笔记,现在进入CSS选择器类型部分,CSS选择器分为全局选择器、元素选择器、类标签选择器、ID选择器四个类型,以下一一说明,为方便记录,采用内部样式进行举例。 可与任何元素匹配,优先级最低,一般用于初始化,如下:2、元素选择器 对某类元素进行统一设定,描述元素的共性,不是某一个元素的个性,一旦设置,相关html文档中所有该类型的元素都会通用3、类标签选择器 通过对标签指定class属性,再对某一类(class值一样)的标签定义CSS样式,如下:4、ID选择器原创 2022-06-21 11:53:35 · 166 阅读 · 0 评论 -
前端研习录(04)——CSS字体属性、背景属性、文本属性及表格属性
重拾前端记忆,记录学习笔记,现在进入CSS属性类型部分,CSS属性大致分为字体属性、背景属性、文本属性及表格属性这四类,以下一一说明,为方便记录,采用内部样式进行举例。 字体属性无疑就是定义字体样式的属性,大致有以下几种: 举例如下:2、背景属性 背景属性就是定义背景样式的属性,大致有以下几种: 举例如下:3、文本属性 文本属性即是定义文本类型的属性,大致有以下几种: 举例如下:4、表格属性 表格属性即是定义表格类型的属性,大致有以下几种: 举例如下: 那么有个问题,对于原创 2022-06-21 15:06:52 · 258 阅读 · 0 评论 -
前端研习录(05)——CSS后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器
重拾前端记忆,记录学习笔记,现在进入CSS关系选择器类型部分,CSS属性大致分为后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器这四类,以下一一说明,为方便记录,采用内部样式进行举例。 说明:后代选择器选择所有被A包含的B元素,中间用空格隔开,语法如下: 举例如下:2、子代选择器 说明:子代选择器选择所有是A的直接子元素B,对更深的不起作用,中间用>隔开,语法如下: 举例如下:3、相邻兄弟选择器 说明:相邻兄弟选择器选择紧跟A元素后的B元素,中间用+隔开,语法如下: 举例如下:原创 2022-06-21 16:09:00 · 4728 阅读 · 0 评论 -
前端研习录(06)——CSS盒子模型(Box Model)
重拾前端记忆,记录学习笔记,现在进入CSS盒子模型部分, CSS盒子模型本质上是一个盒子,用来封装HTML元素,有以下几种:以下一一说明,为方便记录,采用内部样式进行举例,代码如下: 运行结果及解释如下: 内、外边距还可以针对上、下、左、右进行单独的设置,如下:...原创 2022-06-21 17:06:35 · 106 阅读 · 0 评论 -
前端研习录(07)——CSS弹性盒子模型(flex box)
重拾前端记忆,记录学习笔记,现在进入CSS弹性盒子模型部分,它是CSS3的一种新的布局模式,用来当需要适应不同的屏幕大小以及设备类型时,更加有效的分配容器内元素的布局(排列、对齐和分配空白空间)...原创 2022-07-26 14:24:46 · 590 阅读 · 0 评论 -
前端研习录(08)——文档流
重拾前端记忆,记录学习笔记,现在进入文档流部分。文档流即文档中可显示对象在排列时所占用的位置或空间 例如:块元素从上而下摆放,内联元素从左到右摆放 缺点:标准流中的限制非常多,导致很多页面效果无法实现,如下所例: 标准流内联元素在高度不齐的情况下,采用底边对齐的方式,如下: 效果如下: 不论我们的文本中存在多少个空格,都会折叠为一个,如下: 效果如下: 如果想要图片中没有空白,则必须要将两个标签紧密贴合,如下: 但显然这样的书写方法是不规范的 怎么处理这些尴尬...原创 2022-07-27 21:53:48 · 184 阅读 · 0 评论 -
前端研习录(09)——CSS浮动与清除浮动
重拾前端记忆,记录学习笔记,现在进入CSS弹浮动部分,它可以通过增加一个浮层来放置内容的方式处理上篇中所提到的【标准流】的尴尬点,下面我们就来看一下呢 通过float属性定义元素向哪个方向浮动,任何元素都可以浮动 注意:浮动使元素脱离了文档流,且浮动只有左右浮动,没有上下浮动 脱离文档流后,元素相当存在于页面上的一个“浮层”中,可以理解为有两层页面,一层是底层的原页面,一层是脱离文档流的浮动页面,所以会出现折叠,举例如下: 效果如下,可以看出由于div是块级元素,所以会上下摆放: 现在我原创 2022-07-27 22:29:18 · 381 阅读 · 0 评论 -
前端研习录(10)——CSS相对定位、绝对定位、固定定位以及Z-index属性、opacity属性讲解及示例说明
relative相对定位absolute绝对定位fixed固定定位注意绝对定位和固定定位会使元素脱离文档流设置定位之后可以对四个方向进行元素位置的调整。原创 2022-07-31 13:44:23 · 462 阅读 · 0 评论 -
前端研习录(11)——CSS3新特性——圆角及阴影讲解及示例说明
重拾前端记忆,记录学习笔记,现在进入CSS3新特性——圆角及阴影部分,下面进行说明。四个值第一个值为左上角;三个值第一个值为左上角;第二个值为右上、左下角;两个值第一个值为左上、右下角;第二个值为右上、左下角。一个值四个角值相同。...原创 2022-07-31 20:31:24 · 345 阅读 · 0 评论 -
前端研习录(12)——动画效果讲解及示例说明
动画是使元素从一种样式逐渐变为另一种样式的效果可以指定多个动画效果或者多个次数可以使用百分比来规定发生变化的时间占比,或者from和to(相当于0%和100%)0%是动画的开始,100%是动画的结束。...原创 2022-07-31 21:30:17 · 371 阅读 · 0 评论 -
前端研习录(13)——媒体查询讲解及示例说明
媒体查询可以实现在不同的终端设备下达到不同的效果,会根据设备的大小自动识别加载不动的样式。原创 2022-07-31 22:15:46 · 870 阅读 · 0 评论 -
前端研习录(14)——CSS雪碧图及字体图标讲解及示例说明
重拾前端记忆,记录学习笔记,现在进入CSS雪碧图及字体图标部分。以上便是雪碧图的使用方法及效果。以上就是字体图标的内容。原创 2022-08-03 15:12:22 · 550 阅读 · 0 评论 -
前端研习录(15)——JavaScript语句、标识符、变量讲解及示例说明
版权声明一、JavaScript1、简介2、语句及标识符(1)语句(2)标识符3、变量(1)定义(2)变量提升JavaScript是一种轻量级脚本语言(脚本语言:不具备开发操作系统的能力,只是用来编写控制其他大型应用程序的“脚本”),本身是一种嵌入式语言,提供的核心语法并不是很多变量即是可变的量(内容是可变的),通过使用一个变量(相当于容器),来“容纳”不同的值,进行“输送”和“取用”。......原创 2022-08-03 21:11:09 · 355 阅读 · 0 评论 -
前端研习录(16)——JavaScript引入、注释及输出方式讲解及示例说明
重拾前端记忆,记录学习笔记,现在进入JavaScript引入、注释及输出方式部分。原创 2022-08-03 21:48:54 · 299 阅读 · 0 评论 -
前端研习录(17)——JavaScript数据类型讲解及示例分析
JavaScript语言中的每一个值都属于某一种数据类型,ES5中的数据类型共有六种,分别是:数值、字符串、布尔值、对象、null以及undefined。对象:由多个原始类型的值组成,可以理解为一个存放各种值的容器。重拾前端记忆,记录学习笔记,现在进入JavaScript数据类型部分。原始类型的数据类型共有三种,分别为数值、字符串以及布尔值。...原创 2022-08-03 22:08:08 · 194 阅读 · 0 评论 -
前端研习录(18)——JavaScript运算符合集
重拾前端记忆,记录学习笔记,现在进入JavaScript运算符部分原创 2022-08-03 23:17:11 · 388 阅读 · 0 评论 -
前端研习录(19)——JavaScript条件语句合集
重拾前端记忆,记录学习笔记,现在进入JavaScript条件语句部分原创 2022-08-05 21:20:51 · 243 阅读 · 0 评论 -
前端研习录(20)——JavaScript三元运算符
重拾前端记忆,记录学习笔记,现在进入JavaScript三元运算符部分原创 2022-08-05 21:41:07 · 1380 阅读 · 0 评论 -
前端研习录(21)——JavaScript循环语句合集
重拾前端记忆,记录学习笔记,现在进入JavaScript循环语句部分原创 2022-08-05 23:04:04 · 247 阅读 · 0 评论 -
前端研习录(22)——JavaScript字符串及其方法合集
重拾前端记忆,记录学习笔记,现在进入JavaScript字符串部分原创 2022-08-08 22:47:20 · 134 阅读 · 0 评论 -
前端研习录(23)——JavaScript数组及其方法合集
重拾前端记忆,记录学习笔记,现在进入JavaScript数组部分原创 2022-08-10 23:40:16 · 289 阅读 · 0 评论 -
前端研习录(24)——JavaScript函数讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScript函数部分原创 2022-08-11 09:48:07 · 144 阅读 · 0 评论 -
前端研习录(25)——JavaScript对象讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScript对象部分原创 2022-08-11 11:31:33 · 153 阅读 · 0 评论 -
前端研习录(26)——JavaScript DOM讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScriptDOM部分原创 2022-08-11 22:38:19 · 183 阅读 · 0 评论 -
前端研习录(27)——JavaScript document方法讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScript document方法部分原创 2022-08-11 23:43:25 · 1628 阅读 · 0 评论 -
前端研习录(28)——JavaScript Element对象及其属性讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScript Element对象及其属性部分原创 2022-08-14 18:13:20 · 255 阅读 · 0 评论 -
前端研习录(29)——JavaScript CSS操作讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScript CSS操作部分原创 2022-08-14 21:35:44 · 279 阅读 · 0 评论 -
前端研习录(30)——JavaScript 事件讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScript 事件部分原创 2022-08-15 22:50:30 · 261 阅读 · 0 评论 -
前端研习录(31)——JavaScript 定时器讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入JavaScript 定时器部分原创 2022-08-16 14:26:16 · 258 阅读 · 0 评论 -
前端研习录(32)——JavaScript 基于定时器实现防抖、节流
重拾前端记忆,记录学习笔记,现在进入JavaScript 防抖、节流部分原创 2022-08-16 15:50:41 · 645 阅读 · 0 评论 -
前端研习录(33)——命令行工具|ECMAScript6简介|Nodejs安装|Babel转码器安装及基本用法详解及示例分析
重拾前端记忆,记录学习笔记,现在进入ECMAScript6前置学习条件部分原创 2022-08-17 14:23:16 · 286 阅读 · 0 评论 -
前端研习录(34)——ES6 Let命令|Const命令讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入Let命令|Const命令部分原创 2022-08-19 10:08:52 · 205 阅读 · 0 评论 -
前端研习录(35)——ES6 对象解构赋值讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入ES6 对象解构赋值部分原创 2022-08-19 10:32:20 · 393 阅读 · 0 评论 -
前端研习录(36)——ES6 字符串扩展及新增方法讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入ES6 字符串扩展及新增方法部分原创 2022-08-19 21:55:32 · 273 阅读 · 0 评论 -
前端研习录(37)——ES6 数组扩展及新增方法讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入ES6 数组扩展及新增方法部分原创 2022-08-19 22:32:12 · 236 阅读 · 0 评论 -
前端研习录(38)——ES6 对象扩展讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入ES6 对象扩展部分原创 2022-08-19 23:01:09 · 204 阅读 · 0 评论 -
前端研习录(39)——ES6 函数扩展讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入ES6 函数扩展部分原创 2022-08-22 13:53:59 · 225 阅读 · 0 评论 -
前端研习录(40)——ES6 Set数据结构讲解及示例分析
重拾前端记忆,记录学习笔记,现在进入ES6 Set数据结构部分原创 2022-08-22 15:29:06 · 406 阅读 · 0 评论