前端工程师入门（一）为什么我们需要HTML

前言

笔者是前端工程师。现任某互联网前端工程师。周围有很多的其他行业（包括非前端工程师）在学习前端。他们遇到了很多的问题和疑惑。在帮助他们的过程当中，逐渐有了一些自己的想法。特此，我将书写一个前端的系列文章，帮助对前端了解不多的人来入门前端。水平有限，如有错误还请指正。：）

简单来说，前端工程师就是负责网页的展现和交互。（浏览器里面的，包括电脑和手机的浏览器，都是属于前端工程师的活）

浏览器从服务器拿到一个 HTML 文档（这个文档就是一堆字符串）。然后加载资源，渲染，就是我们日常上网打开网页的全部过程。前端工程师的工作就是编写 HTML 文档及相关资源。

1、现在我们网页要渲染一个图片。

最简单的就是服务器返回一个图片的URL：http://www.jianshu.io/1.jpg。浏览器拿到这个 URL，下载图片，然后展示出来。

2、我们要显示图片和链接。

这个时候就很麻烦了。因为我们既要返回图片地址，而且还要返回一个链接。假设我们这样设计：image:http://www.jianshu.io/1.jpg,link://www.greatytc.com。这个时候浏览器只需要根据逗号分隔（逗号不是很靠谱），以及link 来做渲染。

3、如果我们显示层级的嵌套。比如标签里面放一个image。

这样就很难做到了。

HTML为了解决上述问题。设计了很多的标签。来解决上面的问题。我们来看一下 HTML如何解决上述的问题。

1. <img src="http://www.jianshu.io/1.jpg"/>

2. <img src="http://www.jianshu.io/1.jpg"><a href="//www.greatytc.com">简书</a>

3. <a href="//www.greatytc.com"><img src="http://www.jianshu.io/1.jpg"></a>

这样完美解决了上面的问题。

其中HTML规定 img 是一个闭合的标签。里面无法嵌套。这类闭合的标签语义完整。所以不需要嵌套。类似 a 标签，里面可以是文字或者图片。需要包含文字或其他标签补充语义的是非闭合标签。

HTML 里面每一个标签都是有它特殊的含义，都是为了解决某一个特殊的语义。

html标签。代表整个文档。分为头部 head 和身体 body 。

head标签里，包含了该文档的 样式和脚本（接下来会讲到）。以及该HTML文档的标题和介绍。以及其他的基本信息。

body标签，即为身体。包含内容的所有标签。（整个浏览器窗口是 html标签）

div：全称DIVision，即为划分。div 标签主要是划分其他标签的。

image，p，span，a，em，i，strong，table等都有其特殊的含义。

后来 HTML5 扩展出来了 article、section、header等标签。更加丰富了html的语义化。（当然在JSX里面，语义化更加直白明了。算是升级版，也将是未来的方向）