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

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

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

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

      ①兴趣

      ②敲代码（实践、需要去练习）

3.Web前端开发工程师需要学习什么（重点：HTML，CSS，JavaScript硬性指标）

     ①软件（代码的辅助工具）

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

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

 

     编辑器：写代码的工具，HBuilder、sublime、Dreamweaver

     PS：Photoshop处理图片

   ②语言（计算机编程语言）（与网站沟通的语言）

     HTML（结构：如房屋结构）：超文本标记语言

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

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

                  文本：文本就是语言

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

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

 




这是我的第一个网页

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

       

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

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

                     width:200px;

                     height:300px;

                     background:red;等等

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

        画方块我们要用一个div标签（双标签）：

......

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

 




这是我的第一个网页
 

这是一个方块
 

         但是查看网页时，并没有多大变化：

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

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

 


这是一个方块
 

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

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

 



这是一个方块
 

 c.给背景添加一张图片

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

       

 




这是一个方块
 

查看一下此时网页形式

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

 JavaScript（行为，能控制的东西，比如房间里灯的开关）：脚本语言

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

 





这是一个方块
 

    点击前：

 鼠标点击后：

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

 

 




这是我的第一个网页
 





这是一个方块
 

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

Hbuilder的基本使用

新建一个web项目

 

新建一个HTML文件

 

 

   创建成功后

 

一些基本使用的操作