前端开发_前端开发工具 - CSDN
前端开发 订阅
前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。 [2]  移动互联网带来了大量高性能的移动终端设备以及快速的无线网络,HTML5,node.jS的广泛应用,各类框架类库层出不穷。 [1] 展开全文
前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。 [2]  移动互联网带来了大量高性能的移动终端设备以及快速的无线网络,HTML5,node.jS的广泛应用,各类框架类库层出不穷。 [1]
信息
应用领域
网站、小程序、Webapp开发等 [2]
外文名
Web front-end development
主流框架技术
Vue.js、AngularJS、React等 [2]
中文名
Web前端开发
主要技术
HTML、CSS、JS、jQuery等 [2]
前端开发发展历程
前端技术的发展是互联网自身发展变化的一个缩影。前端技术指通过浏览器到用户端计算机的统称,存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。以前会Photoshop和Dreamweaver就可以制作网页,随着网站开发难度加大、开发方式多样,网页制作更接近传统的网站后台开发,网页制作更多被称为Web前端开发。前端技术包括4个部分:前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等。在Web1.0时代,由于网速和终端能力的限制,大部分网站只能呈现简单的图文信息,并不能满足用户在界面上的需求,对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及,技术可以在用户体验方面实现更多种可能,前端技术领域迸发出旺盛的生命力。2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。随着手机成为人们生活中不可或缺的一部分,成为人们身体的延伸,人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外,前端技术还能应用于智能电视、智能手表甚至人工智能领域。 [1] 
收起全文
精华内容
参与话题
  • 1.web前端开发工程师是做什么的  简单地说,就是要与网站打交道 2.成为一名web前端工程师需要具备的条件  ①兴趣  ②敲代码(实践、需要去练习) 3.Web前端开发工程师需要学习什么(重点:HTML,CSS,...

    1.web前端开发工程师是做什么的

           简单地说,就是要与网站打交道

    2.成为一名web前端工程师需要具备的条件

          ①兴趣

          ②敲代码(实践、需要去练习)

    3.Web前端开发工程师需要学习什么(重点:HTML,CSS,JavaScript硬性指标)

         ①软件(代码的辅助工具)

           浏览器:浏览器有非常多,(谷歌Chrome(性能比较稳定),火狐,IE)(访问网站必须通过浏览器,所以需要了解浏览器基础功能)

               浏览器调试工具:F12可以快捷打开,或者:右键--->检查

     

         编辑器:写代码的工具,HBuilder、sublime、Dreamweaver

         PS:Photoshop处理图片

       ②语言(计算机编程语言)(与网站沟通的语言)

         HTML(结构:如房屋结构):超文本标记语言

                      语言:与浏览器你沟通的一个方式

                     标记(标签):<>(必须放在一对尖括号当中)如<html> </html>这样表示HTML这句话说完了“/”或者<meta />,meta是个单标签

                      文本:文本就是语言

                      超:网页中不光可以放文本,还可以放图片、视频、音乐

          例如:采用Hbuilder写一个简易的网页,一个网页就像人一样有头有身体,网页也大致相同,有head,有body,也对应人体身体结构,如下所示:

    <!doctype html><!--doc就是document的缩写  文档头声明-->
    <html>
    <head>
    <meta charset="utf-8"/><!-- character set设置编码格式 --> 
    <title>这里是标题</title>
    </head>
    
    <body>
    这是我的第一个网页
    </body>
    </html>

            打开刚刚编辑的文件所在的位置,会发现有一个html结尾的文件,双击打开网页中就可以显示

           

    可以看到刚刚编辑的title和body里文字的位置。

             CSS(样式,如:房屋的样式,房屋里的地板砖颜色,款式等等):层叠样式表

                         width:200px;

                         height:300px;

                         background:red;等等

              网页是有很多方块组成,如下大大小小不同方块

            画方块我们要用一个div标签(双标签):<div>...... </div>在双标签中进行编写样式,而css就是用来控制div长什么样子,有多大,字体多大,什么颜色等。添加前也必须先找到你要添加的这个方块位置。下面在hbuilder中举例子:

    <!-- 注意全部为英文格式下输入-->
    <!doctype html><!--doc就是document的缩写  文档头声明-->
    <html>
    <head>
    <meta charset="utf-8"/><!-- character set设置编码格式 --> 
    <title>这里是标题</title>
    </head>
    
    <body>
    这是我的第一个网页
    <div style="width:200px;height:300px;"> 
    <!-- px代表像素,width表示宽,height表示高,每条命令结束后记得分号-->
    这是一个方块
    </div> 
    </body>
    </html>

             但是查看网页时,并没有多大变化:

     然后我们通过上述所讲的浏览器调试工具来查看一下:

    那么怎么做才能更直观地将写入的方块展示在我们眼前呢?a添加一个背景

    <div style="width:200px;height:300px;background:red;"> 
    <!-- 1.px代表像素,width表示宽,height表示高,每条命令结束后记得分号-->
    <!-- 2.background:red 为这个方块添加一个红色的背景,方便我们观察-->
    这是一个方块
    </div> 

     查看一下此时网页的状态,可以发现这时的div和这是一个方块这句话相结合起来的,也就是这是一个方块是css样式的内容

           b添加一个边框,对style进行修改

    <div style="width:200px;height:300px;border:5px solid red;"> 
    <!-- 1.px代表像素,width表示宽,height表示高,每条命令结束后记得分号-->
    <!-- 2a.background:red 为这个方块添加一个红色的背景,方便我们观察-->
    <!-- 2b.border:5px solid red;为这个方块添加一个边框,10像素、实线、红色的边框,方便我们观察-->
    这是一个方块
    </div> 

     c.给背景添加一张图片

    简单的百度一张图片,右键复制图片地址

            <!-- 2c.background:url();括号里放置图片地址-->

    <div style="width:200px;height:300px;background:url(http://p1.so.qhimgs1.com/bdr/_240_/t01f0c2ec21427f5ded.jpg);"> 
    <!-- 1.px代表像素,width表示宽,height表示高,每条命令结束后记得分号-->
    <!-- 2a.background:red 为这个方块添加一个红色的背景,方便我们观察-->
    <!-- 2b.border:5px solid red;为这个方块添加一个边框,10像素、实线、红色的边框,方便我们观察-->
    <!-- 2c.background:url();括号里放置图片地址-->
    这是一个方块
    </div> 

    查看一下此时网页形式

       可以发现图片的显示是有点问题的,因为这个方块设置的大小有点问题 ,此时可以使用刚所说的浏览器调试工具重新设置方框大小。但是一刷新还是会变回去,所以浏览器调试工具里面的更改只是暂时的,它只是能够直观的让我们见到更改后的样子,最根本的更改还是要去代码里更改。 

     JavaScript(行为,能控制的东西,比如房间里灯的开关):脚本语言

    举个例子:鼠标点击时图片变大,也是在div中编辑

    <div onclick="this.style.width='800px';this.style.height='200px'" 
    	style="width:200px;height:200px;background:url(http://p1.so.qhimgs1.com/bdr/_240_/t01f0c2ec21427f5ded.jpg);"> 
    <!-- 1.px代表像素,width表示宽,height表示高,每条命令结束后记得分号-->
    <!-- 2a.background:red 为这个方块添加一个红色的背景,方便我们观察-->
    <!-- 2b.border:5px solid red;为这个方块添加一个边框,10像素、实线、红色的边框,方便我们观察-->
    <!-- 2c.background:url();括号里放置图片地址-->
    <!-- 3.onclick;on当,click点击,当鼠标点击的时候的状态 ;this.style.width表示它的style的宽,点表示的-->
    这是一个方块
    </div> 

        点击前:

     鼠标点击后:

         其实,凡是网页上在动的,能动的也就是网页中的动画就是js来做的,也就是JavaScript做的

     

    <!-- 注意全部为英文格式下输入-->
    <!doctype html><!--doc就是document的缩写  文档头声明-->
    <html>
    <head>
    <meta charset="utf-8"/><!-- character set设置编码格式 --> 
    <title>这里是标题</title>
    </head>
    
    <body>
    这是我的第一个网页
    <div onclick="this.style.width='800px';this.style.height='200px'" 
    	style="width:200px;height:200px;background:url(http://p1.so.qhimgs1.com/bdr/_240_/t01f0c2ec21427f5ded.jpg);"> 
    <!-- 1.px代表像素,width表示宽,height表示高,每条命令结束后记得分号-->
    <!-- 2a.background:red 为这个方块添加一个红色的背景,方便我们观察-->
    <!-- 2b.border:5px solid red;为这个方块添加一个边框,10像素、实线、红色的边框,方便我们观察-->
    <!-- 2c.background:url();括号里放置图片地址-->
    <!-- 3.onclick;on当,click点击,当鼠标点击的时候的状态 ;this.style.width表示它的style的宽,点表示的-->
    这是一个方块
    </div> 
    </body>
    </html>
    

         综上,举个例子,HTML就是房屋的结构。css是房屋的样式,而js就是房屋里能动的、能操作的东西。样式是依托于结构的,房子想要呈现出不同的样子就必须依托于样式,比如同样的房屋结构,但是不同的装修风格可以使其展示出不同的样子,房屋里的开关这些需要我们去操作的就是js。通过学习了解到如果想做前端开发,那么HTML、CSS、JavaScript这三样东西是硬性指标,是必须要掌握的。

    Hbuilder的基本使用

    新建一个web项目

     

    新建一个HTML文件

     

     

       创建成功后

     

    一些基本使用的操作

     

     

     

     

     

     

     

     

     

    展开全文
  • web前端开发(一)—HTML基础

    万次阅读 多人点赞 2018-07-31 23:41:15
    web前端简介 什么是HTML? HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、...

     

    目录

    web前端简介

    什么是HTML?

    HTML标签

    HTML基本结构

    HTML 段落标签

    HTML 换行标签

    HTML标题

    HTML 水平线

    HTML注释

    HTML 标签

    HTML 列表标签

    HTML表格

    HTML超链接

    HTML 图片

    HTML表单

    表单元素-文本、密码框

    表单元素-多行文本框

    表单元素-选择框

    表单元素-下拉选择框

    表单元素-按钮

    HTML-div


    web前端简介

    web前端开发是从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。

    学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

    1. HTML是网页内容的载体内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

    2. CSS样式是表现就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

    3. JavaScript是用来实现网页上的特效效果如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

     

    什么是HTML?

    HTML 指的是超文本标记语言 (Hyper Text Markup Language)

    HTML 不是一种编程语言,而是一种标记语言 (markup language)

    标记语言是一套标记标签 (markup tag)

    HTML 使用标记标签来描述网页

     

    HTML标签

    HTML 标签是由尖括号包围的关键词,比如 <html>

    HTML 标签通常是成对出现的,标签对中的第一个标签是开始标签,第二个标签是结束标签

    http://img.mukewang.com/528960dc0001cb6802710128.jpg

    标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。

    http://img.mukewang.com/5289611a0001469c05510206.jpg

     

    HTML基本结构

    一个HTML文件是有自己固定的结构,如下所示:

    <html>

    <head>...</head>

        <body>...</body>

    </html>

    代码讲解:

    1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

    2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script>、 <style><link>、 <meta>等标签,头部标签在之后会详细介绍。

    3. <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

     

    在head中设置网页标题和字符集编码

    <head>

        <title>这里是标题</title>

        <meta charset="utf-8"/>

    </head>

     

    HTML 段落标签

    如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。

    <p>段落 </p>

    <p>标签的默认样式,段前段后都会有空白。

     

    HTML 换行标签

    如果希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

    <p>This is<br/>a para<br/>graph with line breaks</p>

     

    HTML标题

    标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
    语法: <hx>标题文本</hx> (x为1-6)

    题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。一个标题标签要独占一整行。

     

    HTML 水平线

    <hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。

    <p>This is a paragraph</p>
     <hr />
    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>

     

    HTML注释

    么是代码注释代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。

    语法:

    <!--注释文字 -->

     

    HTML <span>标签

    <span>它的作用就是为了结合CSS设置单独的样式用的,本身没有任何效果。

     

    HTML 列表标签

    1)无序列表

    在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。

    http://img.mukewang.com/52d383cd0001085503320216.jpg

    这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

    语法:

    <ul>
      <li>...</li>
      <li>... </li>
       ......
    </ul>

    2)有序列表

    如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

    http://img.mukewang.com/52d3884a00014b0702270264.jpg

    语法:
    <ol>
       <li>信息</li>
       <li>信息</li>
       ......
    </ol>

     

    HTML表格

    有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:

    http://img.mukewang.com/52d38f0b00017e4305060133.jpg

    想在网页上展示上述表格效果可以使用以下代码:

    http://img.mukewang.com/52d38f83000160be02920445.jpg

    创建表格的四个元素:

    table、tr、th、td

    1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    2、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

    3、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    4、<th>…</th>:表格的头部的一个单元格,表格表头。

    5、表格中列的个数,取决于一行中数据单元格的个数。

    表格标题

    <caption> 指定表格标题,它显示在表格上方。

         语法:

    <table>

        <caption>标题文本</caption>

        <tr>

            <td>…</td>

            <td>…</td>

            …

        </tr>

    </table>

     

    合并单元格

    有时候一些行和列需要合并,如下:

    合并行使用rowspan属性,合并列使用功能colspan属性。

     

     

     

    HTML超链接

    使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

    语法:

    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

    例如:

    <a  href="http://www.baidu.com"  title="点击进入百度">click here!</a>

     

    上面例子作用是单击click here!文字,网页链接到http://www.baidu.com这个网页。

    title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

     

    <a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。

    如下代码:

    <a href="目标网址" target="_blank">click here!</a>

     

    HTML 图片

    在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。

    语法:

    <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

    举例:

    <img src = "myimage.gif" alt = "My Image" title = "My Image" />

    讲解:

    1、src:标识图像的位置;

    2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

    3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

    4图像可以是GIF,PNG,JPEG格式的图像文件。

     

     

     

    HTML表单

    网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

    <form   method="传送方式"   action="服务器文件">

    讲解:

    1.<form> <form>标签是成对出现的,以<form>开始,以</form>结束。

    2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    3.method  数据传送的方式(get/post)。

    <form    method="post"   action="save.php">

            <label for="username">用户名:</label>

            <input type="text" name="username" />

            <label for="pass">密码:</label>

            <input type="password" name="pass" />

    </form>

    注意:

    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。

    2、method : post/get

     

    表单元素-文本、密码框

    当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框

    语法

    <form>

       <input type="text/password" name="名称" value="文本" />

    </form>

    1、type:

       当type="text"时,输入框为文本输入框;

       当type="password"时, 输入框为密码输入框。

    2、name:为文本框命名,以备后台程序ASP 、PHP使用。

    3、value:为文本输入框设置默认值。(一般起到提示作用)

    举例:

    <form>

      姓名:

      <input type="text" name="myName">

      <br/>

      密码:

      <input type="password" name="pass">

    </form>

    在浏览器中显示的结果:

    http://img.mukewang.com/52e4e9be000152ca05250275.jpg

     

    表单元素-多行文本框

    当用户需要在表单中输入大段文字时,需要用到文本输入域。

    语法

    <textarea  rows="行数" cols="列数">文本</textarea>

    1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

    2cols 多行输入域的列数

    3rows 多行输入域的行数

    4、在<textarea></textarea>标签之间可以输入默认值

    举例:

    <form  method="post" action="save.php">
            <label>联系我们</label>
            <textarea cols="50" rows="10" >在这里输入内容...</textarea>
    </form>

    注意:代码中的<label>标签在本章5-9中讲解。

    在浏览器中显示结果:

    http://img.mukewang.com/52e5b4040001f4af05760367.jpg

     

    表单元素-选择框

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:

    语法:

    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

    1type:

       当 type="radio" 时,控件为单选框

       当 type="checkbox" 时,控件为复选框

    2value提交数据到服务器的值(后台程序PHP使用)

    3name为控件命名,以备后台程序 ASP、PHP 使用

    4checked当设置 checked="checked" 时,该选项被默认选中

    如下面代码:

    http://img.mukewang.com/52e5f7c60001a23f07360267.jpg

    注意:代码中的<label>标签在本章 5-9 中有讲解。

    在浏览器中显示的结果:

    http://img.mukewang.com/52e5f8010001159804900257.jpg

    注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

     

    表单元素-下拉选择框

    下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:

    http://img.mukewang.com/52e604590001ae4005270185.jpg

    讲解:

    1、value:

    http://img.mukewang.com/52e6037300015a9905030165.jpg

    2selected="selected"

    设置selected="selected"属性,则该选项就被默认选中。

    在浏览器中显示的结果:

    http://img.mukewang.com/52e605340001014804520288.jpg

     

    表单元素-按钮

    在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮

    语法

    <input   type="submit"   value="提交">

    type:只有当type值设置为submit时,按钮才有提交作用

    value按钮上显示的文字

    举例:

    http://img.mukewang.com/52e613350001461604820109.jpg

     

    HTML-div

    在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

    语法:

    <div>…</div>

    确定逻辑部分:

    什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。

    http://img.mukewang.com/52d38c41000163e210120455.jpg

     

     

    展开全文
  • 在已经成功的为大家讲解了多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们总结成了五条警言,希望...

    在已经成功的为大家讲解了多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们总结成了五条警言,希望能够对你的学习带来一些小的帮助。

     

    希望收藏了我写的文章的你同时可以加下我的前端学习QQ群606721798。

    前端开发是当今社会上比较有发展潜力的一个行业,该行业主要以Web开发、移动端开发、全栈式开发等为主要内容。在社会上有较为广泛的应用领域,从业者有较为丰厚的薪资待遇。那么对于一个前端开发从业者来说,如何学习前端开发的相关知识,如何将自己打造为一个强大的前端开发设计师呢?我从事多年的一线教学工作,深入挖掘学生在学习阶段的特点,总结了以下十条学习心得,愿意与大家一同分享。

    由于篇幅问题,本篇文章先为大家阐述前五条,

    第一条:学好基础知识,做一个有扎实基本功的开发者。

    前端开发的相关技术和知识非常多,每年还会有许多新的技术诞生并得到广泛的推广。IT行业本身就是一个技术更新非常快的行业。不过每门技术都有它最基本的知识内容和基础体系。无论学到多深的程度,扎实的基本功是必不可少的。

    初入职场,如果能够得到老板或技术总监一句“你的基础知识真扎实”的赏识,对于新入行的你一定是信心满满,也让领导对你有一个新层次的认识。

    我将前端开发的基础知识总结为以下几点,对于初学者来说,一定要认真学习这部分内容:

    1、HTML超文本标记性语言:尽量掌握尽可能多的标记或标记对。

    (1)必须掌握的标记或标记对包括:<html>、<head>、<title>、<body>、<h1>、<p>、<a>、<img>、<table>、<tr>、<td>、<th>、<form>、<input>、<select>、<option>、<textarea>、<div>、<span>、<script>、<link>、<meta>、<style>、<hr>等。

    (2)同时,还有许多较为生僻的标记,大家看一看,你认识下列标记对吗?

    • <label></label>:用于表单中盛放表单元素的文本提示,被称为“标签”标记对。

    • <pre></pre>:预格式化文本,在该标记对内部文本中的空格和换行都会在页面中起作用。

    • <address></address>:用于表示地址的语义标签。

    • <var></var>:用于表示变量的语义标签。

    当然还有许多较为生僻的标签,这些标签在日常的HTML开发中基本上已经不再使用了。但是当你学到Bootstrap框架的时候,你会发现,Bootstrap框架启用了这些标签,并为这些标签赋予了特定的功能和外观。

    (3)除此之外,HTML5技术也为HTML注入了新的活力,许多新标签和新属性加入其中,使得HTML语言更加丰富与强大。

    • <button>标记对:HTML5新加的具有数据提交功能的按钮。

    • <canvas></canvas>:HTML5的画布技术,该标记对结合脚本语言对应一套完整的API,可以实现页面矢量图的绘制。

    • <audio></audio>:HTML5的音频技术,该标记对结合脚本语言对应一套完整的API,可以开发有关音频的项目。

    当然还有许多HTML5新加的内容,需要广大初学者更多地接触并掌握。

    2、CSS层叠样式表:对于CSS的各个属性以及一些属性之间结合使用的技巧应该多钻研。

    CSS技术作为对HTML标记对外观的扩展,在前端开发中体现出了强大的生命力。再结合CSS3技术,又扩展了大量的属性,使得CSS的功能更为全面,实现方法更为简洁。学好CSS,同时也是为页面布局打下坚实的基础。

    你会用CSS技术的使用技巧解决下列问题吗?

    • 如何去掉容器中图片下方自动产生的距离。

    • 当容器中具有浮动元素时,如何为容器设置边框或背景颜色?

    • 怎样让块级元素在容器中水平居中?

    • 当多个连续块级元素的浮动布局影响了原本不想浮动的对象时该如何处理?

    • 容器内部的对象如何实现相对于容器的自由定位?

    看来,CSS的属性及其取值只是CSS技术的第一层面,更多的使用技巧等待大家去挖掘。

     

    3、CSS+div布局模式:这是许多布局模式的基础,也是大部分前端开发人员接触到的第一种布局方式。

    这种布局模式对于PC端页面的设计是非常有帮助的,同时对于后面将会遇到的“圣杯布局”、“双飞翼布局”、“移动端布局”、“响应式布局”等,这种布局方式都具有一定的指导意义。

    上述就是小海老师认为的一定要非常扎实的掌握的前端开发的基础知识。基础知识是高阶知识的起步平台,没有基础知识,更深层次的内容是无法真正理解的。

    第二条:重视脚本学习,将JavaScript作为前端学习的重点。

    JavaScript已经发展成为了Web开发的唯一的脚本语言。它从早期的基于对象的语言变为了面向对象的语言,现代JavaScript为前端开发带来了不可替代的技术革新。

    • JavaScript可以轻松的实现HTML和CSS无法实现的流程控制。

    • 结合DOM技术,JavaScript可以访问HTML元素并操作它们。

    • HTML5中的许多API都是基于JavaScript进行开发和设计的。

    • 强大的jQuery库、jQuery UI、jQuery Mobile等都是在JavaScript的基础上开发出来的。

    • 全栈式开发所使用的node.js、AngularJS等第三方框架,也都是在JavaScript的基础上编写的。

    这门神一般的语言,我个人认为是务必要认真学习的,不仅要学习JavaScript的语法知识,还要学习利用它实现DOM元素的使用,学会面向对象的编程思想。甚至还要掌握该门语言的细节特点。

    系统学习过JavaScript的同学们,你看看下列问题你能准确的找到答案吗?

    • 通过表达式来系统阐述“==”和“===”这两个运算符的区别。

    • 通过哪个函数可以判断从文本框中获取的内容是不是数字?

    • 会使用这两个属性吗:contentEditable、isContentEditable。

    • 知道window对象的两个方法:setTimeout()、setInterval()在计时器方面的使用区别吗?

    • delete运算符都能删除哪些内容?

    • 在脚本中,this有几种使用情况呢?

    JavaScript语言虽然很重要,许多公司都需要从业人员掌握原生态的JavaScript代码。但是这门语言由于发展过程中的种种原因,存在许多繁冗且不好的代码模式。例如原型链、闭包、对象与类等概念,都给这门语言戴上了“难学”的帽子。同时,这些知识有时候也正是JavaScript放光彩的一面,所以对于这门脚本语言掌握不精的学习者来说,一定要把这门语言搞懂,达到精通的程度,对于后续的全栈式开发绝对有非常好的作用。

    第三条:多练习多操作,实践是检验真理的唯一标准。

    前端开发本身就是需要实战经验非常强的一门学科。学习和工作过程中,不断地、反复地、大量地尝试和上机操作,是学好前端开发唯一不变的方法。

    这里拿Bootstrap框架为例,互联网上大部分教程和许多前端教师都提倡让学生从Bootstrap官网上复制粘贴代码,以更加快速的完成页面的搭建。

    尤为反对这种方式,特别是对于还处在学习阶段的同学们和初次使用Bootstrap框架的从业者。首先不可否认,Bootstrap为前端开发人员带来了大量的类名和属性之间的搭配关系,每一个组件和插件的使用都用脑子记下来,确实有很大的困难。但是在学习阶段,我非常提倡对官网的示例代码进行钻研和分析,阅读bootstrap.css文件和bootstrap.js文件,从原理上理解这个框架是如何利用简单的类名和属性名来实现复杂的脚本功能的。我在日常的教学过程中也是这么带领学生一起学习的。

    正所谓“知其然,还要知其所以然”,了解了内部的原理,一方面自己更加容易去记忆这些大量的名称,另一方面,对于样式类框架的开发,也会有一定的了解。时间久了,自己也能写出符合自身特点的小框架,使得知识达到循序渐进、熟能生巧的程度。

    第四条:阅读前端书籍,多看有关前端开发的经典著作。

    “读书”永远是掌握技术的一种有效方法,无论什么技术。读书的过程不仅能够让我们了解作者的意图,更能训练我们的阅读速度,提高自身的自学能力。这正是一个合格的前端开发工程师应该具备的业务素质。

    这里,小海老师为大家推荐几本前端开发领域的经典著作,真的希望你也能拿起教材,从第一页读到最后一页,你一定会受益匪浅。

    Bootstrap开发的经典教材

    学习JavaScript脚本语言必不可少的好书

    jQuery提高的优质教材

    非常适合初学Node.js的学生阅读的书

    一本讲述SVG实践的教材

    第五条:利用网络资源,多学习前辈好的实现方法。

    如今互联网渗入到了我们学习和工作的方方面面,与其天天拿着手机刷微博、聊微信,何不拿起互联网这个工具,多多学习一些有关前端开发的知识,积累一些前人总结出来的经验,丰富自己的羽翼。

    这里,为大家推荐几个学习前端开发的网站,希望大家可以多多浏览,利用好互联网资源。

    • 慕课网。其中汇集了大量一线教师的教学经验,全部是以视频的形式呈现的。

    • W3CSchool。这里列举了多门前端技术和后台技术的基础知识。内容较为基础,却是初学者好的帮手。

    • 菜鸟教程。一个类似于W3CSchool的基础知识学习网站。

    • jQuery API中文文档(http://jquery.cuishifeng.cn/)。这里汇集了jQuery各个版本的API内容。

    • Bootstrap中文网。这里涵盖了Bootstrap框架全部的组件和插件。

    如果大家也有好的学习网站,希望也推荐给我哦。

     

     

    展开全文
  • JavaScript 前端开发技术

    千人学习 2018-03-06 12:04:08
    前端技术技术
  • 前端项目开发流程

    万次阅读 2017-07-13 09:50:05
    当前分为以下四个阶段 第一阶段 库/框架选型(暂定react) 第二阶段 ...JS、CSS模块化开发 ...组件化开发 ...开发过程当中注意:前端安全XSS CSRF攻击等 后期文章中将讲述如何

    当前分为以下四个阶段

    第一阶段

    库/框架选型(暂定react

    第二阶段

    简单构建优化

    NPM管理包

    node+webpack打包

    第三阶段

    JSCSS模块化开发

    第四阶段

    组件化开发

     

    开发过程当中注意:前端安全XSS CSRF攻击等 后期文章中将讲述如何处理

     

    尽管web应用复杂程序与日俱增,用户对其前端界面也提出更高的要求,但时至今日仍然没有多少前端开发者会从软件工程的解度去思考前端开发,来助力团队的开发效率,以下我们使用以上说明的四个阶段来完成基本的前端项目开发流程及技术选型

     

    第一阶段:/框架选型

    使用react框架实现,基本上现在没有人完全从0开始做网站了。React框架,解放了不少生产力,合理的技术选型可以为项目节省许多工程量这点毋庸置疑。

     

    React特点

     

    1 声明式设计React采用声明范式,可以轻松描述应用

    2高效React通过对DOM的模拟,最大限度地减少与DOM的交互

    3灵活React可以与已知的库或框架很好的配合

    4 JSX —JSXjavascript语法的扩展,React开发不一定使用JSX,但我们建议使用它

    5组件—通过React构建组件,使用代码更加容易得到复用,能够很好的应用在大项目的开发中。

    6单向响应的数据流React实现单向响应的数据,从而减少重复代码,这也是它为什么比传统的数据绑定更简单

    React单向数据流:在React中,数据的流向是单向的—从父节点传递到子节点。因为组件是简单而且易于把握的,他们只需要从父节点获取props渲染即可,如果顶层组件的某个prop改变了,React会递归的向在便利整个组件树,重新渲染所以使用这个属性的组件

     

     

    第二阶段:简单构建优化

    由于我们当前技术选择为react解决了开发效率问题 ,但是必须要兼顾运行性能。前端工程进行到第二阶段我们将选一种构建工具,对代码进行压缩、校验,之后再以页面为单位进行简单的资源合并。

    构建工具

    node 5.0.0+

    npm3.0.0

    webpack :^2.3.2

    react ^15.5.4

    react-dom ^15.5.4

    react-router:^2+暂时不使用3.0+因为3.0以上版本路由写法完全不同

    至于其它插件将在项目中体现

     

    第三阶段JS/CSS模块化

     

    JS模块化JS模块化方案很多如AMD/CommonJS/ES6 Module

    我们当前使用webpack按需加载react

    reqiure.ensure

    基本使用

    require.ensure(dependencies,callback,chunkName)

    例如

    const Index=(nextState,cb)=>{

    require.ensure([],require=>{

    cb(null,require(‘../pages/index/Index’).default)

    },’Index’)

    }

     

    在路由中使用getComponent

     

    CSS模块化:使用less。具体说明将在第四阶段组件化中详细说明

     

    第四阶段:组件化开发与资源管理


     

    1组件化开发

    组件分开发是非常重要的工程优手段。也是react开发必备技能。前端光有JS/CSS的模块化还是不够的。对于UI组件同样迫切的需求

    前端组件化开发理念:

     

     

    如上图所示这就是前端组件开发理念,下面我们来总结一下

    1、页面上的每个独立的可视。可交互区域视为作一个组件;

    2每个组件对应一个工程目录,组件所需的各种资源(JSImageCSS)都在这个目录下就近维护;

    3、由于组件具有独立性,因此组件与组件之间可以,自由组合;

    4、页面只不过是组件的容器,负责组合组件形成功能完整的界面;

    5、当不需要某个组件或者想要替换组件时,可以整个目录删除/替换

     

    注:每二项中就近维护原则是工程化的体现。每个开发者都清楚知道,自己所开发维护的功能模块。因为代码必须存在于对应的组件目录,当前目录包函 CSSJSHTMLImage

     

    结合前端提到模块化开发。我们将划分为几种开发概念

    名称

    说明

    示例

    JS模块

    算法和数据单元

    网络请求(Ajax.js)

    应用配置(config)

    接口(API.js

    工具函数(utils.js

    CSS模块

    功能性样式单元

    栅格系统(grid.less)

    字体图标或小图标(icon.less)

    首页样式(inex.less)

    UI组件

    可视/可交互功能单元

    页头(common/header.html)

    页尾(common/footer.html)

    导航(common/nav.html)

    页面

    UI组件容器

    首页(index)

    列表页(list)

    会员中心(youraccount)

     

     

     

    根据上述描述我们将构造一个项目的基本流程

    项目初期前端静态页面只包函CSSHTML

     

    目录名称:frontEnd

    less文件结构对应生成css文件

    名称

    说明

    common

    公共模块

      var.less

    全局变量

      reset.less

    统一所有浏览器默认样式

      base.less

    全局基础样式

      header.less

    头部样式

      dialog.less

    提示框

      form.less

    表单 input textarea checkbox radio

      btn.less

    按钮

      nav.less

    导航

      search.less

    搜索

      pagination.less

    分页

    model

    对应网站模块

      product

    产品列表与产品详情

      Home

    首页

      signin

    登录与注册

      single

    单页应用

      youraccout

    会员中心(当前文件夹可根据复杂程度再进行划分文件夹)

     

    按照上述描将形成如下文件结构

     

     

    接下将是前端使用react组件化重点

     

     

    展开全文
  • 快速入门Web前端开发

    万次阅读 多人点赞 2018-09-30 09:06:40
    入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的,但要能参与实际...
  • Web前端开发工具

    万次阅读 多人点赞 2019-05-30 19:46:44
    本文仅代表博主自己观点,希望对大家有所帮助。(只推荐以下三款,其余不推荐使用) ... (1)介绍:入门首推这两款工具。高校可能也有很多老师使用这两款教授学生。区别在于HBuilderX更加轻量,是HBuilder的下一代...
  • 前端开发:前端如何开发 APP

    万次阅读 多人点赞 2018-07-03 02:45:52
    做为一个前端开发人员,有时候除去传统的前端开发还需要进行其他开发,比如公众号开发,小程序开发,APP 开发。 本场 Chat 将带你从0开始,基于 APICloud 进行 APP 开发,你只需要会前端就可以。 本场 Chat 主要内容...
  • 前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有巨大的区别,但是他们的工作都是...
  • 前端开发学习笔记(一):HTML

    千次阅读 2020-08-20 09:52:53
    前端开发学习笔记(一) 文章目录前端开发学习笔记(一)一、 一、
  • 【从零学前端第一讲:前端开发是什么?给初学者有什么建议?】 初识前端 1、前端开发是什么? 2、前端开发有前途吗? 3、前端开发哪里学? 4、前端发展 5、对初学者的建议 6、学习html入门 7、学习css入门...
  • 前端开发应知网站(强烈推荐!)

    万次阅读 多人点赞 2019-08-31 14:37:49
    作为一名前端开发者(所有程序员)最起码遇到bug就算不会解决也应该会搜解决问题的答案。 一般笔者会先在百度搜(关键词一定要输入正确) 如果没搜到会再去bing里面看看 还没有的话就去github的Issues里面再看看 ...
  • 并从思路、设计、编码和部署测试每个过程给大家详细讲解。 框架纯实战级,实用、简单、暴力。...课程学完后,整个课件源代码就是一个完整的中型web前端开发框架。大家可以任意复制、学习、修改或占为己有
  • 前端开发框架05. 附录 01. 概述 作为前端开发者,各种框架的层出不穷,促使我们要不断学习才能防止落后,但是我们不可能做到每个框架都有学习的时间,我们只需要掌握流行的,坑少的即可。从以下三个方面了解目前...
  • 2020学习前端开发有前途吗?(建议收藏)

    万次阅读 多人点赞 2020-09-07 14:25:26
    同学A:他现在是一名大学生,学了学校的编程课程,什么语言都学了一点,但是现在感觉自己什么都不会,他同学自学了一些,做了一两个小项目,他很羡慕,而且他个人对前端有点兴趣,不知道现在开始学前端怎么样。...
  • 11个web前端开发实战项目案例+源码!拿走就是了

    万次阅读 多人点赞 2019-07-25 22:11:00
    小白为大家收集了11个web前端开发,大企业实战项目案例+5W行源码!拿走玩去吧! 老规矩:转发+关注并私信小编:“资料”全部打包带走! 下面给大家简单介绍几个: 小米官网: 项目描述 首先选择小米官网为第...
  • 个人精心整理的前端开发必备网站推荐

    万次阅读 多人点赞 2019-10-05 15:02:34
    本人是一个纯正的小白,在学习的过程中搜集了一些关于前端开发的网站,希望对大家能够有所帮助!授人以鱼不如授人以渔! 1.MDN开发者文档网址:https://developer.mozilla.org/zh-CN/ 2.菜鸟教程:...
  • 孔子说,“工欲善其事,必先利其器”,当前运用前端开发,也是很恰当的,那么,前端开发用什么软件?前端开发用什么工具?下面php中文网就为大家总结一下前端开发开发工具。 一:HBuilder HBuilder工具是数字天堂推出...
  • 前端开发需要学习什么?

    万次阅读 多人点赞 2017-07-14 14:17:00
    Web 前端开发是从网页制作演变而来的,互联网的演变进程,网站的前端也由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了
  • 笔者从今年2月下旬来到深圳开始投递简历进行前端开发实习岗位的应聘,直到3月初才慢慢找到了当前市场对于前端开发实习生的要求的规律和节奏,最终在3月10号之后收获了两个小公司的offer,当时也是结合自己的...
1 2 3 4 5 ... 20
收藏数 588,184
精华内容 235,273
关键字:

前端开发