首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

看不完那种!前端170面试题+答案学习整理(良心制作)

6.超出文本省略 使用text-overflow:ellopsis:文本溢出,为了不显示省略标记...,通过clip直接溢出部分裁剪掉。...和prop区别 对于html元素本身就带有的固定属性,处理使用prop方法;对于html元素自定义dom属性处理使用attr方法。...63.如何用jquery一个html元素添加到dom树中 appendTo()方法,一个html元素添加到dom树中,使用它可以指定dom元素末尾添加一个现存元素或者一个新html元素。...当鼠标指针放在元素上,主要作用是显示工具提示。 alt是为图片指定替代文字属性 alt是中指定属性标签,表示图像。 正如我写为替代文本一样,它用于需要文本不是图像情况。...image 当script标签放在head中,并且这个script标签只有scr属性引入外部js文件情况下,HTML文件开始渲染,直到命中script标签,此时解析停止,并发现一个请求获取该文件并执行

11.4K50

HTML-CSS基础学习

表示命令按钮 detail 表示用户要求到并且可以得到细节信息,可与summary元素配合使用 datalist 可选数据列表,与input元素配合使用,可以制作出输入下拉列表 datagrid...CSS文件 网站风格维护起来简单,只需要修改对应CSS文件 浏览器页面更友好 开发与维护成本降低 页面性能提高 CSS存在继承关系,就近原则使用CSS属性 CSS基本语法 选择符+属性+属性值...="CSS"> 内部样式表 CSS 使用标签链接外部样式表 href为css文件路径,link可以引入其他资源文件,跟页面同时加载...:value; propertyN:value; } 常见伪类选择符 a标签: :acitve 样式添加到被激活元素 :foces 样式添加到被选中元素 :hover 当鼠标悬浮这元素上方...允许负值 -blur 可选,模糊距离 -spread 可选,阴影尺寸 -color 可选,阴影颜色 -inset; 可选,外部阴影改为内部阴影 图像边框 border-image-source

4.8K30
您找到你想要的搜索结果了吗?
是的
没有找到

【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)

元素页面中仍然占据空间,并且能够响应元素绑定监听事件。 position: absolute:通过使用绝对定位元素移除可视区域内,以此实现元素隐藏。...可以使用justify-content指定元素主轴上排列方式,使用align-items指定元素交叉轴上排列方式。还可以使用flex-wrap规定当一行排列不下换行方式。...等,当按百分比设定它们,依据也是父容器宽度,不是高度。...4、可以通过JS操作DOM插入link标签改变样式;由于DOM方法是基于文档,无法使用@import方式插入样式。 27、CSS3新特性有哪些?...1、css样式表中书写,id选择符前缀应加"#“,class选择符前缀应加”." 2、id属性一个页面中书写只能使用一次,class可以反复使用 3、id作为元素标签用于区分不同结构和内容

3K20

对HTML-input一些思考和理解

事情:H5以后,input就支持了accept —— 选择文件类型,还有一些值比如:“multiple” 可设置“只选择文件夹”。...所以还有一种方案:input上覆盖一个div,当点击去操控 input 事件和响应! 我们都知道,input中,当输入过一次,下一次输入会有提示 —— autocomplete 。...但这也会带来一些效果:input 背景“自动”变为黄色。哦,这可不是什么bug。是 input 对 paste 响应样式罢了。...几乎不用想,在手机上一定会出现一些“似乎莫名其妙问题”:比较推荐是,用div+absolute重新写一个“小叉号”,用JS控制对应事件。 ★这里“比较推荐”是“解决问题办法”中比较得。...两个HTML属性:novalidate(放在input上) / formnovalidate(放在提交按钮上) 最后 欢迎关注「前端Q」,认真学前端,做个专业技术人...

63930

《从案例中学习JavaScript》之酷炫音乐播放器(一)

经过几年摸索,我最终发现,知识点还是必须在工作中去练习才能真正理解,或者通过一个具体案例融汇贯通。当然,我指案例不是那种很多线下培训机构为了讲知识点弄出来案例。...算法这东西,需要时间积累和技术沉淀,我始终认为初学编程应该重心放在方法调用和兴趣培养上面,最起码,必须得做点东西出来。...其实,这已经是一个简单js小插件了,不是吗?等以后做得比较完善时候,我们完全可以这个对象放到js文件里,作为一个js插件被其他页面调用。...Paste_Image.png 我打算在屏幕区域加一个音乐图标,顺便分享一下iconfont使用吧。...番:矢量图标icontont使用 这是阿里巴巴一个矢量图标库,打开官网: http://www.iconfont.cn/ ?

