WEB网页编程实战-阿里云开发者社区

WEB网页编程实战

1. WEB实战前篇

本章节主要是讲解HTML CSS JavaScript的基础知识，以图片的形式供大家浏览。

2. 进入DevStudio

在正式开始我们的案例前，您需要进入DevStudio并进行操作，以下是操作流程：

在DevStudio页面，单击新建工作空间。

在新建工作空间页面，单击通用Git。

在配置基础信息页面，在源代码库中输入https://github.com/yougexiaoyuan/web_studycase.git，这里是在Github上存储的两个网站项目的代码地址，未来如果您需要的话，也可以在Github官网上搜索其他的项目在这里使用。在技术栈区域中，单击通用，然后单击下方的进入空间。

加载完毕后，在WEB_STUDYCASE下就可以看到我们存放的两个案例了。

在跟个人主页简单案例.html上右键，在打开方式中，单击Code Editor就可以显示和编辑代码，而单击预览版则会显示该代码的展示结果，您将可以看到html最终呈现的网页。

3. 案例1：单页网站

单页网站代码较为简单，您可以在WEB IDE编程环境中导入代码块中的代码去进行使用，以下为整体代码，下面我们将分步进行讲解：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>小院里的霍大侠 - 兴趣编程</title>
  <meta name="keywords" content="兴趣编程;小院里的霍大侠;">
  <meta name="description" content="欢迎来到我的小院，跟着我每天学习一点点，让你不再枯燥，不再孤单">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <!--Favicon-->
  <link rel="shortcut icon" href="https://pic2.zhimg.com/v2-9328cf45092a2d79ff01e28870f2c4aa_xl.jpg" title="Favicon">
  <style>
    @media all and (orientation : portrait) {
      /*竖屏*/
      .mypic {
        width: 80%;
      }
    }
    @media all and (orientation : landscape) {
      /*横屏*/
      .mypic {
        width: 40%;
      }
    }
    a {
      color: #000000;
    }
    a:link {
      color: #000000;
    }
    a:visited {
      color: #000000;
    }
    a:hover {
      color: #000000;
    }
    a:active {
      color: #000000;
    }
  </style>
</head>
<body style=" font-family: 'Microsoft JhengHei UI';">
  <div id="wrapper" style=" margin: 0 15px; padding: 15px 0; position: relative;">
    <div style="padding:20px;">
      <img src="https://pic2.zhimg.com/v2-9328cf45092a2d79ff01e28870f2c4aa_xl.jpg"
        style=" vertical-align: middle;height:80px"> 欢迎来到霍大侠的主页
    </div>
    <div style="padding:50px;">
      <h1>欢迎来到我的小院，跟着我每天学习一点点，让你不再枯燥，不再孤单</h1>
      <p>青年小伙已变为中年大叔，职业包括程序员，顾问，产品，创业者……</p>
      <p>终身学习，一直追求，享受过程，期待未来……</p>
      <p>现在只希望可以帮助一些人……</p>
      <p style=" margin: 0 auto; text-align: center; ">
        <img class="mypic" src="https://img.alicdn.com/imgextra/i1/289589474/O1CN01QwJffZ2Jr91zg8yWC_!!289589474.png"
          style=" vertical-align: middle;  text-align: center;">
      </p>
      <p>
        更多：
        <a style=" font-size:14px; font-family: 'Microsoft JhengHei UI'" href="https://www.zhihu.com/people/xfeater"
          target="_blank">https://www.zhihu.com/people/xfeater</a>
      </p>
      <p>微信：huodaxia_xfeater；公众号：有个小院(yougexiaoyuan)</p>
    </div>
  </div>
  <div style="text-align: center; margin: 0px; width: 100%; font-size: 14px; font-family: 'Microsoft JhengHei UI';">
    Always learn, Always pursue, Always enjoy, Always hope... @
    <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration:none">京ICP备15047403号-1</a>
  </div>
</body>
</html>

<!DOCTYPE html>
<html>

填写html的标签，第1、2行都是默认的

接着我们来填写head标签：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>小院里的霍大侠 - 兴趣编程</title>
  <meta name="keywords" content="兴趣编程;小院里的霍大侠;">
  <meta name="description" content="欢迎来到我的小院，跟着我每天学习一点点，让你不再枯燥，不再孤单">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

