那些年的 Hello World （HTML）

来源：互联网发布：linux find exec 编辑：程序博客网时间：2024/05/22 12:53

那些年的 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!

1 0