编程底层原理（代码编程真的没有那么难）

昨天的那篇文章只是想帮助新手快速入门的一个引子，也是我们在头条号上发的第一篇文章。文章发表后，不到24小时就得到了头条官方5万次的推荐，阅读6000次，这样的“首秀”热度还是不错的。但也有的读者质疑我们是不是带有什么商业目的。

这里先简单做个声明，【职场码上汇】就是一个认真做垂直内容的头条号，内容主旨除了分享还是分享，目的是“和职场人一起玩代码，仅为IT技能提升、增强职场竞争力”！所以，我们不仅不会“忽悠”大家去参加各种培训，反倒是建议大家没必要去参加动辄花费数千上万的培训（公费报销的就另说啦），因为所谓的代码编程真的没有想象中的那么难！

好了，废话不再多说，现在进入《10篇文章带您快速入门企业级B/S应用开发》的第2篇，让我们一点点的来揭开您与代码之间所隔着的这一层纸吧！

上篇文章已经教大家如何通过SublimeText3代码编辑工具一键生成html代码结构。为避免使用太多的html、css或js代码，以便帮助大家快速入门，现在要用到前几天刚刚发布的jQueryEasyUI（最新版1.5.2)。至于这个到底是什么，有空的话可以去网上先搜搜资料，没空的话就继续按我们说的依葫芦画瓢，10篇文章结束自然就懂了！

包含的文件夹说明

demo和demo-mobile为示例文件夹，仅供了解插件功能使用。这些demo全部是html格式的，直接拖拽到浏览器上即可看到效果（demo-mobile是移动端的演示文件）；

locale用于设置语言环境。例如，如果希望将界面做成简体中文效果，可以在项目中直接引用该文件夹下的easyui-lang-zh_CN.js文件；

plugins包含了全部插件的js处理程序；

src包含了部分插件的js开源程序；

themes包含了各种主题资源文件，如图标、主题样式等。

包含的文件说明

除了上述几个文件夹之外，解包后的jquery-easyui-1.5.1目录中还有以下几个重要的文件（所有的txt文件都是用来文档说明的，可以直接删除或忽略）：

【jquery.min.js】jQueryEasyUI是一组基于jQuery的插件集合，因此，要使用jQueryEasyUI，就必须先加载这个文件；

【jquery.easyui.min.js】这个是jQueryEasyUI的核心文件；

【easyloader.js】这是在项目中使用jQueryEasyUI插件的另外一种加载方式：智能加载（也称为简单加载）。该加载方式在实际应用中很少使用，可以忽略；

【jquery.easyui.min.js】这个是移动端项目应用时的核心文件。

在html代码中引入必要的文件

打开SublimeText3，先保存为一个文件，扩展名为html，然后输入感叹号（必须是半角的），按Tab后即可生成标准的html结构代码。

生成代码后，在title后面引入必要的文件。代码如下：

<script type="text/javascript" src="http://img.studyofnet.comjquery-easyui-1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="http://img.studyofnet.comjquery-easyui-1.5.1/jquery.easyui.min.js"></script>

<script type="text/javascript" src="http://img.studyofnet.comjquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css">

注意，上述引用文件的路径是在jquery-easyui-1.5.1文件夹中。如果您在解包时改变了文件路径名称，请务必以实际为准！需要引用的文件说明如下：

前面3行引用的分别是jquery核心库、jQueryEasyUI核心库和简体中文语言库。由于这三个文件都是基于javascript的程序文件（都以js为扩展名），因此，需要使用script标签引入(至于什么是标签，先知道这个概念就好了，下篇文章会讲)。实际操作时，可以先输入：<script，然后按Tab键，SublimeText3会自动补齐该行其它代码；也可直接输入script，然后按Tab键，这样也能生成一对script标签。

后面2行引用的分别是主题样式文件和图标样式文件。在html中，样式文件必须使用link标签引入，实际操作时，可以直接输入<link或者link，然后按Tab键，SublimeText3同样会自动补齐该行其它代码。

不论何种类型的标签，它们都是可以设置相应的属性的。例如，上面增加的5行代码中，script标签有type和src属性，link标签有rel、type和href属性。

属性在代码编程中是个非常重要的概念，怎么理解呢？请大家先回忆一下在word中给指定文字设置颜色或字体时的操作方法。假如要将某标题的字体大小改为20，颜色设置为红色，是不是要先选定这个标题然后再设置？设置完成后，对于这个标题而言，字体、颜色就是它的属性名称，20和红色就是这两个属性所对应的值。作为职场非专业人士，office办公软件是最常用的，也最好理解，目前就把所编写的这些代码往office方面靠着理解就好了，毕竟它们的本质都还是文档。

试运行

将编辑好的html文件拖拽到浏览器中（或者双击该文件，然后选择用浏览器打开），我们会发现，浏览器中没有输出任何内容，仅仅在浏览器上显示了一个页标签的标题而已。

这是因为，目前所编辑的内容都是写在head标签里的。凡是写在head标签里的内容，都不会真正作为要输出的信息以显示给浏览者。

用head标签包裹起来的所有内容，在html中也被称为头部元素，head就相当于是所有头部元素的容器。在这个容器中，可以引用js程序脚本、指示浏览器在哪里找到样式表、提供元信息等等，因此，它的作用主要是用于描述页面的相关属性以及与其他文档的关系等。

头部元素中，只有title是唯一必需的，其它都可以省略。例如，当在SublimeText3编辑器中使用感叹号新建一个html结构时，head里就只有类似于下面的这样2行代码：

<meta charset="UTF-8">

<title>职场码上汇</title>

其中，第1行用的是meta标签，meta在html里被称为元信息；在这个标签中，通过charset属性设置了页面的编码方式为utf-8。这行代码其实是可以去掉的，只不过可能造成页面乱码而已；

第2行用的是title标签，指定了页面标题（是指显示在浏览器页签中的标题，并不会显示在页面正文中）；

至于上面引入的那些js或css文件，都是因为项目开发需要才引入的。如果仅需做一个静态的页面，完全可以不用这些。因此，仅从html的头部结构来讲，这些引入的外部文件也不是必须的。

想要在页面中显示内容怎么办？别急，下一篇文章继续讲。由于我们这个头条号还处于新手期，每天只能发一篇文章，只好等到明天咯。

,