head标签需要写一些meta标签，meta标签可以提供一些相关页面的原信息，比如针对搜索引擎的更新频度、描述和关键词等等；我们这里设置了内容的字符库、网站的标题、搜索关键词描述、自适应屏幕的作用。

<!--Favicon-->
  <link rel="shortcut icon" href="https://pic2.zhimg.com/v2-9328cf45092a2d79ff01e28870f2c4aa_xl.jpg" title="Favicon">

接着我们来写link标签，用这个标签元素来关联网页的图标，用这个标签元素来关联网页的图标，通常也可以关联CSS、JS等外部的代码文件。

<style>
    @media all and (orientation : portrait) {
      /*竖屏*/
      .mypic {
        width: 80%;
      }
    }
    @media all and (orientation : landscape) {
      /*横屏*/
      .mypic {
        width: 40%;
      }
    }
    a {
      color: #000000;
    }
    a:link {
      color: #000000;
    }
    a:visited {
      color: #000000;
    }
    a:hover {
      color: #000000;
    }
    a:active {
      color: #000000;
    }
  </style>
</head>

我们这个单页文件主要采用内部的CSS代码，所以直接写在了style标签中，大家可以看到标签中定义了多个a超链接标签的样式，这样一个head的内容我们就编写完毕了。

然后就是重点：内容展示区代码，也就是body中的代码：

<div id="wrapper" style=" margin: 0 15px; padding: 15px 0; position: relative;">
    <div style="padding:20px;">
      <img src="https://pic2.zhimg.com/v2-9328cf45092a2d79ff01e28870f2c4aa_xl.jpg"
        style=" vertical-align: middle;height:80px"> 欢迎来到霍大侠的主页
    </div>
    <div style="padding:50px;">
      <h1>欢迎来到我的小院，跟着我每天学习一点点，让你不再枯燥，不再孤单</h1>
      <p>青年小伙已变为中年大叔，职业包括程序员，顾问，产品，创业者……</p>
      <p>终身学习，一直追求，享受过程，期待未来……</p>
      <p>现在只希望可以帮助一些人……</p>
      <p style=" margin: 0 auto; text-align: center; ">
        <img class="mypic" src="https://img.alicdn.com/imgextra/i1/289589474/O1CN01QwJffZ2Jr91zg8yWC_!!289589474.png"
          style=" vertical-align: middle;  text-align: center;">
      </p>
      <p>
        更多：
        <a style=" font-size:14px; font-family: 'Microsoft JhengHei UI'" href="https://www.zhihu.com/people/xfeater"
          target="_blank">https://www.zhihu.com/people/xfeater</a>
      </p>
      <p>微信：huodaxia_xfeater；公众号：有个小院(yougexiaoyuan)</p>
    </div>
  </div>
  <div style="text-align: center; margin: 0px; width: 100%; font-size: 14px; font-family: 'Microsoft JhengHei UI';">
    Always learn, Always pursue, Always enjoy, Always hope... @
    <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration:none">京ICP备15047403号-1</a>
  </div>
</body>
</html>

先放一个div的块标签，div是HTML的常用标签，主要用于一个区域的块作用，里面可以包括多种标签的属性值，我设计的这个网站有头部LOGO和标题、中间座右铭和小段的描述；再往下是一个大的图像展示，再下面是一个联系方式，最底部是一段话和域名备案（为什么要放这个域名备案？因为这个是国家通信管理部门要求的内容，有了这个证明你的网站可以在中国正常展示，否则有可能会被下架，这个通常是先申请域名，然后通过提交网站经营范围等资质申请ICP备案。）因为前面做了网页的设计，所以您可以看到代码中第一个div里就是我们的logo和标题，大部分标签元素都是直接写着CSS属性，然后布局编写我们的中间文字描述。

h1元素代表了大标题字体，p元素是单独一行的意思，文字下面就是一个大图片，紧接着下面就是我的联系方式，底部加入ICP备案，这个就是整个的body中代码的实现。

大家有没有觉得非常的简单？这样就可以快速编写一个简单粗暴的单页网站了。

4. 案例2：企业网站

该案例较为复杂，所以我们用截图的形式为大家讲解，有需要的朋友可以在Github中搜索yougexiaoyuan，即可自行下载代码。