1.8K90

利用Googleplex.com盲XSS访问谷歌内网

输入内容并不重要,只需键入随机数并单击“搜索”按钮即可。 然后,是选择与发票相关组织。这决定了处理发票国家/地区。同样,我们只需随便选择一个并单击“提交”就行。...我没有收到任何内容,因此这说明它正确处理了文本字段。 除文本输入输入还可选择PDF文件。但其配置只允许选择上传PDF格式文件。 ?...但由于这只是一个前端验证,因此它不会阻止我们发送上传POST请求更改文件类型。 我们只需选择一个任意PDF文件,就会触发上传请求。...payload中,我将使用一个script标记,其中src指向我域上端点,每次加载都会向我发送一封电子邮件。我当前使用是ezXSS记录这些盲XSS请求。 ?...但由于上传文件Content-Type已从application/pdf被更改为了text/html,因此它显示是XSS payload不是PDF文件

1.6K40

游戏TA入门指南PDF

Cocos Dashboard 创建新 Cocos Creator 项目 点击 Project 面板 选择 Cocos Creator 版本 选择 Empty(3D) 项目模板 输入项目名称 选择项目保存在硬盘上位置...场景目前使用是默认设置,场景内只有一盏主光源和主摄影机以及默认天空盒。 5. 模型资产导入场景 01. 导入不带贴图 FBX 模型文件。...注意:Planar 类型阴影只有投射在平面上才能正常显示,不会投射在物体上,也就是说 Mesh Renderer 组件中 Receive Shadow 属性是无效。...若需要减小方向光阴影饱和程 度,推荐通过增加环境光来实现,不是调节该值 Shadow Distance:设置 Camera 可见范围内显示阴影效果范围,阴影质量与该值大小成反比 Shadow Invisible...Maps(CSM),对于近处场景使用较高质量阴影贴图,对于远处场景使用较低质量阴影贴图,两张阴影贴图过渡地方选择其中一张使用

2.5K20

前端开发必备之Chrome开发者工具(上篇)

使用元素面板可以自由操作DOM和CSS迭代布局和设计页面 编辑样式 使用 Styles 窗格可以修改与元素关联 CSS 样式 ?... Elements 面板中选择元素,然后 Styles 窗格中点击 :hov 按钮使用复选框启用或停用当前选定元素选择器 ?...通过鼠标悬停到某种颜色上去获取颜色值。 当前颜色。 当前值可视表示。 当前值。 当前颜色十六进制、RGBA 或 HSL 表示。 调色板。 当前生成几组颜色。 着色和阴影选择器。 色调选择器。...交互 消息堆叠 如果一条消息连续重复,不是新行上输出每一个消息实例,控制台“堆叠”消息并在左侧外边距显示一个数字。...源代码面板(Sources) 源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件使用开发者工具实时编辑器 格式化混淆代码 某些情况下,我们需要对混淆代码做一定调试

8.2K111

【愚公系列】2023年12月 GDI+绘图专题 图形图像编程基础

GDI对象定义了GDI函数使用工具和环境变量,GDI函数使用GDI对象绘制各种图形,C#中,进行图形程序编写用到是GDI+(Graphice Device Interface Plus图形设备接口...(一)在窗体设计时使用图形框对象Image属性输入;(二)程序中通过打开文件对话框输入。...(2)单击Image属性右侧【…】,弹出一个“选择资源”窗口,该窗口中选择“本地资源”,单击【导入(M)...】弹出一个“打开”对话框。 (3)选择图像文件后,单击【打开】按钮。...方法(二)、使用“打开文件”对话框输入图像 在窗体上添加一个命令按钮(button1)和一个图形框对象(pictureBox1),双击命令按钮响应方法中输入如下代码: private void button1...(3)运行后单击【打开图像】按钮,弹出一个“打开文件”对话框,选择图象文件名,运行结果如 2.图像保存 保存图像步骤如下: (1)当使用按钮和保存对话框保存文件,加入保存按钮和PictureBox

34912

Angular学习(01)-架构概览

