devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端(Web网页)无基础个人学习记录Day3，HTML、CSS、JavaScript笔记_拯救者web前端速成文档下载

作者：我家自动化 | 2024-02-22 06:30:50

赞

踩

拯救者web前端速成文档下载

        本笔记为无基础的小白在学习前端技术HTML、CSS、JavaScript过程中所做的笔记，既是对自己学习过程的一个记录，也希望能够给后面新来学习的朋友们提供参考和帮助。本学习笔记基于MOOC、CSDN、知乎、百度百科、b站up主“黑马程序员”等学习资源，综合总结为自己的无基础起步的学习笔记。

        经过前面两天的HTML学习，我们已经把很多常用的HTML知识点都学习和认识了一遍，懂得了HTML实际核心就是由很多不同的标签所组成的文档页面。那么接下来，我们通过一个“实例”把我们所学习到的知识“变现”一下，模仿着百度首页做一个类似布局的搜索页面！（实例当中可能会使用到部分CSS内容，但是无关紧要，直白地来说CSS本身就是为了修饰HTML而存在的）

         百度一下的原始画面，来源：www.baidu.com网页

一、打开VScode，创建一个.html文件，一些初步工作

        可以先创建一个用于存放我们第一个网页实例的文件夹，在VScode的左边打开这个文件夹，再在文件夹当中新建一个“Baidu.html”的文件，就创建好了我们的工程源文件 

         在代码区输入英文的叹号"!"接着回车"Enter"即可直接获得这一段原始代码，不必要自己一字一句的敲进去哦。这个原始架构代码是VScode自动帮我们填补的。在这里可以发现，包括默认语言、编码等，都已经帮我们写完了，"en"，"UTF-8"等内容都是我们在HTML学习中就已经了解过的知识，这里我们都使用默认就可以了。

<title>Baidu一下</title>

         接下来我们就可以把<head></head>标签里面的<title></title>标签修改为"Baidu一下"，这样我们在浏览器的顶端就可以看到我们给网页设置的标题了。

 

二、设计网页的主体部分

  1.     <div class="div1">
  2.         <a href="http://news.baidu.com/" class="a1">新闻&nbsp;</a>
  3.         <a href="https://www.hao123.com/?src=from_pc_logon" class="a2">hao123&nbsp;</a>
  4.         <a href="http://map.baidu.com/" class="a3">地图&nbsp;</a>
  5.         <a href="http://tieba.baidu.com/" class="a4">贴吧&nbsp;</a>
  6.         <a href="https://haokan.baidu.com/?sfrom=baidu-top" class="a5">视频&nbsp;</a>
  7.         <a href="http://image.baidu.com/" class="a6">图片&nbsp;</a>
  8.         <a href="https://pan.baidu.com/?from=1026962h" class="a7">网盘&nbsp;</a>
  9.         <a href="http://www.baidu.com/more/" class="a8">更多&nbsp;</a>
  10.     </div>

        在<body></body>当中开始我们网页主体的编程，这里就运用到了盒子标签——<div></div>标签，在<div>标签当中我们对百度一下网页的左上角先开始编写，对我们的第一个盒子标签命名为"div1"，并在盒子当中放入我们学过的超链接标签<a></a>，把外部链接超链接到我们的按钮当中，（也就是复制链接，粘贴到标签代码里面，格式如上）。这时候我们就得到以下效果

         此时，<div1>当中的8个标签超链接标签便显示在了我们的网页左上角

        接下来我们把同一行的“设置”和“登录”也一并写进入，但是为了区分左右两不同的按钮，方便后续对属性不同的装饰设置，我们不妨另写一个<div2>，用来写这两个超链接

  1.     <div class="div2">
  2.             <a href="#" class="a9">设置&nbsp;</a>
  3.             <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" class="a10">登录</a>
  4.     </div>

        由于我们当前学到的知识依然有限，我们仅仅先对“登录”可以接入百度的超链接，“设置”由于还涉及到没学到的知识，暂且放过。所得效果如下：

         这时，我们会发现，<div1>和<div2>的内容并没有在同一行展现，而是变成了两行。这也对应了我们第一天笔记的内容，简单理解就是：这个盒子在没有特殊设置的情况下，默认占据了一行空间。所以，为了使得两边的内容处于第一行的两边，我们待会需要用到一些简单的CSS知识。

        接着我们继续对百度一下的图片进行超链接，为了与<div1>和<div2>进行区分，因此我们选择多建立一个<imgdiv>，单独对这个图片进行超链接。

  1.     <div class="imgDiv">
  2.             <img class="img1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">    
  3.     </div>

        这里就用到了我们的<img>标签，其中URL地址是外部地址（也就是百度那个显眼照片的外部链接），我们可以直接在src后面复制粘贴即可。效果如下：

         这时，我们会发现，<div1>和<div2>以及<imgdiv>的内容并没有在同一行展现，而是变成了三大块部分，简单理解就是占据了3行。不要紧，待会都可以在CSS里面简单代码设置一下。

        再接下来就是会使用到一个我们第二天所学习的内容，搜索框<input>表单标签，来做我们搜索页面的输入框，同样的我们依然先把这个搜索框放入到一个盒子容器当中。

  1.     <div class="search">
  2.         <input class="leftinput" placeholder="请输入您要搜索的内容......"></input>
  3.         <div class="rightinput">百度一下</div>
  4.     </div>

        这时，我们只需要把我们第二天笔记里面，关于<input>表单标签里面的属性和代码格式参访上面的代码段写进去就好。效果如下：

         此时我们可以发现，聊天框和聊天框内的内容，以及“百度一下”都已经展现在了我们的网页当中，只是位置、大小、颜色等等装饰还没有和原版一样。

