前言

近段时间在整理关于前端面试的一些内容，但是发现在各大博客中面试题不是没有答案，就是没有对题目内容的剖析，再者就是没有一个适合自己的题目集，所以笔者准备将这段时间中遇到，看到的较为重要的前端面试题整理出来，方便自己阅读、巩固，相信对大家也有一定程度的借鉴，话不多说，下面就开始正题。

正题

1、什么是盒子模型

content 元素内容
padding 元素内边距
border 元素边框
margin 元素外边距
- 这四者加起来组合成一个元素的盒子模型
- IE6浏览器的差异IE的content包括border和padding

2、html有哪些种类的元素？分别是那些？

大体分为分为一下三种：块级元素block、行内元素inline、内联块级元素inline-block

常见的块级元素有：

<div> <p> <h1>...<h6> 
<!-- 有序列表 -->
<ol> 
<!-- 无序列表 -->
<ul> 
<!-- 定义列表 -->
<dl> 
<table> <address> <form>

常见的行内元素：

<a> <span> <br> <label> <code> <em> <strong>

常见的内联块级元素有：

<img> <input> <select>

还有元素在标签中，不在页面中展示

<meta> <link> <script> <style> <title> <base>

3、`<!doctype html>`的意义是什么? 严格模式与混杂模式如何区分？它们有何意义?

- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性
- <!doctype html>的缺失或者书写错误会引起混杂模式
- 混杂模式一般是一种向后兼容的模式，也就是兼容老站点
- 严格模式也就是标准模式，按照html5标准解析和渲染

4、HTML、XHTML、HTML5的关系

HTML属于SGML
XHTML属于XML，是html基于XML的一种强制性规范
HTML5是一种独立的规范

6、HTML5有什么变化？

新的语义化元素，比如： <section> <article> （表示区域） header footer aside(不重要内容) em strong(表强调)
表单的增强功能，表单控件，date、time、email、url、search。
新的API（离线、本地存储localStorage、sessionStorage，音视频，图形，实时通讯等能力）
元素的分类和嵌套变更（按照内容分类的变更）

7、Html5移除了那些元素？

纯表现元素：<basefont> <big> <center> <font> <s> <strike> <tt> <u>
对用户产生负面影响的元素：<frame> <frameset> <noframes>

8、怎么处理html5的新标签兼容问题？

直接实现不被是被的标签：使用document.creatElement(tagName) 让浏览器识别新标签，还可以为这些标签创建CSS样式。

使用js库解决：

使用html5shim
在head中调用一下代码

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

在</body>之前调用一下代码

<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 
<![endif]-->

9、html5语义化的理解？

便于开发者理解
便于浏览器理解代码结构（搜索引擎）
有助于SEO

10、label的作用是什么？是怎么用的？

label标签是用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。主要有一下两种用法：

   <!--用法一 -->
    <label for="Name">Number:</label>
    <input type="text" name="Name" id="Name" />
    <!--用法二 -->
    <label>Data:<input type="text" name="B" /><label>

    <!-- 单选按钮 name要相同  且包裹可以不使用for-->
    <label for="btn1">
        <!-- <input type="checkbox" name="aa" id="btn1"/>我是单选按钮1 -->
        <input type="radio" name="aa" id="btn1" />我是单选按钮1
    </label>
    <label for='btn2'>
        <input type="radio" name="aa" id="btn2" />我是单选按钮2
    </label>

11、html5的form如何关闭自动完成功能？

<form aotocomplete='on|off'>

12、HTML5的离线存储功能怎么使用，工作原理？

原理：h5离线存储基于新建一个.appcache的缓存机制。通过这个文件的解析清单离线存储资源。这样出于离线模式还是可以看到缓存的内容。
如何使用：
- 在头部加一个manifest属性
```
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
```
- 然后在cache.manifest文件的书写如下：
```
CACHE MANIFEST
#v0.11

CACHE:

 js/app.js
 css/style.css

 NETWORK:
 resourse/logo.png

 FALLBACK:
 / /offline.html
```
- 离线状态时，使用js的window.applicationCache进行需求实现
资料 h5使用离线存储

13、简述一下cookies、sessionStorage、localStorage的区别

cookies 由服务器控制存储在浏览器的数据，发送和接收http请求的时候都需要携带，大小限制为4K，不设置cookies的过期时间，关闭浏览器即销毁，安全性低。
sessionStorage是存储在浏览器本地的数据，由浏览器控制，大小为5M，关闭当前会话则销毁。安全性高。
localStorage和sessionStorage是一样存储在浏览器本地的数据，大小一样，但是关闭浏览器不会被销毁，必须通过clear()方法清除。安全性高。
WebZStorage的API:
- setItem(key,value) 保存
- getItem(key) 获取
- removeItem(key) 删除单个
- clear() 清除所有
- key(index) 获取某个索引的key