其他角色包括:组件、指令、管道、服务等等,这些角色必须在模块文件中声明了,才能够被该模块内其他角色所使用,而且同一个组件、指令、管道不允许同时多个模块中进行声明,只能通过模块 exports 给其他模块使用...页面的跳转,通常有以下几种场景: 用户输入 url 进行跳转 用户点击交互按钮进行跳转 用户操作前进或后退进行跳转 这些场景,路由工作机制都能够很好支持。...所以这里组件和模板放在一起讲,因为就像开头那张图一样,组件是一份 TypeScript 文件文件中,定义了这个组件模板(template)来源和 CSS 样式来源。...以往,如果需要动态更新 DOM信息,需要先获取到相对应元素实例对象,然后调用相应 DOM API 操纵 DOM; 而使用 Angular 的话,可以直接在模板相应元素中,某个属性与...这个时候,就可以这些工作都封装到指令内部,然后每个按钮标签上加上该指令,Angular 解析模板,发现了这个指令,就会为每个按钮都加上这么一段程序逻辑。

3.5K50

一款很棒GIF动画制作小软件GifCam

GifCam 很实用 当 GifCam 发现前一帧与新录制帧相同时进行录制,它会自动添加延迟(帧屏幕上停留毫秒数),不是添加新帧并增加 gif 大小。...GreenScreen 绘制填充:通过按 Ctrl+单击封闭形状外部或内部绘制绿屏(要在一帧上绘制,请按 Shift+Ctrl+Click )。...gifcam绿色屏幕颜色 键盘输入:GifCam 只有一个以鼠标为中心界面,带有键盘输入窗口,您可以键入一些值(延迟、调整大小和删除)。...帧存储硬盘不是内存上选项: Shift + New 记录帧保存在临时文件夹中: %UserProfile%\AppData\Local\Temp\GifCamTemporaryFrames...有关 GifCam 6.0 更多详细信息http://blog.bahraniapps.com/gifcam-6-0/ 6.5 版 2020 年 11 月 26 日 绘制选择:一个新选择功能,您想要区域周围绘制一个选择

2.2K20

基础渲染系列(八)——反射

2.2 凹凸镜 除了使用平滑度表示较粗糙镜像,你当然还可以使用法线贴图添加较大变形。当我们使用失真的法线确定反射方向,这是可行。 ? ? ?...并且有许多材质是金属和非金属成分混合。你可以通过Metallic滑块设置0到1之间某个位置模拟这一点。 ?...该区域用于两个目的。首先,Unity使用这些区域决定在渲染对象使用哪个探针。其次,该区域用于盒投影,这就是我们要做选择探针后,可以在场景视图中显示该框。...(选择最小因子) ? 当其中一个除数为零会发生什么? 方向矢量一个或两个分量可能为零。这将产生无效结果,不会传递选择最小值。 现在,我们可以通过缩放方向添加到位置来找到交点。...通过单个float3表达式中组合三个候选因子,减法和除法运算推迟到选择了适当界限之后,稍微简化此代码。 ?

3.7K30

