1.web前端开发工程师是做什么的
简单地说,就是要与网站打交道
2.成为一名web前端工程师需要具备的条件
①兴趣
②敲代码(实践、需要去练习)
3.Web前端开发工程师需要学习什么(重点:HTML,CSS,JavaScript硬性指标)
①软件(代码的辅助工具)
浏览器:浏览器有非常多,(谷歌Chrome(性能比较稳定),火狐,IE)(访问网站必须通过浏览器,所以需要了解浏览器基础功能)
浏览器调试工具:F12可以快捷打开,或者:右键--->检查
![ebde72c65bb8130bf220598f3b96f494.png](https://i-blog.csdnimg.cn/blog_migrate/0fcf174fd722f8e08e57dd2290e288cd.jpeg)
编辑器:写代码的工具,HBuilder、sublime、Dreamweaver
PS:Photoshop处理图片
②语言(计算机编程语言)(与网站沟通的语言)
HTML(结构:如房屋结构):超文本标记语言
语言:与浏览器你沟通的一个方式
标记(标签):<>(必须放在一对尖括号当中)如<html> </html>这样表示HTML这句话说完了“/”或者<meta />,meta是个单标签
文本:文本就是语言
超:网页中不光可以放文本,还可以放图片、视频、音乐
例如:采用Hbuilder写一个简易的网页,一个网页就像人一样有头有身体,网页也大致相同,有head,有body,也对应人体身体结构,如下所示:
![c1e271f8bff800662098577bb71fac87.png](https://i-blog.csdnimg.cn/blog_migrate/93d8b12adfce1267de0d291f7f551303.png)
![ae92c9f4003912cb6e49082db5228f33.png](https://i-blog.csdnimg.cn/blog_migrate/02a3ac2d00f3dd40e41d981a623fac5e.jpeg)
打开刚刚编辑的文件所在的位置,会发现有一个html结尾的文件,双击打开网页中就可以显示
![ff34549ab1efe0181da3fd1f04440150.png](https://i-blog.csdnimg.cn/blog_migrate/23204ffd3126f974cf358158ba319ecc.png)
可以看到刚刚编辑的title和body里文字的位置。
![4e47981e70674a35b39c886f0c009c05.png](https://i-blog.csdnimg.cn/blog_migrate/eae8c95640fede43b1652cd4f7f8dd46.png)
CSS(样式,如:房屋的样式,房屋里的地板砖颜色,款式等等):层叠样式表
width:200px;
height:300px;
background:red;等等
网页是有很多方块组成,如下大大小小不同方块
![3bcca81889e9bf5788fde3387b4073cd.png](https://i-blog.csdnimg.cn/blog_migrate/53e781d157a2c89f934b95c6774b5491.jpeg)
画方块我们要用一个div标签(双标签):<div>...... </div>在双标签中进行编写样式,而css就是用来控制div长什么样子,有多大,字体多大,什么颜色等。添加前也必须先找到你要添加的这个方块位置。下面在hbuilder中举例子:
![1d2cb98e9a48b7a4dbc7e7d1a4a5651a.png](https://i-blog.csdnimg.cn/blog_migrate/08a3ed3972afb848e89246fc2d417040.png)
但是查看网页时,并没有多大变化:
![fadb70d021f1df459ff24e6361425355.png](https://i-blog.csdnimg.cn/blog_migrate/045136e2b24d2e6c0a0937cd52268997.png)
然后我们通过上述所讲的浏览器调试工具来查看一下:
![ec06043bb1062be0dcebe6e1fca1e82b.png](https://i-blog.csdnimg.cn/blog_migrate/1cffff9cac398b75848adcf05fed61cd.jpeg)
那么怎么做才能更直观地将写入的方块展示在我们眼前呢?a添加一个背景
![46810384d7f99fcbf9a22fda1fd8d5a6.png](https://i-blog.csdnimg.cn/blog_migrate/2ec53ad8a84a1ff0ae01d3a681cac1d7.png)
查看一下此时网页的状态,可以发现这时的div和这是一个方块这句话相结合起来的,也就是这是一个方块是css样式的内容
![090866e7f4684ba0d4ceaaa4f733a8e7.png](https://i-blog.csdnimg.cn/blog_migrate/e2a6cc4ad854a0f054d65c91c40863e7.png)
b添加一个边框,对style进行修改
![48f2ae839f5d30cc075d9391b53bc0b5.png](https://i-blog.csdnimg.cn/blog_migrate/f3640b4c551bb13c81f1524ea02828ee.png)
![bd182e52cc986ac29095cca1027891b7.png](https://i-blog.csdnimg.cn/blog_migrate/c35a8865d4b5e6c1b24e52d96e3d5107.png)
c.给背景添加一张图片
简单的百度一张图片,右键复制图片地址
![a28796a14a5e3cfa7b7625f4d900ccd9.png](https://i-blog.csdnimg.cn/blog_migrate/19decb6ddccf43ffdc22181d2204a9dc.jpeg)
<!-- 2c.background:url();括号里放置图片地址-->
![80f465d91f538e852baa6785da497f0f.png](https://i-blog.csdnimg.cn/blog_migrate/e4684806a9a06537f211b90eb5c84559.png)
查看一下此时网页形式
![48e25dfd7558a85587bc81c745741d0f.png](https://i-blog.csdnimg.cn/blog_migrate/09eda8b626e9ab7049dd28ae783deae2.png)
可以发现图片的显示是有点问题的,因为这个方块设置的大小有点问题 ,此时可以使用刚所说的浏览器调试工具重新设置方框大小。但是一刷新还是会变回去,所以浏览器调试工具里面的更改只是暂时的,它只是能够直观的让我们见到更改后的样子,最根本的更改还是要去代码里更改。
![6c7348b9f06e527e08d07e2f0ddcd935.png](https://i-blog.csdnimg.cn/blog_migrate/c12195958dffff1892f1b8e631fb434a.jpeg)
JavaScript(行为,能控制的东西,比如房间里灯的开关):脚本语言
举个例子:鼠标点击时图片变大,也是在div中编辑
![a1e335c69a3fe1aea2ad94e55ee30364.png](https://i-blog.csdnimg.cn/blog_migrate/88ee23c8bf185d63abfd91322230539e.jpeg)
点击前:
![ed7c8e8bea1d899c64a28a022a0b25c0.png](https://i-blog.csdnimg.cn/blog_migrate/5a0587879aead65be4391e9e9bdc4793.png)
鼠标点击后:
![ab60d740f05337075e7d0b7ce3518684.png](https://i-blog.csdnimg.cn/blog_migrate/8f9c8b98543c6ff4a6502cea36ec3bfa.jpeg)
其实,凡是网页上在动的,能动的也就是网页中的动画就是js来做的,也就是JavaScript做的
![3115ce375b6fe54b2c341c5589a42ad7.png](https://i-blog.csdnimg.cn/blog_migrate/7aeaf253f6dfed374c3f27096a74c17b.jpeg)
综上,举个例子,HTML就是房屋的结构。css是房屋的样式,而js就是房屋里能动的、能操作的东西。样式是依托于结构的,房子想要呈现出不同的样子就必须依托于样式,比如同样的房屋结构,但是不同的装修风格可以使其展示出不同的样子,房屋里的开关这些需要我们去操作的就是js。通过学习了解到如果想做前端开发,那么HTML、CSS、JavaScript这三样东西是硬性指标,是必须要掌握的。
Hbuilder的基本使用
新建一个web项目
![2cee7cebff4e42fbd34f07424b6a519e.png](https://i-blog.csdnimg.cn/blog_migrate/5e87e797ad6603877eecd6a38ba96371.jpeg)
![6fda6dffa7812ba73450ca1a075deba7.png](https://i-blog.csdnimg.cn/blog_migrate/968cc14445d334d9b11f178286588974.jpeg)
新建一个HTML文件
![4fa7e69fa197a5d05b11e755ecc6b7fa.png](https://i-blog.csdnimg.cn/blog_migrate/b5201f1985ab45d0b18cd4e72a9881a6.jpeg)
![6c035c5386da4fb455c0c15357ef8708.png](https://i-blog.csdnimg.cn/blog_migrate/51cee7c2d513571cd579b3620b822119.jpeg)
创建成功后
![320d88dc82b926ad08cf81f5c4d70acc.png](https://i-blog.csdnimg.cn/blog_migrate/2b96b2f4f94aa84a88b60e7f990e103e.png)
一些基本使用的操作
![34e220caad1c475db212d0be29f6e458.png](https://i-blog.csdnimg.cn/blog_migrate/1f33e2da6f12c516306221b4b9c3469e.png)
如果你依然在编程的世界里迷茫,不知道自己的未来规划,打算深入了解这个行业的朋友,可以加入我组建的自学团,每天一起打卡学习,分享学习资料,匹配学习伙伴,我会严格监督你们的。下面是我们一起做项目,欢迎大家加入。
原文:前端开发学习之一------前端开发是什么以及我们要学什么_weixin_42280639的博客-CSDN博客_前端开发要学什