HTML 基础汇总实验

实验中的代码可以通过命令下载在实验楼环境中下载运行测试

1
git clone https://github.com/shiyanlou/finaltest

实验总体设计

在开始之前我们对网页应该有大致的把握，也就是说，在开始之前我们就要清楚我们要实现的目标，对应的最基础的框架结构，并且通过使用我们学过的那些标签和属性来实现，对于这个实验。我们可以随便在网上找一个样式简单点的网页来实现，这可能要涉及到一小部分的css样式的内容（毕竟只用HTML很难写出相同的效果）。下面我们就先展示一下我们要完成的效果：

大家可以看出，这个页面实现起来难度应该不大，这里涉及到布局，图片的插入，背景颜色调整，链接实现页面内的跳转，表单实现文本输入和邮件发送，再加上最基础的文本格式，用我们前面讲过的知识，足以对付。

下面，我们就先来用一个结构图将这个页面的结构为大家剖析一下。让大家对这个实验结构有更好的理解：

总体框架及布局

前面的章节中我们讲过两种实现布局的方式，一个是表格元素，一个是div元素，这里我们选择使用div元素来实现。这里涉及到一点css的东西，用了style。但是无关紧要，完全能理解。下面我们就来具体讲解下：

首先我们将整个页面横向分为五个块，整个页面我们先看作一个大的块，其他的块嵌套在其中。我们现在就为他们命名。

整个页面我们看作时一个块，我们将其命名为container，所有的块都嵌套在其中

下面就是标题，命名为header，这是整个页面的头部，一个标题加一个本页面链接，没什么多说的

下一个是我们第一个大的部分，占了第一篇页面的额绝大多部分，有一张工程师的插图，命名为paragraph。

接下来有四张插图的部分，我们将其算为一个大的块（其实有四个块，水平并列，每一个块插一张图）这四个小块分别命名为leftside、middle1、middle2、rightside。

再下来就是表单发送邮件的块，主要实现文本输入和邮件发送，将其命名为footer1.

最后就是一个美化的底边框，将其命名为footer2。

下面就是具体的代码，在这个style中，顺便设置了一些对这个块的总体设置（所占宽度，高度，对齐等）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
#container {
    width: 1300px;
    margin: 0 auto; /* 使 #container 居中 */
}
#header {
    background-color: darkslategray;
    height: 130px;
    font-size: 16px;
}
#paragraph {
    background-color: lightseagreen;
    height: 550px;
    text-align: center;
    font-size: 30px;
}
#leftside {
    height: 350px;
    width:310px;
    float: left;
}
#middle1 {
    height: 350px;
    width: 340px;
    float: left;
}
#middle2 {
    height: 350px;
    width: 340px;
    float: left;
}
#rightside {
    height: 350px;
    width: 310px;
    float: left;
}
#leftside img,
#middle1 img,
#middle2 img,
#rightside img {
    width: 100%;
}
#footer1 {
    background-color: powderblue;
    height: 600px;
    clear: both;
    text-align:center;
}
#footer2 {
    background-color: lightslategrey;
    height: 100px;
    clear: both;
    text-align:center;
}
</style>

具体模块实现

上面介绍了总体的模块，这里我们就具体来看看如何实现每一块的实现：

header：

1
2
3
4
5
6

<div id="header" >
    <br/>
    <h1 style="color: aliceblue;text-align: center">Colorful Shi yan Lou</h1>
    <a href="#con" style="float: left;color: lightgray">Contact us</a>
</div>

这是头块的具体内容，设置了字体颜色对其方式，还加入了一个页面间跳转的链接，链接的另一半在后面的footer1中，点击这里以后，页面会跳转到footer1。

1
2
3
4
5
6
7
8
9
10
11
paragraph：

<div id="paragraph">
      <br/>
      <p>
          <img src="profile.png">
          <br/>
          <h1 style="color: aliceblue">we are engineers</h1>
          <p style="color: aliceblue">we are young</p>
      </p>
  </div>

这个paragraph块插入了一张图，定义了字体颜色，而且在前面的总体声明中可以看出，还设置了这个模块的字体对齐方式及字体大小。

中间模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="leftside" align="center">
      <h1 style="color: lightslategray">Working</h1>
      <img src="cabin.png" height="260" width="300">
  </div>


  <div id="middle1" align="center">
      <h1 style="color: lightslategray">Eating</h1>
     <img src="cake.png" height="260" width="300">
  </div>

  <div id="middle2" align="center">
      <h1 style="color: lightslategray">Playing</h1>
      <img src="game.png" height="260" width="300">
  </div>


  <div id="rightside" align="center">
      <h1 style="color: lightslategray">Sleeping</h1>
      <img src="circus.png" height="260" width="300">
  </div>

这四个块就一起讲了，这里要实现的就是在每个块中插入图片，在图片上面有字体描述，由于定义的每个块的宽度是大于图片的大小，所以才能产生图片与图片之间白色边框的效果，不然，会挤在一起。要想实现几个块水平并列的放置，还可以采用列表的形式。这里我们就只是简单的通过定义大小来实现水平排列，这就是我们实现的效果

这些都是很简单的实现方式，很容易理解，接下来我着重讲讲footer1块（表单实现文本输入和邮件发送）

添加表单实现文本输入和邮件发送

以前我们讲到过使用< a>标签实现邮件发送，就是在标签中加入mailto属性，其实表单实现邮件发送也是很相似的在form标签中action加入mailto。这里还有要注意的就是，表单输入到类型以前讲的很清楚，要是大家有疑惑可以回头看看。下面时具体的代码内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="footer1" >

       <br/>
           <a name="con">
               <h1 style="color: lightslategray;">let's learn with us
       <br/>good good study, day day up
       </h1>
       </a>

       <div style="background-color: powderblue;width:450px;height: 400px;float: left">
       </div>
       <div style="background-color: orange;width: 400px;height: 400px;float:left">
           <img src="user.png" style="text-align: center">
           <br /><br />
           <form action="MAILTO:support@shiyanlou.com" method="post" enctype="text/plain">

               <h3>Send emali to shiyanlou</h3>
              your name:<br/>
               <input type="text" name="name" value="yourname" size="20">
               <br />
               your email:<br/>
               <input type="text" name="mail" value="yourmailaddress" size="20">
               <br />
               what you wanna say:<br/>
               <input type="text" name="comment" value="yourcomment" size="20">
               <br /><br />
               <input type="submit" value="send">
               <input type="reset" value="rewrite">

           </form>
       </div>

   </div>

在上面这个模块中，首先开头的就是链接的跳转地址，触发地是在header里面定义的。接下来我们为了使发送表单的块居中，采用了最原始的方法，就是再前面加上一个与背景颜色一样的空块，使他们并列。再后面就是表单的应用，定义表单，并规定长度，实现文本和密码的输入。最后加上两个按钮，实现确认和重置。所有的写法都很基础，没有涉及到更高深的东西。

这就是footer模块的具体样子