这是一篇面向“三无”人士的教程，所以零基础，也会有奇效。三无：无英语能力，无编程经验，无互联网认知。这篇文章对于“业内人士”，也有可读性，它只是从另一个层面看编程。然而，对于“负基础”的人士，想读懂并且动手完成练习，首先需要抛掉固有观念、惯性思维。负基础：偏见、缺乏自信、没有勇气、懒于动手、不爱思考，以及～理由生产厂家。
编程，没有想象中那么难，离大众也并不遥远。
中国有 8 亿微信用户，平均每人每天把玩微信数小时，当然，你也在其中；而微信，便是编程结果，因此活在当下的绝大多数人，离编程仅有一步之遥，如此之近，我来帮你捅破这层窗户纸。
微信，是一款 APP，是我后面的后面的后面要讲的教程内容，这里，我们先来说说～百度。
百度，大家都用过，一个用来搜索答案的网页。没错，这篇教程要讲的，便是：如何从一无所知，到实现一个看起来像百度那样精简的网页。
在开始之前，得先明确一点：互联网应用程序（微信、百度）实际上并不只是你看到的那样，正如微信不只是 APP，百度不只是网页。绝大多数普通用户看到、用到的，只是其冰山一角，然而站在学习的角度，我们完全可以将巨大的冰山，等同于一角，并在具备了一定编程能力和认知之后，根据自身意愿，自由探索整座冰山。
现在我们来看看百度长啥样子：
这个页面已经足够精简，但在本教程里，它需要进一步简化成下面这样子：
如此一来，便只有 logo、输入框、按钮三个元素。是吧，家喻户晓的百度首页，其实主要由这三个元素组成。
与之对应的三个代码标签分别是：
<img />(图片)
<input />（输入）
<button></button>（按钮）
这三个标签的字面意思，就是括号里的中文。英语不好的同学不必担心，在这个教程里，不会出现太多单词，而且它们即简单又好记，把心态摆正，在学习编程的过程中，一不小心也学会了英语。
现在来说说这三个标签：
为了让标签看起来更有共性，其实写成下面这样子也是可以的：
<img></img>
<input></input>
<button></button>
眼尖的你，定然会发现：所谓的代码，去掉讨厌的英文，其实不过是：<>和</>。没错，<>表示开始，</>表示结束。
是吧，代码并不可怕，它们不过如此。现在，我们来进一步拓展它：
<img src="logo.jpg" ></img>
<input value=""></input>
<button>按钮</button>
莫慌，包裹在<>里面的，叫作标签的属性，属性的作用是让标签产生效果。
img 是 image（图片） 的缩写，src是 source （资源）的缩写。
src="logo.jpg" 的意思是： <img /> 标签的资源来自一个叫 logo.jpg 的文件。
logo.jpg 是一个图片文件，logo 是文件名，.jpg 是后缀。
文件名用以区分，后缀用以定义格式。
当看到 jpg, png 我们知道它是图片文件，当看到 doc, txt 我们知道它是文档。
Ok，现在你知道：<img /> 标签需要导入图片资源，通过 src 属性来导入，编写代码的语法：src="ooxx.jpg"。
<input /> 是一个输入框，用户可以在里面输入文本内容。
value 的中文意思是：值。所以用户输入的文本内容就是 <input /> 标签的值。value="" 表示值为空；"" 表示空的意思。当用户在输入框里输入文字的时候，value 的值就会动态变成这些文字。
最后一个是 <button></button> 标签。<button> 表示开始，</button> 表示结束，中间夹着“按钮”表示这个按钮的名字叫按钮；当然你也可以像百度那样，把“按钮”替换成“百度一下”。
看到这里，你已经掌握了这三个标签的意思和用法。如果你决定继续学习，我会告诉你：在编程世界里，这三标签有一个共同的老大 “HTML”。
HTML 是一种标记语言，它没有语法，也没有逻辑运算能力，只有特定的书写格式。譬如：有开始，就有结束，在开始的地方，会有属性，属性让标签得以施展能力。如果光写标签，不写属性，你将在页面上看不到任何内容，也用不了任何功能。
HTML 的出现，拉开了 Web 时代的序幕，在互联网早期，Web 即网页，现如今，网页只能是 Web 的一个子集。关于 Web 的概念，同学们自行去拓展，这篇教程里，我们继续专注于网页的编写。
说到 HTML 你还需要知道 CSS 和 JavaScript，不要担心，我只是顺便一提而已，你并不需要记住，只需要知道：HTML、CSS、JavaScript 俗称“网页三剑客”。它们是1 2 3的关系，在 Web 的发展进程中，先有 HTML，后有 CSS，再有 JavaScript。
在互联网的蛮荒时代，HTML 主宰了网页的一切，为了满足各种各样的功能，HTML 拥有上百个标签，成千的属性。<img /> <input /> <button> src value 就是其中比较常用的“小弟”。 不要焦虑，现在是 2017年，实际上你并不需要全部掌握，通常，职业生涯中，常用到的标签，不会超过 10 个，常用到的属性，也才 2～30 个。而就在方才，你已不知不觉掌握了 3 个标签，2 个属性。在后续的教程里，你将很自然地熟知它们，至于那些不常用的，同学们在具备了一定的编程能力之后，可以按需自行拓展。
说了这么多，我们来动手撸代码吧～
首先，新建一个文件夹，然后在文件夹里再新建一个以 .html 结尾的文件。
文件夹和文件名字，同学们自行命名，如果你有命名恐惧症的话，可以像我这样，创建一个名为：demo 的目录，再创建一个名为：index.html 的文件。
现在，你需要一个顺手的编辑器，我个人比较偏爱 Sublime Text（点阅读原文可以获得下载地址）如果你不喜欢它，可以自行寻找任何你喜欢的编辑器。
将刚刚新建的目录，拖拽到编辑器里，双击 index.html，开始编写：
上面你看到一堆红色的陌生代码，然而仔细端详的话就会发现它们似曾相识。没错，奕如<button></button> 标签，有开始，也有结束，成双成对地出现。
在 HTML 的世界里，标签和标签之间，是层层嵌套的，嵌套别人的叫“爸爸”，被嵌套的是“儿子”，嵌套爸爸的标签是“爷爷”，被儿子嵌套的标签叫“孙子”，聪明如你，依次类推。
为了避免多层嵌套后找不到北，分不清谁是“爸爸”，谁是“儿子”，一般我们在书写的时候，会用缩进两个空格来表示嵌套关系，在调整格式后，应该是下面这样子：
写到这里，我想告诉你，这便是一个完整的网页代码。所有的网页，都是这个结构。
一并9行，下面讲一下他们都是谁，能干嘛：
第一行：<!DOCTYPE html>
这是一个声明，告诉浏览器以下代码都是 html 格式。
"!" 感叹号是声明的开始，知道它表示声明开始就可以了。
“DOCTYPE”实际上是一个组合单词，前半段 DOC 是 document（文档）的缩写，后半段 TYPE 的中文意思是：类型。所以第一行的意思：文档类型是html。
第二行和第九行： <html></html>
看到 <html> 这个标签，同学们应该很熟悉，上面围绕着 HTML 展开了许多文字。实际上现在的 HTML 标签不区分大小写，如果你愿意的话，你也可以写成 <HTML></HTML> 。
如果你还没有忘记 HTML 标签都是成对成对出现的，那么这里你应该能意识到：网页代码在声明格式之后，由 <html> 开始，于 </html> 结束。
第三行和第五行： <head></head>
依然是成对地出现，这个标签的字面意思：头。顾名思义，表示 HTML 文档的头部。头部区域，一般定义一些资源链接、网页标题、编码格式。
第四行：<title></title>
这个标签的字面意思是：标题。如果在开始和结束之间写入一句话（<title>我是标题哦</title></b>我是标题哦<b>），那么就会出现在浏览器地址栏的上方，如下图：
第六行和第八行： <body></body>
这对标签的意思：身体。没错，HTML 文档流不但有头部，还有身体。body 的这一部分，便是我们代码主要书写的地方。也是网页开发的重中之重，几乎 99% 的代码，最终都将被堆砌在 <body>和 </body> 之间。
讲到这里，你又顺势学习了：
<!DOCTYPE html>
<html></html>
<head></head>
<title></title>
<body></body>
1 个格式声明和 4 对标准标签。
如果你觉得都能记住，那就把它们记住，如果记不住也不打紧，这些都是模板标签，即：任何一个网页都会有的结构性标签，而且，许多智能编辑器都会帮你自动创建。
接下来，我们把前面学到的：
<img />
<input />
<button></button>
整合到标准 HTML 框架中去，开始实际意义上的代码编写。
如果你有认真在看，不难发现，上面的代码多了一行：
<meta charset="utf-8">
莫慌，这一行的作用是解决中文乱码的问题。
上面讲过，在 HTML 文档流的头部，也就是被嵌套在 <head> 和 </head> 标签之间的位置，一般是引入外部资源、定义编码格式的地方。在后续的教程中，这个部分除了 <meat /> 还会出现：<link /> <style> </style> <script> </script> 等标签，这里只需知道即可。
So，读到这里，你已具备了一定的编程知识并书写了几行代码。现在在 Sublime Text 中打开 index.html 文件并点击右键，选择在浏览器中打开，一切正常的话，应该会看到下面的页面效果:
是的，这并不是百度首页的样子。
看不到 logo，因为还没有引入图片资源；输入框和按钮都很丑，位置也不对，因为还没有进行样式调整。
但今天已经说得太多了，且这篇教程的目的也已经达到，截止这里，你已经知道一些网页相关的由来和些许的动手能力，一次不能太多，刚好即可。
在下一篇教程里，我将着重讲解样式的部分，即：CSS，弄懂它，你便可以完成一个货真价实的百度首页。
好好消化一下，下篇再续 ：
