2018前端必考面试题总结1

2018前端必考面试题总结1

• Doctype的作用？严格模式与混杂模式如何区分？它们有何意义？

  DOCTYPE是document type（文档类型）的简写，用来说明你用的是XHTML或HTML是什么版本。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
  HTML和xhtml的DOCTYPE声明都有严格、过渡以及框架集三种模式。
  严格模式：包含所有HTML元素和属性，但不包括展示性和弃用的元素（比如font），不允许框架集（framesets）。
  过渡模式：包含所有HTML元素和属性，包括展示性和弃用的元素（比如font），不允许框架集（framesets）。
  框架集模式：除了用frameset元素取代body元素之外，框架集模式等同于过渡模式，但允许框架集内容。

• 行内元素有哪些？块级元素有哪些

  CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为块级元素；span默认display属性值为“inline”，是行内元素。
  行内元素有：a/b/br/span/img/input/select/strong…
  块级元素有：div/ul/ol/li/dl.dt/dd/h1~h6/p/section/form…

• link和@import的区别是？

  区别1：link是xhtml标签，除了加载CSS外，还可以定义RSS等其他事物；而@import属于CSS范畴，只能加载CSS。
  区别2：link引用CSS时，在页面加载时同时加载，@import需要在页面加载完成之后加载。
  区别3：link无兼容问题，@import是CSS2.1提出的，所以低版本的浏览器不支持。
  区别4：link支持使用JavaScript控制DOM去改变样式，而@import不支持。
  区别5：link方式样式的权重高于@import的权重

• HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

  HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
  （1）绘画canvas；
  （2）用于媒介回放的video和audio元素；
  （3）本地离线存储locaStorage长期存储数据，浏览器关闭数据不丢失；
  （4）sessionStorage的数据在浏览器关闭后自动删除；
  （5）语意化更好的内容元素，例如article、footer、header、nav、section；
  （6）表单控件，calendar、date、time、email、url、search；
  （7）新的技术webworker,websocket,Geolocation;
  有些浏览器尚未对HTML5中新增的结构提供支持，所以需要使用CSS追加以下声明
  article,aside,dialog,figure,footer, header,legend, nav,section {display:block;}
  nav{float:left;width:20%}
  article{float:right;width:79%}
  另外，IE8及以前的浏览器不支持用CSS的方法来使用这些尚未支持的结构元素，为了在IE浏览器中也能正常使用这些结构，需要在JavaScript脚本中创建元素。
  document.createElement(‘header’);
  document.createElement(‘nav’);
  document.createElement(‘article’);
  document.createElement(‘footer’);
  到IE9之后，这些脚本就不需要了。

• 对语义化如何理解？

  HTML标签语义化是为了让页面的内容结构化，有利于SEO；
  在没有CSS的情况下，页面也能呈现出很好的内容结构；
  而且是容易阅读的，便于团队开发和维护；
  方便其他设备解析。