前端基础学习记录和笔记

dawn191228

已于 2024-08-08 16:01:44 修改

阅读量220

点赞数 9

文章标签：前端学习笔记

于 2024-08-08 15:54:37 首次发布

本文链接：https://blog.csdn.net/dawn191228/article/details/141029019

版权

前端学习

体系

html + css + javascript

HTML：hyper text markup language 超文本标记语言（可以呈现文本的各种形式）
html就是各种记号，用来标记不同的文本形式，从而构成结构。
记号共分为两类：提供显示的元素，收集信息的元素。
CSS：cascading style sheet 层叠样式表单（样式装修）
css为结构提供装饰，改变样式。
样式主要分为：选择器（selector）（就是选元素，方便进行统一的修饰），盒子模型（元素特性，将元素按性质分为几类），布局，各种样式（需要慢慢累积）
JavaScript：为了扩展浏览器交互功能。（交互行为）
JavaScript和微软的Jscript整合之后组成的新的语法规范：ECMAScript（es），主要语法还是以JavaScript为主。
交互主要分为两部分：效果交互（通过鼠标移动产生的可视的交互），数据交互（前端收集的数据提交给后端，后端的数据显示在前端），另外还存在一些第三方框架（包括jQuery函数库，layer弹框组件，echarts图表库，渐进式vue等等）。

HTML

一些基础标签

<!--骨架元素-->
<!DOCTYPE html>
<html>
	<!--head标签用于设置页面配置信息-->
	<head>
		<!--设置页面的标题配置信息-->
		<title>百度一下</title>
		<!--设置页面的编码配置信息-->
		<meta charset = "utf-8"/>
	</head>
	<!--body标签是页面的主体-->
	<body>
		<a name = "top">顶部</a>
		<!--基本元素-->
		<!--标题标签，效果为加粗，字体变大-->
		<h1>qcby</h1>
		<h2>qcby</h2>
		<h3>qcby</h3>
		<h4>qcby</h4>
		<h5>qcby</h5>
		<h6>qcby</h6>
		<h1>qcby</h1>
		<h2>qcby</h2>
		<h3>qcby</h3>
		<h4>qcby</h4>
		<h5>qcby</h5>
		<h6>qcby</h6>
		<!--段落标签，效果为段首和短尾出现行距-->
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<!--盒子标签，效果为换行-->
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<!--文本行标签，无特殊效果-->
		<span>span1</span>
		<!--换行标签-->
		<br><br><br>
		<span>span2</span>
		<span>span3</span>
		<!--分页标签-->
		<hr>
		
		<!--超链接标签
			配套属性：
				href：指定超文本资源路径（指跳转到的链接，可以是网址，也可以是本地）
				target：指定超文本资源打开方式,默认值为_self（本窗口），其他的还有_balnk（新窗口），_parent（跳出父级窗口），_top（跳出顶级窗口），自定义窗口（输入窗口名可以在指定的窗口打开，下见8.框架标签）
			
			锚点
			配套属性：
				name：定点名称
		-->
		
		<!--固定位置-->
		<div style = "position:fixed;right:10px;top:10px">
			<a href = "http://www.baidu.com" target = "_blank">跳转到百度</a>
			<a href = "#top">回到顶部</a>
		</div>
		<!--
			跳转本页面的锚点直接写，如果跳转同目录下的其他网页，直接访问即可<a href = "LingYiGeWangYe#top">，这里也可以不加#，则直接跳转到页面首部
			
		-->
	</body>
</html>

<!--

	html标签（元素）由三部分组成：标签，标签属性，标签内容。
	例如：<div style = "color:red" id = "cc">青城博雅</div>
	
-->

补充

在进行标签嵌套时，如果子标签有自己的属性（比如颜色设置），则不受父标签属性设置的影响。这时改变子标签的属性需要单独设置，而不能用一个父标签套起来统一设置。

图片标签

<img src = "#" alt = "这是一张风景图">
<!--
	src：这里#放置图片的路径来引用图片资源，一种是绝对路径，一种是相对路径，还可以放置网络图片的地址（直接复制图片地址）
	相对路径引用时，同级目录（兄弟关系）直接访问即可<img src = "pic.jpg">，上层目录<img src = "../pic.jpg">，下层目录（叔侄关系）<img src = "img文件夹/pic.jpg">

	alt：图片没有加载成功时，显示alt里面的文字信息
	
	width：设置图片宽度 width = "100px"
	height：设置图片高度
	
	filter：可以设置图片的滤镜
-->

所有的标签都有的三个属性

<!--
	id：编号，用于唯一确定某一标签
	class：类属性，用于确定一类标签
	style：样式设置，包括字体，背景，宽高等等，需要注意在这里设置宽高的格式与img标签不同
-->

列表标签

<!--
	列表标签：分为无序列表和有序列表，无序列表用<ul>，有序列表用<ol>
	用得比较多的为无序列表<ul>
	type：设置有序列表的序号类型，如abcd，1234。
	start：从哪个序号开始，如：d，3。
-->
<!--unorderlist-->
<ul>
	<li></li>
</ul>
<!--orderlist-->
<ol>
	<li></li>
</ol>

表格标签

<!--
	表格标签中<tr>表示行，有几个<tr>就有几行，<td>表示列，<th>表示列，字体会加粗居中，一般用在表头
	border = "1"：设置表格边框
	width：height：设置表格宽高
	cellpadding：控制单元格的填充度（文字与边框的距离）
	cellspacing：控制单元格之间的间距
	单元格合并：rowspan = "2"，控制行合并（2行），colspan = "4"，控制列合并（4列）
