<!-- HTML 标签是由尖括号包围的关键词，比如 <html>，用来描述网页 -->
<html>
<head>
<title>这是我的第一个页面。</title>
</head>
<!-- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们 -->
<body>
<h1>这是我的第一个大标题。</h1>
<!-- HTML 标签通常是成对出现的，比如 <b> 和 </b> -->
<p>这是我的第一个段落。</p>
<br/>
<hr/>
<h2>我比大标题小那么一丢丢</h2>
<p><a>这是我的第一个链接</a></p>
<p>别跑，我的头像好帅气</p>
<!-- 即将插入一个图像，虽然源码的耦合度不同 -->
<p></p>
</body>
</html>
这场名曰“ Web 全栈”的活动，怎么能不讲讲 Web 的背景？
好巧的是，查资料的时候，看到万维网之父刚刚获得图灵奖，实至名归，激动万分。
JavaScript + ChromeDevTool
相比“PHP 是世界上最好的语言”，JavaScipt 应该算是世界上最“全能”的语言了。JS 从最初的网页前端交互到现在的 Web 前后端、移动端混合应用、物联网甚至 AR、VR ，无所不在。毕竟，Atwood 定律告诉我们：
凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。
来场实战，想必在座的大学生大多都不怎么关注自己的“专业培养计划”，结合代码实战，来在西邮官网上实战抓取专业培养计划，利用了 JS 的 DOM 操作。
var v1 = document.getElementsByTagName("table")[2];
var nameArr = [];
var classCount = v1.childNodes[1].childElementCount - 1;
for (var i = 0; i < classCount; i++) {
var name = v1.childNodes[1].childNodes[i+1].childNodes[2].innerHTML;
var nature = v1.childNodes[1].childNodes[i+1].childNodes[6].innerHTML;
if (nature === "选修课") {
name += "(选)"
}
nameArr.push(name);
}
console.log(nameArr.join("，"));
是否是选修课也进行了判断，最终获得到四年培养计划的所有课程，短短的 JS 代码避免了多少手工记录，还加深了多少 DOM 知识呢？
序
在和四个实验室 Web 服务端大一学弟的为期俩周的准备下，2017 年 04.08 号这一整天，终于成功举办了这场编程马拉松活动。从最初的简单分享到发现时间不足而拓展成编程马拉松，也终于敲定了活动名称，确定了活动流程。此之谓：
如果你还不了解我，不了解这场活动在大学氛围能够成功举办的背景，不妨看看这三篇文章，当然更多的故事在我的简书和微信订阅号之中（@韩亦乐）。
并且整场活动的文章内容在这里：
景
这场活动在西邮通院科协邀请下，由我所在的 CreatShare 互联网实验室主讲，包括全天流程及其干货内容都由 CreatShare 互联网实验室（其实就是我和四个学弟啦）策划并完善。我是这么形容这场活动对我的意义，其中可见从我的俩个大学实验室到我组织的本地 FCC 西安开源前端（全栈）社区活动，融汇了我俩年的“毕生所学”。
那么不多说，活动流程如下，用 MindeNode 绘制，贯穿 Web 前后端的基础知识点和软技能，激情的开始吧。
入
整场活动从前端到后端，首先便是 HTML + CSS 的必备基础内容。我们在这里引入了自己的思考，开启一场独特的“大前端”之旅。
HTML + CSS
以下三个图是从学弟的 PPT 中取材，HTML 可以了解结构和历史，CSS 可以看看选择器和属性，并用流行的 Sublime 编辑器做个 Demo 体验（匹配一下上面第一个学弟帅哥的照片，激发一下学习欲望）。
我做了总结和扩充，从真实世界到前端，从大前端看 Web。
写一个 Demo 解释一下吧~请忽视我的“高耦合”：
这场名曰“ Web 全栈”的活动，怎么能不讲讲 Web 的背景？
好巧的是，查资料的时候，看到万维网之父刚刚获得图灵奖，实至名归，激动万分。
JavaScript + ChromeDevTool
相比“PHP 是世界上最好的语言”，JavaScipt 应该算是世界上最“全能”的语言了。JS 从最初的网页前端交互到现在的 Web 前后端、移动端混合应用、物联网甚至 AR、VR ，无所不在。毕竟，Atwood 定律告诉我们：
来场实战，想必在座的大学生大多都不怎么关注自己的“专业培养计划”，结合代码实战，来在西邮官网上实战抓取专业培养计划，利用了 JS 的 DOM 操作。
是否是选修课也进行了判断，最终获得到四年培养计划的所有课程，短短的 JS 代码避免了多少手工记录，还加深了多少 DOM 知识呢？
发完讲师的照片就跑真刺激。（谁让比他大一级，逃。。
freeCodeCamp
啊啊啊，这个在线 JS 全栈编程平台向别人介绍的太多了。直接放图和链接吧！在早上的活动最后，向大家推荐了这个全球性开源编程社区平台。
Why...Why...Why always me to create blogs to review and share -- Virgo Me.
除了左下角的各大其他城市线下 JS 编程活动缩影外，其他三张都是我组织的 FCC 西安线下编程活动。认识到了五湖四海的大家。
影
8 小时的活动~！干货很多，软技能很多，怎么不来点 VIDEO~不能白白浪费了免费 Wi-Fi，大大的投影和热情参与的同学们啊，俩个视频来分享。相关链接可以在 Youtube、优酷等国内外平台搜~在这里就不给你们贴链接了，劳动劳动更有意义吧~。
从上面的第一个视频可以总结到，今天的程序员是未来的巫师，掌握着改造世界的方法。影片贯穿着生动的全球 IT 牛人变成回忆录：
绝对不会告诉你们的是，《TED 编织我的梦》这部 TED 演讲我在去年面向大一新生的 DIY 电脑俱乐部软件部第一次分享的主讲过程中就放映过，也认识到了这次的几位服务端大一学弟，实则，成功圈粉一大波迷弟。
乱入我在去年 DIY 电脑俱乐部软件部主讲的分享文章，和缩影一张。
没办法，我就是爱玩。哎，快大三了，这病，得治。
后
可能是我的“同性相惜(吸)”的气质太浓重了罢，短暂的午饭和午休过后，到了下午进行服务端分享的时候，早上的女生，就剩通院科协参与组织的了。
Full-Stack-Developer
什么是全栈工程师？我们该不该以全栈工程师为奋斗目标？我们又能从全栈工程师的方向中学习到什么？这里凝聚了我的感悟。
正如精读和粗读，广度和深度也是永远矛盾的话题，先来一波知乎黑。
当然，我不这么认为，我理解的“全栈工程师”的重点不在于去复古曾经最早的下搞电路设计，中写汇编代码，上知设计模式的“全能程序员”，而是新时代的，拥有极强学习能力的编程“终生学习者”。
从软件工程思考到的全栈工程师从某种角度可以说，就是产品运营、运营经理、视觉设计、前端工程师、服务端工程师，统统吃一口。下图是我在去年为我所在的 CreatShare 互联网实验室纳新准备的组织结构图可以参考。
关于这次活动的技术点，我也快速画在了概念图中，以做头脑风暴：Web 前端，Web 后端，框架、平台、工具、基础知识点等等。。
Linux + Apache
从下图链接中学弟的 PPT 中可以学习到，Linux 操作系统的基础知识和用法以及 Apache 服务器的用处、须知。这是我见过的，最详细的 PPT 没有之一。。
偷一张 PPT 放到这里：
PHP + MySQL
PHP。。我的大一便以服务端做为方向，PHP 作为学习语言来学习，在一定的了解过后，前后端的通吃的时间、精神压力下，终于选择了 JavaScript 作为找工作时的重点语言。PHP + MySQL 便是最后一位大一学弟的分享。
可以在 Windows 平台安装 XAMPP 的 PHP 运行环境傻瓜包，或在 MacOS、Linux 下更难更干货地安装开发环境，进行Apache、PHP 、MySQL的深入学习。这里贴一段代码，看看 PHP 怎么链接数据库，So Easy！
PHP 当然必须得有收接 HTTP 请求的能力，比如处理 GET、POST 请求：
还可以模拟客户端发送 GET、POST 请求哦，就让爬虫开始吧。
可以用 postman 这类的 HTTP API 模拟工具实战。
架构之战
到了这里，活动也接近尾声，分享的内容慢慢，但后端也只涉及了 LAMP 架构，即 Linux + Apache + MySQL + PHP，常被用来做传统的多页面网站。然而还有 MEAN 架构、.net 等等开发架构，可以幽默的解释为什么我们要学习后端？
MEAN 架构，发扬了 Web 单页面应用的存在需求。MEAN 便是基于 JavaScript 的全栈框架 MongDB、Express.js、Angular.js、Node.js 。freeCodeCamp 在线编程平台便是用 MEAN 架构实现。技术没有优劣性，开发者可以择一而入。
另外俩个大一服务端学弟也在这里，能看出来吗？就是站着的俩位（逃。
我，终于，露脸了，围观请打赏~Two Three Three。
曲
我在 DIY 电脑俱乐部软件部分享的回顾文章里就以下面这段话结尾：
是啊，这次，再一次重新开始，再一次与众不同，期待未来的更加精彩吧！
全栈，是一种心态！