欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-06 09:07:54
...

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

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

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

        <!-- 2c.background:url();括号里放置图片地址-->

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

 

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

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

 

   创建成功后

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

 

一些基本使用的操作

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