-->
<table>
	<tr>
		<td>姓名</td>
		<td>性别</td>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
	</tr>
</table>

<!--
	分隔并包裹表格，形成独立的空间，固定表格的行顺序
-->
<thead></thead> <!--永远在表格的最上面-->
<tbody></tbody>
<tfoot></tfoot>

框架标签

<!--
	也叫窗口标签，用于嵌套其他页面
	src：指定嵌套的页面资源（部分网站不允许嵌套，例如百度）
	width：height：控制页面宽高
	frameborder：嵌套页面的边框宽度设置
	name：给窗口命名,用于作为链接打开的指定窗口
-->
<iframe src = "http://www.bilibili.com/" width = "600px" frameborder = "0" name = "test"></iframe>

音视频标签

<!--
	src：指定音频资源，可以由绝对路径和相对路径的访问，和img类似
	controls：不写的话默认false，写上即为true，表示手动播放
	autoplay：进入页面自动播放
	loop：循环播放
-->
<audio src = "#" autoplay></audio>
<!--
	视频标签为<video></video>，类似于<audio></audio>
	除此之外，视频还可以控制大小：width：height：设置宽高大小
-->

vs code的一些快捷键

ctrl + / ：快速注释
! ：快速生成框架元素
直接输入标签名 + 花括号，在花括号中书写文本，可以直接在html元素内生成文本
一次性生成多个标签，可以用 *n 表示，加上$ 符号，可以让生成的多个元素互不相同
>可以一次生成嵌套元素，即向下一级生成元素，如果下一级有多个标签，则用 + 连接。例如：div>ul>li>p+a。输入完毕回车即可
#表示id，.表示class：在输入标签时可以快速生成

收集用户信息标签

<!--
	用来收集用户信息的单行文本框
	type = "text" 普通文本框
	type = "password" 密码框
	type = "radio" 单选框，但实际中可多选。如果想要实现单选，可以增加一个name属性：name = "sex" 使其相同（name属性相同的单选框只能选一个）
	type = "checkbox" 复选框，可以多选
	
	type = "file" 文件选择器（用于上传文件）
	type = "color" 颜色拾取器（选择颜色）
	type = "date" 日期选择器（年月日）
	type = "datetime-local" 时间选择器（年月日时分）
	type = "week" 周选择器（第几周）
	type = "range" 滑块，实现通过拖动进度条选择的效果，可以通过max = ""和min = ""来控制最大值和最小值，value = ""设置初始值（刚进入页面的值）
	type = "number" 数字选择器（只能输入数字），也可以通过max = ""和min = ""来控制最大值和最小值，value = ""设置初始值，还可以通过 step = ""属性设置步长，每次单击升降按钮的变化值
	
	type = "button" 普通按钮，可以通过 value = "普通按钮" 属性来对按钮进行说明
	type = "reset" 重置按钮 value = "重置按钮"（需要嵌套到表单标签才生效）
	type = "submit" 提交按钮 value = "提交按钮"（同上）
-->
<input type = "radio" name = "sex"></input>

<!--
	下拉框，只能选一个option。默认会显示第一个选项
-->
<select>
	<option>数学</option>
	<option>语文</option>
	<option>英语</option>
</select>

<!--
	多行文本域
	rows和cols属性可以控制高度和宽度（10行40字）
-->
<textarea rows = "10" cols = "40"></textarea>

表单标签

<!--
	表单标签，将收集用户信息的标签用表单标签嵌套
-->
<form></form>

分类标签

<!--
	可以<fieldset>标签嵌套不同的标签实现分类，分好类之后可以通过<legend>标签定义标题
-->
<fieldset>
	<legend>基础信息</legend>
	<!--。。。。。。。-->
	<legend>详情信息</legend>
	<!--。。。。。。。-->
</fieldset>

CSS

引入CSS

<!--
	外部样式：
	哪个页面需要用到css文件夹下的index文件，哪个就引入下面这个标签
-->
<link rel = "stylesheet" href = "css/index.css">

<!--
	内部样式：
	哪个标签需要，就在起前面加哪个
-->
<style>
	div{
		color:black;
		background :pink;
	}
</style>

<!--
	行内样式
-->
<div style = ""></div>

三种样式同时进行处理的话，优先级：行内样式最高，内部样式和外部样式看谁最后一个修饰（即谁在下面）

选择器

选择器分为三大类：基本选择器，伪元素选择器，伪类选择器

