零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念

该篇适用于从零基础学习前端的小白

初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识

一、导言

HTML,CSS,JavaScript 都是单独的语言;他们构成前端技术基础;

(1)HTML:负责网页的架构;

(2)CSS:负责网页的样式,美化;

(3)JavaScript(JS):负责网页的行为;

我们将上述概念,拿出来,作为初学者可能还是不理解,还是一头雾水,很正常,那我们就以实践来帮助自己理解。接下来我们一起写一个简单的案例。

二、用小案例帮我们理解 HTML CSS JavaScript 各自的概念

注意: 初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识

我们的目标:模仿百度得输入框 和 按钮(百度一下)

零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念_第1张图片

1. HTML:负责网页的架构(结构)

我写了 input(文本框)标签 和 button(按钮)标签 ,在浏览器运行样式如下




    
    
    
    Document


    
    

在chrome浏览器运行显示效果:我们可以看出目前跟百度首页搜索行结构是一样的

零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念_第2张图片

2.  CSS:负责网页的样式,美化

我们观察自己编写的效果存在的问题:

第一,文本框宽度 和 高度,需要修改

第二,百度一下这个按钮,背景颜色 和 文字颜色,需要修改




    
    
    
    Document
    


    
    

运行的效果图:我没有写过多的样式,主要写了基本的(担心初学者一下接受不完)

零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念_第3张图片

3.  JavaScript(JS):负责网页的行为

网页的行为:主要就是指用户点击 ”百度一下“那个按钮,百度网站是发起一个搜索功能,

这里我模仿点击百度一下按钮,弹出一个警告框,之后跳转到百度官网




    
    
    
    Document
    


    
    


目前JavaScript 的代码写在了

你可能感兴趣的:(零基础学习前端开发,前端,html,css)