《从零开始的前端生活：简单影视信息页面制作结尾有一些对生活方面的疑惑，希望有缘人看到可以出个法子。。感谢》

本文链接：https://blog.csdn.net/qq_45804132/article/details/116620107

一. 文章简介

本文大致谈一篇简单的前端实战，影视信息页面查询。
类似于豆瓣那种把？当然差的很远。😂本人先前从未学过任何前端相关的，所以有很多瑕疵，还请多多包涵。
如果仅看网页源码及解析请直接按目录跳过
完整代码在结尾github

二. 技术需求

必要工具：VScod（或者其他工具都可但是得有一个，不能用txt硬写）
简单html知识。
简单css使用。
bootstrip框架简单应用。

即完成该页面并不是在完全零状态下就可以写的，需要完成者至少了解并简单使用过这种标记语言，html等。不过这篇文章是给自己看的，所以尽可能会讲的很详细。

1. html是什么？

Hyper Text Markup Language是html的全程，也就是超文本标记语言。它是一门标记语言，其作用为整合分散的互联网资源，我们可以将其当做一门基础的编程语言来学，但是它相对于c语言，c++等而言，缺少了很多的算法思维，以及对编程水平的要求，如果非要说怎么学，那就是死记硬背，因为只要你够熟练，标签属性记得够多，你写的页面就够精美。如下我们可以简单的写一个hello world将其显示到页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

在这里插入图片描述

just like this

2. css是什么？

全称：层叠样式表

它的作用是渲染网页以及对网页的各个信息进行格式化，就是能让你的网页更好看。

3. Bootstrip？

bootstrip

如上是bootstrip中文官网。

在这里插入图片描述

这一句话就概括了他它是什么。

三. 网页构建

1. 思路构建

对网页布局首先得对网页的大致模样，元素分布，功能等做一个较详细的概括，提前确定好框架之后，后面就不会有很多的麻烦事。

这里建议大家可以用素描软件，或者画工自信的同学们可以直接在本子上画。

我要实现的主页面布局十分简单，即

在这里插入图片描述
嗯，对，就是这样，整体分为两个大模块，头部与身体，身体又分两个模块，影片信息布局与排行榜。

由于主页面布局简单，超链接跳转页面的布局自然要下一些功夫。如下

在这里插入图片描述

当然这里的模块布置依然很分明，大功能块分为两部分，头部与身体，身体又由两部分构成，同时每一个部分又由多个部分构成，用专业点的话来说，这种结构叫做盒子，即整体是由一个盒子包含一个盒子完成的，当然，我不专业。

ok，接下来我们来看代码。

2. 网页实现

1. 导入必要文件

首先，打开VScode。
在这里插入图片描述

还是一般的流程，开文件，开html，这一系列就不用教了。开一个新的html之后，就打入一个!

在这里插入图片描述

选定它即可。接着我们要导入，bootstrip的css

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在这里插入图片描述

放入这里即可。
差不多了，现在开始码。。。

2. writing

头部：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万博影业</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <style>
        .div-inline{ display:in line} 
    </style>

</style>
</head>

身体

<body style="background-image: url('back_2.jpg');background-size: cover;color: white;">
    <div style="background-image: url('img_1.jpg');">
        <div class="jumbotron text-center" style="margin-bottom:0;background-color: rgb(23, 29, 32);color: white;">
            <h1 style="font-size: 1cm;">万博影业信息查询与推荐</h1>
            <p>by 软件 lbs</p> 
        </div>

    <hr>
    <div class="container">
        <div class="row">
          <div class="col-md-10">
            <table   border="4" cellpadding="20" cellspacing="10">
                <tr>
                    <td width="350" height="300">
 
                        <div style="background-color: transparent;">
                            <img src=./moviemessage/jg/img_1.jpg border=0 style="width: 60mm;height: 60mm;"> 
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/jg/jg.html" class="btn btn-default" style="color: rgb(15, 13, 13);">金刚：骷髅岛</a></p>
                        </div>
                    </td>
                    <td width="350" height="300">
 
                        <div>
                            <img src=./moviemessage/htpy/img_1.jpg border=0 style="width: 60mm;height: 60mm;"> 
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/htpy/htpy.html" class="btn btn-default" style="color: rgb(15, 13, 13);">环太平洋1</a></p>
                        </div>
                    </td>
                    <td width="350" height="300">
     
                        <div>
                            <img src=./moviemessage/jg/img_1.jpg border=0 style="width: 60mm;height: 60mm;"> 
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/jg/boot.html" class="btn btn-default" style="color: rgb(15, 13, 13);">金刚：骷髅岛</a></p>
                        </div>
                    </td>
                    <td width="350" height="300">
     
                        <div>
                            <img src=./moviemessage/jg/img_1.jpg border=0 style="width: 60mm;height: 60mm;"> 
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/jg/boot.html" class="btn btn-default" style="color: rgb(15, 13, 13);">金刚：骷髅岛</a></p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="350" height="300">
    
                        <div>
                            <img src=./moviemessage/jg/img_1.jpg border=0 style="width: 60mm;height: 60mm;"> 
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/jg/boot.html" class="btn btn-default" style="color: rgb(15, 13, 13);">金刚：骷髅岛</a></p>
                        </div>
                    </td>
                    <td width="350" height="300">
  
                        <div>
                            <img src=./moviemessage/jg/img_1.jpg border=0 style="width: 60mm;height: 60mm;"> 
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/jg/boot.html" class="btn btn-default" style="color:rgb(15, 13, 13);">金刚：骷髅岛</a></p>
                        </div>
                    </td>
                    <td width="350" height="300">
                        <div>
                            <img src=./moviemessage/jg/img_1.jpg border=0 style="width: 60mm;height: 60mm;"> 
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/jg/boot.html" class="btn btn-default" style="color: rgb(15, 13, 13);">金刚：骷髅岛</a></p>
                        </div>
                    </td>
                    <td width="350" height="300">
                        <div>
                            <img src=./moviemessage/jg/img_1.jpg border=0 style="width: 60mm;height: 60mm;">
                            <p></p>
                            <p style="text-align: center;"><a href="./moviemessage/jg/boot.html" class="btn btn-default" style="color:rgb(15, 13, 13);">金刚：骷髅岛</a></p>
                        </div>
                    </td>
                </tr>
            </table>  
          </div>
          <div class="col-md-2" >
            <div class="list-group">
                <a href="#" class="list-group-item active" style="background-color: rgb(68, 90, 95);">
                    <h4 class="list-group-item-heading">
                        影片信息排行
                    </h4>
                </a>
                <a href="./moviemessage/jg/jg.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        金刚骷髅岛
                        <span class="badge">热</span>
                    </h4>
                    <p class="list-group-item-text">
                        乔丹·沃格-罗伯茨
                    </p>
                </a>
                <a href="/html_1/moviemessage/htpy/htpy.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        环太平洋1
                        <span class="badge">热</span>
                    </h4>
                    <p class="list-group-item-text">
                        吉尔莫·德尔·托罗
                    </p>
                </a>
            </div>

        </div>
        </div>
      </div>

   
