写在前面
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
扩展
Doctype
每个 HTML 文件里开头都有个很重要的东西, Doctype, 知道这是干什么的吗?
声明位于文档中的最前面的位置, 处于 标签之前。 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 (重点: 告诉浏览器按照何种规范解析页面)
写在最后
CSDN话题挑战赛第1期