Web学习整理
文章平均质量分 57
以学习为线索,梳理学习web前端时的知识点内容等,同时也是方便自我复习查找.
inter_姝
Lazy to talk,show me the code.
展开
-
Web前端学习整理(一)
标签:用于将文档划分为独立的部分,从而能够构建一个相对完整的网页.网页的主体一般由div标签进行搭建,但是html5标准中也有很多新的标签可以代替div进行相关操作,每一个独立的div可以继续使用div进行进一步的划分.zh-cn代表网页是一个中文网页.-标签:用于在网页中引入一张图片.是一个单标签,其不需要结束标签,但是可以使用/来作为img的结尾.-由包裹地关键词称为"标签",其具有单标签和双标签之分.之间除了标签名还可以添加相应的属性.原创 2024-07-25 13:35:59 · 604 阅读 · 0 评论 -
Web前端学习整理(二)
注意:行内样式虽然书写方便,权重较高,但是美亚由实现结构跟样式的分离,不便于代码维护,且不可以重复利用.内部样式也未实现结构和样式的分离,因此也不容易重复利用.外部样式实现了结构和样式的分离,可以重复利用,但是更加适合css代码量较多的情况下.-css(cascading style sheets)层叠样式表.以html为基础,具有丰富的功能,包括:装饰网页,修饰各种标签排版,改变字体的样式,设置图片等等.-内部样式:写在html文件的标签中,常设置在头部标签中.原创 2024-07-26 14:29:05 · 142 阅读 · 0 评论 -
Web前端学习整理(三)
当父元素没有边框|内边距|主体内容,且第一个或最后一个子元素没有边框|内边距时,父元素的上下外边距会与子元素的上下外边距合并,取两者中较大的值作为最终的外边距.-当两个相邻的兄弟元素之间内有边框或者内边距时,它们的上下外边距会合并,变成同一个外边距.合并后的外边距的大小会取两个外边距中较大的一个值.-放置内容的部分,可以由盒子的内容独自撑开(即不设置高度和宽度),还可以通过设置height和width属性来指定内容的大小.-是边框的外层,不会显示盒子的背景,用法和padding一样.原创 2024-07-26 15:17:04 · 379 阅读 · 0 评论 -
Web前端学习整理(四)
html中的空格|换行|制表符等空白字符在渲染过程会被视作为普通文本的一部分,因此会出现一个空格多出,例如标签之间的换行会变成一个空格.-常见的块元素:,,,,,,,,等。4.不能设置宽度,高度,垂直内外边距.但是可以设置水平内外边距.-常见的内联元素包括,,,,等.-常见的行内块元素包括,,等.3.不能包括块元素.原创 2024-07-27 14:08:24 · 276 阅读 · 0 评论 -
Web前端学习整理(五)
大部分的文本文字属性都会继承,会被子元素继承自其父元素.这意味着父元素上设置的一些属性会被自动应用到子元素上面,除非子元素明确指定了不同的值.-文本文字属性,是指在css中用于控制文本内容样式和布局的属性.这些属性可以用于改变文本文字的字体,颜色,大小,对齐方式.-text-bottom 元素底端与父元素底端元素对齐。-text-top 元素顶端和父元素字体顶端对齐。-bottom 元素底端与最高元素的底端对齐。-top 元素顶端与一行的最高元素顶边对齐。uppercase全部转化成大写。原创 2024-08-01 09:10:36 · 374 阅读 · 0 评论 -
Web前端学习整理(六)
背景属性:-background属性用于设置盒子的背景颜色和图片等背景信息,是一个复合属性.背景颜色值,背景颜色默认延伸到border的下方,即border以内的盒子模型区域.1.不插入背景图片:2,插入背景图片:-background-image:url('路径');背景图片平铺方式:1 : 背景图片平铺 默认2 : 背景图片不平铺3 : 背景图片水平平铺4 : 背景图片垂直平铺-背景图片的位置,确切的说是显示相对于图片的位置.-X和Y默认是:0 0。原创 2024-08-01 09:32:44 · 276 阅读 · 0 评论 -
Web前端学习整理(七)
径向渐变:是从一个中心点向外辐射出颜色平滑过渡的渐变效果,可以通过指定渐变的中心点,半径和颜色分布方式来创建径向渐变.- 指在两个及以上的颜色之间呈现一种平滑的过渡效果, 指定渐变的起点和终点,并定义颜色的分布方式。使用gradient来创建元素背景或者文本颜色的渐变效果,css提供了两种类型的渐变:线性渐变和径向渐变。-direction:表示模糊的方向(ouset向外,inset向内)opacity:用于规定元素的透明度,取值:0~1,0为完全透明,1为完全不透明.向左上角 to left top。原创 2024-08-10 10:47:15 · 236 阅读 · 0 评论 -
Web前端学习整理(八)
浮动式一种特殊的布局属性,用于控制元素在其容器的位置,通过设置元素的浮动属性,可以使其脱离文档流,向左或者向右设置浮动,从而使周围的内容环绕在其周围.当父级元素没有设置高度时,若容器内所有的子元素都设置为浮动,容器的高度无法自动撑开以适应子元素的高度,就会导致容器高度为0或者分厂小。-文字环绕:浮动元素不仅可以影响块级元素的布局,还能够影响行内元素(如文本).文本内容会环绕在浮动元素的周围,形成文字环绕的效果.-若上一个兄弟元素是普通文档流元素,那么这个元素就会相对垂直位置不变。-浮动元素的位置将由浮。原创 2024-08-10 11:22:46 · 265 阅读 · 0 评论 -
Web前端学习整理(九)
用于控制元素在网页中的位置,通过定位属性可以改变元素在文档流的文职,实现更加精确的布局效果,常用的有:static|relative|absolute|fixed。absolute:绝对定位使元素相对于其最近的非static定位的父元素进行相关定位,绝对定位会从正常的文档流脱离,不占据布局空间。在相关元素中设置动画效果。定位元素之间,如果出现了覆盖问题,越到后面的元素优先级越高,可以使用z-index来调整元素的优先级。static:默认定位,元素按照正常的文档流来进行布局,没有特殊的定位效果。原创 2024-08-10 11:37:24 · 158 阅读 · 0 评论 -
Web前端学习整理(十)
transition功能:用于实现元素变化的平滑程度.实现:需要设置:起始位置,时间和终点位置.过渡可以设置给任何css样式,但是前提是一定要有变化.说明:设置所有样式的过渡程度.transition是一个复合属性:transition-name 选取样式名称transition-duration 生效时间transition-delay 延时时间transition-timing-function 过渡曲线-ease 先慢再快再慢-linear 迅速-ease-in 匀加速。原创 2024-08-14 15:29:46 · 230 阅读 · 0 评论 -
Web前端学习整理(十一)
介绍:用于获取用户信息以及相关其他信息的方法,通过标签包裹设置。method:设置form表单请求方式,一般有get和post两种方式。value:用于设置input的初始值或者获取input的内部内容。autocomplete:表单自动填充提示功能,相当于:历史记录。password:密码输入框,会隐藏输入信息。name:用于设置输入框名称,同时表示input标签。action:设置数据获取地址或发送数据到达地址。placeholder:输入框提示内容。text:文本输入框。原创 2024-08-14 16:01:29 · 284 阅读 · 0 评论 -
Web前端学习整理(十二)
同时可以使用transform-style:preserve-3d;表示从父元素观察子元素位置,一般在800px~1000px.用于操作元素的变换,平移,旋转,倾斜,缩放等相关操作。transform-origin 设置元素变换中心。变换的操作的基准点,设置不同变换效果会略有不同。-变化的过程中元素相关内容也会同步变换。translateX() 元素水平平移。translateY() 元素垂直平移。translateZ() 元素z轴平移。表示横向和纵向分别变换x和y。表示以z为轴顺时针旋转。原创 2024-08-14 16:16:37 · 123 阅读 · 0 评论 -
Web前端学习整理(十三)
space-around 两端留下空隙,子元素之间也有空隙,但是子元素和子元素之间的间隙是两端空隙的两倍。-space-around 两端留下空隙,子元素之间也有空隙,但是子元素和子元素之间的间隙是两端空隙的两倍。-space-evenly 两端留下空隙,子元素之间也有空隙,且空隙间隔相等。-space-evenly 两端留下空隙,子元素之间也有空隙,且空隙间隔相等。-space-between 子元素两端对齐,中间留下空隙。-space-between 子元素两端对齐,中间留下空隙。原创 2024-08-14 16:41:14 · 129 阅读 · 0 评论 -
JavaScript基础知识(一)
1.js代码可以直接书写在html文件中,但需要注意,必须要书写在标签中,其标签位置最好放置在标签的最末尾位置.2.可以单独书写自定义的js文件格式,在需要使用的文件中通过连接.原创 2024-08-12 17:55:45 · 340 阅读 · 0 评论 -
JavaScript基础知识(二)
数学运算符:+ - * / % **等比较运算符:==(等于) ===(全等)!=(不等于)!==(全不等于) < > =等于和不等于不会比较数据类型,只会关注数据的值全等于和全不等于:会比较数据的类型和相对于的值逻辑运算符&& 表示and|| 表示or两者相遇会先执行&&在执行||自增量 a++ 和 ++a前置会先改变变量本身再参与运算后置会先进行运算再进行改变变量。原创 2024-08-12 18:09:29 · 179 阅读 · 0 评论 -
JavaScript基础知识(三)
元素.style是对象的一种格式,用于通过设置元素的相关行内样式来设置css,也可以选择相关关联的样式来修改元素相关的样式.要注意的是,选择相关的样式的时候,样式名是采用小驼峰写法而非是全部小写的方式类名添加类名: 元素.classList.add("classname")删除指定类名: 元素.classList.remove("classname")特殊方式: 元素.classList.toggle("name") 存在则删除,不存在则创建id名获取相关元素的id名称: 元素.id。原创 2024-08-19 18:30:32 · 334 阅读 · 0 评论 -
JavaScript基础知识(四)
get和queryget方式是动态获取其在任何情况下都可以选取到相关节点,包括新增节点query方式是静态获取通过js生成的新增节点无法进行获取,具有一定局限性。原创 2024-08-19 18:50:43 · 190 阅读 · 0 评论 -
JavaScript基础知识(五)
主要分为两级事件(0级和2级)0级事件写法:元素.on事件名称 = function(){执行操作2级函数写法:元素.addEventListener("事件名",function,bol)0级事件元素绑定相同事件时,会执行后者事件函数2级事件元素绑定相同事件时,按照顺序依次执行销毁事件函数区别元素.on事件名 = null 表示销毁事件2级事件销毁时,只能销毁有名函数ele.removeEventListener("事件名",函数名)事件流区别:0级函数只有冒泡阶段。原创 2024-08-19 19:06:15 · 305 阅读 · 0 评论 -
JavaScript基础知识(六)
在相关范围内截取字符串,注意,endIndex并不会被取到,startIndex为初始下标,endIndex为结束后一位的下标。查询str中队形的char字符的位置,并且返回第一个的下标,可以通过startIndex指定查找的初始下标。字符串的相关api都不会改变原来字符串,并且可以返回一个新的字符串,若要获取其值则需要声明新的变量获取。通过startIndex定位初始下标,通过length获取等length长度的子串。以str字符为标志对arr数组进行分割,并且形成新的字符串。原创 2024-08-21 23:51:24 · 429 阅读 · 0 评论 -
JavaScript基础知识(七)
function函数多了一个prev累计器,并且通过init设置初始值大小,以便对arr数组的某些数据进行数学计算,并且一定要有一个return对prev进行赋值。对数组的每一项进行遍历操作,并且function一定要设置范围值return,否则使用forEach。对arr数组的每一项执行遍历操作,并且可以通过function来对相关元素进行二次操作。数组中的某一项满足相关条件时返回true,否则返回false 相当于||- item: 数组中的每一项。对数据进行过滤,通过返回值对数据执行过滤操作。原创 2024-08-22 00:00:17 · 242 阅读 · 0 评论