</body>

超链接页面：
头部：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金刚</title>
    </style>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

身体：

<body style="color: white;">
<div style="background-image: url('img_1.jpg');background-size: cover;">

<div class="jumbotron text-center" style="margin-bottom:0;background-color: rgb(165, 162, 177);color: white;">
    <h1>金刚骷髅岛</h1>
    <p>乔丹·沃格-罗伯茨</p> 
  </div>
   
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
        <a class="navbar-brand" href="#">页面</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar" style="color: white;">
        <ul class="nav navbar-nav">
          <li><a href="#" >详情</a></li>
        </ul>
      </div>
    </div>
  </nav>
   
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h2>影片</h2>
        <div class="fakeimg">
            <img src="jg.jpg" style="width:100%;height:100%" /> 
        </div>
        <hr>
        <p>
              上世纪70年代，一支集结了科考队员、探险家、战地摄影记者、军人的探险队，冒险前往南太平洋上的神秘岛屿——骷髅岛。他们的到来惊扰了岛上之神——史上最大金刚。经过一番惨烈的激战之后，探险队员散落在了岛屿各处。此时，队员们才意识到这次探险并不是一次单纯的科考任务，而是去探索怪兽存在的证明。
            在这片与世隔绝、危险密布的丛林，无数怪异的史前生物暗藏其中，时刻威胁着他们的生命。
            队员们还遇到了神秘的原始部落，金刚的身世和其守护岛屿的原因也被逐渐揭开，
            原来，恐怖阴森的骷髅岛上还蛰伏着更凶狠残暴的怪兽…… </p>
        <h3>直达</h3>
        <br>
        <ul class="nav nav-pills nav-stacked">
          <li><a href="https://movie.douban.com/subject/26309788/celebrities" style="color: rgb(79, 107, 129);">主演信息</a></li>
          <li><a href="https://www.iqiyi.com/v_19rr7q6e38.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01" style="color: rgb(79, 107, 129);">观看</a></li>
          <li><a href="https://movie.douban.com/celebrity/1326532/" style="color: rgb(79, 107, 129);">导演信息</a></li>
        </ul>
        <hr class="hidden-sm hidden-md hidden-lg">
      </div>
      <div class="col-sm-8">
        <h2>影评</h2>
        <hr>
        <div class="fakeimg"></div>
        <p>给IMAX特制版片头一万个赞！要知道每次看IMAX最爱看的就是那个“屏息以待”倒计时片头，今天还是头一回看到制作成符合剧情的设计…没有“美女与野兽”式剧情，没有帝国大厦顶峰对决，依然被金刚的“大”震的合不拢嘴…最爱他孤独的背影，越大越孤独。</p>
        <br>
        <h2>获奖</h2>
        <hr>
        <div>
            第90届奥斯卡金像奖 最佳视觉效果(提名) 杰夫·怀特 / 斯蒂芬·罗森包姆 / 斯科特·波恩 / 迈克尔·迈纳杜斯 
             <br>
             <br>
            第45届动画安妮奖 最佳真人电影动画角色(提名) 
            <br>
            <br>
            第16届美国视觉效果协会奖 最佳特效电影视觉效果(提名) 
        </div>
        <br>
        <h2>剧照</h2>
        <hr>
        <div class="fakeimg">
            <table>
                <tr>
                    <td><img src=img_2.jpg border=0 style="width: 100%;height: 100%;"></td>
                    <td><img src=img_3.jpg border=0 style="width: 100%;height: 100%;"></td>
                </tr>
            </table>
        </div>
        </div>
    </div>
  </div>
   
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>

