web前端技术_web前端技术有哪三部分组成 - CSDN
精华内容
参与话题
  • WEB前端三大核心技术

    千次阅读 2018-08-19 19:55:36
    是一门标记型语言,主要由一些具备特殊含义的标签构成(建筑物结构) ...“超文本”是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。...

    HTML(5)

    是一门标记型语言,主要由一些具备特殊含义的标签构成(建筑物结构)

    所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页,多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML,就可以把网页内容显示出来,它也构成了互联网兴起的基础

     

    CSS(3)

    是一门描述性语言,主要一系列选择器(html元素)和属性构成(建筑的外部与内部装饰)

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

     

    JavaScript

    是一门脚本编程语言,包含类似java的语法(数据类型,数组,条件分支,循环,对象..)(对外运营)

    是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

    展开全文
  • web前端主要技术概述

    万次阅读 多人点赞 2018-04-07 11:38:40
    本文主要是介绍部分主流和新兴的web前端技术,希望能帮助想学web前端的小白,理清其技术学习路线。 首先有些技能是web前端需要掌握的: 字符编码:解决乱码问题 HTTP协议:大体了解ajax请求的各种状态码代表的...

    web前端主要技术概述

    参考资料:
    2018 Web 开发者路线图
    2017年前端框架、类库、工具大比拼

    本文主要是介绍部分主流和新兴的web前端技术,希望能帮助想学web前端的小白,理清其技术学习路线。

    首先有些技能是web前端需要掌握的:

    接下来,先看下要介绍的内容大纲:

    这里写图片描述
    web前端的基础技术就是html、css和js,而html的进阶就是jade,css的进阶就是scss,js的进阶就是es6、coffeescript和typescript。

    而做个web项目的话,你就需要使用框架来帮助你快速开发,依赖的框架多了,就需要构建/管理工具来管理依赖的模块。

    你的代码不只是写给你自己看,也是写给别人看,所以你的代码编写必须符合一定的规范。项目的目录结构,文件命名这些也是有着一定的规范的。

    下面,就开始一个个地进行详细介绍。

    html5

    这里写图片描述

    HTML(HyperText Markup Language)超文本标记语言,一种用于创建网页的标准标记语言。

    HTML5是HTML的升级,设计目的是为了在移动设备上支持多媒体。HTML5广义上来说包含了html5、css和JavaScript三个部分。

    HTML5对比HTML,除了标签语义化、新增了些多媒体元素和表单元素外,其绘图功能可以实现各种图表,Storage和webSQL可以实现本地离线存储,还有些新API可以实现特殊需求。

    HTML5学习资料:

    激活状态判断API加video元素示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>visibilityState</title>
        <script src="../lib/jquery/dist/jquery.min.js"></script>
    </head>
    <body>
    <h4>visibilityState</h4>
    <p>
        这是一个HTML5新提供的一个api,主要作用就是记录当前标签页在浏览器中的激活状态。
        所谓“激活状态”指的是当前标签是否正在被用户浏览。
    </p>
    <h4>应用场景</h4>
    <p>
        监控用户行为,当用户的视角不在当前页面时,暂停加载广告,幻灯片、停止加载视频、
        开始加载小动画等。减少对用户宽带的占用,减少服务器压力,节省用户内存,
        以及到达更好的播放效果。
    </p>
    
    <video id="video1" width="420" controls>
        <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
    </video>
    <script>
        var myVideo = document.getElementById("video1");
        myVideo.play();
        document.addEventListener("visibilitychange", function () {
            if (document.visibilityState == "visible") {
                //do something
                //继续视频播放
                myVideo.play();
            }
            if (document.visibilityState == "hidden") {
                //do something else
                //暂停视频播放
                myVideo.pause();
            }
        });
    
    </script>
    </body>
    </html>

    在浏览器中查看此html,切换到另一个页面,视频会停止播放,切换回来,则视频会继续播放。注意:需要引入jquery。

    jade

    Jade是编写HTML模板的简洁语言,简称模板引擎,其实就是 HTML 预处理语言,非常类似 Sass 之于 CSS。其特点如下:

    • 生成HTML
    • 支持动态代码:if、case、each、while
    • 支持可重用性(DRY):mixins、includes、extends、block
    • 采用对缩进敏感的语法形式,提高了可读性,省略了一些界定符号(大括号、尖括号……)

    pug其实就是jade,只是名称不一样而已。

    对于中大型项目来说,具有可重用性的jade是可以节省html页面编写时间的。

    下面是一些简单的生成列表的示例:

    1. 理解缩进风格和尖括号的省略

    ul
      li Item A
      li Item B
      li Item C

    对应的HTML

    <ul>
      <li>Item A</li>
      <li>Item B</li>
      <li>Item C</li>
    </ul>

    2. 通过each理解动态代码

    ul
      each val, index in ['zero', 'one', 'two']
        li= index + ': ' + val

    对应的HTML

    <ul>
      <li>0: zero</li>
      <li>1: one</li>
      <li>2: two</li>
    </ul>

    3. 通过mixins理解可重用性

    mixin list(id, ...items)
      ul(id=id)
        each item in items
          li= item
    
    +list('my-list', 1, 2, 3, 4)

    对应的HTML

    <ul id="my-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    通过includes可导入其他代码页面;通过extends可继承代码片段,利用 block替换代码片段,append 在原有代码片段之后追加,prepend 在原有代码片段之前追加。

    css3

    CSS(**C**ascading **S**tyle **S**heets)层叠样式表,定义如何显示HTML 元素。

    这里写图片描述

    上图列出了CSS3的主要技术点。这里主要介绍下精灵图片。

    CSS精灵图是把一系列图片放到一张图上。这样可以减少请求数因而网页加载更快。CSS会把每个图标移动到正确位置。但是精灵图的缺点就是图片大小是固定的,被拉伸后可能会失真。

    使用gulp生成sprites图片和样式表

    SCSS

    SASS是CSS的预处理语言。SASS采用缩进风格,不支持{}语法,而为了向下兼容CSS语法,SCSS被开发出来。下图列出了SCSS的主要语法点。

    这里写图片描述

    下面是部分语法的示例和说明:

    1. 通过变量可统一某个样式

    局部变量 & 全局变量(3.4+)
    
    $color: orange !default;//定义全局变量
    .block {
      color: $color;//调用全局变量
    }
    em {
      $color: red;//定义局部变量(全局变量 $color 的影子)
      a {
        color: $color;//调用局部变量
      }
    }

    对应的CSS

    .block {
      color: orange;
    }
    em a {
      color: red;
    }

    2. 理解嵌套

    原先我们需要一层层的指明样式作用的对象,可读性差,但通过嵌套,可以清晰地看出选择器的层级。

    nav {
      a {
        color: red;
    
        header & {
          color:green;
        }
      }
    }

    对应的CSS

    nav a {
      color:red;
    }
    header nav a {
      color:green;
    }

    3. css与scss @import区别:

    • css 只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。

    • scss的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合宏均可在导入文件中使用。

    4. 理解可复用性

    $list: adam john wynn mason kuroir;//$list 就是一个列表
    
    @mixin author-images {
        @each $author in $list {
            .photo-#{$author} {
                background: url("/images/avatars/#{$author}.png") no-repeat;
            }
        }
    }
    .author-bio {
        @include author-images;
    }

    生成的CSS

    .author-bio  .photo-adam  { background: url("/images/avatars/adam.png") no-repeat; }  .author-bio  .photo-john  { background: url("/images/avatars/john.png") no-repeat; }  .author-bio  .photo-wynn  { background: url("/images/avatars/wynn.png") no-repeat; }  .author-bio  .photo-mason  { background: url("/images/avatars/mason.png") no-repeat; }  .author-bio  .photo-kuroir  { background: url("/images/avatars/kuroir.png") no-repeat; }

    你可能也听说过其他css预处理语言,如less、stylus等,这里介绍篇不错的文章:表析LESS、Sass和Stylus的异同

    在了解scss后,你可以再看看Compass。Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery的关系。简单说,Compass是Sass的工具库(toolkit)。

    jade和scss实例

    这里展示一个手风琴效果的例子

    这里写图片描述

    jade:

    doctype
    html(lang='en')
        head
            meta(charset='UTF-8')
            title 纯CSS实现手风琴效果
            link(rel='stylesheet', type='text/css', href='../css/app.css')
        body
            .accordian
                -
                    var data=[
                        {'link_title':'KungFu Panda', 'link_img':'http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg'},
                        {'link_title':'Toy Story 2', 'link_img':'http://thecodeplayer.com/uploads/media/40Ly3VB.jpg'},
                        {'link_title':'Wall-E', 'link_img':'http://thecodeplayer.com/uploads/media/00kih8g.jpg'},
                        {'link_title':'Up', 'link_img':'http://thecodeplayer.com/uploads/media/8k3N3EL.jpg'},
                        {'link_title':'Cars 2', 'link_img':'http://thecodeplayer.com/uploads/media/2rT2vdx.jpg'}
                    ]
                ul
                    each item in data
                        li
                            .image_title
                                a(href='#') #{item.link_title}
                            a(href='#')
                                img(src=item.link_img)

    编写gulp任务将jade编译成html:

    var gulp = require('gulp');
    var jade = require('gulp-jade');
    // 创建jade编译任务
    gulp.task('jade', function () {
        gulp.src('src/**/*.jade')
            .pipe(jade({
                pretty: true
            }))
            .pipe(gulp.dest('www'));
    });

    最终生成的html:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>纯CSS实现手风琴效果</title>
        <link rel="stylesheet" type="text/css" href="../css/app.css">
      </head>
      <body>
        <div class="accordian">
          <ul>
            <li>
              <div class="image_title"><a href="#">KungFu Panda</a></div><a href="#"><img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"></a>
            </li>
            <li>
              <div class="image_title"><a href="#">Toy Story 2</a></div><a href="#"><img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"></a>
            </li>
            <li>
              <div class="image_title"><a href="#">Wall-E</a></div><a href="#"><img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"></a>
            </li>
            <li>
              <div class="image_title"><a href="#">Up</a></div><a href="#"><img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"></a>
            </li>
            <li>
              <div class="image_title"><a href="#">Cars 2</a></div><a href="#"><img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"></a>
            </li>
          </ul>
        </div>
      </body>
    </html>

    scss:

    //图像个数
    $imageN: 5;
    //图像hover之前的总宽度
    $w: 800px;
    //图像hover之后的宽度
    $imageL: 640px;
    //图像hover之前的宽度
    $imageS: $w/$imageN;
    //边框宽度
    $bdWidth: 2px;
    //阴影宽度
    $shadowWidth: 20px;
    .accordian {
      width: $w + $bdWidth * $imageN + $shadowWidth*2;
      margin: 100px auto;
    
      ul li {
        float: left;
        list-style: none;
        width: $imageS;
        transition: all 2s;
        position: relative;
        overflow: hidden;
        border-left: 1px solid rgba(255, 255, 255, .8);
        border-left-width: $bdWidth;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
    
        .image_title {
          position: absolute;
          width: 100%;
          height: 50px;
          background-color: rgba(0, 0, 0, .5);
          text-indent: 2em;
          line-height: 50px;
          bottom: 0px;
          left: 0;
    
          a {
            color: #fff;
            text-decoration: none;
          }
        }
      }
    
      ul:hover li {
        width: $imageS - $imageL/$imageN;
        -webkit-filter: grayscale(.8);
        filter: grayscale(.8);
      }
    
      ul li:hover {
        width: $imageL;
        -webkit-filter: grayscale(0) hue-rotate(300deg);
        filter: grayscale(0) hue-rotate(300deg);
      }
    }

    编写gulp任务将scss编译成css:

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        csso = require('gulp-csso'),
        rename = require('gulp-rename'),
        concat = require('gulp-concat');
    
    // 创建sass编译任务
    gulp.task('sass', function () {
        gulp.src('src/**/*.scss')
            .pipe(concat('app.scss')) // 合并所有的scss到一个文件中
            .pipe(sass())
            .pipe(gulp.dest('www/css'))
            .pipe(rename({suffix: '.min'}))
            .pipe(csso())   // 压缩
            .pipe(gulp.dest('www/css'));
    });

    编译后生成的css:

    .accordian {
      width: 850px;
      margin: 100px auto; }
      .accordian ul li {
        float: left;
        list-style: none;
        width: 160px;
        transition: all 2s;
        position: relative;
        overflow: hidden;
        border-left: 1px solid rgba(255, 255, 255, 0.8);
        border-left-width: 2px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); }
        .accordian ul li .image_title {
          position: absolute;
          width: 100%;
          height: 50px;
          background-color: rgba(0, 0, 0, 0.5);
          text-indent: 2em;
          line-height: 50px;
          bottom: 0px;
          left: 0; }
          .accordian ul li .image_title a {
            color: #fff;
            text-decoration: none; }
      .accordian ul:hover li {
        width: 32px;
        -webkit-filter: grayscale(0.8);
        filter: grayscale(0.8); }
      .accordian ul li:hover {
        width: 640px;
        -webkit-filter: grayscale(0) hue-rotate(300deg);
        filter: grayscale(0) hue-rotate(300deg); }

    作为一个前端工程师,html和css是基础中的基础,如果你连页面都无法实现,能算是前端工程师吗?而且,一定自己动手多写些html和css,才能对页面的布局有所体会,理解如何“切豆腐”。

    js

    JavaScript 是 Web 的编程语言。

    这里写图片描述

    对于JS,你需要重点掌握:

    • 数据类型:JavaScript 中的所有事物都是对象:字符串、数值、数组、函数…重点要理解函数定义、函数声明式。
    • 变量提升:var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。
    • 函数式编程:如数组的sort、reduce、map等操作。
    • 闭包:闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。闭包使得函数拥有私有变量变成可能。
    • 继承:可以了解下JS实现继承的几种方式
    • DOM:通过 HTML DOM(Document Object Model),可访问 JavaScript HTML 文档的所有元素和创建动态的HTML。可重点了解JS Event对象详解
    • BOM:浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。需要掌握计时事件(timeoutinterval)和三种弹窗(alertcomfirmprompt)的使用。
    • AJAX:AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML) 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
    • 异步编程:Javascript异步编程的4种方法
    • 执行机制:js执行机制

    js的进阶

    es6

    ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准。ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。

    ES6的一些新特性真的非常激动人心:变量声明const和let,模板字符串(``,${}),扩展的函数功能(函数默认参数,rest参数,箭头函数),拓展的对象功能(简写,属性名表达式),解构赋值,展开运算符...,Set和Map,模块,Promise,Class等。

    这里推荐一篇不错的文章:Excuse me?这个前端面试在搞事!

    setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

    要理解这道题,你需要知道js的运行机制和es6的Promise

    推荐一定要在学习js后,学习es6,然后再去学习coffeescript和typescript。因为,第一,无论你学不学coffeescript和typescript,es6 是 js的下一代标准,正在被逐渐推广使用中;第二,coffeescript和typescript与es6有很多相似的语法,学习了es6后,再去学习coffeescript和typescript会轻松得多。

    coffeescript

    CoffeeScript 是一门编译到 JavaScript 的小巧语言。CoffeeScript其实就是js的「语法糖」,可以让代码的读写更简单。

    下面是官方的例子:

    # 赋值:
    number   = 42
    opposite = true
    
    # 条件:
    number = -42 if opposite
    
    # 函数:
    square = (x) -> x * x
    
    # 数组:
    list = [1, 2, 3, 4, 5]
    
    # 对象:
    math =
      root:   Math.sqrt
      square: square
      cube:   (x) -> x * square x
    
    # Splats:
    race = (winner, runners...) ->
      print winner, runners
    
    # 存在性:
    alert "I knew it!" if elvis?
    
    # 数组 推导(comprehensions):
    cubes = (math.cube num for num in list)
    var cubes, list, math, num, number, opposite, race, square,
      __slice = [].slice;
    
    number = 42;
    
    opposite = true;
    
    if (opposite) {
      number = -42;
    }
    
    square = function(x) {
      return x * x;
    };
    
    list = [1, 2, 3, 4, 5];
    
    math = {
      root: Math.sqrt,
      square: square,
      cube: function(x) {
        return x * square(x);
      }
    };
    
    race = function() {
      var runners, winner;
      winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
      return print(winner, runners);
    };
    
    if (typeof elvis !== "undefined" && elvis !== null) {
      alert("I knew it!");
    }
    
    cubes = (function() {
      var _i, _len, _results;
      _results = [];
      for (_i = 0, _len = list.length; _i < _len; _i++) {
        num = list[_i];
        _results.push(math.cube(num));
      }
      return _results;
    })();

    typescript

    typescript是JavaScript的一个超集,扩展了JavaScript的语法。TypeScript 通过类型注解提供编译时的静态类型检查。

    function area(shape: string, width: number, height: number) {
        var area = width * height;
        return "I'm a " + shape + " with an area of " + area + " cm squared.";
    }
    
    document.body.innerHTML = area("rectangle", 30, 15);

    上面只是一个简单的例子,更多关于typescript的语法请查看TypeScript 中文手册

    框架

    这里写图片描述

    我将框架分成样式组将类框架和js库框架。这里只是简单介绍下,不做深入介绍,只有真的去实战,才能切实掌握这些框架。

    样式组件类框架:

    • bootstrap:使用最广泛的web框架。bootstrap现在最新版本是Bootstrap4,与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用 Bootstrap3。
    • foundation:最先进的响应式框架。
    • semanticUI:创新性地采用自然语言处理技术的web框架。不过这个框架尚在发展,目前它的安装方式还没有前两者方便。

    js库框架:

    • jquery:html的元素操作、js特效和动画效果、css操作、html事件操作、ajax异步请求方式。jquery可以说是js的语法糖,读写很方便。
    • react:一个用于构建用户界面的js库。如果是复杂应用的话,就需要使用Redux.
    • angularjs:通过新的属性和表达式扩展了HTML
    • vuejs:一套构建用户界面的渐进式框架。如果是复杂应用的话,就需要使用vuex.
    • angularjs2:用来协助单一页面应用程序运行,基于ES6来开发的。

    构建/管理工具

    这里写图片描述

    npmbower基本上是用来管理模块,两者的用法基本相同。如果你是要安装开发依赖的模块而不是生产使用的模块的话,推荐使用npm来安装模块,被安装的模块默认在node_modules文件夹下。如果你要安装生产使用的模块(会被放在www下),推荐使用bower,因为你可以很方便地指定你模块安装的位置。

    gulpwebpackparcel都是打包工具。

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    Parcel 是一个Web应用程序 打包器(bundler) ,与以往的开发人员使用的打包器有所不同。它利用多核处理提供极快的性能,并且你不需要进行任何配置。

    规范

    规范是很重要的,如果你一开始就遵循并统一文件命名规范和相应技术的代码规范的话,那么在进行代码检查的时候,你就不会有语法不规范的低级错误了。

    这里我列出了我已知的规范内容:

    前端编码规范
    AngularJS风格指南
    Airbnb JavaScript 代码规范(ES6)

    展开全文
  • 前端技术简介

    千次阅读 2016-10-18 16:13:08
    在HTML入门教程学习之前,我们有必要跟大家讲一下网站开发的一些知识。了解这些知识,对你以后网站开发之路如何走、该学习些什么,是非常有用的。同时也避免你走太多的弯路。


    声明:本文转载自http://www.lvyestudy.com/les_hj/hj_1.1.aspx,如需要了解更多关于前端的知识,请查看该链接

    在HTML入门教程学习之前,我们有必要跟大家讲一下网站开发的一些知识。了解这些知识,对你以后网站开发之路如何走、该学习些什么,是非常有用的。同时也避免你走太多的弯路。

    一、从网页制作到前端开发

    1、web1.0时代的网页制作

    网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,例如一篇QQ日志、一篇博文等展示性文章。在web 1.0时代,用户能做的唯一一件事就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。现在大多数人都听过“网页三剑客Dreamweaver+Fireworks+Flash”吧,这个组合就是web 1.0时代的产物。

    :网页三剑客指的是“Dreamweaver、Fireworks和Flash”。

    2、web2.0时代的前端开发

    “前端开发”是从“网页制作”演变而来的。

    从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)

    仅仅使用HTML的文字


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


    前端技术(CSS)

    在HTML基础上加入CSS的文字


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

    前端技术(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才能使用。这样的功能就是后端技术所实现的。再有,淘宝网不是有很多商家吗?这些商家有各种各样的商品,这些庞大的数据只能使用后端技术中的数据库技术才能实现。

    1、PHP

    PHP是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,易于学习,使用广泛,主要适用于Web开发领域。

    2、JSP

    JSP技术有点类似ASP技术,它是在传统的网页HTML文件中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件。用JSP开发的web应用是跨平台的,既可以Windows系统下运行,也能在其他操作系统(如Linux)上运行。

    3、ASP.NET

    ASP.NET的前身就是我们常说的ASP技术。绿叶学习网就是使用ASP.NET开发的。ASP.NET是本系列课程推荐使用的一门技术。当然大家可以自己选择。

    以上三种都是动态网页技术,大家可以到这里详细了解一下:百度百科动态网页技术

    很多人都以为“网站就是很多网页的集合”,其实这个理解是太恰当的。准确来说,应该是“网站是前端与后端的结合”。

    四、从前端开发到后端开发的学习路线

    1、常见的Web技术

    常用Web技术
    常用Web技术

    2、学习路线

    从上面我们可以看出,Web技术实在太多了,很多同学都不知道怎么入手,上网问别人,回答又五花八门。这是本网站推荐的:

    HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门(或PHP入门)→Ajax→ASP.NET进阶(或PHP进阶)

    这一条路线是比较理想的一条从前端开发到后端开发的学习路线,其实你别看这条路线那么长,其实我是截断了来定制的,要掌握的也就几门技术:HTML、CSS、JavaScript、ASP.NET(PHP)、Ajax等。

    我们在HTML刚刚入门的时候,你不需要一定要把HTML学到精通才去学CSS入门教程(这也不可能),这是一种最笨又最浪费时间的学习模式。所以对于初学者,千万千万别想着精通了一门技术,再去精通另外一门技术。你要是能做到了,我相信肯定很多大神都拜你为师了。因为技术这种东西是要“通十行”才会把一行给通了。

    如果你走别的路线,你可能将会走很多很多的弯路。这条路线是本人从前端技术初学者开始,到开发了绿叶学习网、广州智能工程研究会网站、毕业选题系统、大量在线工具等项目以及阅读大量技术书籍之后的的心血总结。当然,这条路线也是一个建议,并非强硬。

    接下来,就是我们踏入前端开发的第一步——HTML入门教程

    疑问

    1、什么叫XHTML+CSS+JavaScript?

    我们看到市面上很多书名都叫“DIV+CSS”或“HTML+CSS”,其实这两个叫法都是不严谨的,准确来说是“XHTML+CSS”。但是叫的人多了,大家也知道是那个意思,所以约定俗成就干脆称为“DIV+CSS”或“HTML+CSS”。所以以后,我们看到“DIV+CSS”或“HTML+CSS”,心里也应该知道指的是“XHTML+CSS”。然而什么叫XHTML,我们在后面的章节会说到,读者不用手忙脚乱地。

    2、常见的JavaScript框架应该学习哪个?

    我们知道,HTML、CSS和JavaScript是前端技术中最基本的3个元素。对于HTML和CSS,他们没有别的框架,但是对于“JavaScript”来说,它却有很多框架,例如:

    “jQuery、ExtJS、Dojo、YUI……”

    那对于初学者来说,应该选择哪个JavaScript框架比较好呢。当然非jQuery莫属了。jQuery是全球最流行的JavaScript框架,是最简单易懂、最适合初学者入门的JavaScript框架,没有之一。

    总结

    1、从web1.0到web2.0,网页制作已经变为前端开发了。现在对于前端开发,你要学的不是什么“网页三剑客”,而是“HTML+CSS+JavaScript”;

    2、前端技术核心元素的是HTML、CSS和JavaScript,但是我们还要学习一些Ajax、SEO知识;

    3、前端技术只能开发静态网页,而进一步学习了后端技术,你能开发一个用户交互性更好、功能更加强大的网站;

    4、后端技术有ASP.NET(或PHP)、SQL Server等;

    5、学习路线:HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门(或PHP入门)→Ajax→ASP.NET进阶(或PHP进阶);

    展开全文
  • Web前端工程师常去的15个技术网站

    万次阅读 多人点赞 2018-04-02 17:39:43
    是中国最大的IT社区和服务平台,为中国的软件开发者和IT从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等...
    1、CSDN
    

    网址:https://www.csdn.net/

    简介:

    CSDN (Chinese Software Developer Network) 创立于1999年,是中国最大的IT社区和服务平台,为中国的软件开发者和IT从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。


    2、GitHub

    网址:https://github.com/

    简介:

    gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。

    gitHub于2008年4月10日正式上线,除了git代码仓库托管及基本的 Web管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。

    目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。


    3、知乎

    网址:https://www.zhihu.com/

    简介:

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    准确地讲,知乎更像一个论坛:用户围绕着某一感兴趣的话题进行相关的讨论,同时可以关注兴趣一致的人。

    对于概念性的解释,网络百科几乎涵盖了你所有的疑问;但是对于发散思维的整合,却是知乎的一大特色。


    4、jQuery

    网址:http://jquery.com/

    简介:

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

    jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。


    5、w3cschool

    网址:http://www.w3school.com.cn/

    简介:

    W3Cschool是一个专业的编程入门学习及技术文档查询应用,提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册,是类似国外w3schools的学习社区及菜鸟编程平台。


    6、Node.js

    网址:https://nodejs.org/

    简介:

    Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。

    V8引擎执行Javascript的速度非常快,性能非常好。Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。

    Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。


    7、npm.js

    网址:https://www.npmjs.com/

    简介:

    npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。


    8、vue.js

    网址:https://cn.vuejs.org/

    简介:

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

    另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。


    9、segmentfault(思否)

    网址:https://segmentfault.com/

    简介:

    SegmentFault是中国领先的开发者技术社区。 为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。


    10、Bootstrap

    网址:http://www.bootcss.com/

    简介:

    Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。

    Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

    Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

    国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。


    11、博客园

    网址:https://www.cnblogs.com/

    简介:

    博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。


    12、菜鸟教程

    网址:http://www.runoob.com/

    简介:

    菜鸟教程提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 

    同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。


    13、掘金

    网址:https://juejin.im/

    简介:

    掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。

    掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括:Android、iOS、前端、后端等方面的内容。


    14、开源中国

    网址:https://www.oschina.net/

    简介:

    开源中国成立于2008年8月,是目前国内最大的开源技术社区,拥有超过200万会员,形成了由开源软件库、代码分享、资讯、协作翻译、码云、众包、招聘等几大模块内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。


    15、脚本之家    

    网址:http://www.jb51.net/

    简介:

    脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。

    来源:千锋HTML5


    1、CSDN

    网址:https://www.csdn.net/

    简介:

    CSDN (Chinese Software Developer Network) 创立于1999年,是中国最大的IT社区和服务平台,为中国的软件开发者和IT从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。


    2、GitHub

    网址:https://github.com/

    简介:

    gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。

    gitHub于2008年4月10日正式上线,除了git代码仓库托管及基本的 Web管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。

    目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。


    3、知乎

    网址:https://www.zhihu.com/

    简介:

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    准确地讲,知乎更像一个论坛:用户围绕着某一感兴趣的话题进行相关的讨论,同时可以关注兴趣一致的人。

    对于概念性的解释,网络百科几乎涵盖了你所有的疑问;但是对于发散思维的整合,却是知乎的一大特色。


    4、jQuery

    网址:http://jquery.com/

    简介:

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

    jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。


    5、w3cschool

    网址:http://www.w3school.com.cn/

    简介:

    W3Cschool是一个专业的编程入门学习及技术文档查询应用,提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册,是类似国外w3schools的学习社区及菜鸟编程平台。


    6、Node.js

    网址:https://nodejs.org/

    简介:

    Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。

    V8引擎执行Javascript的速度非常快,性能非常好。Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。

    Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。


    7、npm.js

    网址:https://www.npmjs.com/

    简介:

    npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。


    8、vue.js

    网址:https://cn.vuejs.org/

    简介:

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

    另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。


    9、segmentfault(思否)

    网址:https://segmentfault.com/

    简介:

    SegmentFault是中国领先的开发者技术社区。 为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。


    10、Bootstrap

    网址:http://www.bootcss.com/

    简介:

    Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。

    Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。千锋HTML5

    Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

    国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。


    11、博客园

    网址:https://www.cnblogs.com/

    简介:

    博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。


    12、菜鸟教程

    网址:http://www.runoob.com/

    简介:

    菜鸟教程提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 

    同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。


    13、掘金

    网址:https://juejin.im/

    简介:

    掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。

    掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括:Android、iOS、前端、后端等方面的内容。


    14、开源中国

    网址:https://www.oschina.net/

    简介:

    开源中国成立于2008年8月,是目前国内最大的开源技术社区,拥有超过200万会员,形成了由开源软件库、代码分享、资讯、协作翻译、码云、众包、招聘等几大模块内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。


    15、脚本之家    

    网址:http://www.jb51.net/

    简介:

    脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。

    展开全文
  • 2017年Web前端技术综述

    万次阅读 2018-02-13 18:03:14
    Web前端应用发展的历史大概经历了三个阶段:第一个阶段使用的是简单的静态页面,第二个阶段使用得是ASP、JSP、PHP等动态脚本语言,第三个阶段是Web2.0阶段,其核心技术是AJAX,同时伴随着SPA的兴起。SPA vs. MPA从...
  • Web前端常用的十种技术

    千次阅读 2019-06-26 16:42:23
    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最...
  • Web前端十种常用的技术

    千次阅读 2019-06-22 16:39:49
    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最...
  • 送给大家一套完整的web前端开发学习路线

    万次阅读 多人点赞 2018-11-21 15:19:58
    在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景高薪资吸引了众多的人投入到前端开发的学习当中去,想学好web前端...
  • Web前端从初级到高手之路

    万人学习 2018-10-22 21:38:04
    本套课程分为UI设计基础课程、Web前端通用代码与UI交互实现、移动端Web前端与UI实现三个大章节,课程讲述UI设计、Flash、交互设计、HTML5、CSS3、JavaScript等web前端技术。凡是购买本套课程的学员,可以加QQ群: ...
  • 零基础学习web前端需要多久时间

    万次阅读 2018-09-07 12:14:31
    当下学习WEB前端技术是很不错的选择,不少人也渐渐认识到了WEB前端技术是非常有前景的,一些没基础的朋友,也想学好这门技术,但是又不知道零基础学完WEB前端要多久? 1:要想知道学这门技术的周期是多长, 那么就...
  • 随着互联网的迅猛发展和普及,一个新型的行业和新兴的职位正在上升到技术的层面:web前端开发 Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准...
  • 给你一份完整的Web前端学习路线图

    万次阅读 多人点赞 2019-04-12 21:31:57
    前端开发人员的地位也日益提高,相应的技术要求要是越来越高,那么现在想成为一名合格的Web前端工程师应该怎样学习呢 Web前端学习路线图,希望对初学者有帮助。 1.Javascript 语言 全栈开发中,用的编程语言...
  • 过去的2017年可以说是一个“编程语言年”,这一年的前端开发不再像过去几年里新技术框架层出不穷,百家争鸣的局面,而是各种组件,模块,很多东西都有痕迹可寻,技术都在原来的基础上有了革新和沉淀。前端招聘方面也...
  • 主流web前端技术框架有哪些?

    万次阅读 2018-11-07 16:08:21
    Web架构是为解决Web开发中开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮助快速实现Web开发,并解决开发过程中遇到的常规问题!以下是2018年常用的Web框架: 1. Bootstrap Bootstrap是一款很受欢迎...
  • web前端与html5有什么区别

    千次阅读 2018-06-11 16:42:14
    什么是html5?html5其实是一种技术的集合,它包括了html5,CSS3,JS等技术。...不过这也看具体的公司吧,不同的公司对WEB前端开发人员的技术要求也不一样。什么是web前端?再传统规的意义上来讲,网站是分为...
  • web前端与后端的区别

    万次阅读 多人点赞 2018-02-21 21:24:59
    要了解web前后端的区别,首先必须得清楚什么是web前端和web后端。首先:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、...
  • python web开发--web前端开发介绍

    千次阅读 2018-08-20 14:11:14
  • web前端新手面试指南:自我介绍

    万次阅读 2019-06-20 14:34:50
    面试时注意:自我介绍不能太长,也不能过短,3分钟左右最合适,尤其做为web前端技术方面的面试,更加要说到点上,我依次从学习方面、项目实践、未来规划这三个方面写下web前端面试的自我介绍。 您好,我叫###,广东...
  • “工欲善其事,必先利其器”,学习WEB前端开发也是一样。 一、前端视频教程-51自学网 我要自学网是由佛山市丰智胜教育咨询服务有限公司倾力打造的在线实用技能学习平台。该平台成立于2007年6月7日,是一家专业...
  • 全套web前端开发VIP视频课程(40G)

    万次阅读 2018-06-08 08:32:26
    元素说明output标签定义不同类型的输出&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...body&a
1 2 3 4 5 ... 20
收藏数 216,184
精华内容 86,473
关键字:

web前端技术