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表示文本斜体有强调效果