同样的地方，同样的时间，又跟大家见面了。想学习前端朋友可以加我们的前端学习群：617327703

很多人问我，前端开发入门怎么开始？这里呢，先看下我之前发的文章有大体的概括思路跟流程在里面。今天主要分享入门第一篇： HTML。

由于时间有限，空间有限，关于HTML历史我就不唠叨了，大家去w3c，菜鸟教程都可以查看的到，我主要是跟大家讲讲怎么快速理解并且掌握HTML。在文章最后我会给出总体轮廓图，让大家看完能够清晰的带着思路收藏起来。

一样的老规矩，列出熟悉的流程：

1.HTML是什么

2.它跟浏览器有着什么样的关系

3.HTML在工作中常用的东西是哪些

这四个流程讲下来，你就知道我们打开的网页原来就是这个样子。

继续，长篇大论我就不讲了，感觉有点虚，直接进入主题关键是“懂”。那么首先第一步，HTML是什么？

这样理解吧，我们可以把浏览器，屏幕当成一张A4纸，你在纸上面写个人奖励，有头有尾，还有中心，那么网页也是一样，它也有头，有尾，组合在一起的。我们只不过换了个地方，换了种方法在写东西而已。这样在你的大脑里，HTML就相当于是A4纸了，正如HTML的定义也是相当如此，即：它是超文本标记语言(相当于可以理解为很高级的A4纸)。带着这种理解去开HTML的定义，你肯定收获很大，比起你脑袋一片空白去看代码要事半功倍的多。

第二点，这个HTML跟浏览器是怎么配合的？我们可以简单理解为，你的A4纸，写出来的东西，得让人看的懂吧，别人在看的时候是不是在分析你的文字或者图片。那么同样的，浏览器它作用于帮助大家把代买看懂，然后用大家看的懂得形式展现出来。起到一个解析你的HTML作用。那么总结下来就是你写的HTML，浏览器帮助你解析展现给大家。

到这里，说了这么多，一个代买没见着？笑话，这怎么分享啊！ 不，我觉得大家先大脑有个概念，这样下面的代码就几分钟理解透彻。

好了，小二，来份HTML！ 。。。好嘞客观稍等片刻。。。热腾腾的HTML上来了想学习前端朋友可以加我们的前端学习群：617327703

菜名：HTML

这是一个标准的HTML5文档(不要怕，其实还是HTML，只是版本不同而已，不要想的太复杂)，我们来用A4纸的例子解释下。首先第一行，文本类型HTML的意思，直接翻译就好，因为浏览器不只会读懂HTML，还会有其他的。第二行是这个文档解析标准英文。第三行head的意思就是头咯，那么这就是文档的头，相当于A4纸的title，里面有meta告诉浏览器用的，说我是中文，不要给我解析成什么俄罗斯语言。。。继续下面body，身子的意思，A4纸正文的意思。

为什么我不跟大家先说这些是标签呢？--因为，个人认为，先知道这些代表什么，然后再知道怎么组装他们更适合理解。

那么看完上面现在跟大家讲：标签是什么，其实理解简单点就是组合HTML的规则，比如这个标准的HTML文档，你要组合它，你的按规则来，不能乱写。那么组合方法是什么，其实呀，用HTML规定的东西拼接起来，HTML规定标签有两种，单标签跟双标签，单的就是上面的meta，双的就是head，成双成对出现的就是双的，单个出现的就是单的。这还不好理解呀，那么问题来了，有多少标签？ 网上搜索你就知道了，带着这样的理解思路，一看就懂咯。

现在回到流程第三步，最常用的在开发过程中的有哪些除了上面标准的格式。

以上就是最常用的了，仔细看可以看到有单标签，有双标签。这些标签组合上HTML标准格式，就是我们看到的网页了。

那么，有人就问了，我该怎么写呢？不急，继续往下看。

仔细重回上面看，可以看到body里面什么也没有，这里就是你可以写常用标签的地方，网页标签组合的规则是：由外到内。也就是说它们存在包含关系，比如：一个框框里面有文字

div就是框，就是拼接的砖块，它包含着你想表达的东西。那么，整个网页外层就是一个大大的div框，里面包含了文字，图片，选择框等等我们看到的东西。

理解方法思路大概就是这个样子，这些里面还有数多标签，大家可以去网上查查，然后这样去理解，基本一看就懂了。哦？原来网页就是这个样子。。。下面是我画的一张大体图片。

用HTML解释下上图(基本简单的网站模型)，这个外面粉色的框是个大的DIV，包含了里面的头部，轮播图，还有三块内容．头部也是一个DIV块，里面包含了我们可以选择进入的导航。轮播图也是一个DIV，包含了我们看到的图片。下面三块内容也是一个DIV，包含了三块内容，三块内容分别又有DIV包含着。这下明白了，从最外层包含到最内层，就是前面讲的：由外到内。这样整个的结构清晰了，大家再去看些资料，就OK了。HTML文档其实就这么简单，没有逻辑成分，只要找到理解技巧，看下就会了，比起看几个小时的视频而且还很多的专业名词去理解要来的轻松些。

那么这些砖砖瓦瓦都砌上了，怎么把它们放到理想的位置上呢？其实呀，就是下一篇将要分享的CSS在搞的鬼！想学习前端朋友可以加我们的前端学习群：617327703