188bet手机版

  • 时间:2019-01-26 01:39 作者:知乐苑s 来源:知乐苑s 阅读:120
  • 扫一扫,188bet手机版访问
摘要:古柏高枝银杏实,几千年物到而今。 玉纤雪腕白相照,烂银壳破玻璃明。银杏(学名:Ginkgo biloba),落叶乔木,树冠圆锥形,枝轮生,叶互生,在长枝上散生,二歧状分叉叶脉,果具长梗,下垂,倒卵圆形,外被白粉,味甘略苦,是最古老的孑遗植物······《植物资源学》课上学到的东西忘得差不多了,记不清
网页前台之HTML+CSS+JS

古柏高枝银杏实,几千年物到而今。

玉纤雪腕白相照,烂银壳破玻璃明。

银杏(学名:Ginkgo biloba),落叶乔木,树冠圆锥形,枝轮生,叶互生,在长枝上散生,二歧状分叉叶脉,果具长梗,下垂,倒卵圆形,外被白粉,味甘略苦,是最古老的孑遗植物······《植物资源学》课上学到的东西忘得差不多了,记不清为什么要给植物起个拉丁名,有个声音却一直回响:希望你变得更好更强大······

网页前台之HTML+CSS+JS

哦,前段时间校庆,六十周年

红专并进一甲子,科教报国六十年。

网页前台之HTML+CSS+JS

“优雅降级,渐进加强,弥散圆,原子化设计,HTML5, CSS3 ,JavaScript, jQuery······”这些前台术语,陌生中带着些新奇,经过一番理解后,会发现它们的表达恰如其分,由此触类旁通,呈现在脑海中的是万事万物互联互通。

渐进加强(先满足低版本浏览器基本功能,而后对高级浏览器进行效果、交互、追加功能从而达到更好的体验,也称向上兼容)与优雅降级(首先构建完整的功能,而后为低版本浏览器提供基本功能,也称向下兼容),不仅可以表达软件开发中的概念,而且还是看待同种事物的两种观点——它们都关注同一个网页在不同设施里不同浏览器下的体现程度。网页在浏览器中以怎么的形式呈现这就是网页前台所涉及到的内容,接下来一起走进前台世界吧!

前台知多少

网页前台之HTML+CSS+JS

什么是前台?简单了解就是研究浏览器如何显示出网页的布局,样式和交互等的技术,相对地,后端指的就是服务器了。HTML+CSS+JS是“前台三剑客“,它们各司其职,协同工作,将最基本的文字、图片、超链接、音乐、视频、动画等网页内容正当布局,细致交互,带给客户舒适的体验。

网页前台之HTML+CSS+JS

常见前台编程软件

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

网页前台之HTML+CSS+JS

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

网页前台之HTML+CSS+JS

是不是很好玩呢?这就是html的主要功能了——显示和形容网页内容。接下来,试一试多增加少量内容吧,插入些图片和文字,效果如下:


网页前台之HTML+CSS+JS


网页前台之HTML+CSS+JS

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

CSS

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


网页前台之HTML+CSS+JS

网页前台之HTML+CSS+JS


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


网页前台之HTML+CSS+JS

网页前台之HTML+CSS+JS

网页前台之HTML+CSS+JS

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

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

JavaScript

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


网页前台之HTML+CSS+JS

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

网页前台之HTML+CSS+JS

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

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

至此,我们已经理解html、css和js所实现的基本功能,接下来一起看看它们是怎么联络在一起的吧!

网页前台之HTML+CSS+JS

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

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

尝试看懂一个网页

网页前台之HTML+CSS+JS

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

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

网页前台之HTML+CSS+JS

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


网页前台之HTML+CSS+JS

高效便捷发布一个网站

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


网页前台之HTML+CSS+JS

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


网页前台之HTML+CSS+JS

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

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


网页前台之HTML+CSS+JS

下一期将讲述一根USB数据线的前世今生,期待与你一探索竟!


网页前台之HTML+CSS+JS

西农的娃

别薛华

王勃

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

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

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

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

  • 全部评论(0)
188bet下载发布的资讯信息
【系统环境|】你是HTML 5的一员吗?(2019-08-15 11:58)
【系统环境|】Web前端基础怎么学?html、css、JavaScript 知识架构图(2019-08-14 17:55)
【系统环境|】零基础小白走Web前端之路是否可行?答案是yes!(2019-08-13 11:44)
【系统环境|】你知道Web前端与HTML5技术的区别吗?(2019-08-12 14:10)
【系统环境|】移动前端开发和web前端开发的区别(2019-08-11 16:49)
【系统环境|】给新手的锦囊:Web前端开发小白的学习建议和路线图(2019-08-10 16:34)
【系统环境|】都说web前端开发薪资高,入行就有上万月薪,转行难吗?(2019-08-09 14:55)
【系统环境|】干货教程 | Web前端开发学习入门指南(2019-08-08 18:27)
【系统环境|】前端开发:vue路由之前端路由的原理(2019-08-07 13:17)
【系统环境|】你不知道的web前端那些事(2019-08-06 12:29)
188bet手机版二维码188bet手机版访问领取大礼包
返回顶部