前端知识体系回顾——第三章 HTML 2

posted @ May 9, 2016 • 陈凯 • HTML

摘要：「前端知识体系系列第三章，这部分主要是HTML内容，比较简单，容易掌握，分为两个部分讲解。这是第二部分。」

11.data-属性的作用是什么

为HTML自定义属性。data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取

<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
div.dataset.commentNum; // 10

需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。

12.如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些

  • 更加语义化的新标签;
  • 表单的改进;
  • 页面编辑API;
  • 图形绘制canvas，webGL;
  • 历史记录管理history API;
  • 本地储存storage;
  • 本地数据库;
  • 离线应用;
  • 文件API;
  • 通信websockets;
  • 扩展的XMLHttpRequest;
  • 全双工，双向通信webworkers处理线程;
  • 获取地理位置信息Geolocation API;
  • 多媒体相关的API，video，audio;
  • 与页面显示相关的API;
  • page Visibility API;
  • Fullscreen API;
  • 原生拖拽API;
  • 桌面通知API等等模块儿。

13.iframe有那些缺点

  • iframe会阻塞主页面的Onload事件；从而影响了js和css的加载。产生跨文档的难题。
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。会产生跨文档的问题。
  • 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

14.<strong>，<em>和<b>，<i>标签的区别

  • <strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。
  • em是斜体强调标签，更强烈强调，表示内容的强调点。相当于html元素中的 <i>...</i>;
  • < b > < i >是视觉要素，分别表示无意义的加粗，无意义的斜体。和< span >一起在没有明确语义化的地方使用。
  • em 和 strong 是表达要素(phrase elements)。