前端学习之路

    说起前端，我想不论是刚入门的朋友，还是已经在前端行业摸爬滚打了多年的大神来说，心里想到的也一定是那三大件了，让我们一起说出来是哪三大技术，是不是，抽烟、喝酒、烫头。

额，当然不是了。应该是HTML、CSS和Javascript，什么，你没听说过，没关系，不要慌，我们能挺住，今天菜鸟我就将带领那些没有接触过的朋友，来进入前端学习的第一课。

有的朋友可能会问，既然你说了，前端基础分为三大阵营（HTML、CSS、Javascript），那么我们要从哪开始呢？

既然你诚心诚意的发问了，那我就来告诉你，当然是从最好欺负的开始了，柿子还是要捡软的捏嘛，那今天菜鸟我就带领朋友们欺负欺负HTML这个柿子把。

 初探HTML

话不多说，进入正题，今天咱们就来学习一下HTML，磨磨唧唧说了半天，那到底什么是HTML，我就来给大家说一说。

HTML：全称HyperText Markup Language，是不是前两个单词都看不懂，就认识一个Language，其实菜鸟我也不认识，不认识没关系，我们不是有给力的翻译工具吗，来，小手打开翻译软件，把这三个单词输进去。噢，原来HyperText Markup Language的中文意思是“超文本标记语言”。

那这玩意有什么用，首先，我们先从字面上理解一下，文本是什么你应该知道吧，不知道没关系，来百度一下。

文本：计算机的一种文档类型。该类文档主要用于记载和储存文字信息，而不是图像、声音和格式化数据。常见的文本文档的扩展名有.txt、.doc.、.docx、.wps等。

哦，原来文本就是一种保存文字的载体和工具，那超文本是什么呢，不忙，在对超文本进行认识之前，我们先来做一个类比，就拿人来类比好了，人就是我们自己，那超人，是不是就是拥有某些特殊能力的人，比如漫威里的英雄们，没看过漫威的自己去看一下，那些屌的不要不要的超人们。好了，文本和超文本的关系，亦如人和超人的关系，也就是具有超能力，更加牛逼的文本了，那说了半天，什么是超文本，来百度一下，你就知道。

超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以链结到其他位置或者文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多，目前最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式。

那超文本是什么，我们来简单的总结一下，是不是就是，从一个文本中的某个地方链接到这个文本中的其他地方，或者是链接到其他的文本。请注意，我们提到的“链接”这个词汇，这是整段话中的重点。

哦，你说还是看不懂，没关系，打开百度，是不是看见这么一个搜索框，在哪个框里面写点东西，你问我怎么写，用键盘呀，你问我写什么，随意啦。就直接输超文本好啦。

 

现在我们是不是看到这个一个网页，那恭喜你，你离真想越来越近了，如果你问我，这特喵的不是百度吗，老子早就会用了，年轻人，有点耐心，不要急好么，现在出现在我们面前的页面，我们习惯性的称之为网页，而“网页”，正是一种超文本，只不过这个超文本不是保存在我们本地计算机中，而是在遥远的服务器端而已，你问我什么是服务器，这不是重点啦，重点是现在的这个网页就是一个超文本，那之前我们总结过的内容，反复提及的一个词汇“链接”，在这里就会出现了。

在上面的这个页面中，我们是不是看到了一个红色的小箭头，上面写着“超文本 百度百科”这么几个字，来，用鼠标点一下，是不是来到了这么一个页面。

        

是不是看到了这么一个东东，就是这个点击的过程，浏览器便从一个网页链接到了另一个网页，这个简单的过程便是链接，这也是超文本的特性所在，相比于一般仅用于保存文字的文本来说，超文本的一个强大之处，也就是能够从一个超文本链接到另一个超文本。也就是平时我们上网时，从一个网页跳转到另一个网页的过程了。

好了，讲到这里，相信大家也应该对文本和超文本有所了解了，那么我们接下里，咱看一下“超文本标记语言”中的后半段文字，也就是所谓的标记语言。

那什么是标记语言，不懂，没关系，你肯定想到了，怎么办，百度呀，来，走你。

标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。

标记语言不仅仅是一种语言，就像许多语言一样，它需要一个运行时环境，使其有用。提供运行时环境的元素称为用户代理。

这段话这么深奥，看不懂，没关系，我们抛开这段话不管，先来剖析一下“标记语言”这四个字。那就先来看一下什么是标记好了，那什么是标记，来，随便从什么地方拿出一本书，随便啦，只要是带文字就行，（不要拿一本图画书就行），然后找一个记号笔，没有记号笔的话，钢笔、水笔、碳素笔、铅笔，什么笔都行啦，反正能写字就行，然后握着你的笔，将你书上的一段文字，用笔画一下，怎么画，随意啦，好了，标记完成了。

那再来看一下什么是语言，这个看似简单的东西，其实没那么简单，语言嘛，汉语、英语、日语、法语，这些都是语言，语言的本质是什么，是不是用来交流的，传递信息的，我说你好，你就知道我是在和你打招呼，我说“HI, MAN”,是不是同样是在打招呼，但是我说你好时，只有懂汉语的人才能听懂，我说“HI,MAN”的时候，是不是也只有懂英语的人才能理解，那语言是不是我们用来沟通的。

那么，同样的道理，计算机和我们之间的沟通是不是也需要一种语言，那计算机和我们之间的沟通则是通过页面来进行的，（这个时候我们不要去想什么指令，程序和代码），假设你现在和计算机进行沟通，就是通过浏览器中显示出来的页面，而我们看到的实实在在的页面，就是一种语言，这种语言便是标记语言，当然了，HTML只是标记语言的一种。

那么我们现在知道了，什么是标记，什么是语言，我们看到的页面是标记语言，那究竟什么是标记语言，其实顺着这个思路，你会发现，其实我们平时所看到的网页中信息，比如我们每天浏览的新闻，也都是由我们所熟知的汉字组成的，当然其中还可能夹杂着一些图片，而这些新闻页面中文字，也只不过是通过页面的形式展示出来而已，遥想一下，在哪个没有网络，没有计算机的时代，我们每天获取信息的途径，是不是通过报纸，广播等形式。

但是不论这些载体怎么变化，我们是不是都是去听，去看其中的文字，而文字无论是通过报纸，还是文本，还是超文本来表示，是不是本质上还是文字，而这些文字经过标记之后，是不是就会变得更加显眼，让我们更加关注，同样的道理，一台计算机所展现出来的网页，想要为我们所认识并且想要凸出某些东西的话，也需要进行相应的标识（同标记，使用标识只是为了便于理解）处理，这些用来对文字进行标识的东西（这里指的是用来标识的文字的东西，就好比那些你在书本中划出的线条，我们所指的标识，便是那些线条，而不是文字本身），便构成了标记语言。（在标记语言中，我们所指的标识便是那些标签）。

现在我们已经了解了超文本的概念，以及标记语言的概念。

那什么是超文本标记语言，我们是不是可以将超文本标记语言理解为，它是一种我们与计算机，或是计算机与我们之间来沟通和传递信息的语言，其次，传递信息的载体，是一种通过标识符标记过的超文本。也就是在超文本里所承载的文字和信息，是被标识过的，那我们需要怎么做，才能够像是在书本上通过记号笔来标识文字那样，在超文本当中进行标记呢？这便是我们下节课的内容。