前端技术简介(1)，JavaScript的for循环与双重for循环

最新推荐文章于 2024-09-02 08:39:16 发布

2401_84094908

最新推荐文章于 2024-09-02 08:39:16 发布

阅读量681

点赞数 8

分类专栏：程序员文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2401_84094908/article/details/137406157

版权

程序员专栏收录该内容

265 篇文章 0 订阅

订阅专栏

本文介绍了Web2.0时代网页的发展，强调了动态网页的交互性和传统工具如Dreamweaver等的局限性。核心前端技术包括HTML、CSS和JavaScript，以及Ajax和SEO的重要性。后端技术如PHP、JSP和ASP.NET对于实现动态功能不可或缺。作者分享了个人的学习经验和资源，提供了一套全面的前端开发学习资料。

摘要由CSDN通过智能技术生成

从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那是远远不能满足需求。现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。

所以，处于web2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多，例如代码冗余、网站维护困难（学习到后期，你会知道为什么不用这个组合了）。

二、前端技术

1、前端开发最核心技术

我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前端开发最核心的3个技术

（1）HTML是什么？

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

（2）CSS

CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

（3）JavaScript

JavaScript是一门脚本语言。

（4）HTML、CSS和JavaScript的区别

我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢？

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

我晕，这不是等于没说吗？好吧，我给大家打个比喻。我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。现在大概懂了吧。

我们回到实际例子中去，看一下绿叶学习网的导航条。我们先分析一下“前端技术”这一栏目的具有以下基本特点：

① 导航条文字颜色是白色；

② 大小是14px

③ 背景颜色是绿色；

④ 鼠标移动到上面颜色会变成深绿色；

这些效果是怎么做出来的呢？其实思路就跟上面“建房子一样”。我们先用HTML搭建网页结构，这时候默认情况下，字体、字体颜色、字体大小和背景颜色如下图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

仅仅使用HTML的文字

然后我们通过CSS修饰一下，改变其字体、字体大小、字体颜色和背景颜色，得到如下的效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在HTML基础上加入CSS的文字

最后，我们通过JavaScript定义鼠标一个行为，就是鼠标移动到上面的时候，背景颜色会变为深绿色，效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

加入JavaScript特效

现在大家都知道一个缤纷多彩的网页究竟是怎样做出来，也知道为什么“前端技术最核心的是HTML、CSS和JavaScript”了吧？

2、前端开发其他技术

前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO等。

（1）Ajax

Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。

Ajax是前后端交互的技术，主要实现在前端。（不懂？！没关系，我们在Ajax教程中会讲解到）

（2）SEO

SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。

简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到，我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你网站有更多人浏览的吧。

三、后端技术

如果我们只学习完前端技术，其实也差不多可以开发属于自己的网站了。不过这个时候开发出来的网站是一个静态的网站，唯一的功能是供用户浏览，缺乏与用户的交互性，用户能做的东西不多。因此，如果我们要开发一个用户体验更好、功能更加强大的网站，就要学习一下后端技术。

那后端技术究竟是怎样的一门技术呢？举个简单的例子，很多大型网站都有注册功能，只有用户注册了之后才具有某种权限，例如你要使用QQ空间，你就要注册一个QQ才能使用。这样的功能就是后端技术所实现的。再有，淘宝网不是有很多商家吗？这些商家有各种各样的商品，这些庞大的数据只能使用后端技术中的数据库技术才能实现。