前端开发学习之一------前端开发是什么以及我们要学什么 - 好文

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> <html> <head> <meta
charset="utf-8"/> <title>这里是标题</title> </head>
<body> 这是我的第一个网页 </body> </html>

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

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

CSS（样式，如：房屋的样式，房屋里的地板砖颜色，款式等等）：层叠样式表

width:200px;

height:300px;

background:red;等等

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

画方块我们要用一个div标签（双标签）：<div>......
</div>在双标签中进行编写样式，而css就是用来控制div长什么样子，有多大，字体多大，什么颜色等。添加前也必须先找到你要添加的这个方块位置。下面在hbuilder中举例子：
 <!doctype html> <html>
<head> <meta charset="utf-8"/> <title>这里是标题</title>
</head> <body> 这是我的第一个网页 <div style="width:200px;height:300px;">  这是一个方块 </div> </body> </html>
但是查看网页时，并没有多大变化：

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

那么怎么做才能更直观地将写入的方块展示在我们眼前呢？a添加一个背景
<div style="width:200px;height:300px;background:red;">   这是一个方块 </div>
查看一下此时网页的状态，可以发现这时的div和这是一个方块这句话相结合起来的，也就是这是一个方块是css样式的内容

b添加一个边框，对style进行修改
<div style="width:200px;height:300px;border:5px solid red;">    这是一个方块 </div>

c.给背景添加一张图片

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


<div
style="width:200px;height:300px;background:url(http://p1.so.qhimgs1.com/bdr/_240_/t01f0c2ec21427f5ded.jpg);">
   
这是一个方块 </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);">
   

这是一个方块 </div>
点击前：

鼠标点击后：

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

 <!doctype html> <html>
<head> <meta charset="utf-8"/> <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);">
   

这是一个方块 </div> </body> </html>

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

Hbuilder的基本使用

新建一个web项目

新建一个HTML文件

创建成功后

一些基本使用的操作

热门工具换一换