前端开发 - 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] 
收起全文
  • 前端---直面用户,不仅要会网页布局、美化、特效等技术,还要进行用户交互、后台交互等动作。 本课程不仅可以教你使用新增的HTML5标签与属性实现网页布局,还可以通过CSS3新特性、2D和3D转换以及CSS3动画和过渡实现...
  • 前端技术技术
  • 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文件

     

     

       创建成功后

     

    一些基本使用的操作

     

     

     

     

     

     

     

     

     

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

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

     

    希望收藏了我写的文章的你同时可以加下我的前端学习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框架全部的组件和插件。

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

     

     

    展开全文
  • 并从思路、设计、编码和部署测试每个过程给大家详细讲解。 框架纯实战级,实用、简单、暴力。...课程学完后,整个课件源代码就是一个完整的中型web前端开发框架。大家可以任意复制、学习、修改或占为己有
  • Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细...

    Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。


    A.基本原则

    符合web标准(UTF-8,HTML5),语义化html(HTML5新增要求,减少div和span等无特定语义的标签使用),结构表现行为分离(HTML-CSS-JS代码分离,不同行为代码高内聚低耦合),兼容性优良(早期版本浏览器兼容,移动端和PC端设备兼容).页面性能方面(减少请求次数,例如使用精灵图和sass语法),代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度(减小repaint和reflow).

    B.文件命名规范

    1、html,css,js,lib,images文件均存放至项目的目录中。如果使用相关前端框架,根据框架的文件格式进行合理布局。

    2、所有文件夹及文件使用英文命名(避免使用中文路径)。

    3、html文件:入口文件使用index.html。如果有对应的设计组设计原稿,需要将对应的设计稿和html文件命名一致并合理存放。

    4、css文件命名:后缀.css。通用initial.css,初始化base.css,首页index.css,其他页面按照对应的html命名。

    5、Js文件命名:英文命名,后缀.js.通用common.js,初始化base.js。 其他页面按照对应的html命名。

    C.HTML规范

    1、文档类型声明及编码:统一为html5声明类型。书写时利用IDE实现层次分明的缩进(默认缩进4空格)。

    2、非特殊情况下CSS文件放在body部分<meta>标签后。非特殊情况下大部分JS文件放在<body>标签尾部(如果需要界面未加载前执行的代码可以放在head标签后)避免行内JS和CSS代码。

    3、所有编码需要遵循html(XML)标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等。属性值用双引号。

    4、引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.4.1.min.js。引入插件,文件名格式为库名称+插件名称,比如jQuery.bootstrap.js。

    5、书写页面过程中,请考虑向后扩展性。class&id参见css书写规范.

    6、需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用须以"data-"为前缀来添加自定义属性,避免使用"data:"等其他命名方式。

    7、语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素。

    8、尽可能减少div多层级嵌套。

    9、书写链接地址时,必须避免重定向,例如:href="http://myVue.com/",即须在URL地址后面加上“/”;

    10、在页面中尽量避免使用style属性,即style="…"。

    11、必须为含有描述性表单元素(input,textarea)添加label,如姓名:须写成:姓名:

    12、能以背景形式呈现的图片,尽量写入css样式中。

    13、重要图片必须加上alt属性。给重要的元素和截断的元素加上title。

    14、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能。

    15、特殊符号使用:尽可能使用代码替代:比如<(<)&>(>)&空格()&»(»)等等。

    D.CSS规范

    1、编码规范为utf-8

    2、协作开发及分工:i会根据各个模块,同时根据页面相似程序,事先写**体框架文件,分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写,协作开发过程中,每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改。

    3、class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的,为JS预留钩子的除外。

    4、为JS预留钩子的命名,请以js_起始,比如:js_hide,js_show。

    5、class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名,如i_comment,fontred,width200。避免使用中文拼音,尽量使用简易的单词组合。总之,命名要语义化,简明化

    6、规避class与id命名(此条重要,若有不明白请及时与i沟通):a)通过从属写法规避,示例见d。b)取父级元素id/class命名部分命名,示例见d。c)重复使用率高的命名,请以自己代号加下划线起始,比如i_clear。d)a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码中加入新的div元素,按a命名法则:...,样式写法:#mainnav.firstnav{.......}按b命名法则:...,样式写法:.main_firstnav{.......}

    7、css属性书写顺序,建议遵循:布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.属性列举:布局定位属性主要包括:display&list-style&position(相应的top,right,bottom,left)&float&clear&visibility&overflow;

    自身属性主要包括:width&height&margin&padding&border&background

    文本属性主要包括:color&font&text-decoration&text-align&vertical-align&white-space&

    其他&content

    8、书写代码前,提高样式重复使用率。

    9、充分利用html自身属性及样式继承原理减少代码量,例如:

    即可实现日期居右显示

    ul.list li {
    position:relative
    }
    ul .list li span {
    position:absolute;right:0
    }

    10、样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码。

    11、背景图片请尽可能使用精灵图技术,减小http请求,考虑到多人协作开发,精灵图按模块制作。

    12、使用table标签时(尽量避免使用table标签),请不要用width/height/cellspacing/cellpadding等table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如thead,tr,th,td,tbody,tfoot,colgroup,scope。(cellspaing及cellpadding的css控制方法:table{border:0。margin:0。border-collapse:collapse。}tableth,tabletd{padding:0。},base.css文件中我会初始化表格样式)

    13、杜绝使用兼容ie8

    14、用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:_background:none。_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=’img/bg.png’)。

    15、避免兼容性属性的使用,比如text-shadow||css3的相关属性。

    16、减少使用影响性能的属性,比如position:absolute||float。

    17、必须为大区块样式添加注释,小区块适量注释。

    18、代码缩进与格式:建议单行书写,可根据自身习惯,后期优化会统一处理。



    E. JS书写规范

    1、文件编码统一为utf-8,书写过程过,每行代码结束必须有分号。原则上所有功能均根据XXX项目需求原生开发,以避免网上down下来的代码造成的代码污染(沉冗代码||与现有代码冲突||...)。

    2、库引入:原则上仅引入jQuery库,若需引入第三方库,须与团队其他人员讨论决定。

    3、变量命名:驼峰式命名.原生JS变量要求是纯英文字母,首字母须小写,如myVue。jQuery变量要求首字符为'_',其他与原生JS规则相同,如:_myVue。另,要求变量集中声明,避免全局变量.

    4、类命名:首字母大写,驼峰式命名.如MyVue。

    5、函数命名:首字母小写驼峰式命名.如myVue()。

    6、命名语义化,尽可能利用英文单词或其缩写。

    7、尽量避免使用存在兼容性及消耗资源的方法或属性,比如eval_r()&innerText

    8、后期优化中,JS非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示。

    9、代码结构明了,加适量注释.提高函数重用率。

    10、注重与html分离,减小reflow,注重浏览器性能.


    F.图片规范

    1、所有页面元素类图片均放入img文件夹,测试用图片放于demo文件夹。

    2、图片格式gif/png/jpg。提倡使用webp文件格式,使用软件进行图片压缩。

    3、命名全部用小写英文字母||数字||_的组合,其中不得包含汉字||空格||特殊字符;尽量用易懂的词汇,便于团队其他成员理解。另,命名分头尾两部分,用下划线隔开,比如ad_left01.gif||btn_submit.gif。

    4、在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间。5、尽量避免使用半透明的png图片(若使用,请参考css规范相关说明)。

    6、运用css精灵图技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的精灵图psd源图中划参考线,并保存至img目录下


    G.测试规范

    开发及测试工具约定建议使用Aptana-Sublime-Vim-WebStrom,亦可根据自己喜好选择,但须遵循如下原则:

    1、不可利用IDE的视图模式'画'代码。

    2、不可利用IDE生成相关功能代码。

    3、编码必须格式化,比如缩进。测试工具:前期开发仅测试FireFox&IE6&IE7&IE8,后期优化时加入Opera&Chrome&Safari。建议测试顺序:FireFox-->IE-->Opera-->Chrome-->Safari。

    展开全文
  • 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

     

     

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

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

    2020-02-09 10:36:31
    本文仅代表博主自己观点,希望对大家有所帮助。(只推荐以下三款,其余不推荐使用) ... (1)介绍:入门首推这两款工具。高校可能也有很多老师使用这两款教授学生。区别在于HBuilderX更加轻量,是HBuilder的下一代...
  • 前端开发 20 年变迁史

    2019-06-04 09:42:47
    从静态页面到JavaScript,从依赖后端到自主开发前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高,从前端技术由国外开发者主导到如今国内自主产生的小程序技术,我们走了20年。...
  • 做为一个前端开发人员,有时候除去传统的前端开发还需要进行其他开发,比如公众号开发,小程序开发,APP 开发。 本场 Chat 将带你从0开始,基于 APICloud 进行 APP 开发,你只需要会前端就可以。 本场 Chat 主要内容...
  • web前端开发前景

    2018-09-24 17:53:12
    web前端开发的必经之路:HTMI→CSS→JAVASCRIPT 趋势一:重大转变移动优先  响应式设计显然是目前web前端开发领域的主要趋势之一,响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小...
  • 前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有巨大的区别,但是他们的工作都是...
  • 1、sublime text3 编辑器 快捷键 + zen coding 能让你如鱼得水。当然,下面这张截图我是用了 Material Theme + Monokai 的主题,还有很多效果没展示出来,等你们自己去探索。 sublime text3 下载地址:...
  • 孔子说,“工欲善其事,必先利其器”,当前运用前端开发,也是很恰当的,那么,前端开发用什么软件?前端开发用什么工具?下面php中文网就为大家总结一下前端开发开发工具。 一:HBuilder HBuilder工具是数字天堂推出...
  • 前端开发框架05. 附录 01. 概述 作为前端开发者,各种框架的层出不穷,促使我们要不断学习才能防止落后,但是我们不可能做到每个框架都有学习的时间,我们只需要掌握流行的,坑少的即可。从以下三个方面了解目前...
  • 十大web前端开发框架

    2017-04-23 14:40:30
    前端开发框架有哪些 一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了大家的使用便利,下文列举了目前最强大...
  • 关于前端开发的思考

    2016-04-05 22:09:29
    1.前言最近有人问我:你会前端开发吗? 我思索了一会儿,然后说:不会!于是,我被鄙视了!后来我看那些所谓会前端开发的人写的作品,我恍然大悟,原来会使用Html标签,会显示和隐藏Dom,会使用Ajax GET、POST就算...
  • 【从零学前端第一讲:前端开发是什么?给初学者有什么建议?】 初识前端 1、前端开发是什么? 2、前端开发有前途吗? 3、前端开发哪里学? 4、前端发展 5、对初学者的建议 6、学习html入门 7、学习css入门...
  • 本文来源:千锋web前端开发 近几年IT业可谓是发展火热,而且新生了很多的职业。在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常...
1 2 3 4 5 ... 20
收藏数 561,672
精华内容 224,668
热门标签
关键字:

前端开发