三、进行简易的CSS设置

        以下的内容属于HTML当中没有学习到的一些内容，但是算是承上启下吧，我们使用最简单的CSS知识来对我们的网页进行一个布置，包括它们的位置、大小、颜色等等属性，进行设置。首先我们先对<div1>、<div2>进行整体的设置，包括位置。我们的属性设置就不是再写在<body>当中了，而是在<body>外面添加上<style></style>标签来存放我们的CSS部分设置。

  1. <style>
  2.     .div1{
  3.         width: 400px;
  4.         height: 50px;
  5.         float: left;
  6.     }
  7.     .div2{
  8.         width: 400px;
  9.         height: 50px;
  10.         float: right;
  11.     }
  12. </style>

        如图所示，我们就对<div1>、<div2>进行了整体的设置，包括高度、宽度、以及浮动左边、右边都进行了设置，这都是很基础的CSS部分知识。这时我们再看效果：

        我们可以看到顶部的10个超链接都统一在网页的顶部行，各占左右。这时候我们可以继续对他们当中的每一个超链接标签进行CSS属性设置，装饰得好看一些：

  1.         .a1{
  2.             color: black;
  3.             font-size: 15px;
  4.             text-decoration: none;
  5.         }
  6.         .a2{
  7.             color: black;
  8.             font-size: 15px;
  9.             text-decoration: none;
  10.         }
  11.         .a3{
  12.             color: black;
  13.             font-size: 15px;
  14.             text-decoration: none;
  15.         }
  16.         .a4{
  17.             color: black;
  18.             font-size: 15px;
  19.             text-decoration: none;
  20.         }
  21.         .a5{
  22.             color: black;
  23.             font-size: 15px;
  24.             text-decoration: none;
  25.         }
  26.         .a6{
  27.             color: black;
  28.             font-size: 15px;
  29.             text-decoration: none;
  30.         }
  31.         .a7{
  32.             color: black;
  33.             font-size: 15px;
  34.             text-decoration: none;
  35.         }
  36.         .a8{
  37.             color: black;
  38.             font-size: 15px;
  39.             text-decoration: none;
  40.         }
  41.         .a9{
  42.             color: black;
  43.             font-size: 15px;
  44.             text-decoration: none;
  45.         }
  46.         .a10{
  47.             color: white;
  48.             background-color: blue;
  49.             font-size: 15px;
  50.             padding-left: 10px;
  51.             padding-right:10px;
  52.             padding-top: 5px;
  53.             padding-bottom: 5px;
  54.             border-style: solid;
  55.             border-right-width: 0ch;
  56.             border-top-left-radius: 15px;
  57.             border-bottom-left-radius: 15px;
  58.             border-left-width: 0ch;
  59.             border-top-right-radius: 15px;
  60.             border-bottom-right-radius: 15px;
  61.             text-decoration: none;
  62.         }

         其中，a1-9分别对应顶部的9个超链接标签，他们都被设置成了黑色、大小像素为15px，并去除掉了他们的下划线，和原版的百度首页更接近一些。而a10由于原版页面就设置得比较好看，因此我们也给他添加了圆角、蓝色、内部字为白色等CSS属性（这里可以直接copy就好，因为这里的CSS属性设置比较多，代码比较长）效果如下：

        再接下来就是对百度这个标志性LOGO超链接，以及搜索框进行设置了：

  1.     .imgDiv{
  2.         text-align: center;
  3.     }
  4.     .search{
  5.         width: 45%;
  6.         height: 50px;
  7.         margin: auto;
  8.         border-color: #e3e3e3;
  9.     }

         此时我们就对搜索框和百度一下的LOGO图片进行了设置，一个是对图片进行居中处理，其次是对搜索框进行了高度、宽度、位置和颜色的设置。

        我们继续对上面写的<input>表单进行修饰，以下内容为CSS部分，可以直接copy。

  1.     .leftinput{
  2.         width: 85%;
  3.         height: 50px;
  4.         border-style: solid;
  5.         border-color: gainsboro;
  6.         border-width: 2px;
  7.         box-sizing: border-box;
  8.         border-right-width: 0ch;
  9.         border-top-left-radius: 15px;
  10.         border-bottom-left-radius: 15px;
  11.         font-size: 15px;
  12.         padding-left: 20px;
  13.         float: left;
  14.     }
  15.     .rightinput{
  16.         width: 15%;
  17.         height: 50px;
  18.         border-style: solid;
  19.         background-color: blue;
  20.         border-color: blue;
  21.         border-width: 0;
  22.         box-sizing: border-box;
  23.         border-left-width: 0ch;
  24.         border-top-right-radius: 15px;
  25.         border-bottom-right-radius: 15px;
  26.         text-align: center;
  27.         line-height: 50px;
  28.         color: white;
  29.         float: right;
  30.     }

        此时，我们对<input>表单进行了细致的CSS属性设置，使得搜索框和蓝色的"百度一下"进行了圆角化、精细化设计，最终我们获得简易的百度一下网页效果如下：