基本选择器（8种）
- 元素选择器：E {} 用元素名称做选择，元素选择器中元素名称如果是”*“，表示选择所有元素
- 属性选择器：E[属性]{} 用id，class等标签做选择。例：div[id]{}修饰有id属性的，div[id=xx]{}修饰id值等于xx的，div[id^=xx]{}：以xx开头的，div[id$=xx]{}：以xx结尾的div元素，div[id*=xx]{}：只要包含xx的都选中。属性不够用时，还可以自己造属性。
- ID选择器：# + id值{}，选中所有id为某一值的元素（规范情况下id是唯一的）
- class选择器：. + class值{}，选中所有class值为某一值的元素（class名可以重复）
- 结合选择器：同时选择两种属性。例如：div.xx{}，会选中div标签并且class值为xx的元素**（&与操作）（注意中间不能加空格）**
- 包含选择器：指选中某属性下的某属性元素。例如：div .xx{}，选中div父级标签下包含的class值为xx的元素**（注意中间存在空格，与上面结合选择器区分），这里的包含关系不一定是儿子，也可能是孙子关系，即不一定是一级包含**
- 子选择器：选中某属性元素的子属性元素。例如：div>.xx{}，选中的是div父级标签下子元素class值为xx的元素**（注意必须是父子关系才会被选中，即一定是一级包含）**
- 兄弟选择器：匹配满足属性1的元素，找到后会选中其之后的满足属性2的元素（弟弟元素），如果想选择所有的弟弟元素，可以用*。例如：div~.xx{}，表示满足存在一个哥哥元素属性为div的class值为xx的元素
- 选择器组合：通过逗号","隔开元素属性，选中列举的所有元素。例如：div,.xx,p,h3{}，表示选中div和.xx和p和h3属性**（|或操作）**
伪元素选择器：格式" :: "（4种）
- 首字符伪元素选择器：使用前提是块级元素，例如div。不是块元素的可以通过display:block;变为块级元素（写到修饰里边）
  例如：将div包裹下的第一个字母q变为红色<div class = "gs">qcby</div>，写法如下：.gs::first-letter{}（对gs类下的第一个元素进行处理）
- 首行伪元素选择器：first-letter{}，使用同上面的首字符选择器
- 前插伪元素选择器：使用的前提是content必须存在，即使content里面内容为空也没有关系。.gs::before{content:"元素xx";修饰效果;}可以在gs类的前面插入元素xx，并且添加修饰效果。content属性不仅可以显示文本，还可以显示图片（用ur()函数实现）.gs::before{content:ur(图片地址或路径);修饰效果;}
- 后插伪元素选择器：::after，使用方法同上
伪类选择器：格式" : "
- 结构性伪类选择器：
  - :nth-child()，选择父元素里边第n个子元素。括号中添加数字，从1开始，代表第几个元素，还可以放odd（奇数），even（偶数），还可以放表达式，例如2n+3（选择从第三项开始的2的倍数的元素）、-n+3（选择前三项元素）、n（选择所有子元素）（注意表达式中只认识加号）

ul li:nth-child(odd){
	color:red;
}

selector{
	property:value; 
	property:value; 
}
/*
选择器 {
	属性:值;
	属性:值;
}
*/

补充
鼠标放到元素上面产生的状态可以用hover来选择

.menu ul li a:hover{
	background:rgb(148,50,39);
	color:rgb(255,255,255);
    cursor:pointer; /* 这里表示鼠标样式的更改 */
	/*表示在menu类下的ul标签下的li标签下的a标签，当鼠标移到这个位置时产生的效果 */
}