后台系统设计(上篇:选择

·如果只有一个复选框,可以根据表单格式选择使用标签、文本或组合;如果有多个复选框,标签描述整个复选框,文本则是表述各自选项。 ?...·标签文本使用正面肯定措辞,以便用户清楚知道打开复选框将会发生什么。避免使用否定表达,例如 「同意条款」 不是 「不同意条款」 或是 「打开通知」 不是 「关闭通知」 等等。...五、Transfer 穿梭框/列表构造器 同一页面上显示 「源」 列表和 「目的」 列表,通过使用按钮或拖拽,直观两栏之间移动元素,完成选择行为。 外观 常规: ?...关于下拉搜索 下拉搜索有两种情况,下拉单选和下拉多选情况。 ·单选情况下,我们搜索放在了原有的框体内,流程如下:用户输入关键字>实时匹配检索出选项>用户点击选项>完成操作。 ?...同样我们还需要考虑该检索关键字下,会产生用户想要多个结果吗? 例如添加公司人员,通过关键字检索,基本是锁定单一人员,所以通过关键字检索进行多选概率较低,自然可采用如下方案: ?

9.6K21

一个合格初级前端工程师需要掌握模块笔记

css代码通常存放在标签内 css 样式由选择符和声明组成,声明又由属性和值组成 选择符{属性:值} 选择符:又称选择器,指明网页中要应用样式规则元素 CSS 放置位置...HTML5 表单相关元素和属性 input新增type类型 color 用来创建一个允 许用户使用颜色选择器,或输入兼容 CSS 语法颜色代码区域 time 生成一个时间选择器 datetime...生成一个 UTC 日期时间选择器 datetime-local 生成一个本地化日期时间选择器 date 显示一个日期输入区域,可同时使用日期选择器,结果值包括年、月、日,不包括时间...实例对象上有一个_proto_属性,该属性也指向原型对象,该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。...JavaScript 和 XML 浏览器中输入url地址请求服务器,是通过Ajax发送http请求给服务器,服务响应结果也是先返回给Ajax,先Ajax处理之后返回给浏览器显示页面。

3.5K10

前端性能优化

编译条件: v-if是惰性,如果初始条件为假,则什么也不做,只有条件第一次变为真才开始局部编译, v-show是在任何条件下都被编译,然后被缓存,而且DOM元素保留。...12、查找表 当条件语句特别多时,使用 switch 和 if-else 不是最佳选择,这时不妨试一下查找表。查找表可以使用数组和对象构建。...15、使用 flexbox 不是较早布局模型 早期 CSS 布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。...用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能 当需要设置样式很多时设置className不是直接操作style 避免使用CSS Expression(css表达式...图片延迟加载 页面中,先不给图片设置路径,只有当图片出现在浏览器可视区域,才去加载真正图片,这就是延迟加载。

1.2K20

高级前端常考react面试题指南_2023-05-19

该函数接收输入实际 DOM 元素,然后将其放在实例上,这样就可以 handleSubmit 函数内部访问它。...经常被误解只有类组件中才能使用 refs,但是refs也可以通过利用 JS 中闭包与函数组件一起使用。...其他方式列表需要频繁变动使用唯一 id 作为 key,不是数组下标。必要通过改变 CSS 样式隐藏显示组件,不是通过条件判断显示隐藏组件。...,不是通过 React组件。...当要获取表单数据,要首先获取表单元素,然后通过表单元素获取元素值。注意:为了方便在组件中获取表单元素,通常为元素设置ref属性,组件内部通过refs属性获取对应DOM元素。

1.6K31

前端面试题-每日练习(3)

label标签定义表单控制间关系,当用户选择该标签,浏览器会自动焦点转到和标签相关表单控件上。...c、表单按钮:包括提交按钮,复位按钮和一般按钮;用于数据传送到服务器上 CGI 脚本或者取消输入,还可以用表单按钮控制其他定义了处理脚本处理工作。...容器高度为300px;当内容高度大于这个值,容器高度被撑高,不是出现滚动条。这时候我们就会面临这个兼容性问题。...(4)、当需要设置样式很多时设置className不是直接操作style。 (5)、少用全局变量、缓存DOM节点查找结果。减少IO读取操作。...(6)、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。 (7)、图片预加载,样式表放在顶部,脚本放在底部 加上时间戳。

13420

2020最新前端面试题_2020年前端面试题

函数体内 this 对象,就是定义所在对象,不是使用时所在对象 不可以当作构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误 不可以使用 arguments 对象,该对象函数体内不存在...当你修改了data值然后马上获取这个dom元素值, 是不能获取到更新后值,你需要使用$nextTick这个回调, 让修改后data值渲染更新到dom元素之后获取,才能成功。...sessionStorage用于本地存储一个会话session中数据,这些数据只有同一个会话中页面才能访问并且当会话结束后数据会被销毁。...它使用**虚拟 DOM **不是真正 DOM。 它可以用服务器端渲染。 它遵循单向数据流或数据绑定 3、列出 React 一些主要优点?...需要管理焦点、选择文本或媒体播放 触发式动画 与第三方 DOM 库集成 14、如何模块化 React 中代码? 可以使用 export 和 import 属性模块化代码。

6.6K10

浏览器渲染原理及流程

定时触发器线程 浏览器定时计数器并不是由JS引擎计数, 因为JS引擎是单线程, 如果处于阻塞线程状态就会影响记计时准确, 因此通过单独线程计时并触发定时是更为合理方案。 4....异步http请求线程 XMLHttpRequest连接后是通过浏览器新开一个线程请求,检测到状态变更,如果设置有回调函数,异步线程就产生状态变更事件放到JS引擎处理队列中等待处理。 2....使用flexbox替代老布局模型 老布局模型以相对/绝对/浮动方式元素定位到屏幕上,Floxbox布局模型用流式布局方式元素定位到屏幕上。...通过该工具可以检查Paint发生区域和时机是不是可以被优化。...页面中创建一个新渲染层最好方式就是使用CSS属性will-change,对于目前还不支持will-change属性、但支持创建渲染层浏览器,可以通过3D transform属性强制浏览器创建一个新渲染层

4.5K32
领券