前端面试题总结(一)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)。
  2. svg用来定义于网络的基本矢量图形。

  3. svg使用xml格式定义图形。
  4. svg图形在放大或改变尺寸的情况下其图形质量不会有所损失。
  5. svg是万维网联盟的标准。
  6. 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会将该值传递出去。

前端面试题总结(一)HTML篇的更多相关文章

  1. 史上最全前端面试题(含答案)-A篇

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  2. 史上最全前端面试题(含答案)-B篇

    面试有几点需要注意面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑.题目类型: 技术视野.项目细节.理论知识型题,算法题,开放性题,案例题.进行追问: 可以确保问到你开始不懂 ...

  3. 前端面试题整理(html篇)

    1.Doctype作用?标准模式与兼容模式各有什么区别? <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准 ...

  4. 前端面试题整理—HTML/CSS篇

    1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...

  5. 前端面试题1(HTML篇)

    HTML 语义化 HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 css命名的语义化是指:为html标签添加有意义的class 为什么需要语义化: 去掉样式后页面呈 ...

  6. 前端面试题(html篇)

    前端面试题(html篇)

  7. 前端面试题 -- JS篇

    前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...

  8. 前端面试题总结(二)CSS篇

    前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...

  9. 前端面试题总结(三)JavaScript篇

    前端面试题总结(三)JavaScript篇 一.谈谈对this的理解? this是一个关键字. this总是指向函数的直接调用者(而非间接调用者). 如果有new关键字,this指向new出来的那个对 ...

随机推荐

  1. css选择器星号(*)

    1.星号(*)选择器的优先级 css的(*)选择器,也是通用选择器,对所有的页面元素(html,title,style,body,div,p……)应用样式,级别最低 在选择器的级别中:在元素名< ...

  2. vue(2.0)+vue-router(2.0)+vuex(2.0)实战

    好久没更新自己的知识库,刚好借双十一的契机,用上了vue(2.0)+vue-router(2.0)+vuex(2.0)来开发公司的双十一电商活动. 项目目录结构: 运行: npm install np ...

  3. JS将文件像form表单一样提交到后台

    这是很简单.. HTML <div> <input type="file" id="myfile"> <input type=&q ...

  4. C# 多线程系列之Semaphore使用

    Semaphore,即信号量的意思.是操作系统原始提供的内核同步对象. Semaphore semaphoreAcceptedClients = , 3,"Semaphore1") ...

  5. MySql 学习(一)

    入门使用 show databases; //假设存在seckill 数据库 use seckill; //查看所有表 show tables; //查看某个表的字段,例如存在 student 表 d ...

  6. Hibernate学习1--对象持久化的思想

    前些天开始接触hibernate,想想以前直接用c3p0进行笨拙而繁杂的数据库操作就觉得生无可恋了,也正因如此,在刚刚接触hibernate的我,便强烈地喜欢上这种偷懒而优雅的面向对象式操作数据库的方 ...

  7. 二分查找——Python实现

    一.排序思想 二分(折半)查找思想请参见:https://www.cnblogs.com/luomeng/p/10585291.html 二.python实现 def binarySearchDemo ...

  8. sql server query to get the list of column name in a table

    --SQL Server 2005, 2008 or 2012: SELECT * FROM information_schema.tables --SQL Server 2000: SELECT * ...

  9. vue双向绑定笔记

    原文:https://github.com/louzhedong/blog/issues/4 <!DOCTYPE html> <html lang="en"> ...

  10. 本地存储localStroage的用法及示例

    localStorage是HTML5在在客户端存储数据的新方法,存储的数据没有时间限制. localStorage的主要API: localStorage.setItem(key,value);   ...