.menu ul li:hover a{ /*这里表示作用范围到li标签，但是发生变化的还是a标签*/
	background:rgb(148,50,39);
	color:rgb(255,255,255);
    cursor:pointer; /* 这里表示鼠标样式的更改 */
	/*表示在menu类下的ul标签下的li标签下的a标签，当鼠标移到这个位置时产生的效果
}

盒子模型

盒子种类
- 块级盒子（元素、标签）
  独占一行，对宽度和高度支持。例如p；div；ul；li；h1-h6
- 内联级盒子（元素、标签）
  不独占一行，对宽度和高度不支持。例如a；span
- 内联块级元素
  不独占一行，对宽度高度支持。例如img；input
- 弹性盒子
  一个父级元素设置为弹性盒子，其子元素默认始终横向布局（不管其宽度之和是否超过父级，如果宽度超过了会压缩）
盒子设置
通过属性display进行设置（块级盒子为block；内联级盒子为inline；内联块级盒子为inline-block；弹性盒子为flex）
盒子结构
一个盒子从里到外以此为：内容区(content) -> 填充区(padding) -> 边框区(border)，多个盒子之间会存在距离：外边距(margin)
==在进行设置时，如果同时输入多个值，则按照从上开始顺时针旋转分配数值，如果缺少数值则按照对称原则。==例如：padding:40px 50px 60px;上下左右依次为：40px，60px，50px，50px，同时也可以单独对某个方向进行设置
需要注意的是，不同于填充区，边框区(border)属于复合属性，由三个方面组成：边框样式(border-style)、边框颜色(border-color)、边框宽度(border-width)
对于外边距，margin:auto;可以让浏览器智能识别并且将元素居中放置（只能是左右居中，上下没有反应）
设置 (width、height)时，box-sizing:border-box;width和height从border算起，包含border和padding，box-sizing:content-box;width和height从content算起，不包含border和padding

布局（一般讨论的范围是横向布局）

float布局：需要向横向布局的元素添加float属性，left表示左浮动，right表示右浮动。浮动后不再占用位置，可以让盒子模型横向排列
如果子元素全部浮动，则父级元素由于没有盒子模型支撑，不设置高度就不会显示出来==（父级元素高度塌陷，元素重叠）==，这里可以通过计算给父级设置高度，还可以设置overflow:hidden;属性来使得父级元素与最高的浮动子元素高度一致（这个属性值的本意是隐藏父级元素超出的部分）
需要注意：使用float属性无法解决盒子元素的均分问题，即将横向布局的几个子元素均分父级元素的大小，这一点float无法做到
内联块级元素布局：需要横向布局的元素添加display属性：display:inline-block;
这样设置不会出现高度塌陷的问题
元素之间换行或者空格体现在页面上会出现小的缝隙，为了消除空隙，我们可以从父类中设置空白文本的字体大小为0font-size:0;(但是会导致所有的字体消失，需要在子类中重新设置字体）
需要注意：内联块级元素布局也无法实现均分问题
**弹性盒子模型：**在父级元素上添加display属性：display:flex;
- 配套属性：
1. flex-direction控制弹性盒子模型子元素的排列方向
  row：默认横向排列；column：纵向排列；row-reverse、column-reverse：反转
2. flex-wrap设置弹性盒子内元素是否换行
  wrap：宽度满了之后换行；nowrap：不换行（默认设置）
3. order作用在子元素，设置其排列顺序，值为数字，表示出场的顺序值（递增）
4. 控制弹性盒子内子元素的缩放比例【复合属性】
  flex-grow：x;拉伸因子（当子元素的宽度不足以撑起父级元素时，会将剩余的部分平均分成Σx份，然后每个子元素各占剩余的x_i份，如果不写值的话默认等比例压缩）
  flex-shrink：x;压缩因子（会将超出的部分平均分成Σx份，然后每个子元素各占被压缩**x_i**份，如果不写值的话默认等比例压缩）
  flex-basis：x;基准因子（一般可以直接用宽度代替）
- 为了解决均分的问题，可以将子元素的初始宽度设置为相同值，然后通过设置相同的拉伸因子或压缩因子使得子元素所占用的空间相同
1. justify-content：控制弹性盒子内子元素的分布方式
  flex-start：默认放在起始位置（居左）；flex-end：居右；flex-center：居中；space-between：空白分布在元素中间；space-around：空白放在元素两边；space-evenly：空白均匀分布
2. align-items：控制弹性盒子内子元素垂直方向上的分布方式
  属性值同justify-content的前三个，另外还有baseline：各元素文字首行底端对齐
3. align-content：控制弹性盒子内多行元素间的分布方式
  属性值同justify-content

定位（position属性）

属性值
static（静态定位模式，默认值）；relative（相对定位）；absolute（绝对定位）；fixed（固定定位）
使用定位的目的时调用其配套属性：left、bottom、top、right（方位属性）；z-index(z轴的层次，即调整谁更靠上的问题)（z轴表示垂直于眼睛（显示器）的轴）
使用模式
1. 纯使用relative：依然保留自己原有的物理空间，以原有的位置为定位参考点，随着浏览器的滚动而滚动
2. 纯使用absolute：不保留自己原有的物理空间，以浏览器为定位参考点，随着浏览器的滚动而滚动
3. 纯使用fixed：不保留自己原有的物理空间，以浏览器为定位参考点，不随着浏览器的滚动而滚动
4. 结合使用relative和absolute：祖先元素使用relative，当前元素使用absolute，保证当前元素不保留自己原有的物理空间，以使用relative的祖先元素为定位参考点，随着浏览器的滚动而滚动
Z-index
使用前提：兄弟关系进行层次调节，使用定位的三个属性属性
调整方法：通过设置z-index属性的值的大小（越大越靠近人眼）

补充知识

动画

过渡动画：transition（复合属性）
- transition-property：设置要应用动画的属性（哪个元素要做动画）
- transition-duration：设置动画的持续时间
- transition-timing-function：设置动画的速度模型（其值：ease(由慢到快，到达最快后，由快到慢)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(同ease)
- transition-delay：设置动画的延迟时间
- animation-iteration-count：定义动画播放的次数（n或infinite（无限次））
- animation-direction：用来设置是否轮流反向播放动画（normal（正常播放），reverse（相反方向播放动画），alternate（播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放），alternate-reverse（播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放）

.box{
	width:200px;
	height:200px;
	background:red;
	/*复合属性可以依次填写属性值，也可以分开来写*/
	transition:background 2s linear,width 2s linear; /*背景和宽度相关的变化设置为2s内匀速完成，这里同时设置多个属性可以用逗号隔开，此时就不能分开来写*/
	
	transition:all .2s linear/*所有变化的元素均设置为0.2s匀速*/
	/*如果缺少属性值，css会按照默认来设置*/
}
.box:hover{
	background:yellow;
	width:400px;
}

帧动画：animation（复合属性）
1. 定义帧动画
  @keyframes 动画名称{from | to | 百分数{样式属性1：值1；样式属性2：值2；}}
2. 使用帧动画
- animation-name：设置动画名称
- animation-duration：设置动画持续时间
- animation-timing-function：设置动画的速度模型（其值：ease(由慢到快，到达最快后，由快到慢)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(同ease)
- animation-delay：设置动画的延迟时间
- animation-iteration-count：设置动画的次数 infinite（无限次）
- animation-direction：设置动画的方向（默认为顺序，alternate表示交替：从头到尾再从尾到头）

@keyframes gs{
	0%{
		background:red;
		left:0px;
	}
	20%{
		background:green;
		left:300px;
	}
	40%{
		background:blue;
		top:300px
	}
	60%{
		background:pink;
		left:500px;
	}
	80%{
		background:yellow;
		left:200px;
		top:0;
	}
	100%{
		background:white;
	}
	/*上面的方位相当于元素原来的位置向四方调整*/
}
.box{
	width:200px;
	height:200px;
	animation-name:gs; /*动画名称*/
	animation-duration:5s; /*动画时间*/
	animation-timing-function:linear; /*动画速度*/
	animation-iteration-count:3; /*动画次数*/
	animation-delay:2s; /*动画延迟*/
}

css长度单位

分辨率：宽 × 高指的是像素点的个数

