常见前端编程软件

我们该在哪里写程序呢？记事本！完全没问题，但是，白底黑字不美观，体验太差了。不如试试这些吧：Dreamweaver、Sublime、WebStorm、Notepad++、Visual Studio Code等，这些软件分为轻量级和重量级，正如其字面意思一样，轻度使用的话选择轻量级足够。这里以Visual Studio Code(VS code)为例——一款微软开发的轻量级前端编程软件，只有60M大小。这些软件与记事本的区别是什么？增加了文本高亮显示、标签自动填充，程序错误提醒等辅助功能，使得编写程序相对舒适和方便些。

HTML

HTML(Hyper Text Markup Language, 超文本标记语言)，它通过一些标签来显示和描述网页内容，举几个非常常见的标签吧：插入图片标签、插入段落标签

······我们来实际操作一下吧(以下程序都在VS code中编写)。

新建一个记事本，另存为.html文件，然后用VS code打开。以下代码就是html文件的基本结构：

第一行申明该文档遵循HTML5标准。剩下的主要分为两部分，第一部分为头部标签，这里面放的是网页的标题(title标签中)和字符编码格式、关键字(便于浏览器搜索)和页面说明等(meta标签中)，标签中也用来引入外部的css和js文件。第二部分为网页的主体部分，放在标签中，这部分也是我们需要编写的内容。例如：我要想在浏览器中显示“你好，木头人儿”，只需要在html文件的标签之间输入相应的文字即可，如下：

是不是很好玩呢？这就是html的主要功能了——显示和描述网页内容。接下来，试一试多添加一些内容吧，插入些图片和文字，效果如下：

呃，好像有点乱，还有点丑，我想加个背景，给文字换个颜色，排版美一点，字体和大小也想改下，这时就需要css了。

CSS

CSS(Cascading Style Sheets，层叠样式表)，它主要功能改变网页中各元素的样式。和html文件一样，首先新建记事本，然后另存为.css文件，使用VS code打开即可编写代码。在html文件中引入css文件就可实现样式的改变。举个例子，改变网页和文字颜色：

从这个例子可以看到css文件的特点，首先是找到html 中的元素，然后在大括号中书写样式，如文字颜色设为白色，背景颜色设置为红色。CSS样式还涉及到元素宽高、浮动、内外边距、字体大小、行间距、对齐方式、位置等的控制。我们完善一下吧。

CSS 中好多属性可以通过单词意思进行判断，这里比较有挑战的一点是：网页中各元素可能会相互影响，因此样式的添加要考虑元素相互之间的关系。

至此，网页中有了文字、图片等内容(html来实现)和各元素的样式(css 来实现)，那么，现在想在网页中加一些动态，比如说图片的自动切换等，怎么办呢？JavaScript(Js)就需要出场了。

JavaScript

JS(JavsScript)是Web页面中的一种脚本语言，它可以把静态页面转化为支持用户交互并响应的动态页面。比如说实现下面的图片切换效果：

和html与css一样，首先新建记事本，然后另存为.js文件，使用VS code打开即可编写代码。实现上面那个例子，需要怎样的js代码呢？

JS代码特点是有var 来定义变量，有“function 函数名()“来定义函数，还有一些窗口事件等。上面这个例子，具体执行了哪些功能呢？

结合实际的显示效果来看，当网页打开时执行init()函数，它的内容是每两秒钟执行一次tupian()，tupian()这个函数的作用是依次显示照片，因此整个init()函数的作用是每隔两秒显示一张照片，图片切换的效果就实现了。

至此，我们已经了解html、css和js所实现的基本功能，接下来一起看看它们是怎样联系在一起的吧！

这是在本地盘中文档结构，包含了html文件、css文件、js文件和用到的图片。

在html的标签中分别引入了css和js文件，当然，也可以不引入外部的css和js，而是采用内联的方式，在html中，把css代码放在标签之间，把js代码放在标签之间。

尝试看懂一个网页

当我们一步步打开折叠的小三角，会发现，网页元素一一呈现，在标签之间是css代码，在标签之间是js 代码，link表示一个链接，

表示盒子模型······我们可以一层一层剥开它的心，任何元素都可以找到它的位置，比如，我们找找百度的logo吧！

找到了logo所在的网址，我们打开这个网址，就可以看到源文件了。

高效便捷发布一个网站

编辑好的网站，在本地浏览没有问题，那么如何才能让更多的人看到呢？当然是发布啦！传统的网站发布需要申请一个服务器和域名，而这两个东西需要购买并且要到当地的公安机关备案，审核期还较长，这样一来，会带来极大的不便，我们的网站仅仅是大家用来浏览的，不需要与服务器交互，经过一番探索，有一种方式极大的方便了这种需求的用户——利用Github。

Github(https://github.com)是个网页，更确切地说叫做代码托管平台，内容极其丰富，申请一个账号之后，新建个Repository(仓库)，可以用来上传代码，收藏，复制，或者对别人分享的代码进行修改等，这里我们需要用Repository(仓库)来存放本地网页文件。上传到Github的方式主要有两种，一是通过代码的方式进行上传(git方式)，另一种方式是通过图形化界面进行上传(GitHub Desktop)，显然后者直观些。

上传到Github的文件与本地的文件结构一样。

满足一下大家的好奇心，在记事本中编写程序，能不能行？新建个记事本，双击打开，写入html 代码，另保存为.html 文件格式，双击打开即可看到网页内容，如下图所示。

下一期将讲述一根USB数据线的前世今生，期待与你一探究竟！

西农的娃

别薛华

王勃

送送多穷路，遑遑独问津。

悲凉千里道，凄断百年身。

心事同漂泊，生涯共苦辛。

无论去与往，俱是梦中人。

本文仅代表作者个人观点，不代表SEO研究协会网官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到SEO研究协会网www.yinxi.net学习互联网营销技术请到巨推学院www.yx10011.com。