前端开发_前端开发工具 - 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文件

     

     

       创建成功后

     

    一些基本使用的操作

     

     

     

     

     

     

     

     

     

    展开全文
  • HTML5前端开发基础到实战

    千人学习 2018-12-17 10:50:46
    前端---直面用户,不仅要会网页布局、美化、特效等技术,还要进行用户交互、后台交互等动作。 本课程不仅可以教你使用新增的HTML5标签与属性实现网页布局,还可以通过CSS3新特性、2D和3D转换以及CSS3动画和过渡实现...
  • 在已经成功的为大家讲解了多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们总结成了五条警言,希望...

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

     

    希望收藏了我写的文章的你同时可以加下我的前端学习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前端开发(一)—HTML基础

    万次阅读 多人点赞 2018-08-10 00:22:21
    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

     

     

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

    千人学习 2018-10-22 21:38:13
    前端技术技术
  • 前端开发APP,从HBuilder开始~

    万次阅读 多人点赞 2015-02-03 16:23:02
    介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了后端,也就是服务器端,从此前端...

    内容简介

    介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~


    无所不能的js

    最开始js仅仅局限于网页上一些效果,操作网页内容等,

    但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,

    native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。


    前端涉及app的两种方式

    适应移动端的网页

    大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表,

    说的简单点就是对移动端做了适配,是的布局样式组件都适合移动端展示,

    我的个人网站(uikoo9.com)就是使用bootstrap3做的,手机浏览效果也很好。

    缺陷:毕竟不是app,不管怎么样也没办法取代app的便捷和功能强大。

    js+html+css+打包技术

    比较有名的就是phonegap了,国内的是hbuilder,

    大概的意思是html负责页面内容,js负责效果以及调用原生app方法,ui框架负责样式,

    最后打包成apk或者ipa。


    hbuilder(http://www.dcloud.io/

    不谈phonegap,不适用国内国情,

    是的,你没有看错,这是一个开发的ide,其实就是对eclipse进行了深度定制。

    特点是快捷键比较多,支持移动app开发(h5+方式)。


    h5+(http://www.html5plus.org/#home

    终于说到正题了,这个就是之前提到的打包技术,

    可以说nodejs将js带到后端,h5+将js带到移动端。


    原理

    上面说过的原理,再次说一遍:

    html负责页面,也就是的内容和框架;

    js负责调用方法,也就是调用一些移动端原生;

    ui负责样式,比较有名的bootstrap,amazeui,jquery mobile,mui


    ui比较

    上面说的几个ui,做下简单比较,仅代表个人观点,

    amazeui,功能和bootstrap重复,官方解释是对中文排版做了优化,个人觉得有点多余,bootstrap就很好。

    bootstrap,适合移动端浏览网页适配,移动端浏览效果不错,但是还是网页。

    jquery mobile,专门对移动端做定制,看起来就像手机应用一样,js+css(300k),国外的,不推荐,有坑。

    mui,这个是推荐的,比较了jqmobile和mui,显然mui效果样式好点,估计也会有坑,但是支持国产吧。


    前端搞app

    搭建开发环境

    不需要搭建ios和android的开发环境,只需要下载hbuilder(估计需要java环境支持),

    选定ui

    目前推荐mui,效果不错

    写事件

    通过js调用原生方法实现app效果

    写业务逻辑

    如题


    代码和图片(简单示例)

    文字说再多感觉也不是很大,下面来代码和图片,

    文件结构:

    QQ截图20150203160618.jpg

    你没有看错,仅仅需要一个html页面,加一些js,css,这个例子使用的jquery mobile

    页面代码:

    head部分,仅仅引入一些必须的js和css

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>hello world</title>
        
        <link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
        <script src="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript">
        	function helloworld(){
    			alert("hello world!")
    		}
       		document.addEventListener('plusready', function(){
       			alert("welcome to Html5plus!");
       		});
        </script>
    </head>

    body部分,普通的页面

    <body>
    	<div data-role="page">
    		<div data-role="header">
    			<h1>首页</h1>
    		</div>
    		
    		<div role="main" class="ui-content">
    			<p>一些主体内容在这里。。</p>
    			<form>
    		        <fieldset data-role="controlgroup">
    			        <label>
    			        	<input type="radio" name="radio-choice-v-2" value="one" checked="checked">第一个
    			        </label>
    			        <label>
    			        	<input type="radio" name="radio-choice-v-2" value="two">第二个
    			        </label>
    			        <label>
    			        	<input type="radio" name="radio-choice-v-2" value="three">第三个
    			        </label>
    			    </fieldset>
    			</form>
    		</div>
    		
    		<div data-role="footer">
    			<h4>uikoo9.com</h4>
    		</div>
    	</div>
    </body>

    调试

    手机连接电脑,然后在hbuilder下运行——手机运行——在设备上运行,

    就直接可以在手机上看效果了

    效果

    QQ截图20150203161848.jpg

    打包

    在hbuilder中发型——app打包,然后交给云端去打包,打包好后会自动下载,例如

    QQ截图20150203162006.jpg


    心动了吗?

    现在,如果你会html+js+css,那你只需要一个hbuilder就可以开发app了,通吃android和ios


    更多

    更多文章请关注uikoo9.com

    展开全文
  • web前端开发前景

    万次阅读 2018-09-24 17:53:12
    web前端开发的必经之路:HTMI→CSS→JAVASCRIPT 趋势一:重大转变移动优先  响应式设计显然是目前web前端开发领域的主要趋势之一,响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小...
  • 前端项目开发流程

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

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

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

    万次阅读 多人点赞 2018-11-21 15:19:58
    本文来源:千锋web前端开发 近几年IT业可谓是发展火热,而且新生了很多的职业。在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常...
  • 孔子说,“工欲善其事,必先利其器”,当前运用前端开发,也是很恰当的,那么,前端开发用什么软件?前端开发用什么工具?下面php中文网就为大家总结一下前端开发开发工具。 一:HBuilder HBuilder工具是数字天堂推出...
  • 给你一份完整的Web前端学习路线图

    万次阅读 多人点赞 2019-04-12 21:31:57
    前端开发人员的地位也日益提高,相应的技术要求要是越来越高,那么现在想成为一名合格的Web前端工程师应该怎样学习呢 Web前端学习路线图,希望对初学者有帮助。 1.Javascript 语言 全栈开发中,用的编程语言...
  • python web开发--web前端开发介绍

    千次阅读 2018-08-20 14:11:14
  • 使用Eclipse进行web前端开发

    万次阅读 2015-05-18 22:49:03
    Eclipse搭建HTML5开发环境 Eclipse Web编程 (新手用语不准确) 要在eclipse上运行一个html(?javaScript)需要一个服务器,
  • web前端开发和岗位职责

    万次阅读 2018-11-08 14:56:59
    什么是web前端开发和岗位职责? web前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面设计交互 创建Web页面或app等前端界面呈现给用户的过程。系统的页面...
  • WEB前端后端简单区别,通俗理解

    万次阅读 多人点赞 2018-01-14 17:14:02
    前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,以下以网站的开发为例。 1、前端开发 前端开发现在一般指的就是web前端开发工程师,其负责是网站前端页面也就是网页的页面开发,简单的说...
  • 微信公众号开发(三)前端界面

    万次阅读 热门讨论 2020-06-26 18:20:09
    由于该公众号主要的用途是用于公司售后服务,经沟通确定相关需求. 第一: 了解相关的UI框架,最终选定了Jquery-WeUI框架. 第二: 制作简单案例,在移动端进行测试,要达到移动端的自适应. 目前完成三个界面如下: ...
1 2 3 4 5 ... 20
收藏数 568,383
精华内容 227,353
关键字:

前端开发