【面试镇静剂】

最新推荐文章于 2024-07-05 11:58:23 发布

不约，勿撩

最新推荐文章于 2024-07-05 11:58:23 发布

阅读量327

点赞数 15

文章标签：面试职场和发展前端

本文链接：https://blog.csdn.net/xiaopengpppp/article/details/124711126

版权

写在前面

CSDN话题挑战赛第1期

活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
创作模板：

题目一

很多伙伴都说进大厂很艰难，本人觉得在it行业想要进入规模比较大的互联网公司，首先有个本科学历作为敲门砖就够用了，足以敲开大厂的大门

考点

语义标签？

增强型表单？

新的表单的新属性 placeholder？

视频和音频？

canvas绘图？

获取地理位置的方法？

拖拽目标对象的方法？

拖拽属性值？

答案

什么是语义标签，我自己的理解就是看到标签我就能明白这是什么意思。
以前制作网页布局基本使用div来做。div就是一个普通的块级标签，对搜索引擎来说没有任何的语义。
attention
语义化标签主要是针对搜索引擎
新标签可复用
浏览器兼容问题，在IE9中（2021最新版），需要转化为块级元素。

增强型表单

邮箱验证
 <input type="email">
        <input type="submit">
数值输入
<input type="number" min="9" max="12">
        <!--限制输入的数值范围在9-12之间，包括9和12-->
文件导入
attention：上传本地文件，需js代码配合。如果需要上传多个文件，给表单添加mulitiple属性。如果上传图片，给表单添加enctype属性。
图片按钮
<input type="image" src="C:\Users\Gabrielle\Desktop\myPhoto.jpg" width=750 alt="myGimdong">
        <!--src里面填写的是我电脑的本地图片绝对路径，请添加你自己的本地图片的绝对路径或者相对路径-->
颜色选择
<input type="color">
        <input type="submit">
日期表示
<input type="date">
        <!--日期选择出来date，还有datatime，datatime-local-->
        <input type="submit">
搜索框
<input type="search" placeholder="我是输入字段为空时的提示信息">
        <input type="submit">

新的表单的新属性 placeholder

这个属性是文本的占位符，相当于一种提示信息，显示在输入域，描述期待user输入的值。
required
这个属性的值为Bool，默认为true，意思是在输入域不能为空
autofocus
auto是自动的意思，focus是聚焦的意思，这个属性描述的就是自动聚焦到需要填写的textarea。
autocomplete
这个属性有两个值，一个是on，另一个是off。默认是on，与email相反，email默认是off。功能是提示写过的信息。
minlength和maxlength
这个属性限定输入的最少字数和最多字数，以字符个数计数。

视频和音频

video----支持格式有ogg，MP3，webm
video的方法，属性，事件可以使用js来控制。
方法：play(),pause(),load(),分别是播放，停止，加载方法。
属性：width,height,controls。width和height属性值为像素或者百分比，功能是设置播放窗口的宽度和高度。controls属性值为boolean，功能是控制播放条。

canvas绘图

SVG比canvas绘图好用，SVG不容易失帧，就是更稳定的意思。
SVG对前端程序员更友好一点，它比较容易编辑，只需要从描述中移除元素就可以了。

地理位置

获取地理位置的方法？

1 通过ip地址

2 电脑上的位置信息定位
attention：浏览器必须在用户允许情况下才可以发送用户的位置信息给服务器。

拖放API

<img draggable = "true">  拖放什么? 用setData()或者ondragstart。
function drag (event){
        event.dataTransfer.setData("Text",event.target.id);
}//dataTransfer.setData() 方法设置被拖数据的数据类型和值：

拖拽目标对象的方法

getData(format)

从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。

clearData([format])
从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据

addElement(element)
添加自定义图标

setDragImage(element,x,y)
设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

拖拽属性值

none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move：把拖动的元素移动到放置目标。
copy：把拖动的元素复制到放置目标。
link：放置目标会打开拖动的元素(但拖动的元素必须是个链接URL地址)。
HTML5新特性（1）用于绘画的 canvas 元素
（2）用于媒介回放的 video 和 audio 元素
（3）对本地离线存储的更好的支持
（4）新的特殊内容元素，比如 article、footer、header、nav、section
（5）新的表单控件，比如 calendar、date、time、email、url、search
（6）元素可拖拽API