X

曜彤.手记

随记,关于互联网技术、产品与创业

  1. HTML 技术部分:
    1. 1. !DOCTYPE 的作用?严格模式与混杂模式如何区分?有何意义?
    2. 2. HTML5 为什么只需要写 ?
    3. 3. 行内元素有哪些?块级元素有哪些?空元素有那些?
    4. 4. 常见的浏览器内核
    5. 5. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?
    6. 6. 简述一下你对 HTML 语义化的理解?
    7. 7. HTML5 离线储存的工作原理?
    8. 8. 如何在页面上实现一个圆形的可点击区域?
    9. 9. 如何实现浏览器内多个标签页之间的通信?
    10. 10. HTML5 的 form 表单如何关闭自动完成功能?
    11. 11. label 标签的 for 属性有什么作用?
    12. 12. iframe 有哪些缺点?
    13. 13. WebSocket 如何兼容低浏览器?
    14. 14. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的?
    15. 15. 页面可见性(Page Visibility)API 有哪些用途?
    16. 16. Cookies、Session,、SessionStorage 和 LocalStorage 的区别?
    17. 17. HTML5 Web Workers:

前端常见技术点 - HTML

这里总结一下 WEB 前端面试 HTML 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的,资深工程师则要对这些基本概念的纵向深度进行挖掘,【问题解答全部原创,转载请注明来源】。

HTML 技术部分:

1. !DOCTYPE 的作用?严格模式与混杂模式如何区分?有何意义?

根据 “<!DOCTYPE>” 是否存在选择呈现模式,被称为 <!DOCTYPE> 切换或 <!DOCTYPE> 侦测

一个文档类型标记的目的是要:告诉浏览器解析器,它应该使用什么样的文档或规范(DTD)来解析文档格式

  • 严格模式:正确的 <!DOCTYPE> 标记,浏览器将按照标准渲染页面。
  • 混杂模式:若 <!DOCTYPE> 标记不存在或格式不正确会导致文档以混杂模式呈现,该模式下页面将会以一种比较宽松的向后兼容的方式来显示。

意义:当浏览器厂商开始创建与标准兼容的浏览器时,他们希望能够确保向后兼容性。这里我们可以用如下所示代码来判断当前文档的解析模式:

document.compatMode === "CSS1Compat" ? "标准模式" : "混杂模式";

2. HTML5 为什么只需要写 ?

HTML5 不基于 SGML,因此不需要 <!DOCTYPE> 对 DTD 进行引用,但是需要其来规范浏览器行为。而 HMTL4.01 是基于 SGML 的。

3. 行内元素有哪些?块级元素有哪些?空元素有那些?

  • 行内:span、strong、em、img 等;
  • 块元素:div、p、h1-h6 等;
  • 空元素:hr、br 等;
  • 行内块元素:input、textarea、keygen、select、button 等;

4. 常见的浏览器内核

  • Trident内核:IE;
  • Gecko内核:Mozilla Firefox;
  • WebKit内核:Safari、Chrome、Edge;

5. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?

title 在 SEO 的权重中比 h1 要高,strong 着重内容,b 无强调或着重意味的粗体;em 强调内容,i 无强调或着重意味的斜体。

6. 简述一下你对 HTML 语义化的理解?

  • 为了在没有 CSS 的情况下,页面也能呈现出很好的内容结构、代码结构;
  • 增强用户体验;
  • 利于页面的 SEO;
  • 方便其他设备解析;
  • 便于团队开发和维护,语义化更具有可读性;

7. HTML5 离线储存的工作原理?

<!-- 为 <html> 标签添加如下属性 -->
manifest="index.manifest"
<!-- index.manifest -->
CACHE MANIFEST
#version 1.3
CACHE:
    /images/logo.png
NETWORK:
    *
// applicationCache 对象存储着很多与 Application Cache 有关的方法和属性;
window.applicationCache

8. 如何在页面上实现一个圆形的可点击区域?

<img alt="Planets" height="126" src="planets.gif" usemap="#planetmap" width="145" /><map name="planetmap">
  <area alt="Sun" coords="0,0,82,126" href="sun.htm" shape="rect" />
  <area alt="Mercury" coords="90,58,3" href="mercur.htm" shape="circle" />
  <area alt="Venus" coords="124,58,8" href="venus.htm" shape="circle" /></map>

9. 如何实现浏览器内多个标签页之间的通信?

利用本地的 Cookie,SessionStorage,LocalStorage,WebSQL,Application Cache,IndexedDB 等。

10. HTML5 的 form 表单如何关闭自动完成功能?

设置属性 autocomplete 为 “off” 以关闭自动补全功能。

11. label 标签的 for 属性有什么作用?

for 属性规定 label 与哪个表单元素绑定。当用户点击 label 时,焦点会自动跳转都对应的 input 输入框上。

12. iframe 有哪些缺点?

  • 不利于页面的 SEO;
  • 网页结构化差;
  • 增加 HTTP 请求;

13. WebSocket 如何兼容低浏览器?

使用 AS3 编写的 Flash 版本;或者使用轮询来代替 WebSocket。

14. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的?

访问离线资源,同时检测 manifest 文件是否更新,如果更新了则从服务器拉取新的资源并缓存在本地 Cache。

15. 页面可见性(Page Visibility)API 有哪些用途?

// 监听 visibilitychange 事件;
// document.hidden 返回当前页可见还是不可见;
// document.visibilityState 返回页面的可见状态;

// 主要应用场景为页面不可见时自动暂停网页播放的视频,当可见时继续播放;
var audioElement = document.getElementById("audio_id");
function onVisibilityChanged(event) {
  var hidden = event.target.webkitHidden;
  if (hidden) {
    // 伪代码;
    audioElement.pause();
  } else {
    audioElement.play();
  } 
}
function load() {
  audioElement.play();
  audioElement.loop = true;
  document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
}

16. Cookies、Session,、SessionStorage 和 LocalStorage 的区别?

Cookies 可以简单的理解为客户端浏览器的一种本地存储(4K)方式,对应于每一个不同的客户端都有一个不同的 “Session ID”,这个 ID 一般会存储在本地的 Cookie 中(也可以通过 URL 携带,但不安全)。并且在每次发送请求时携带上这个 Session ID 用来在服务器端区分用户身份;SessionStorage 是一种大容量(5M)的会话级别的本地存储方式;LocalStorage 是一种持久化的本地数据存储方式。所有的存储方式都需要同源(页面属于相同域名和端口)才能共享。

17. HTML5 Web Workers:

可以把耗时操作放在独立的 Web Worker 中运行,这样不会阻塞整个页面的脚本执行。Workers 与主线程之间可以通过 postMessage 方法进行双向的通信。

if(typeof Worker !== undefined) {
  var worker = new Worker("./worker.js");
}

worker.addEventListener("message", function(msg) {
  // deal with message from worker thread;
  msg = eval("({}&&" + msg.data + ")");
  if (!msg.result) {
    worker.terminate();
    console.log("Worker thread terminated!")
  }
});

// worker.js
;(function() {
  setTimeout(function() {
    postMessage(JSON.stringify({result:false}));
  }, 5000);

  onmessage = function(evt) {
    var d = evt.data;
    postMessage(d);
  }
})();



评论 | Comments


Loading ...