web前端面试题分享（一）

冷不防 2022-12-13 01:55 232阅读 0赞

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

1.  HTML5 有哪些新特性？

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

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

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

1.  如何处理 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;  
> \}

1.  如何区分 HTML 和 HTML5?

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

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

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

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

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

1.  行内元素有哪些？块级元素有哪些？空（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  
> 行内元素不可以设置宽高，不独占一行  
> 块级元素可以设置宽高，独占一行

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

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

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

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

<form>
    <label for="male">男</label>
    <input type="radio" name="sex" id="male" />
    </form>

1.  iframe 的优缺点

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

1.  display:none和visibility:hidden的区别？

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

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

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

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

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