绝对长度单位
px（像素），in（英寸），cm（厘米），mm（毫米），pt（点）
相对长度单位
%（以父级元素的尺寸为参考维度）需要注意父级必须有一个参考的维度（固定的长度），如果父级元素也用%设置，则会一直向上追溯
em（以父级元素字体大小为参考维度）3em表示3倍的父级字体大小（浏览器默认字体是16px）
rem（以根元素字体大小为参考维度）根元素一般指<html>标签
vw（以视图窗口的宽度为参考维度）将浏览器视图100等分，30vm表示占30%
vh（以视图窗口的高度为参考维度）同上
vmin（以视图窗口的高度、宽度最小值为维度）同上
vmax（以视图窗口的高度、宽度最大值为维度）同上

变形

变形相关属性：transform（复合属性）
变形函数的参考系：X轴向右为正方向，Y轴向下为正方向，Z轴向外为正方向。默认浏览器左上角为(0,0)点
（这里默认是旋转之前的，如果元素发生了旋转，则参考系也会发生相应的旋转）

位移相关
translate(tx, [ty])（沿着x轴移动，同时沿着y轴移动，第二个变量可以省略）
translateX(tx)只沿着x轴移动
translateY(ty)只沿着y轴移动
translateZ(tz)只沿着z轴移动（需要开启3D效果才能看出来）
translate3d(tx, ty, tz)沿着x轴，y轴，z轴同时移动
缩放相关
scale(sx, [sy])（沿着x轴同时沿着y轴缩放，值小于1是缩，大于1是放）
scaleX(sx)
scaleY(sy)
scaleZ(sz)
scale3d(sx, sy, sz)同上面translate
旋转相关
rotate(deg)（沿着z轴旋转多少度）
rotateX(xdeg)
rotateY(ydeg)
rotateZ(zdeg)
rotate3d(x, y, z, deg)（根据xyz的值确定一个轴旋转）
倾斜相关
skew(xdeg，ydeg)（沿着x轴倾斜多少度，同时沿着y轴倾斜多少度）
skewX(xdeg)
skewY(ydeg)
配套属性
- 同时使用多种变形，把变形函数以空格隔开即可。例如：transform:rotate(360) scale(3)
- 设置变形的中心点 transform-origin:0px 0px 其值可以是left，right，center，top，bottom以及长度
- 设置3D效果（开启视距） perspective其值越小，3D效果越明显，注意：一定要作用到是父级元素上
- 设置3D嵌套效果 transform-style 其值有flat（不显示3d嵌套效果），perserve-3d（显示3d嵌套效果）注意：一定也要作用到是父级元素上
- 3d背面是否可见 backface-visibility 其值visible（可见的），hidden（不可见）

圆角

.box{
	width:200px;
	height:200px;
	background:red;
	border-radius:20px; /* 边角扇形半径为20px */
	border-radius:30px 100px；/* 从左上角开始顺时针旋转，缺值就对称 */
	border-radius:30px 100px 60px 10px / 40px 60px 70px 10px/* 以斜线分割，前四个值代表横向半径（边角扇形的半径），后四个值代表纵向半径，分别代表左上、右上、右下、左下 */
	border-radius:50% /* 半径占宽高的比例 */
}

盒子阴影

/*
box-shadow 属性接收值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色（可以控制透明度：rgba:） 投影方式（默认向外，可以设置向内(inset)）指的是向内扩散还是向外扩散 }
不像其它的属性，比如 border，它们的接受值可以被拆分为一系列子属性，box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要，尤其是那些长度值。
*/
/* 通过逗号隔开可以实现多层阴影 */

倒影（部分浏览器兼容）

-webkit-box-reflect：属性值1 属性值2 属性值3；

属性值1：倒影的位置：

-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */

属性值2：倒影的距离：

-webkit-box-reflect: below 10px;  /* 下，距离10像素 */

属性值3：倒影的遮罩层：

-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下，距离0像素，线性遮罩渐变颜色最后白色 */

JavaScript

引入JavaScript

内嵌式：js可以在任何位置通过<script></script>引入，<head>和<body>内外都可以
alert("你好呀！") //弹框，你好呀！
外引式：通过引入文件来引入js<script src = "index.js"></script>

两者同时写入时，外引式会把内嵌式覆盖掉

<script>标签属性：

console.log(document.getElementById("gs"));
//在控制台打印输出id值为gs的元素
//这里需要注意：在document中寻找操作之前要先将元素渲染出来，否则输出结果为null。如果一定要在<head>标签中写入js，则需要引入defer属性

<script defer>console.log(document.getElementById("gs"))<script>
//延迟执行js文件（等到html执行完之后再执行），只能应用于外引式

JavaScript语法

如何定义变量以及变量类型

	//javascript是弱类型语言，不区分数据类型
	var a = 'abcdd'; //最后的分号可写可不写，变量名采取小驼峰命名
	var a_1 = new String("abcdd") //也可以把变量当作对象来定义
	//js中对于字符串也不区分单引号和双引号，都可以引用字符串时使用
	/* 变量类型分为两大类：基本类型（5种），复合类型（3种）
	基本类型：字符串类型（string），数值类型（number），布尔类型（boolean），undefined类型（undefined），null类型（null）都可以用var来定义
		对于未赋初值的变量，属于undefined类型，当变量通过document操作寻找元素对象的时候，如果没有找到（不存在所找元素），则为null类型
	复合类型：数组类型，对象类型，函数类型
	*/
	var arr = [1,2,3,'abcd',false,undefined,null,[9,10,11],{age:18,sex:"男"}] //数组类型{json格式}
	var obj = { //可以添加元素对象类型的描述
		xingming:"gs",
		age:18,
		isMan:true,
		banks:["中国银行","中国工商银行"] //对象元素也可以嵌套自身和数组
	} //对象类型{json格式}，方便前后端进行交互

