2019校招前端面试题——HTML,CSS

前言2019校招陆续开始，整理了一些高频面试题。HTML第1部分。什么是？DOCTYPE是html5标准的网页声明，必须声明在HTML文档的第一行。告诉浏览器的解析器使用什么文档标准来解析这个文档。文档解析类型有：BackCompat：怪异模式，浏览器使用自己的怪异模式来解析和渲染页面。（如果不声明DOCTYPE，默认为这种模式）CSS1Compat：标准模式，浏览器使用W3C标准来解析和渲染页面。2.Meta标签为页面提供一些元信息（名称/值对），对SEO有帮助。属性值：名称：名称/值对中的名称。作者、描述、关键字、生成器、修订版、其他。将内容属性与名称相关联。http-equiv：当没有名称时，将使用该属性的值。内容类型、过期、刷新、设置cookie。将content属性与http头内容相关联：名称/值对中的值，可以是任何有效的字符串。Alwaysuseschemewiththenameattributeorthehttp-equivattribute：用于指定用于翻译属性值的方案3。HTML语义用正确的标签做正确的事。HTML语义使页面内容结构化、清晰，便于浏览器和搜索引擎解析；即使没有样式CSS，也以文档格式显示，易于阅读；搜索引擎爬虫还依赖于根据HTML标签确定每个关键字的上下文和权重，这有利于SEO；方便阅读源代码的人将网站分块，便于阅读、维护和理解。4、常用浏览器内核Trident内核：IE、MaxThon、TT、TheWord、360、搜狗浏览器等Gecko内核：Netscape6及以上、FF、MozillaSuite/SeaMonkey等；Presto内核：Opera7及以上。【目前：Blink】Webkit内核：Safari、Chrome等【Chrome：Blink（Webkit分支）】五、简介对浏览器内核的理解主要分为两部分：渲染引擎??和JS引擎。渲染引擎：将代码转换成页面。负责获取网页内容（HTML、XML、图片等），整理信息（如添加CSS等），并计算网页的显示方式，然后输出到监视器或打印机。不同的浏览器内核对网页的语法解释不同，因此呈现的效果也不同。所有Web浏览器、电子邮件客户端和其他编辑和显示Web内容的应用程序都需要内核。JS引擎：解析执行javascript，实现网页动态效果。起初，渲染引擎和JS引擎并没有明确区分。后来JS引擎越来越独立，内核趋向于只指渲染引擎。6.HTML5有哪些新特性，删除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？新功能：（1）用于绘画的画布元素；(2)用于媒体播放的视频和音频元素；(3)更好地支持本地离线存储，localStorage长期存储数据，关闭浏览器后数据不丢失；sessionStorage数据在浏览器关闭后自动删除；(4)语义较好的内容元素，如header、nav、section、article、footer；(5)新增表单控件：日历、日期、时间、邮箱、url、搜索；(6)新技术webworker、websockt、Geolocation；去除元素：（1）纯表达元素：basefont,big,center,font,s,strike,tt,u；(2)对可用性有负面影响的元素：frame、frameset、noframes；兼容性问题：IE8/IE7/IE6支持document.createElement方法生成的标签，可以利用这个特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认样式。7.哪些HTML5标签可以针对SEO进行优化？标题、元数据、页眉、页脚、导航、文章、aside8。src和href的区别src指向外部资源的位置，指向的内容会嵌入到文档中当前标签的位置，请求src资源时会把指向的资源下载并应用到文档中，比如js脚本，img图片，frame元素。浏览器在解析这个元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕，所以一般js脚本都会放在底部而不是头部。href是指网络资源的位置，与当前元素（锚点）或当前文档（链接）建立链接，用于超链接。9、渐进增强和优雅降级渐进增强：为低版本浏览器构建页面，保证最基本的功能，然后为高级浏览器改进和添加效果、交互等功能，以达到更好的用户体验。优雅降级：从一开始就构建完整的功能，然后使其兼容低版本的浏览器。10、defer和asyncdefer的区别直到整个页面在内存中正常渲染后才会执行（DOM结构完全生成，其他脚本执行完毕）。多个延迟脚本将按照它们在页面上出现的顺序加载。=="Executeafterrendering"==一旦下载了async，渲染引擎就会中断渲染。执行此脚本后，渲染将继续。无法保证多个异步脚本的加载顺序。=="下载后执行"==11.如何实现浏览器中多个标签页之间的通信？方法一：调用localstorge标签页一：Tab2:$(function(){window.addEventListener("storage",function(event){console.log(event.key+"="+event.newValue);});//使用storage事件监听增、改、删的动作});方法二：使用cookie+setInterval将要传输的信息存储在cookie中，每隔一定时间读取cookie信息，随时获取要传输的信息。选项卡1：$(function(){$("#btn").click(function(){varname=$("#name").val();document.cookie="name="+name;});});选项卡2：$(function(){functiongetCookie(key){returnJSON.parse("{\""+document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim,"\":\"")+"\"}")[key];}setInterval(function(){console.log("name="+getCookie("name"));},10000);});CSSpart1.cssboxmodelIEboxmodelbox-sizing:border-box;（奇怪的模式）；W3C标准盒子模型box-sizing:content-box;（标准型号）。应用场景：(1)表单：表单中的一些input元素实际展示的是传统的IE盒子模型，带有一些默认的样式，在不同的平台或者浏览器上表现不一样，导致表单展示的差异。此时，我们可以使用box-sizing属性来构建一个样式统一的表单元素。(2)在设置子类元素的边距或边框时，可能会破坏父层元素的尺寸。这时候就需要使用box-sizing:border-box将边框包含到元素的尺寸中，这样就不会出现父层元素被破坏的情况。2、行内元素和块级元素有什么区别？内联块级元素的兼容性使用？(IE8以下)块级元素：div、p、h1、form、ul、li(1)各占一行，垂直排列；(2)可以包含其他块级或行内元素；(3)高度、行高和外边距和内边距都可以控制；(4)默认宽度为其父容器的100%（与父元素的宽度一致），与内容无关。行内元素：span、a、label、input、img、strong、em(1)水平排列，不自动换行；(2)不能包含块级元素，但可以包含其他行内元素或文本；(3)行内元素的宽高无效（可以设置line-height），margin和padding无效；(4)宽度为其文字和图片的宽度，不可更改。IE8以下内联块级元素的兼容性（块元素模拟inline-block）div{display:inline-block;缩放：1；//触发hasLayoutdisplay:inlineunderIE;//一旦hasLayout被触发就设置显示：inline和display:block有类似的效果。}haslayout是IE7浏览器独有的属性。hasLayout是一个只读属性，有两种状态：true或false。当为真时，表示该元素有自己的布局，否则表示该元素的布局继承自父元素。注意：当前元素的hasLayout可以通过element.currentStyle.hasLayout获取。3.导入页面样式时，使用link和@import有什么区别？(1)link是一个XHTML标签。除了加载CSS，它还可以定义RSS等其他东西；@import属于CSS的范畴，只能加载CSS。(2)当链接引用CSS时，在页面加载时同时加载；@import需要在页面完全加载后加载。(3)link是一个XHTML标签，没有兼容性问题；@import是CSS2.1提出的，低版本浏览器（IE5以下）不支持。(4)link支持使用Javascript控制DOM改变样式；而@import不支持它。4、清除浮动的方法有哪些？(1)在浮动元素下方添加一个非浮动元素