最终效果图，简易版百度一下页面就设计完成了

完整代码

  1. <!DOCTYPE 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>Baidu一下</title>
  8. </head>
  9. <style>
  10.     .div1{
  11.         width: 400px;
  12.         height: 50px;
  13.         float: left;
  14.     }
  15.     .div2{
  16.         width: 400px;
  17.         height: 50px;
  18.         float: right;
  19.     }
  20.     .a1{
  21.             color: black;
  22.             font-size: 15px;
  23.             text-decoration: none;
  24.     }
  25.     .a2{
  26.         color: black;
  27.         font-size: 15px;
  28.         text-decoration: none;
  29.     }
  30.     .a3{
  31.         color: black;
  32.         font-size: 15px;
  33.         text-decoration: none;
  34.     }
  35.     .a4{
  36.         color: black;
  37.         font-size: 15px;
  38.         text-decoration: none;
  39.     }
  40.     .a5{
  41.         color: black;
  42.         font-size: 15px;
  43.         text-decoration: none;
  44.     }
  45.     .a6{
  46.         color: black;
  47.         font-size: 15px;
  48.         text-decoration: none;
  49.     }
  50.     .a7{
  51.         color: black;
  52.         font-size: 15px;
  53.         text-decoration: none;
  54.     }
  55.     .a8{
  56.         color: black;
  57.         font-size: 15px;
  58.         text-decoration: none;
  59.     }
  60.     .a9{
  61.         color: black;
  62.         font-size: 15px;
  63.         text-decoration: none;
  64.     }
  65.     .a10{
  66.         color: white;
  67.         background-color: blue;
  68.         font-size: 15px;
  69.         padding-left: 10px;
  70.         padding-right:10px;
  71.         padding-top: 5px;
  72.         padding-bottom: 5px;
  73.         border-style: solid;
  74.         border-right-width: 0ch;
  75.         border-top-left-radius: 15px;
  76.         border-bottom-left-radius: 15px;
  77.         border-left-width: 0ch;
  78.         border-top-right-radius: 15px;
  79.         border-bottom-right-radius: 15px;
  80.         text-decoration: none;
  81.     }
  82.     .imgDiv{
  83.         text-align: center;
  84.     }
  85.     .search{
  86.         width: 45%;
  87.         height: 50px;
  88.         margin: auto;
  89.         border-color: #e3e3e3;
  90.     }
  91.     .leftinput{
  92.         width: 85%;
  93.         height: 50px;
  94.         border-style: solid;
  95.         border-color: gainsboro;
  96.         border-width: 2px;
  97.         box-sizing: border-box;
  98.         border-right-width: 0ch;
  99.         border-top-left-radius: 15px;
  100.         border-bottom-left-radius: 15px;
  101.         font-size: 15px;
  102.         padding-left: 20px;
  103.         float: left;
  104.     }
  105.     .rightinput{
  106.         width: 15%;
  107.         height: 50px;
  108.         border-style: solid;
  109.         background-color: blue;
  110.         border-color: blue;
  111.         border-width: 0;
  112.         box-sizing: border-box;
  113.         border-left-width: 0ch;
  114.         border-top-right-radius: 15px;
  115.         border-bottom-right-radius: 15px;
  116.         text-align: center;
  117.         line-height: 50px;
  118.         color: white;
  119.         float: right;
  120.     }
  121. </style>
  122. <body>
  123.     <div class="div1">
  124.         <a href="http://news.baidu.com/" class="a1">新闻&nbsp;</a>
  125.         <a href="https://www.hao123.com/?src=from_pc_logon" class="a2">hao123&nbsp;</a>
  126.         <a href="http://map.baidu.com/" class="a3">地图&nbsp;</a>
  127.         <a href="http://tieba.baidu.com/" class="a4">贴吧&nbsp;</a>
  128.         <a href="https://haokan.baidu.com/?sfrom=baidu-top" class="a5">视频&nbsp;</a>
  129.         <a href="http://image.baidu.com/" class="a6">图片&nbsp;</a>
  130.         <a href="https://pan.baidu.com/?from=1026962h" class="a7">网盘&nbsp;</a>
  131.         <a href="http://www.baidu.com/more/" class="a8">更多&nbsp;</a>
  132.     </div> 
  133.  
  134.     <div class="div2">
  135.         <a href="#" class="a9">设置&nbsp;</a>
  136.         <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" class="a10">登录</a>
  137.     </div> 
  138.  
  139.     <div class="imgDiv">
  140.         <img class="img1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">    
  141.     </div>
  142.  
  143.     <div class="search">
  144.         <input class="leftinput" placeholder="请输入您要搜索的内容......"></input>
  145.         <div class="rightinput">百度一下</div>
  146.     </div>
  147. </body>
  148. </html>

        至此，我们的实例1就全部完成了，里面涉及到了很多前面第一天、第二天所学到的HTML知识，以及部分简易的CSS属性知识，修饰了我们整个页面，从这里我们也可以清楚的了解到了CSS对于HTML的作用，他们其实在实际开发当中是形影不离的。这里做的只是简易的百度首页，我们也还可以对<input>里面的其他属性进行进一步设置，完善我们的网页，让网页看起来更完整。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/128902
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号