百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

让我们来设计一个书籍标记语言吧

作者张正全课程第二天:给自己做一个在线简历吧4971次浏览1962018-04-25 16:15

要理解 HTML,我觉得最好的办法就是从起源开始入手,它是怎么诞生的?为什么会诞生?
为了弄清这个问题,让我们看下面的故事,并从头开始设计一个书籍记标记语言(BML)吧。

(以下故事纯属虚构,如有雷同纯属巧合)


标记语言(Markup Language)

首先,场景是这样的,出版社A想储存书籍的完整数据,但他们只想用文本格式保存。
很简单,我们只需要把整本书的内容转成字符串保存就好了

我是一本书
张三
目录
第一章
第二章
第三章
第一章
文本文本文本
第二章
文本文本文本
………………

但是这样做很多问题,首先就是不方便用于检索,例如,我想找第二章的内容,那我要怎么去匹配文本呢?

考虑到这个问题,我们就有了一个叫标记语言(ML)的解决方案,我们可以给书的每个部分打上一个记号,这样我们找起来就方便了

书名. 我是一本书
作者. 张三
目录. 第一章
目录. 第二章
目录. 第三章
章. 第一章
节. 文本文本文本
章. 第二章
节. 文本文本文本
节. 文本文本文本
…………

但是上面的方式有个不好的地方,如果在我标记的部分里面,还有其他我想加标记的地方呢?
例如:

节. 文本文本文本引用引用引用文本文本文本
节. 文本文本文本
…………

所以我们设计的标记语言,需要可嵌套才好用,于是我们设计成这样:

<书名>我是一本书</书名>
<作者>张三</作者>
<目录>
  <目录项>第一章<目录项>
  <目录项>第二章<目录项>
  <目录项>第三章<目录项>
</目录>
<>
  <章标题>第一章</章标题>
  <>
    <段落>文本文本文本<段落>
  </>
</>
<>
  <章标题>第二章</章标题>
  <>
    <段落>文本文本文本</段落>
    <引用>文本文本文本</引用>
    <段落>文本文本文本</段落>
  </>
</>
…………

到这里,我们的 BML 就有了一个雏形

标准与规范

看到出版社A设计出了一款 BML,出版社B也不甘落后,也设计出了自己的 BML
它在出版社A基础上,分离了信息部分和正文部分,最外层的<书籍>,是为了让标记严格嵌套,同时也表示出,他是整个文档的根部,所有的内容都从这里开始延伸,同时还添加了一个 BOOKTYPE 的标记,用来区分开出版社A的 BML

<!BOOKTYPE BML PUBLIC B BML - 1.0>
<书籍>
  <信息>
    <书名>我是一本书</书名>
    <作者>张三</作者>
    <出版社>B</出版社>
  </信息>
  <正文>
    <目录>
      <目录项>第一章<目录项>
      <目录项>第二章<目录项>
      <目录项>第三章<目录项>
    </目录>
    <>
      <章标题>第一章</章标题>
      <>
        <段落>文本文本文本<段落>
      </>
    </>
    <>
      <章标题>第二章</章标题>
      <>
        <段落>文本文本文本</段落>
        <引用>文本文本文本</引用>
        <段落>文本文本文本</段落>
      </>
    </>
    …………
  </正文>
</书籍>

看到出版社B的优化版 BML,出版社A连忙推出了他的下一代 BML,增加了一个叫属性的东西,这样在一个标签里就可以描述更多的信息了

<!BOOKTYPE BML PUBLIC A BML - 2.0>
<书籍 语言=中文>
  <信息>
    <书名>我是一本书</书名>
    <作者>张三</作者>
    <出版社>A</出版社>
  </信息>
  <正文>
    <目录>
      <目录项 目标=1>第一章<目录项>
      <目录项 目标=2>第二章<目录项>
      <目录项 目标=3>第三章<目录项>
    </目录>
    <>
      <章标题 索引=1>第一章</章标题>
      <>
        <段落>文本文本文本<段落>
      </>
    </>
    <>
      <章标题 索引=2>第二章</章标题>
      <>
        <段落>文本文本文本</段落>
        <引用 出处=另一本书>文本文本文本</引用>
        <段落>文本文本文本</段落>
      </>
    </>
    …………
  </正文>
</书籍>

出版社B看到了,又增加了一些新的标签,让 BML 能够更清晰地表述各种内容,例如 <注音><公式> 等标签……

在AB的互相较劲中,BML 被设计得越来越完善了,不过他们都想到了一个问题,既然对方那么厉害,要不一起合作吧?
最终AB达成了一个共识,大家一起出一个 BML 标准,还可以让整个生态圈受益。
于是在AB的合作之下,第一个 BML 标准 S(standard)BML 1.0 终于出台了。

随着时间的推移,SBML 的发展日益壮大,不知不觉就出到了第5版 SBML 5.0,在这期间,虽然有其他出版社尝试推出他们自己的 BML,但是都不如 SBML 的使用群体大,SBML 最终占领了几乎整个出版社圈,这就是 SBML 的故事了。


后记

其实我没有详细了解 HTML 的发展史,上面的故事真的是乱编的,不要随意代入。

刚开始学 HTML 的时候,我对着 HTML 标签的列表看了好几天,然后开始怀疑人生,看完了我还是不会写啊……。
后来我想通了一个问题,与其钻牛角尖思考一个某某东西有什么用,还不如去思考在某个场景中,怎样才是更合理的做法。(当然,先通读一次建立基础是必要的)

最后希望这篇文章能给大家带来一些启发
thank you for reading.

28条评论