前言：
老郭是我从小到大的好兄弟，从小就是一个神童，低年级时就秒杀全校六个年级的奥数选手。还是低年级时，老师就让他上高年级的奥数班。而我嘛，蹭着和他要好的关系，偷偷地去上课。（后来听说是因为他一个低年级的孤单，跟老师说让我也一起上。）
后来因为各种原因，一个小天才也算是。。。没啥发展。不扯远了，最近老郭有兴趣加入前端大军，于是我便给他做一些培训。
正文：
【第一课】:
我给老郭介绍了HTML的概念，并告诉他我认为，程序员最重要的是自主学习能力，我不可能有太多时间和机会，教会你很多具体功能如何实现。做过程中我会努力假装自己什么都不会，然后我们一起通过网站，书籍，社区等等，去学会这些东西。技巧能力只是一个表现，对个人而言，最重要的自主学习能力。有了它之后，再付出汗水，就可以有收获。
HTML基本概念：
"超文本标记语言"，"标签语言"。这是常见的描述，它不像一般程序语言，有明显的程序入口，有明显的执行顺序。它更像是一种标识，告诉我们这里有一个输入框，这里有一张图片。
在课程中，老郭总是用他那点微薄的C#基础说：“噢？它现在运行到这个'<input>'是吗？”。现在跟他具体讲解浏览器根据html渲染过程，肯定是为时过早了。
我让他新建一个记事本文件，并敲了helloWorld程序（wow），并将文件后缀改成.html，后用双击打开这个文件：
<!DOCTYPE html>
<html>
<head>
<title>你好，世界。</title>
</head>
<body>
Hello World
</body>
</html>
结果为：
用记事本完成HELLO WORLD
老郭当时就懵逼了，“就用记事本？不用来个VS什么编译一下吗？搞个EXE什么的？”
--“是的，它不需要进行编译，在程序里看来，它就像一个静态文本资源一样静静地躺着。”
之前老郭曾形容编程就像在写英语，计算机就是翻译，我们用的程序就是中文。我顺势问老郭：“即便是英语文章，也有翻译帮我们翻译，那这个HTML文档的翻译官呢？”
老郭原先认为是有特定的编译软件能执行这个工作，但现在用记事本写出了helloWorld的网页，他有些迟疑：“...可以直接在浏览器上翻译？”
--“是的，负责翻译工作就是浏览器（老郭感叹，原来浏览器这么牛B。）,浏览器负责将html文档里描述的界面，渲染在自己的窗口上，使我们最后得以看到‘中文’。”
--“浏览器如此承担这么重要的角色，但是你看我们有这么多种多样的浏览器，有IE 360 谷歌 猎豹 搜狐 UC 等等，正因为翻译的人不同，所以我们可能会看到略有差别的页面。这样也就是大家经常提到的【浏览器兼容性问题】
在原理之外，其实老郭已经猜到了，编写HTML的软件工具，只要是“文本编辑器”就可以了。但肯定码农有码农用的工具，于是我向他安利了"sublime text 3"。
词典：
好了，现在基本概念有了，工具也有了，老郭又该如何开始去学这门“外语”呢？
学外语，除了发音之外，我们最开始往往学单词，所以，让我们来翻翻HTML的词典吧：
w3school.、菜鸟教程。这两个网站的内容大同小异，在往后学习前端的日子里，少不了和它们打交道，除了现在的html，以后的CSS JAVASCRIPT JQUERY 甚至一些后端的基础知识，都能在上面查到很多知识。
相对而言国内镜像的w3School，较少更新。而菜鸟教程的内容比较全面，更新。（顺便提供一个国外镜像的w3School链接）
来来，我们具体翻翻：
Paste_Image.png
你可以在网站里看到有这样的菜单，这里只截取了一部分。可以看到，里面有图片，有文字，有段落，有标题，有颜色巴拉巴拉拉拉。。
来，让我们点开HTML 元素一栏：
像这种身经百战的API文档，自然都是精简，语义直达不罗嗦的。所以尽量每一句都认真看并理解。
第一句：HTML 文档由 HTML 元素定义。
第二句（实际是图、简化为话）：元素分为“开始标签”“内容”“结束标签”
对照我们之前hello World的代码来看，我排排格式并加一些注释来解释一下结构：
<!DOCTYPE html>
<html> <!--html元素的开始标签-->
<!--↓html元素的内容↓-->
<head> <!--head元素的开始标签-->
<!--↓head元素的内容↓-->
<title> <!--title元素的开始标签-->
<!--↓title元素的内容↓-->
你好，世界。
<!--↑title元素的内容↑-->
</title> <!--title元素的结束标签-->
<!--↑head元素的内容↑-->
</head> <!--head元素的结束标签-->
<body> <!--body元素的开始标签-->
<!--↓body元素的内容↓-->
Hello World
<!--↑body元素的内容↑-->
</body> <!--body元素的结束标签-->
<!--↑html元素的内容↑-->
</html> <!--html元素的结束标签-->
这是组成一个html文档最基本的元素组合，观察hello world代码，我们可以发现根据“开始-内容-结束”为基础的元素，在组成html的时候，是可以嵌套组合的，即在元素内包含其它元素，如上面的html元素，它的内容中就是一个head元素和一个body元素。
其实还是有一些例外的，这里介绍一类特殊的元素，称为空元素，这类元素没有结束标签，在开始标签就结束了，例如br、input等。不用太过关注“空元素”这个概念，习惯了哪几个元素没有结束标签便可。
各式各样的元素就组成了一整个HTML文档了，无论是图片，视频，音乐，脚本，样式，文字都有对应的元素承载，在往后的学习生活中，会继续遭遇到并掌握熟练它们。
关于html head body三个元素（也有人称为三个标签），更详细的信息，可以查看网站中的具体介绍。
另外啊：关于这个三个最基本的元素：
在sublime text 3 中的html文件中，我们输入<html 它就会出现代码补全，选择之后会给一个最基本的html文档结构代码出来：
sublime html补全提示
sublime html补全结果
课后作业：
每一次交流后，我会给老郭留下一些作业，作为加强复习，或者引导预习。
1.插入一个图片，并把图片和文字居中显示。
2.在sublime text 3中如上文般敲入hello world代码，保存在在浏览器中查看，会发现与前面略有差别，具体为：
用sublime Text 实现的hello World
呐，标题处的中文不知道变成了什么鬼，想办法解决哈。
网友评论