14、实现浏览器内多个标签页之间的通信

调用localstorge、cookies等本地存储方式

localStorage在一个页面被添加、修改、或者删除，都会触发一个storage事件，通过在另一个标签里面监听storage事件，即可得到localstorage的值，实现页面间的通讯。

<!--页面一-->
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
   $(function(){  
   	$("#btn").click(function(){  
   		var name=$("#name").val();  
   		localStorage.setItem("name", name); 
   	});  
   });  
</script>

<!--页面二-->
<script type="text/javascript">
   $(function(){ 
   	window.addEventListener("storage", function(event){  
   		console.log(event.key + "=" + event.newValue);  
   	});   
   });
</script>

使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，达到及时传递信息的目的（个人觉得不好用）

15、webSocket如何兼容低浏览器？(阿里)

Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR

16、页面可见性（Page Visibility）API 可以有哪些用途？

API 很简单，document.hidden 就返回一个布尔值，如果是true, 表示页面可见，false 则表示，页面隐藏。不同页面之间来回切换，触发visibilitychange事件。还有一个document.visibilityState, 表示页面所处的状态，取值：visible, hidden，prerender，preview 等四个

document.addEventListener("visibilitychange", function(){
    if(document.hidden){
        document.title ="hidden";
    }else {
        document.title = "visibile";
    }
})

用途：在浏览器中切换页面，隐藏标题等。
该API一个很好的用处就是能够在页面切换到不可见状态时暂停执行一些不必要的操作,以减少资源的浪费.

17、如何在页面上实现一个圆形的可点击区域？

有三种方案

使用css实现

<style>  
    .disc{  
        width:100px;  
        height:100px;  
        background-color:dimgray;  
        border-radius: 50%;
        /* 鼠标放上去变成手指   */
        cursor: pointer;  
        position: absolute;  
        left:50px;  
        top:50px;    
        line-height: 100px;  
        text-align: center;  
        color: white;  
    }  
   </style>
   
   <div class="disc">点击区域</div> 
   <script>
    document.getElementsByClassName('disc')[0].addEventListener('click',()=>{
        alert('wo shi yuan')
    })
   </script>
</html>

使用map+area

<img width="1366" height="768" usemap="#Map" />  

<map name="Map" id="Map">  
    <area  shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />  
</map>  
<!--shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形poly。-->

<!--coords表示点击热点区域形状的坐标。坐标点0,0表示图片的左上角。其中矩形rect支持4个数值，2个坐标，分别是矩形左上角坐标和矩形右下角坐标。-->
<!--例如，coords="20,20,80,80"生成的就是一个左上角坐标20,20宽高都是60px的矩形区域。-->
<!--圆形circle支持3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。-->
<!--多边形poly就更简单了，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域。-->

使用js 求点击位置到指定区域圆形的位置是否大于圆的半径

document.onclick = (e)=>{
    var r = 50 // 半径
    var x = 100
    var y = 100 
    var clickX = e.clientX
    var clcikY = e.clientY
    
    // sqrt 平方根    pow 几次幂     abs 绝对值
    var len = Math.sqrt(Math.pow(x-clintX,2)+Math.pow(y-clientY,2); // 这里貌似不用取绝对值 咋地都是正数
    
    if(len <= r){
        alert('inner')
    }else{
        alert('outer')
    }
}

18、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

<div style='height:1px;overflow:hidden;background:black'></div>

19、iframe有那些缺点？

iframe可以干啥？

可以嵌入网页,展示。
可以增加代码的重用，将不同的代码写在iframe里
可以放置第三方内容，如图标、广告。

缺点：

会产生很多页面。
当一个页面iframe过多的时候可能会导致用户体验差。
seo等不好
对于移动端设备兼容性差
会增加多余的http请求

20、绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

1. 理解：

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

2. 常见内核：

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

结语

其实关于HTML的内容还有很多，笔者只是抽离出一些在平时容易忽略的基础知识放在了这里，当然个人的理解肯定是会存在些许的偏差，毕竟一百个观众心中有一百个哈姆雷特，但是殊途同归，不同的理解角度可能也会为你带来新的思路。当然笔者更欢迎大家在阅读的同时能指出文中的问题，以你的角度来引导我，纠正我，谢谢。

前端面试之HTML

前言

正题