前端硬核面试题目HTML24题

1.前言本文讲解前端面试的HTML内容。复习前端面试的知识就是巩固前端的基础知识，最重要的是平时的积累！注：文章问题用下划线分隔，答案仅供参考。作者技术博客首地址为GitHub，欢迎关注。2、为什么HTML使用多个域名存储网站资源效果更好？保证不同地区的用户都能以最快的速度打开网站，某个域名挂掉的用户也可以通过其他域名访问网站。window常用的属性和方法有哪些？窗口对象的常用属性window.self返回当前窗口的引用window.parent返回当前窗口的父窗口对象window.top返回当前窗口最顶层父窗口的引用window.outerwidth返回外层当前窗口的widthwindow.outerheight返回当前窗口window的外高度。innerwidth返回当前窗口可显示区域的宽度window.innerheight返回当前窗口可显示区域的高度属性和当前浏览器支持的值。窗口对象的常用方法window.prompt()弹出一个输入提示框，如果用户点击“取消”则返回nullwindow.alert()弹出一个警告框window.confirm()弹出一个确认框窗口。close()关闭当前浏览器窗口。某些浏览器对此方法有限制。window.open(uri,[name],[features])打开显示指定网页的浏览器窗口。name属性的值可以是“_blank”、“_self”、“_parent”、“_top”或任何指定的窗口名称。window.blur()指定当前窗口失去焦点window.focus()指定当前窗口获得焦点window.showModalDialog(uri,[dataFromParent])打开一个“模态窗口”（只要打开的子窗口不是关闭时，其父窗口将无法获得焦点；父子窗口之间可以传递数据）document的常用属性和方法有哪些？文档公共属性body提供对元素的直接访问。对于定义框架集的文档，此属性指的是最外层的。cookie设置或返回与当前文档关联的所有cookie。域返回当前文档的域名。lastModified返回上次修改文档的日期和时间。referrer返回加载当前文档的文档的URL。title返回当前文档的标题。URL返回当前文档的URL。文档常用方法write()：动态写入页面内容createElement(Tag)：创建HTML标签对象getElementById(ID)：获取指定id的对象getElementsByName(Name)：获取前一个Namebody的对象.appendChild(oTag)：将元素对象插入到HTML中。简述src和href的区别。href指向网络资源的位置，与当前元素（anchor）或当前文档（link）建立链接，用于超链接。src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签的位置；当请求src资源时，会下载指向的资源并应用到文档中，如js脚本、img图片、frame元素等。当浏览器解析到这个元素时，会暂停其他资源的下载和处理，直到该资源被加载、编译和执行。图片、框架等元素也是如此，类似于将指向的资源嵌入到当前标签中。这就是为什么js脚本放在底部而不是放在头部的原因。写一个div+css布局，左边是图片，右边是文字，文字环绕图片，外层容器宽度固定，文字不固定。直接一个img就可以了，它float:left，加text和p标签就可以了。html中的title属性和alt属性有什么区别？alt当图片不输出信息时，会显示alt信息，鼠标放在上面没有任何信息。图片正常加载时，不会出现alt信息。title图片不输出信息时，会显示alt信息，鼠标放在上面会出现title信息。图片正常输出时，不会有alt信息，鼠标放在上面会出现title信息。---谈谈你对reflow和repaint的理解。repaint就是重绘，reflow就是回流。严重性：在性能优先的前提下，reflow的性能消耗大于repaint。Reflection:repaint就是重绘某个DOM元素；reflow是重新排列整个页面，即渲染页面上的所有DOM元素。如何触发：样式变化导致重绘和回流。不涉及任何DOM元素的排版问题的改变就是重绘，比如元素的color/text-align/text-decoration等属性的改变。除了上面提到的修改DOM元素样式外，基本都是reflow。例如任何涉及长、宽、行高、边框、显示等样式的元素修改。常见触发场景触发重绘：颜色修改，如color=#ddd;text-align修饰，如text-align=center；a:hover也会导致重绘。:hover会导致颜色和其他不会导致页面重排的样式更改。触发reflow：修改width/height/border/margin/padding，比如width=778px；animation、:hover等伪类导致元素性能变化，display=none等导致页面回流；appendChild等DOM元素操作；fontclassstyle背景的修改，注意字面上可能认为是重绘，但是浏览器确实会reflow，经过浏览器厂商的优化，部分背景修改只触发重绘，当然IE不需要考虑;滚动页面，这是不可避免的；调整页面大小，桌面版放大浏览器大小，对于移动端，我还没有玩过可以拖动程序和调整程序窗口大小的多窗口操作系统。读取元素的属性（这个比较难理解，但是技术高手是这么说的，那就把它当作定理）：读取元素的一些属性（offsetLeft,offsetTop,offsetHeight,offsetWidth,scrollTop/Left/Width/Height,clientTop/左/宽/高,getComputedStyle(),currentStyle(在IE中));如何避免：尽可能通过更改DOM末尾的class来修改元素的style属性：尽可能减少受影响的DOM元素。避免设置多个内联样式：使用普通类方法设置样式，避免设置样式时访问DOM效率低下。设置动画元素的position属性为fixed或absolute：由于当前元素独立于DOM流，所以只有当前元素，即元素重绘受到影响。牺牲流畅度来满足性能：动画精度过高会导致更多的repaint/reflow，牺牲精度可以满足性能损失，达到性能和流畅度的平衡。避免使用表格进行布局：改变表格每个元素的大小和内容会导致整个表格重新计算，从而导致大量的重绘或回流。使用div代替可以执行有针对性的重绘并避免不必要的回流。避免在CSS中使用表达式：要知道学习CSS时应该避免这种情况，不应该深入到这个层面去理解，因为这样做的后果真的很严重。一旦有动画repaint/reflow，每一帧动画都会计算，性能消耗不容小觑。Doctype的作用？标准模式和兼容模式有什么区别？声明位于HTML文档的第一行，在标记之前。告诉浏览器的解析器使用什么文档标准来解析这个文档。DOCTYPE缺失或格式错误会导致文档以兼容模式呈现。标准模式的排版和JS运行模式均以浏览器支持的最高标准运行。在兼容模式下，页面以轻松的向后兼容方式显示，模拟旧浏览器的行为以防止站点崩溃。为什么HTML5只需要写？HTML5不是基于SGML（StandardGeneralizedMarkupLanguage（以下简称“GeneralMarkup”），所以没有必要参考DTD，但是需要doctype来规范浏览器的行为（让浏览器按应有的方式运行）;而HTML4.01是基于SGML的，所以需要引用DTD来告知浏览器文档使用的文档类型，什么是行内元素？什么是块级元素？什么是空（void）elements?CSS规范规定每个元素每个元素都有一个display属性来决定元素的类型，每个元素都有一个默认的显示值，比如div的默认显示值为“block”，它是一个“块级”元素；span的默认显示属性值为“inline”，是一个“内联”元素。行内元素有：abspanimginputselectstrong（强调语气）块级元素有：divulollidldtddh1h2h3h4p常见空元素：imginputlinkmetabrhr，鲜为人知的有：areabasecolcommandembedkeygenparamsourcetrackwbrHTML5有什么新内容以及删除了哪些元素？如何处理HTML5新标签页的浏览器兼容性问题？如何区分HTML和HTML5？HTML5现在不是SGML（标准通用标记语言）的一个子集，主要是增加图像、定位、存储、多任务处理等功能。新功能绘画画布；用于媒体播放的视频和音频元素；本地离线存储localStorage长期数据存储，关闭浏览器后数据不会丢失；sessionStorage数据在浏览器关闭后自动删除；具有更好语义的内容元素，例如article、footer、header、nav、section；表单控件：日历、日期、时间、电子邮件、url、搜索；新技术：webworker、websocket、Geolocation；移除了纯粹表现力的元素：basefont,big,center,font,s,strike,tt,u；对可用性有负面影响的元素：frame、frameset、noframes；支持HTML5新标签IE8/IE7/IE6支持通过document.createElement方法生成的标签，你可以使用这个特性让这些浏览器支持新的HTML5标签。浏览器支持新标签后，需要添加标签的默认样式。当然你也可以直接使用成熟的框架，比如html5shim;简述你对HTML语义的理解？1.用正确的标签做正确的事。2.HTML语义使页面内容更加结构化，更加清晰。3.便于浏览器和搜索引擎分析。4、即使没有样式CSS也以文档格式显示，易于阅读；5、搜索引擎爬虫也依靠HTML标签来判断每个关键词的上下文和权重，这有利于SEO；6、让阅读源代码的人更容易将网站分块，便于阅读、维护和理解。如何使用HTML5离线存储，能解释一下工作原理吗？当用户未连接到互联网时，站点或应用程序可以正常访问，当用户连接到互联网时，更新用户机器上的缓存文件。原理HTML5的离线存储是基于一种新的.appcache文件缓存机制（不是一种存储技术）。资源通过解析列表离线存储在这个文件上，这些资源会像cookies一样被存储。之后当网络离线时，浏览器会通过离线存储的数据来显示页面。使用方法1、在页面头部添加manifest属性如下；2.在cache.manifest文件中写入离线存储资源；CACHEMANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK://offline.html3.离线时，运行window.applicationCache实现需求。浏览器如何管理和加载HTML5离线存储资源？上网时，浏览器发现html头有manifest属性，就会去请求manifest文件。如果是第一次访问app，浏览器会根据manifest文件的内容下载相应的资源并离线存储。如果应用被访问过并且资源已经离线存储，浏览器将使用离线资源加载页面，然后浏览器将新的清单文件与旧的清单文件进行比较，如果文件没有，则不执行任何操作changed，如果文件发生变化，文件中的资源将被重新下载并离线存储。离线时，浏览器直接使用离线存储的资源。请描述cookies、sessionStorage和localStorage的区别？Cookie是网站为了识别用户身份而存储在用户本地终端（ClientSide）上的数据（通常是加密的）。Cookie数据始终携带在同源http请求中（即使不需要），并在浏览器和服务器之间来回传递。sessionStorage和localStorage不会自动向服务器发送数据，只是保存在本地。存储大小cookie数据大小不能超过4k。sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大很多，可以达到5M甚至更大。localStorage在一定时间内存储持久化数据，除非主动删除数据，否则关闭浏览器后数据不会丢失；sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie设置的cookie在过期时间之前一直有效，即使关闭了窗口或浏览器。iframe内联框架有什么缺点？iframe通常用于包含其他页面。比如我们可以在自己的网站页面加载别人网站的内容。为了获得更好的结果，我们可能需要使iframe透明；iframe会屏蔽主页面的onload事件；搜索引擎的搜索程序无法解释这种页面，不利于SEO（搜索引擎优化）。iframe和主页面共享连接池，浏览器对同域连接有限制，会影响页面的并行加载。如果需要使用iframe，最好通过javascript动态的给iframe添加src属性值，这样可以绕过以上两个问题。标签的作用是什么？它是如何使用的？label标签定义表单控件之间的关系，当用户选择标签时，浏览器会自动关注与标签相关的表单控件。编号：日期：如何关闭HTML5表单的自动完成功能？为您不想提示的表单或输入设置autocomplete=off。如何实现浏览器中多个标签页之间的通信？（阿里）WebSocket、SharedWorker；也可以调用localstorge、cookies等本地存储方式；当localstorge在另一个浏览上下文中被添加、修改或删除时，会触发一个事件，我们通过监听事件并控制其值来传达页面信息；注意怪癖：Safari在隐身模式下设置localstorge值时会抛出QuotaExceededError异常；webSocket如何与低级浏览器兼容？（阿里巴巴）AdobeFlashSocket、ActiveXHTMLFile（IE）、基于multipart编码的XHR、基于长轮询的XHR。页面可见性API有何用途？通过visibilityState的值检测页面当前是否可见，打开页面的时间等；当页面切换到其他后台进程时，自动暂停音乐或视频的播放；网页验证码是做什么用的，解决了哪些安全问题。是一种区分用户是计算机还是人的公共全自动程序；可防止恶意破解密码、刷票、泛滥论坛；可有效防止黑客通过特定的程序暴力破解方法对特定的注册用户进行连续登录尝试。title和h1、b和strong、i和em有什么区别？title属性没有明确的含义，仅表示一个标题。H1表示一个层次分明的标题，对页面信息的抓取也有很大的影响；strong表示重点内容，有加强基调的意思。用阅读器上网阅读时：strong会重读，b表示重读。i内容以斜体显示，em表示强调文本；PhysicalStyleElements--naturalstyletags:b,i,u,s,preSemanticStyleElements--semanticstyletags:strong,em,ins,del,code应该准确使用语义样式标签，但不能滥用，如果不确定,自然风格的标签是首选。谈谈从前端的角度出发，做好SEO需要考虑什么？要了解搜索引擎如何抓取和索引网页，您需要了解一些搜索引擎的基本工作原理、搜索引擎之间的区别、搜索机器人（SErobots或webcras）的工作原理以及搜索引擎如何处理搜索结果。排序等Meta标签优化主要包括标题、网站描述、关键字。还有一些其他的隐藏文本如Au）、Category（目录）、Language（编码语言）等。如何在网页中选择关键字和放置关键字搜索必须使用关键字。关键词分析和选择是SEO最重要的工作之一。首先要确定网站的主要关键词（一般在5个以上之后，针对这些关键词进行优化，包括关键词密度（Density）、相关性（Relavancy）、显着性（Prominency）等。知道主搜索engines搜索引擎虽然很多，但是对网站流量起决定性作用的只有那么几种，比如英文主要有Google、Yahoo、Bing等，百度、搜狗、有道等，不同的搜索引擎抓取和indexpages，排序规则不一样，也需要了解各个搜索入口和搜索的关系，比如AOL网络搜索用的是Google的搜索技术，MSN用的是Bing的技术，主要的互联网目录OpenDirectory本身就不是一个搜索引擎，但是是一个大型的网站目录，他和搜索引擎的主要区别是网站内容收集者的目录是人工编辑的，主要包括网站的首页；搜索引擎自动收集并抓取除首页外的大量内容页面。按点击付费的搜索引擎也需要生存。随着互联网商务越来越成熟，付费搜索引擎也开始流行起来。最典型的是Overture，当然GoogleAdwords也包括在内。越来越多的人通过点击搜索引擎的广告来定位商业网站，你要学会用最少的广告投入获得最多的点击。搜索引擎登录网站后，不要只是躺在那里等着客人从天上掉下来。让其他人找到您的最简单方法是将您的网站提交给提交引擎。如果你有一个商业网站，主要的搜索引擎和目录会向你收取费用才能被收录（例如雅虎299美元），但这是值得的。到目前为止）最大的搜索引擎谷歌目前是免费的，它占据了超过60%的搜索市场。链接交换和链接流行度（LinkPopularity）网页内容以超文本的形式相互链接，网站之间也是如此。除了搜索引擎，人们还在不同网站之间浏览（“surf”）链接。越多其他网站链接到您的网站，您获得的流量就越多。您网站的外部链接数量越重要，搜索引擎就会越重视它，从而给您更高的排名。标签的合理使用前端页面的三层是什么，分别是什么？作用是什么？网页分为三个层次，即：结构层、表现层和行为层。网页的结构层是由HTML或XHTML等标记语言创建的。标签，即出现在尖括号中的词，构成了网页内容的语义。这些标签不包含有关如何显示相关内容的任何信息。例如，P标签表达了这样的语义：“这是一个文本段落”。网页的表现层（presentationlayer）是由CSS创建的。CSS回答了如何显示相关内容的问题。网页的行为层负责回答内容应该如何响应事件的问题。这是Javascript语言和DOM占主导地位的领域。有这么一段HTML，请指正

我写的不是HTML，是寂寞。

我说：
兄弟别执着了，兄弟只是个传说答：p标签的结束标签少了。最后，前端硬核面试题目完整版在这里：前端硬核面试题目，包括：HTML+CSS+JS+ES6+Webpack+Vue+React+Node+HTTPS+数据结构和算法+Git。如果你觉得这篇文章还不错，记得给个star，你的star是我持续更新的动力！.