web前端面试题分享（一）

以下这些都是我自己在面试时遇见过的问题，有需要的话可以参考参考。

HTML5 有哪些新特性？

声明方式，HTML4 规定了三种声明方式，分别是：严格模式、过渡模式和框架集模式；而HTML5因为不是SGML的子集，只需要<!DOCTYPE>就可以了。
语义化更好的内容标签：header、footer、article、section等
音频、视频
新增了很多表单控件：color、date、datetime、email、month、number、search、tel、url等
本地存储：localStorage、sessionStorage
画布/Canvas
地理/Geolocation
拖拽释放
Web Workers

html5有哪些新特性、移除了哪些？

新增的可以参考上一个问题
移除了纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u和对可能性产负面影响的元素： frame 、 frameset 、 noframes

如何处理 HTML5 新标签的浏览器兼容问题？

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签；
document.createElement(‘header’);

直接循环方式创建标签：
var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(’, ');
var i= e.length;
while (i–){
document.createElement(e[i])
}

CSS 样式设置默认样式：
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}

如何区分 HTML 和 HTML5?

简化的语法
HTML5canvas标签替代 Flash
HTML5 新增 header 和 footer标签
HTML5 新增 section和 article 标签
HTML5 新增 menu 和 figure标签
HTML5 新增 audio 和 video 标签
全新的表单
HTML5 删除 b 和 font标签
HTML5 删除了 frame, center, big 标签

HTML5 为什么只需要写 <!DOCTYPE>?

核心点：HTML5 不基于 SGML，所以不需要引用 DTD。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。
DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

页面导入样式时，使用 link 和 @import有什么区别？

link 属于 HTML 标签，而 @import 是 CSS 提供的；
页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载；
import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容问题；
link 方式的样式的权重高于 @import 的权重。

行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素有： a b span img input select strong
块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p
空元素： br,hr img input link meta
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

请描述一下 cookies 、sessionStorage 和 localStorage的区别？

localStorage 存储持久数据，浏览器关闭后数据不丢失除了主动删除数据
sessionStorage 数据在当前浏览器窗⼝关闭后自动删除
cookie 设置的 cookie 过期时间之前一直有效，即使窗⼝或浏览器关闭

Label 的作用是什么？是怎么用的？

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<!--label 标签的 for 属性应当与相关元素的 id 属性相同-->
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
</form>

iframe 的优缺点

iframe 会阻塞主页面的 Onload 事件；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

display:none和visibility:hidden的区别？

display:none；隐藏后的元素不占据任何空间，引起渲染与回流，影响性能。
visibility:hidden；隐藏的元素空间依旧存在；无渲染与回流。

box-sizing；border-box是怎么回事？

-webkit-box-sizing: border-box; 则div 设置的宽高将包含边框及 padding；
注意：这个答案不一定准确，经供参考！！！

介绍一下标准的CSS的盒模型？低版本IE的盒模型有什么不同的？

盒模型：内容(content)、填充( padding )、边界( margin )、边框( border )；
区别： IE 的content 部分把 border 和 padding 计算了进去;

web前端面试题分享（一）相关推荐

java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有！！！
吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）下
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
http协议修改js或html,web前端面试题对答篇：HTTP fetch发送2次请求的原因？
web前端面试题对答篇:HTTP fetch发送2次请求的原因? 2020-08-31 04:36:44 289 编程开发 HTTP fetch发送2次请求的原因?面对这道出现频率较高的面试题,我想说 ...
史上最全的web前端面试题汇总及答案1
小编推荐:Fundebug提供JS错误监控.微信小程序错误监控.微信小游戏错误监控,Node.j错误监控和Java错误监控.真的是一个很好用的错误监控费服务,众多大佬公司都在使用. 很早之前就在看we ...
JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）
Web前端面试题 Web前端面试题:说说你对webpack的看法解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...
2017年秋招二十套前端面试题分享
前端面试--四月二十家前端面试题分享 1.正文第一套第二套第三套第四套第五套第六套第七套第八套第九套第十套第十一套第十二套第十三套第十四套第十五套第十六套第十七套第 ...

web前端面试题分享（一）

web前端面试题分享（一）相关推荐

最新文章

热门文章