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的情况下,页面也能呈现出很好的内容结构;
而且是容易阅读的,便于团队开发和维护;
方便其他设备解析。