如何使用变量

    //查看变量类型使用typeof运算符或者使用typeof()方法：typeof a || typeof(a)
    //null类型本质上是对象类型，属于空对象类型，因此用typeof打印结果为object
    //数组类型本质上也是对象类型
    var a
    console.log(a)
    console.log(typeof a)
    console.log(typeof(a))

	var arr = [1,2,3,'abcd',false,undefined,null,[9,10,11],{age:18,sex:"男"}]
    console.log(typeof arr[3])
	arr.push(10)
	console.log(arr) // 直接输出数组中的所有元素
	console.log(arr.length)
	/*javascript中数组和java中数组的区别
	1、js中数组可以放多种类型的元素,甚至可以是数组（嵌套），Java不行，必须为同类型元素
	2、js中数组长度是可变的，可以通过arr.push()来添加元素，Java中数组长度不可变
	3、js中数组不存在数组越界，不存在的元素会输出undefined，Java会存在越界
	*/
	
	console.log(obj.age) //访问对象的属性
	console.log(obj["age"]) //两种访问方式都可以达到，这里加双引号表示查找元素名称，不加双引号表示查找名叫"age"的变量
	console.log(obj.banks[0]) //输出"中国银行"
	console.log(obj["banks"][0]) //定义对象本质上也是一种关联数组
	
	for(var key in obj)
		console.log(key + ":" + obj[key]) 
	// 遍历obj中元素名称和值并打印，需要注意，这里由于key是变量，不需要用双引号即可访问，只能用obj[key]的形式而不能用obj.key，因为这种形式系统会把key当作obj中存在的变量来查找访问，找不到所以输出undefined

如何定义函数

	//匿名函数定义
	var fun = function(a){
		var s = "你好！"
		console.log(s + a)
	}
	
	//命名函数定义
	function gs(){
		var s = 'nihao!'
		console.log(s)
	}
	//这里也可以将函数赋给一个变量，但是这样，调用函数只能通过该变量来实现
	var ff = function gs(){
	
	}
	ff()
	
	//函数的第三种定义方式（过于繁琐,一般不用）
	var kk = new function ("name","alert(66)")

如何使用函数

	// 1.函数调用
	fun("guoshuai")
	ff()
	// 2.函数作为值来使用
	consol.log(fun) //把函数代码输出，注意不能带括号
	// 3.函数返回值作为值来使用
	console.log(fun("666")) //输出函数的返回值，js中无论有没有return语句，都会有返回值（undefined）
	
	//setInterval(函数, 间隔(ms))每隔一段时间执行一次函数
	setInterval(fun, 1000) //这里是将函数作为值传递给setInterval函数，因此函数参数不加括号

定时器

定时器的设置是一种异步操作，在工作时可以多个同时进行，效果会叠加，不需要谁等待谁

周期定时器

设置周期定时器：var timer = setInterval(函数，间隔)，每隔指定间隔时间来执行函数（间隔单位为毫秒），返回值为定时器的编号

//函数的的调用一共有三种方式
setInterval(function(){
	console.log(1)
}, 1000)

var fun = function(){
	console.log(1)
}

setInterval(fun,1000)

setInterval("fun()",1000)

清除周期定时器 clearInterval(timer)，清除编号为timer的定时器

延迟定时器

设置延迟定时器：var timer = setTimeOut(函数，间隔)，指定间隔时间来执行一次函数，返回值为定时器的编号，用法同上
清除延迟定时器 clearTimeOut(timer)，清除编号为timer的定时器
模拟周期定时器（利用函数递归）

var count = 0
var fun = function(a){
	console.log(a)
	count ++;
	if (count < 11){
        var timer = setTimeOut(function(){
            fun(10)
        },1000)
	}
}//每隔1s调用自己一次，输出10

fun()//这里开始调用函数，由于第一次没有传参数，第一个输出的是undefined,一共会输出10个10

JavaScript常用类

Math类

var a = 3.5
console.log(a)
//Math类中的静态方法
console.log(Math.cell(a)) // 向上取整
console.log(Math.floor(a)) //向下取整
console.log(Math.round(a)) //四舍五入
console.log(Math.abs(a)) //取绝对值
console.log(Math.power(a,3)) //求指数
console.log(Math.sqrt(a)) //求开方

Date类

// 获取日期对象方法
var date = new Date()
// 获取日
date.getDate()
// 获取月，这里的月份数字从0开始，即1月为0
date.getMonth()
// 获取星期，周日是0
date.getDay()
// 获取时间戳，从1970年1月1日开始到现在的毫秒数
date.getTime()
// 获取本地时间字符串
date.toLocaleString()
console.log(typeof(date.toLocaleString)) //输出数据类型，为String
// 获取本地时间日期部分
date.toLocaleDateString()
// 获取本地时间时间部分
date.toLocaleTimeString()

一些样例

定时器样例1

