2018最新Web前端面试题之HTML部分~~好久不见

好久不见

有一段时间没有写博客了。最近一段时间准备Web前端面试,刷了好多题。在这里和大家分享下,这一期主要分享一些HTML类型的面试题,大家赶快拿起纸和手。。。敲键盘吧
文档类容出自https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers


  • Doctype作用?标准模式与兼容模式各有什么区别?
    1. Doctype用于向浏览器申明使用标准模式来解析文档
    2. 标准模式是以浏览器最高级别来解析文档,而兼容模式是以向后兼容的方式来解析文档
  • HTML5 为什么只需要写 ?
    1. 因为HTML5不是SGML的子集,所以不需要DTD引用,但是需要DOCTYPE来规范行为。
    2. 而HTML4.01是基于SGML,所以需要DTD引用,来告诉浏览器文档所使用的文档类型。
  • 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
    在CSS规范中,每个元素都有display属性。display属性值为block的是块级元素,display属性值为inline的是行内元素
    1. 行内元素有:span input a b strong i em small 等等
    2. 块级元素有:div section main footer header p ul li ol 等等
    3. 空元素有(自闭合标签):img input hr br meta link。还有一些少见的空元素:embed base command keygen param track wbr col area source等等
  • 页面导入样式时,使用link和@import有什么区别?
    1. Link 在浏览器页面的时候并行加载,而@import需要等页面加载完成后才会加载
    2. Link 是 XHML标签不存在兼容问题,而@import是css2.1提出的,IE5以上才支持
    3. Link 还可以加载RSS和使用rel属性,而@import只能加载CSS
    4. Link 加载的样式可以通过JS更改,而@import加载的样式不可以被JS更改
  • 介绍一下你对浏览器内核的理解?
    1. 浏览器内核一般被分为两个部分:渲染引擎和JS引擎
      • 渲染引擎:负责取得网页的内容(HTML,XML,图像等等),整理讯息(引入CSS等),通过计算来显示出网页(这个过程也称为回流),然后输出至显卡,最后渲染为网页(这个过程称为重绘)
      • JS引擎:获取网页的JS部分用来解析和执行以实现网页的动态效果
    2. 最开始渲染引擎和JS引擎没有太大的区别,但是随着JS的发展并独立,内核就只指渲染引擎了
  • 常见的浏览器内核有哪些?
    1. Trident:IE 360浏览器等
    2. Gecko:Firefox等
    3. Presto:Opera7及以上,现为blink内核
    4. Webkit:Chrome,safari(现Chrome使用blink内核)
    5. blink:Chrome , opera(blink内核由谷歌和opera公司共同研发,是Webkit分支)
  • html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
    • 新特性
      1. HTML5已经不是SGML的子集
      2. 新增关于图像,地理位置,缓存,多任务等多个功能
      3. 用于媒体回放的Video和Audio
      4. 语义化更好的标签,利于SEO优化
      5. 新的表单控件
    • 移除的元素
      1. 纯表现的元素 basefont font big s strike tt u
      2. 影响页面的元素 frame frameset noframe
    • 如何处理HTML5新标签的浏览器兼容问题
      1. 对于浏览器不支持的标签可以使用document.createElement方法产生标签,但是需要自己填写默认样式
      2. 使用成熟的技术框架比如html5shim
    • 如何区分html和HTML5?
      1. 根据文档DOCTYPE申明
      2. 查看有无新增元素
  • 简述一下你对HTML语义化的理解?
    1. 正确的标签做正确的事情
    2. 爬虫可以根据文档结构来确定上下文,有利于SEO优化
    3. 在无网络情况下不至于排版过于混乱
    4. 结构化代码便于开发人员的开发和维护
  • 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
    1. 在线的情况下:首先判断是否是第一次访问网页,如果是就缓存。如果不是就比对新的manifest文件看看是不是发生过更改,发生则替换
    2. 离线的情况下读取manifest文件使用离线资源
  • 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
    1. Cookie 有大小限制,一般来说是4k。随着http请求一起发送至服务器端,可以设置过期时间,不设置的情况下在浏览器关闭的时候会清空
    2. SessionStorage可以保存较多数据,在浏览器关闭的时候会被清空,同时浏览主域名下不同子域名内容不会共享
    3. LocalStorage可可以保存较多数据,可以永久保存数据除非用户主动删除或清除缓存
  • iframe有那些缺点?
    1. 在iframe里的域名的资源也会同时并行下载,影响浏览器加载速度
    2. iframe里面的内容搜索引擎搜索不到,不利于SEO优化
    3. 会阻塞页面的Onload事件
      如果需要使用iframe,可以使用js动态生成,给予Src属性。可以解决1,3问题
  • Label的作用是什么?是怎么用的?
    1. label标签用来定义表单控制间的关系,当用户点击label标签时候,浏览器焦点会自动跳转到对应的表单控件上
    2. 给label的for属性设置表单控件的id属性即可
  • HTML5的form如何关闭自动完成功能?
    1. 给form添加autocomplete=off属性
  • 如何实现浏览器内多个标签页之间的通信? (阿里)
    1. 使用LocalStorage,cookies等存储方式
    2. WebSocket、SharedWorker;
      LocalStorage另一个浏览上下文里被添加、修改或删除时,都会触发一个事件,通过监听该事件来进行页面之间的通信
      注意,在safari浏览器无痕模式使用LocalStorage会出现QuotaExceededError 异常
  • webSocket如何兼容低浏览器?(阿里)
    1. Adobe Flash Socket
    2. ActiveX HTMLFile(IE)
    3. 基于Multipart编码发送XHR
    4. 基于长轮询的XHR
  • 页面可见性(Page Visibility API) 可以有哪些用途?
    1. 通过visibilityState 的值检测页面当前是否可见,以及打开页面的时间等
    2. 在页面被切换到后台的时候,自动暂停音乐或者视频
  • 如何在页面上实现一个圆形的可点击区域?
    1. SVG或Canvas
    2. border-radius属性
  • 实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
  • 网页验证码是干嘛的,是为了解决什么安全问题。
    1. 用于区分用户是人还是机器人,可以防止论坛灌水,恶意破解密码,刷票等
    2. 防止暴力破解用户帐号密码
  • title与h1的区别、b与strong的区别、i与em的区别?
    1. title表示网页标题,h1表示段落标题
    2. b表示文本加粗没有强调效果,strong表示文本加粗有强调效果
    3. i表示文本斜体没有强调效果,em表示文本斜体有强调效果

你可能感兴趣的:(Web前端,面试题)