前端面试题总结（一）HTML篇

前端面试题总结（一）HTML篇

一、iframe的优缺点？
　　缺点：
　　　　1、会阻塞主页面的onload事件（iframe和主页面共享链接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载）。
　　　　　　解决方法：通过js动态给iframe添加src属性值。
　　　　2、会增加http请求。
　　　　3、对搜索引擎不友好。
　　　　4、在移动端设备不能完全加载，会出现滚动条，影响用户体验。
　　优点：
　　　　1、解决加载缓慢的第三方内容如图标和广告的加载问题。
　　　　2、并行加载脚本。
　　　　3、程序调入静态页面比较方便。
　　　　4、页面和程序分离。

二、浏览器内核分别是？

　　IE：trident、谷歌：webkit、火狐：gecko、欧朋：presto（已改成blink(webkit的分支)）。

三、doctype作用？严格模式与混杂模式如何区分？他们有何意义？

1. doctype是申明文档类型，告诉浏览器以什么文档类型规范来解析这个文档。
2. 严格模式的排版和JS运作模式是以该浏览器支持的最高标准执行的。
3. 混杂模式中，页面以宽松的、向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4. doctype不存在或不正确会导致文档以混杂模式呈现。

　　严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

四、说说你对语义化的理解？

1. 用正确的标签做正确的事。
2. 让页面内容结构化，便于浏览器、搜索引擎解析。
3. 在去掉或丢失样式的时候能让页面呈现出清晰的结构。
4. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，有利于SEO。
5. 便于团队开发和维护，语义化更具可读性，可以减少差异性。

五、介绍一下盒子模型？

1. 由内容(content)、填充(padding)、边框(border)、边界(margin)组成。
2. 有两种盒模型：IE盒子模型和标准w3c盒子模型。
3. IE和模型的content包括了border和padding。
4. IE:width = margin+content;标准:width = margin+boder+padding+border。

六、HTML5为什么只需要写<! DOCTYPE HTML>？

　　HTML5不基于sgml，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。
　　而HTML4.01基于sgml，所以需要DTD进行引用，才能告知浏览器文档所使用的文档类型。

七、src和href的区别？

1. href是指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2. src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。

八、你知道多少种doctype文档类型？

1. 该标签可申明三种DTD类型，分别表示严格版本（strict）、过渡版本（transitional）、基于框架的（frameSet）HTML文档。
2. HTML4.01规定了三种。
3. XHTML1.0规定了三种XML文档类型。
4. standards（标准）模式用于呈现遵循最新标准的网页，而quirks（兼容）模式用于呈现为传统浏览器而设计的网页。

九、HTML5的新特性？

　　HTML5不在是sgml的子集，主要是关于图形，位置，存储，多任务等功能的增加。

十、渐进增强和优雅降级？

　　渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
　　优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

十一、title与h1的区别、b与strong的区别、i与em的区别，img内title和alt的区别？

1. title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
2. strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<b>是展示强调内容。
3. i内容展示为斜体，em表示强调的文本；
4. title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。
5. alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。所以alt属性的本意是用于替换图像，而不是为图像提供额外说明的，但是，在ie浏览器中，alt属性会变成文字提示，这本身是一种误导。所以，如果你使用firefox或者chrome，alt属性就会不管用。
6. 应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

十二、data-*属性的作用？

1. data-*属性用于存储页面或应用程序的私有自定义数据。data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。存储的（自定义）数据能被页面的JavaScript中利用，以创建更好的用户体验（不进行ajax调用或服务器端数据库查询）。
2. data-*主要包括两个部分：
   1. 属性名不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符。
   2. 属性值可以是任意字符串。

十三、如果把HTML5看成一个开放平台，那它的构建模块有哪些？

　　nav、header、section、footer。

十四、什么是svg？

1. svg指可缩放矢量图形（Scalable Vector Graphics）。
svg用来定义于网络的基本矢量图形。
2. svg使用xml格式定义图形。
3. svg图形在放大或改变尺寸的情况下其图形质量不会有所损失。
4. svg是万维网联盟的标准。
svg与诸如dom和xsl之类的w3c是一个整体。

十五、知道网页制作会用到的图片格式有哪些？
　　png-8、png-24、JPEG、GIF、svg、webp。
　　webp格式：谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。在质量相同的情况下，webp格式图像比JPEG格式图像小40%。

十六、知道什么是微格式吗？

　　微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
　　优点：将只能数据添加到网上，让网站内容在搜索引擎结果界面可以显示额外的提示。

 十七、defer和async的区别？

1. defer和async在网络读取（下载）是一样的，都是异步的。
2. defer是在文档解析后执行脚本；async是在文档解析时同时执行脚本。
3. defer能够快速先呈现文档。
4. 没有defer或async，浏览器会立即在家并执行指定的脚本。

十八、页面重构怎么操作？
　　页面重构是指：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
　　编写css、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

十九、如何实现浏览器多个标签页之间的通信？

　　可以调用localStorage、cookie等本地存储方式。
　　localStorage另一个浏览上下文里被添加、修改或删除时，会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

二十、对WEB标准以及W3C的理解与认识？
　　标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

二十一、什么是响应式设计？

　　它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常 

二十二、简述readyonly与disabled的区别

• readonly只针对input(text / password)和textarea有效。
• 而disabled对于所有的表单元素都有效，当表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。