<html>
	<head>
		<meta charset = "utf-8">
		<title>练习页面</title>
	<style>
		.sty1{
			width:100px;
			height:100px;
			background-color:#2ac;
			margin-left:300px;
		}
	</style>
	</head>
	
	<body>
		<div id = "id1" class = "sty1" onclick = "m1(10)">
		<!--onclick函数表示事件：当点击标签时-->
		</div>
	</body>
	<script>
		function m1(a){
            var x = document.getElementById("id1");	// document表示整个页面，在整个页面通过id获取元素
            x.style.height = a + "px"; // x的样式更改
		}
		m1(200); // 上面的代码存在于函数中，在这里调用才会执行
        // js是弱类型语言，不区分数据类型
        
        setTimeout("m1(400)", 5000); //延迟调用m1方法，延迟5000ms
        // 需要注意第一个入参为字符串类型，如果m1的参数的变量k的话需要用字符串拼接传入："m1(" + k + ")"
		for (var i = 0; i < 10; i ++)
		{
			var k = 100 + i * 10;
			setTimeout("m1(" + k + ")", 5000); 
			//这条命令执行完毕后，后面的指令会继续执行，不会等待5000ms的延迟，所以执行效果为瞬间启动10个计时器，想要实现每次暂停的效果，可以采用递归调用
			console.info("=====" + i); //循环输出
		}
/*-------------------------------------------------------------------------------------*/
		function m2(a){
			var x = document.getElementById("id1");
			x.style.height = a + "px";
			x.style.transform = "rotate(30deg)";//旋转30度
			a = (a + 10) % 500;
			setTimeout("m2(" + a + ")", 20); // 递归调用m2方法，延迟效果
		}
		m2(120);
	</script>
</html>

