标签语义化
一开始, web 是作为静态数据展示的工具而存在的. 出于在互联网上传播文档, 展示信息的需要, html 被创造了出来. 一般而言, 一篇文档都会有标题, 段落, 这些成为了这篇文档的结构. 当在计算机上展示这篇文档的时候, 需要以同样的结构去展示, 就要用到 HTML 中各种各样的标签. 这时候的问题是如何使用正确的标签才能保持文档的结构, 即标签语义化.
一个最简单的例子就是标题和段落就应该使用 < h1>...<h6 > 和 < p > 标签. 虽然一律使用 < div>, 加上合适的样式, 对最后的显示结果而言没有任何影响, 但是却因此失去了文档本身的结构.
基于同样的目标, html5 更新了很多语义化标签,<article>,<section>,<header>,<article>,<footer>... 因此在选择标签时, 需要考虑标签语义化. 至于为什么要语义化, 为什么要保持文档的结构, 因为结构化的内容更容易被计算机处理. 搜索引擎能够根据标题 "理解" 一篇文档主要在说什么(SEO), 盲人浏览器可能会把标题读出来. 若文档不是结构化的, 文档就无法被搜索引擎理解, 就无法被盲人用户 "阅读".
动态可交互的页面
随着 Web 的不断发展, 浏览器 / 服务器 (BS) 的结构相比需要安装的应用更加轻量化, 小程序的出现和发展也是类似的情况, 相比一个 App, 直接在浏览器里面打开更方便. 因此越来越多的应用采用了 Web 的形式, 即 Web Application, 此时的页面不仅仅只是静态数据展示, 更多的是与用户交互, 为不同的用户提供不同的内容. HTML 作为一个标记语言, 其主要内容有元素, 属性, 注释. 元素就是标签, 属性就是标签的属性, 注释就是说明. 这些都是 HTML 本身, 作为一个文本文件中会存在的. 而要为页面提供动态的能力, 那就需要脚本的支持, 脚本有脚本的语言, 目前来说就是 JS.
既然要用脚本去操作页面, 而页面在浏览器中是以 DOM 树的形式存在的, DOM 树又是由 HTML 文件来定义的. 此外, 在浏览器中操作页面时同样离不开浏览器本身提供的一些功能, 例如前进后退按钮. 因此, 我们有了 DOM API 和 BOM API. 这些都是标准或者规范, 其意义是为脚本提供定义和约束, 各大厂商则是实现这些标准.
简单来说, DOM 和 BOM 为脚本提供了操作页面的能力, 为动态页面提供了可能.
来源: http://www.jianshu.com/p/f80dcdc5eaec