从图片中我们可以看到，PC端和手机端呈现的效果是不一样的。

您可以看到，左侧就是目录结构，右侧就是我们首页的一个代码，一共有四个页面，就是4个html。这个模板我们采用了国外的一个开源的的企业官网的代码，在这个基础上我们进行了一个修改，形成了我自己的有个小院网页。

这个框架采用了bootstrap和JQuery等等的JS开源组件，那我们现在来具体看一下：

我们可以看到它有CSS文件夹，这个里面就是存放了所用到外部的所有CSS文件，我们可以看到bootstrap 还有一些动态的动画、字体等等。

这里面预设了6种模板，每一个模板都是一个样式，可以切换不同的模板，样式颜色，主题风格其实就是这种写法。

我们正常里面有大部分的代码，都是在这个style里面，写了我们网站的一个CSS。

我们再来有个font文件夹，这个里面它存放的就是一些字体，因为它是一个开源的企业网站，大家可以根据自己喜欢的字体去选择.

然后是images，images就是存放了所有的图片资源，对应的把这些图片资源都分好了文件夹，比如有banner、blog等等；因为这个企业网站包含了很多的功能，所以只采用了里面的4个文件夹，因为给大家展示一个简单的案例，就不做复杂的展示了；这个就是根据不同的功能性进行一个资源的存放。

我们来看JS目录。

JS就是放了一些开源的和自己编写的JS代码文件，bootstrap它也是一个开源的JS组件，已经进行过压缩了，通常格式为.min.js。

压缩后通常是这样的，所以它的空间占用很小，加载很快，所以一般成熟的框架都会在编写完以后进行压缩，包括可以看到一个JQuery等等的很多的组件，还有一些HTML5等等。

还有一个videos。

上面这几个文件夹就是我们的资源文件夹，接下来这主要4个网页的代码给大家讲解一下。

我们来看一下四个网页的展示。

在整体的版面、文字、展示内容等，我们进行了一定的修改。

第二个网页，放置了我们的一些后续会开放的课程.

第三个网页，项目：后续开放一些开源的项目，例如一些微信小程序、淘宝小程序、一些网站等供大家学习。

第四个网页：关于我们，是整体的介绍，包括座右铭等等。

回到代码方面，主页代码的行数较多，有500多行，所以我们用将大纲的形式进行讲解，来去看一下他HTML的组成，这样的话大家在开发的时候可以快速定位。

主要有head，在前面的课程我已经都讲过了。

这行代码是用来自适应手机端的，需要的话直接复制到head里就可以。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

调用了一些外部的文件，比如说图片图标，接下来呢就是我们调用了所用的CSS文件，大家可以看到为什么这里没有放JS呢？特殊说明一下，JS文件其实是放在了最后，因为在一个网页渲染的过程中，如果你先放了JS文件,文件比较大的话,这个网页读取会很慢,甚至有的时候会卡住;放在最后我们也有更好的体验；

接下来我们来到body部分.

body就是我们的主体内容，存放了一些图片、视频、网页路径等等，包括我们刚才看到的网站的座右铭等等都是在这里得到展示。

所以说即使是初学者做一个网页也并不难，甚至只需要学会内容的查找并将其变换就可以，这样可以大幅节省开发时间；这个就是我兴趣编程推崇的一个方面。如果后续大家可以学到一些动态的高级语言之后，包括一些Python的框架前端框架，我们会把这个页头页尾，包括一些公共的属性会抽离出来变成一个组件；比如说每个页面更改一次的话，那其他的页面就都更改了。

现在的话呢因为我们比较简单，进入初学阶段，所以我们每个页面，比如说底部的这些公共的地方都是一样的，如果想修改，对应的四个页面都要修改。

课程页面比较简单，只有300行代码左右；大家可以看到一个href，这里就可以用来存放一些公众号网页等等。

这个网页当你刷新的时候，三个组件会有一个渐显效果，显得比较高大上，这个就是JS的作用。

鼠标指针放置的位置就是用来控制渐显的延迟时间的.

关于页面，按瀑布流的方式一层一层的去排列，去呈现了信息。

实验链接：https://developer.aliyun.com/adc/scenario/f566263daeb441a88b8500fbfe8f2ce6

WEB网页编程实战