</div>
</body>

3. 浅析代码

由于web前端开发的知识点非常多而杂，因此建议大家分块学。

1. 整体构造

html的整体构造如下：

<!DOCTYPE html>
<html lang="en">
    <head>

    </head>
    <body>
        
    </body>
</html>

在这里插入图片描述

用缩进来看会比较方便，即分为头部和尾部，head标签与其说是头部，更像是对该页面的一些信息的引入，规划等，我们或许可以将其视为c中的inlcude？python的import？差不多意思。

body则是网页真正展示的部分。

这里的lang是html大标签的属性之一，选择语言，en为英语，而对应的zh-CN就是中文，这里说明该网页是用的什么语言，当然目前这个设置其实，在基础学习中用处真的没用很大了解即可。

在这里插入图片描述

meta元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。同时在html中meta元素没用结束标签。
title则是展示在浏览器最上面框里的东西即

在这里插入图片描述

这一段。

2. 引入文件与css，javascript利用

在这里插入图片描述如上就类似于python中的import引入什么库，这里的link就是引入什么链接中的文件，script则是利用对应的js文件。没用该代码，我们的bootstrip是没用效果的。

在这里插入图片描述

style写入头部信息中，类似于声明效果，可在后面的div中直接利用。

3. 表格部分

在这里插入图片描述

这就是一个简单的表格结构，理论上可以在其中放入任何的元素，我们的超链接还有图片都是存入表格单元中的。可以尝试脑补将上面的图片变成文字（是不是像表格多了😂）

4. div标签！

div标签几乎可以说是万能标签，它就是我之前所提到的盒子，一个一个盒子，在如今各个大厂的网页上我们都能看到成堆的div标签，这也反应的它的重要性，但是div标签本身的语义没有很强所以，其实像我还有类似于我这样的小白本身真的是没有很推荐使用。它的属性巨多，因此可以构建出各种样式的界面。
我的主页面几乎全程div了。

5. a标签（超链接）

超链接标签，超链接作为一个传送门在网页中无处不在，甚至在浏览某些网站时，都会发现有些透明的广告，点击就莫名跳过去，这也是a的功能。

在这里插入图片描述

这样点击就可以直接跳到百度。。。

6. p段落标签

简单易懂，开一个新的段落。

7. bootstrip的美化

bootstrip对整体的html都有美化功能，它的引用可以利用各种标签的class属性。

       <ul class="nav nav-pills nav-stacked">
          <li><a href="https://movie.douban.com/subject/26309788/celebrities" style="color: rgb(79, 107, 129);">主演信息</a></li>
          <li><a href="https://www.iqiyi.com/v_19rr7q6e38.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01" style="color: rgb(79, 107, 129);">观看</a></li>
          <li><a href="https://movie.douban.com/celebrity/1326532/" style="color: rgb(79, 107, 129);">导演信息</a></li>
        </ul>

在这里插入图片描述

如上这种，如果单纯使用ul的话。

在这里插入图片描述
就是这样。。。。

非常僵硬

四. 总结与吐槽

这次的总结与文章没有半毛钱关系，就是吐槽以及疑惑，我只是一个普普通通的一本大学的一个有着普普通通成绩的一个普普通通的大二学生，最近我，有点，虚脱或者说，与年龄不符合的累？不知道怎么，总是有种昏昏此身何所似的感觉，我不太清楚天南地北各985211大神都怎么样，但是我的生活它好像不是一个大二同学有的生活，确实可能周围的人都有点放松，但是我怎么会那么多事情？回想从大一的到现在，学大概有c语言，算法，数据结构，python，爬虫，数据分析，数学建模，计算机视觉，机器学习，深度学习，linux服务器，java，html，做的东西前前后后有基于c语言的系统，简单的数据分析，气温预测，目标识别，房价预测，车牌识别，一系列东西，在过去的时间里，我的进步很快，甚至于我自己能感觉到，我可以一晚上从零将一个东西完整的做出来，可以一晚上帮隔壁大学同学完成五份期末大作业，可以帮即将毕业的学长学姐在极短的时间内肝出一份毕设，甚至我可以一个人同时指导好几个同学，带若干个徒弟，但是如今好像到了一个瓶颈，我察觉不到我的进步，就以前好像根本就没有极限的我，突然走不动了。。。就好像这些包袱被在身上把我压垮了。。。。。我不知道走来走去的读者能不能看到这篇吐槽，但是我也有种求救的意思吧，现在的我真的不知道怎么做，跟周围的人有千丝万缕的联系，牵一发而动全身的我到底该不该切开，或者该如何切开？我以前一个人真的可以跑的很快。可是现在。。。。。。。。。。。。。。。。。。。。。个人真的没办法。

感谢阅读。。。。。。。。