前言
笔者是前端工程师。现任某互联网前端工程师。周围有很多的其他行业（包括非前端工程师）在学习前端。他们遇到了很多的问题和疑惑。在帮助他们的过程当中，逐渐有了一些自己的想法。特此，我将书写一个 前端的系列文章，帮助对前端了解不多的人来入门前端。水平有限，如有错误还请指正。：）
正文
简单来说，前端工程师就是负责网页的展现和交互。（浏览器里面的，包括电脑和手机的浏览器，都是属于前端工程师的活）
浏览器从 服务器拿到一个 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为了解决上述问题。设计了很多的标签。来解决上面的问题。我们来看一下 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里面，语义化更加直白明了。算是升级版，也将是 未来的方向）
