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

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

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

    一、导言

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

    （1）HTML：负责网页的架构；

    （2）CSS：负责网页的样式，美化；

    （3）JavaScript（JS）：负责网页的行为；

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

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

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

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

    1. HTML：负责网页的架构（结构）

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <input />
    11.     <button>百度一下button>
    12. body>
    13. html>

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

    2.  CSS：负责网页的样式，美化

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /*将全部标签，自带的内外边距都设置为0，统一由自己单独去写*/
    10.         *{
    11.             padding: 0;
    12.             margin: 0;
    13.         }
    14.  
    15.         .inputName{
    16.             width: 300px;                /* 设置宽度为300px  */
    17.             height: 30px;                /* 设置高度为30px  */
    18.         }
    19.         .buttonName{
    20.             background-color: #4E6EF2;  /* 设置背景颜色  */
    21.             color: #fff;                /* 设置文字颜色  */
    22.             height: 34px;                 /*为什么这里是34 而不是30*/
    23.             border: none;                 /* 设置按钮的边框不显示  */
    24.             padding-left: 5px;            /* 设置按钮左边内边距为 5px  */
    25.             padding-right: 5px;           /* 设置按钮右边内边距为 5px  */
    26.         }
    27.     style>
    28. head>
    29. <body>
    30.     <input class="inputName" />
    31.     <button class="buttonName">百度一下button>
    32. body>
    33. html>

    运行的效果图：我没有写过多的样式，主要写了基本的（担心初学者一下接受不完）

    3.  JavaScript（JS）：负责网页的行为

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         *{
    10.             padding: 0;
    11.             margin: 0;
    12.         }
    13.         .inputName{
    14.             width: 300px;                /* 设置宽度为300px  */
    15.             height: 30px;                /* 设置高度为30px  */
    16.         }
    17.         .buttonName{
    18.             background-color: #4E6EF2;  /* 设置背景颜色  */
    19.             color: #fff;                /* 设置文字颜色  */
    20.             height: 34px;                 /*为什么这里是34 而不是30*/
    21.             border: none;                 /* 设置按钮的边框不显示  */
    22.             padding-left: 5px;            /* 设置按钮左边内边距为 5px  */
    23.             padding-right: 5px;           /* 设置按钮右边内边距为 5px  */
    24.         }
    25.     style>
    26. head>
    27. <body>
    28.     <input class="inputName" />
    29.     <button class="buttonName">百度一下button>
    30. body>
    31. <script>
    32.     //1. 获取“百度一下”按钮的DOM节点
    33.     let buttonDOM = document.getElementsByClassName("buttonName");
    34.     //2. 给该按钮，添加一个点击事件的监听，当用户发起点击，就会进入function函数内部，执行下面语句
    35.     buttonDOM[0].addEventListener('click',function(){
    36.         alert("你点击按钮，马上跳转到百度页面");
    37.         window.open("https://www.baidu.com/");
    38.     });
    39. script>
    40. html>

    目前JavaScript 的代码写在了