常见前端编程软件
我们该在哪里写程序呢?记事本!完全没问题,但是,白底黑字不美观,体验太差了。不如试试这些吧: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。