Web前端面试题总结-HTML篇

作为前端一枚前端工程师，在家乡（浙江丽水）工作了一年半之后，发现家里的互联网产业和一线城市脱离的太多了。简单的面试，简单的静态网站，落后的前后端框架导致自己的步伐已经落后一大截。于是决定辞职，离开家乡决定去杭州闯一闯，这样一来在面试的过程中就碰壁了不少，在碰壁几次后，终于成功入职-杭州影响力科技有限公司，任职了前端工程师这个岗位。
每去一个公司面试，我都会把这次面试的知识点记录在一个小本本上，以便下次看的时候不会丢失，趁着刚开始写优快云博客，我也来总结一下自己的面试经历-写的不好的地方也请老鸟们指出。

1.行内元素有哪些？块级元素有哪些？空元素有哪些？

• 行内元素：a,b,span,img,input,select,strong
• 块级元素：div,ul,ol,li,dl,dt,h1…h6,p
• 常见的空元素： br hr img input link meta

• 不常见的空元素：area hr col command embed keygen param track wbr

  2.浏览器常见的内核有哪些？你对浏览器内核的理解？

• Trident内核：IE\MaxThon\TT\WORLD\360\搜狗
• Gecko内核： FF\MozillaSuite
• Presto内核：Opera7以上
• Webkit内核：Safaria\谷歌
  浏览器内核的理解：浏览器内核主要分为渲染引擎和JS引擎，渲染引擎负责获取网页内容、整理网页信息、以及计算机的网页信息显示；
  JS引擎：负责解析和执行javascript来实现网页的动态效果
  内核更倾向于渲染引擎

3.Html5有哪些新特性、移除了哪些元素？如何处理HTML5的兼容性？如何区分HTML和HTML5？
HTML新增了：Canvas绘画;用于媒体的video和audio元素;用于存储的localstorage和session Storage;
语义化更好的内容元素：article\footer\header\nav\section；
表单控件：calendar\date\time\email\url\search
新的技术：webworker\webscoket\Geolocation
移除的元素：basefont\big\center\font\s\strike\tt\u\frame\frameset\noframes
支持Html新标签：
- IE6/IE7/IE8支持通过document.createElement方法产生标签
- 浏览器支持新标签之后还需要通过添加默认的样式
- 可以使用成熟的框架入html5shim;

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

区分HTML5：DOCTYPE声明、新增的元素、功能元素

4.请你描述一下你对HTML语义化的理解
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5.如何实现浏览器内多个标签之间的通信？
WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；