本文介绍了前端开发工程师的工作内容和成为合格前端开发者所需条件，重点讲解了HTML、CSS和JavaScript的基础知识。HTML负责网页结构，CSS用于样式设计，JavaScript则实现交互行为。通过实例展示了如何使用这些技术创建和美化网页元素。
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，也对应人体身体结构，如下所示：
打开刚刚编辑的文件所在的位置，会发现有一个html结尾的文件，双击打开网页中就可以显示
可以看到刚刚编辑的title和body里文字的位置。
CSS（样式，如：房屋的样式，房屋里的地板砖颜色，款式等等）：层叠样式表
width:200px;
height:300px;
background:red;等等
网页是有很多方块组成，如下大大小小不同方块
画方块我们要用一个div标签（双标签）：<div>...... </div>在双标签中进行编写样式，而css就是用来控制div长什么样子，有多大，字体多大，什么颜色等。添加前也必须先找到你要添加的这个方块位置。下面在hbuilder中举例子：
但是查看网页时，并没有多大变化：
然后我们通过上述所讲的浏览器调试工具来查看一下：
那么怎么做才能更直观地将写入的方块展示在我们眼前呢？a添加一个背景
查看一下此时网页的状态，可以发现这时的div和这是一个方块这句话相结合起来的，也就是这是一个方块是css样式的内容
b添加一个边框，对style进行修改
c.给背景添加一张图片
简单的百度一张图片，右键复制图片地址
<!-- 2c.background:url()；括号里放置图片地址-->
查看一下此时网页形式
可以发现图片的显示是有点问题的，因为这个方块设置的大小有点问题 ，此时可以使用刚所说的浏览器调试工具重新设置方框大小。但是一刷新还是会变回去，所以浏览器调试工具里面的更改只是暂时的，它只是能够直观的让我们见到更改后的样子，最根本的更改还是要去代码里更改。
JavaScript（行为，能控制的东西，比如房间里灯的开关）：脚本语言
举个例子：鼠标点击时图片变大，也是在div中编辑
点击前：
鼠标点击后：
其实，凡是网页上在动的，能动的也就是网页中的动画就是js来做的，也就是JavaScript做的
综上，举个例子，HTML就是房屋的结构。css是房屋的样式，而js就是房屋里能动的、能操作的东西。样式是依托于结构的，房子想要呈现出不同的样子就必须依托于样式，比如同样的房屋结构，但是不同的装修风格可以使其展示出不同的样子，房屋里的开关这些需要我们去操作的就是js。通过学习了解到如果想做前端开发，那么HTML、CSS、JavaScript这三样东西是硬性指标，是必须要掌握的。
Hbuilder的基本使用
新建一个web项目
新建一个HTML文件
创建成功后
一些基本使用的操作
如果你依然在编程的世界里迷茫，不知道自己的未来规划，打算深入了解这个行业的朋友，可以加入我组建的自学团，每天一起打卡学习，分享学习资料，匹配学习伙伴，我会严格监督你们的。下面是我们一起做项目，欢迎大家加入。
原文：前端开发学习之一------前端开发是什么以及我们要学什么_weixin_42280639的博客-CSDN博客_前端开发要学什
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
