那些年的 Hello World （HTML）
那些年的 HTML
說來話長，那些年開始於 2002年，我開始寫第一個網頁的時候。其間我和大夥兒一樣寫過很多很不同的 Hello World，有 c語言 ，Java語言，HTML語言，Asp，C# .NET，C++語言，Ruby語言，Python語言，Bash指令碼，Scala語言，等等。最讓我記憶猶新的也就是伴我整個 IT 入門到大學再到工作成為的整個歷程。
下面回憶一下我的 HTML 心理歷程，經歷，成長。
2002年，一個電話開始的程式設計師起步
那時候我才剛剛上高中，玩了幾個月的時間 “傳奇” 遊戲之後，成績從全校第一直掉到220名。然後我開始反思，想從哪兒摔倒就從哪兒爬起來。於是打了個電話，那時候有各種 168 電話服務開放，其中有一個 168 專門解答 IT 領域問題。於是我問了一個非常基本的：“請問，什麼是軟體？”，這個問題花了我老媽200塊錢的電話費才弄了半懂不懂的結論：“區別於硬體，是一種看不見，摸不到，但用得的到的放在電腦裡邊的東西。” 就著這個問題，沒過多久我從國外的網站第一次學到 HTML 這個東西可以做網站。
我用所有攢下的錢，在網咖包了一臺奔騰3處理器的電腦，網管去掉了一個叫 “還原精靈” 的系統自恢復的工具軟體，開始了我的 Web 學習之路。
跟著網上說的（什麼網我也忘了，好像是 google.com 裡邊找到的東東）第一步就是下載了 “Netscape Browser”（花了2天多的時間，網速很慢的，東西又很大，總是下載失敗），它本身也是開發網站的 “IDE”，功能和 “Front Page” 很像。我的第一個頁面就是從這個瀏覽器開始的，就是 New - File - HTML ….，寫了一句話，不是 “Hello World”，而是 “快樂小強”。。。回頭想想當時的我怎麼那土。。。
後來的幾個星期一起用 Netscap 開發了一個網站，註冊了一個二級域名和只有 500K 的免費空間，釋出出去了。就一頁面，是一個導航頁面，把一大堆網址做成超級連結放到了表格中。
幾個星期後，開始用記事本
這時候我已經讀了一個論壇文章（英文的，那時候中文資料很少），說是用 notepad 入門有助於成為一個優秀的開發者，於是我照做了。（現在十幾年過去了，我已然成為用 vim/atom 開發前端程式的 “前端專家”，說明這句的確有它的道理）
那個 Hello World 長這樣的，Hold 住，別笑！
<HTML>
<HEAD>
<TITLE>歡迎光臨，快樂小鎮！</TITLE>
</HEAD>
<BODY>
<H1>你好！</H1>
</BODY>
</HTML 當時真的是這麼寫的，那個名字我記得太清楚了。
然後經過了各種學習，學會了 HTML4 相關的很多東西，還有 CSS，也分別學了 JavaScript 1.2 以及 JScript（這是兩個不同的東西，一個是 Netscape 版本的，一個是 MacroSoft 自己的東西，而且 MS 一直用到 IE7），還有 ASP 等等。
2003年暑假，正式釋出了自己的網站
這時候買了在郵局匯款買了個域名和空間，用一個叫 “織夢” 的 ASP 第三方做了個網站。那時候我的第一個頁面是這樣起來的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>快樂中國 － 曉強</title>
<script src="http://some/where/some/thing.js" javascript="javascript1.2" type="text/javascript"></script>
<script type="text/javascript">
<!--
window.alert('hello');
// 那時候要寫好多相容程式碼...
//-->
<style type="text/css">
<!--
.alert {
color: red;
}
-->
</style>
</head>
<body align="center">
<table width="680" ...>
...
<tr>
<td colspan="2">
<!-- 這時候還是用 table 佈局的 -->
<table>...</table>
</td>
<td>
<!--用 1x1 畫素點幫助佈局 -->
<img src="img/1x1.jpg" width="1" height="1">
</td>
</tr>
</table>
</body>
</html>2004年，XHTML/Web2.0 風颳來了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh">
<head>
<title>Hello, world.</title>
<script src="http://some/where/some/thing.js" type="text/javascript">
// ...
</head>
<body>
<!-- 這時候開始用 div 佈局了, CSS2也用起來了 -->
<div class="main">
<div class="banner">...</div>
<div class="header">...</div>
<div class="footer">...</div>
</div>
</body>
</html>這時候看了很多網頁開發的書，Box佈局，Web2.0 標準，也開始學習 ASP 和 PHP 了，會用 “動網論壇” 做論壇了，會用 FTP 工具了，會用 IIS 架設伺服器了，知道啥是 “SQL注入” 了，知道什麼是 “ARP攻擊” 了。也開始學習 Ｃ語言了。
慢慢的，我上了大學。
2005年，上大學了
這時候用 “動網” 釋出了一個叫 “遼寧工程技術大學論壇”，熱度比學校自己的還要誇張，很多人到了學校還以為我那個是官網。後來服務超租期1年也就撤銷了，不過還幫助很多同學分享學校資訊，包括 “為什麼9月份才發通知書” 這事兒也有了很多版本的答案。
在大學偶然面試了另一個學院的學生會，並且結識了一生的好友－攻克，我們一起學習創作了很多網站。包括用了Ｎ年的 “工大導航網”。這個時候就是利用 Web2.0 技能，積累了大量的 Web 開發經驗和安全相關的經驗，以及 Access 資料庫 和 MySQL 資料庫，SQLite 相關資訊都是這個時候積累下來的。
2008年，無錫北京大學實訓以後
在此以後就很久沒有做我非常喜歡的Web了，後來，我工作了。為了追求現在的老婆，直接學 C++ 然後。。。。
2013年，工作了若干年重拾 Web 開發
專案需要，我重拾了心愛的 Web 開發。這時候的 Web 已經發展的令人尖叫！尖叫！標準瀏覽器滿地跑，相容性程式碼已經沒有那麼重了。
- Bootstrap，Skeleton …
- jQuery 2.0+, Backbone, Node.js, YUI …
- Less, SASS
- 響應式佈局、Cordova/PhoneGap、Coco2D-js ….
這時候的 HTML叫做 HTML5，我的天啊！短短1年時間學習了 N^N 多東西。
此時的 HTML 起步程式已經變成這樣：
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>沒錯，這個就是我現在的 Hello World, 也是來自於開源專案 HTML5 Boilerplate，我現在 90% 的Web程式都是這麼快速起步的。
結束語
隨著經驗的積累，我們已經深深理解了 HTML Hello World 帶來的領域知識，伴隨我們經歷了 HTML 發展歷程以及我漫漫的成長路程。已經深刻理解了 HTML、DOM、JS、CSS 的生命週期在開發中的重要性，也體驗到了現代Web程式設計技術的強大和便捷。
相信很多同仁和我一樣經歷了 Web 的發展歷程，也相信很多 Web 新朋友熱血沸騰、蓄勢待發。一起加油吧！
- 懷念你，Web 0.5！
- 懷念你，Web 1.0！
- HTML, CSS, JavaScript & JScript, VBScript
- Table
- Front Page, Netscape
- 懷念你，Web 2.0！
- DIV + CSS2
- jQuery, Prototype
- IIS + ASP + ACCESS, Apache + PHP + MySQL
- Web 三劍客
- 歡迎你，H5 & C3，現代 Web！
- Everything NEW!