前端开发

最新推荐文章于 2023-06-23 19:44:19 发布

shelly_007

最新推荐文章于 2023-06-23 19:44:19 发布

阅读量79

点赞数

原文链接：https://blog.csdn.net/weixin_42280639/article/details/81156320

版权

weixin_42280639个人博客，转载请注明出处。
CSDN地址：https://blog.csdn.net/weixin_42280639/article/details/81156320
若有侵权请联系我删除。

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.给背景添加一张图片

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


 
 
   
   
    
    
   
   
   
   
    
    
     
     <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文件

创建成功后

一些基本使用的操作

shelly_007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发

weixin_42280639个人博客，转载请注明出处。CSDN地址：https://blog.csdn.net/weixin_42280639/article/details/81156320若有侵权请联系我删除。 1.web前端开发工程师是做什么的      &
复制链接

扫一扫