定时器样例2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }
        
        .box {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: linear-gradient(0deg, red, yellow, blue); /* 设置盒子背景为渐变颜色 */
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <!-- 设置开始转动和停止转动的按钮 -->
    <input type="button" value="start" id="start">
    <input type="button" value="stop" id="stop">

    <!-- 这里是设置可滑动的进度条来手动触发控制转速 -->
    <!-- <input type="range" id="range" min="0" max="360" value="0"> -->

    <script>
        // 手动触发
        // var range = document.querySelector("#range") // 获取id为range的元素

        // range.oninput = function() {
        //     var box = document.querySelector(".box") // 获取类名为box的元素
        //     box.style.background = "linear-gradient(" + this.value + "deg, red, yellow, blue)" // 这里的this.value表示的是range滑块代表的值
        // }


        //通过周期定时器自动触发
        var box = document.querySelector(".box")
        var deg = 0;
        var fun = function() {
            deg = deg + 1 // 每次转动的角度加1
            box.style.background = "linear-gradient(" + deg + "deg, red, yellow, blue)"
        }

        var timer
        var start = document.querySelector("#start")
        start.onclick = function() {
            if (timer) { 
                // 这里表示如果timer已经被赋值，先将timer清除在执行下面的语句，防止timer的值被覆盖导致之后无法清除，如果不加if语句，会导致点击一次timer转动次数就会加快，但是点击一次stop只能清除最后一次的timer
                clearInterval(timer)
            }
            timer = setInterval(fun, 1)
        }
        var stop = document.querySelector("#stop")
        stop.onclick = function() {
            clearInterval(timer)
        }
        
        //通过延迟定时器自动触发
        var box = document.querySelector(".box")
        var deg = 0;
        var fun = function() {
            deg = deg + 1 // 每次转动的角度加1
            box.style.background = "linear-gradient(" + deg + "deg, red, yellow, blue)"
            timer = setTimeOut(fun,1) // 1ms后再次调用自己
        }

        var timer
        var start = document.querySelector("#start")
        start.onclick = function() {
            if (timer) { 
                // 这里表示如果timer已经被赋值，先将timer清除在执行下面的语句，在通过延迟定时器实现的过程中，由于每次调用函数的timer之间相互独立，因此如果不清除，timer的效果会叠加，但是也可以通过点击stop清除掉，这一点和周期定时器不同
                clearTimeOut(timer)
            }
            fun() //首次调用函数，以此实现递归调用
        }
        var stop = document.querySelector("#stop")
        stop.onclick = function() {
            clearTimeOut(timer)
        }
    </script>
</body>

</html>

时钟样例

<div class = "time"></div>
<script>
	// 周期定时器实现方法
	var time = document.querySelector(".time") //找到类为time的元素
	function fun(){
		var date = new Date() //这里必须保证new在函数里边，才能确保获取的时间为当前时间
		time.innerHTML = date.toLocaleString()
	}
	setInterval(fun,1000) //设置定时器，1s调用获取时间一次
	
	// 延迟定时器实现方法
	var begin = (new Date()).getTime() //获取初始时间戳
	var time = document.querySelector(".time") //找到类为time的元素
	function fun(){
		var date = new Date() //这里必须保证new在函数里边，才能确保获取的时间为当前时间
		var end = date.getTime() //获取当前时间戳
		time.innerHTML = date.toLocaleString()
		if(end - begin < 10*1000){ //将运行时间控制在10s内
			setTimeOut(fun,1000)
		}
	}
	fun()
	
</script>

转账样例

<style>
body {
	display:flex;
	height:100vh;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.box {
	width:300px;
	height:300px;
	border-radius:50%;
	background: linear-gradient(0deg,red,yellow,blue);
}
</style>

<h1>余额:<span class = "text">100</span>元</h1>
<div>
    <input type = "text" class = "money">
    <input type = "button" class = "btn" value = "转账">
</div>

<script>
	var text = document.querySelector(".text")
	var money = document.querySelector(".money")
	var btn = document.querySelector(".btn")
	var timer
	btn.onclick = function(){
		// text.innerHTML = parseInt(money.value) + parseInt(text.innerHTML) // 获取输入框中的值和span元素的内容转换成整型并做加法运算，赋值给span
		var result = parseInt(money.value) + parseInt(text.innerHTML)
		timer = setInterval("action(" + result + ")",1) // 每隔1ms调用一次
	}
	
	function action(result){
		text.innerHTML = parseInt(text.innerHTML) + 1
		if(text.innerHTML >= result){
			clearInterval(timer)
		}
	}
</script>

页面跳转样例

<html>
	<head>
		<meta charset = "utf-8">
		<title>练习页面</title>
	<style>
		.sty1{
			width:1000px;
			height:32px;
			margin-left:100px;
		}
		.st2{
			width:56px;
			height:32px;
			background-color:#2ac;
			margin-left:6px;
			color:#fff;
			text-align:center;
			line-height:32px;
			font-size:13px;
			float:left; /*让盒子横向排列*/
			border-radius:4px;
		}
		.st3{
			background-color:#a00;
		}
		.st4{
			background:#fff
		}
	</style>
	</head>
	
	<body>
		<div id = "pageview" class = "sty1">
		</div>
	</body>
	<script>
		function pageView(index){
            var x = document.getElementById("pageview");
            var str = '<div class="st2">首页</div>';
            str += '<div class="st2" οnclick="pageView('+(index-1)+')">上一页</div>';
            str += '<div class="st2">'+(index-1)+'</div>';
            str += '<div class="st2 st3">'+index+'</div>';
            str += '<div class="st2">'+(index+1)+'</div>';
            str += '<div class="st2" οnclick="pageView('+(index+1)+')">下一页</div>';
            str += '<div class="st2">末页</div>';
            str += '<div class="st2">总计条</div>';
            str += '<div class="st2">总计页</div>';
            str += '<div class="st2 st4"><input type="text" id="pageinp" style="width:80%; height:24px;" /></div>';
            str += '<div class="st2" οnclick="gopage()">跳转</div>';
            x.innerHTML=str;
            //用字符串编写一段html代码放入页面中,显示效果为页面跳转
            //js中代码可以 ; 结尾，也可以没有 ; 结尾
		}
		
		function gopage(){
			var index = document.getElementById("pageinp").value;//获得文本框中内容，默认为字符串类型
			index = parseInt(index);//强制指定类型
			pageView(index);
		}
		
		pageView(22);
	</script>
</html>

表格样例

<html>
	<head>
		<meta charset = "utf-8">
		<title>练习页面</title>
	<style>
		.sty1{
			width:1000px;
			height:600px;
			margin-left:100px;
			margin:auto;
			background-color:#ccc;
		}
		.st2{
			width:56px;
			height:32px;
			background-color:#2ac;
			margin-left:6px;
			color:#fff;
			text-align:center;
			line-height:32px;
			font-size:13px;
			float:left; /*让盒子横向排列*/
			border-radius:4px;
		}
		.st3{
			background-color:#a00;
		}
		.st4{
			background:#fff
		}
	</style>
	</head>
	
	<body>
		<div id = "pageview" class = "sty1">
		</div>
	</body>
	<script>
		function pageView(){
            var x = document.getElementById("pageview");
            var st = '<table style = "width:100%;" border = 1>';
            st += '<tr><td>序号</td><td>姓名</td><td>性别</td><td>操作</td>';
        	for (var i = 0; i < 10; i ++){
        		st += '<tr>';
        		st += '<td id="ta' + i + '">' + (i+1) + '</td>';
        		st += '<td id="tb' + i + '">王大帅' + (i+1) + '</td>';
        		st += '<td id="tc' + i + '">' + (i%2==1 ? '女':'男') + '</td>';
        		st += '<td id="td' + i + '"><input type = "button" value = "修改" onclick = "change1(' + i + ')"></td>'
        		st += '</tr>';
        	}
        	st += '</table>';
        x.innerHTML = st;
		}
		function change1(id){
			var x1 = document.getElementById("ta" + id);
			var x2 = document.getElementById("tb" + id);
			var x3 = document.getElementById("tc" + id);
			var x4 = document.getElementById("td" + id);
			x1.innerHTML = '<input id = "ma' + id + '" type="text" value="' + x1.innerHTML + '">';
			x2.innerHTML = '<input id = "mb' + id + '" type="text" value="' + x2.innerHTML + '">';
			x3.innerHTML = '<input id = "mc' + id + '" type="text" value="' + x3.innerHTML + '">';
			x4.innerHTML = '<input type="button" value="确认修改" onclick = "confrim(' + id + ')" />';
		}
		//获取文本框内容用value，获取标签内容用innerHTML
		function confrim(id){
			var x1 = document.getElementById("ta" + id);
			var x2 = document.getElementById("tb" + id);
			var x3 = document.getElementById("tc" + id);
			var x4 = document.getElementById("td" + id);
			x1.innerHTML = document.getElementById("ma" + id).value;
			x2.innerHTML = document.getElementById("mb" + id).value;
			x3.innerHTML = document.getElementById("mc" + id).value;
			x4.innerHTML = '<input type="button" value="修改" οnclick="change1(' + id + ')" />';
		}
		pageView();
	</script>
</html>

dawn191228

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习记录和笔记

前端学习体系html + css + javascriptHTML：hyper text markup language 超文本标记语言（可以呈现文本的各种形式）html就是各种记号，用来标记不同的文本形式，从而构成结构。记号共分为两类：提供显示的元素，收集信息的元素。CSS：cascading style sheet 层叠样式表单（样式装修）css为结构提供装饰，改变样式。样式主要分为：选择器（selector）（就是选元素，方便进行统一的修饰），盒子模型（元素特性，将元素按性质分
复制链接

扫一扫