HTML学习日志二

今天我们来一起学习HTML简单基础的网页框架。

首先我们补充一个简略的小知识，系统的架构可以分为两种：

B/S架构，也就是Browser/Server(浏览器/服务器)架构。也就是基于浏览器和服务器之间的一种架构。可以实现用浏览器即可对服务端进行访问和操作的目的。比如大部分的网站和网页游戏就是采用这种架构的。
B/S架构的优点是可以使用浏览器进行访问服务端，方便，省事。可以使用一个浏览器同时访问多个服务端。
缺点就是由于 浏览器 的显示效果以及功能有限以及网速的限制，会在访问一些大型的游戏等可能会有很差的访问和显示效果，甚至无法访问。
C/S架构，也就是Client/Server(客户机/服务器)架构。也就是基于客户机和服务端之间的一种架构。可以实现较好的访问和显示效果。但是缺点也很明显：
由于要解决网速的问题，所以对于C/S架构需要下载安装对应的客户端。大部分的客户端需要随着服务端的更新而更新才能使用。而且维护成本过高。

我们学习的网页采用的就是B/S的架构。一般来说一个网页可以对它进行划分将它分成几个区域。举个例子：就拿菜鸟教程来说，它的网页是：
这里写图片描述
我们可以对它进行一定程度的划分，如下：

可以首先将网页划分为上下两部分如黑色边框所划分的 头部导航 和 下半部分。而 下半部分 又可以分为左右两大块 菜单部分 和 主题内容部分。结构就很简单了。而对于复杂的网页也可以由简化繁的划分，由大到小的进行划分。我们今天就来学习一下大的整体的框架。
我们需要知道实现上述简单网页的代码是：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>这是一个简单的网页框架</title>
    </head>
    <frameset rows="150px,*">
        <frame />
        <frameset cols="150px,*">
            <frame />
            <frame />
        </frameset>
    </frameset>
</html>

结果如下：
这里写图片描述
其中，<frameset></frameset> 标签就是网页的框架标签，它有子标签<frame></frame> 表示一个独立的区域。像上述总共有3个区域，其中第一个<frameset></frameset> 有一个区域，就有一个<frame></frame> 而下面有2个区域，所以就有2个<frame></frame>
而<frameset></frameset> 有属性 rows 和 cols 表示框架中存在多少列多少行，它们的属性值代表它的行或者列的宽度，如果有多行或者列则属性值之间用， 分开。

既然框架有了那么内容呢?下面我们来学习怎么填充内容使这个网页具有一定的功能。
首先是框架的头部，只需要重新编写一个 头部（top） html文件，将它导入编写好的框架中就好。具体内容可以根据实际需求或者喜好而定。
然后是左侧的菜单（menu），它要实现的功能是显示功能列表以及能够随着不同的功能链接到不同的内容显示在 内容(content） 区域里。
右侧的内容框架功能是随着menu的链接而改变。
我自己编写的代码如下：
这里写图片描述
共有如图5个html文件。其中 index 是 web项目 自带的文件没有具体内容的哦~

homework2代码如下：是大体框架的代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>模拟教务在线框架</title>
    </head>
    <frameset rows="150px,*">
        <frame src="Top.html"/>
        <frameset cols="150px,*">
            <frame src="menu.html" />
            <frame src="Content.html" name="Content"/>
        </frameset>
    </frameset>
</html>

其中<frame></frame> 标签内用 src 将各个对应文件显示在对应区域。最后一个<frame></frame> 中的 name 可以起到关键字的作用（就像书签一样，便于定位）

框架头部（top）代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1 align="center" style="color: peachpuff;" >这是网页头部</h1>
    </body>
</html>

框架菜单（menu）代码入下：

<!DOCTYPE html>
<html>
    <head>
        <link href="css/css1.css" rel="stylesheet" />
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <ol type="i">
                <li><a href="Homework01.html" target="Content">个人信息</a></li>
                <li>我的教评</li>
                <li>我的成绩</li>
            </ol>
        </div>
        <div style="background-color: gold;">
            <ul>
                <li>课程查询</li>
                <li>自习室查询</li>
                <li>处分记录</li>
            </ul>
        </div>
        <div>
            <a href="http://www.runoob.com" target="Content">菜鸟教程</a>
        </div>
    </body>
</html>

其中<link href="css/css1.css" rel="stylesheet" /> 代码是引用css文件的意思，css我们明天学习哦~在这里没有也可以哦~但是每一个具体的<div></div> 的样式就需要自己用style 属性设置了哦~如果不知道具体意思呢，可以去菜鸟教程查看哦~
另外，代码中<li><a href="Homework01.html" target="Content">个人信息</a></li> <a></a> 是超链接标签，href 是链接，target 表示目标，这句代码也就是将链接为Homework01.html 的文件内容显示在Content 区域哦~

框架内容（content）代码入下：由于内容的链接可以是自己编写的html文件，也可以是网站的链接，其中homework01就是我上次编写的表格html文件引用了。
执行结果如下：
这里写图片描述
点击个人信息 如下：当然我上次制作的表格是个人信息注册表（为省事就直接拿来用了），你也可以做成自己喜欢的样式啦~

点击菜鸟教程 如下：

那么今天的博客就写到这里喽，明天就开始写css 的日志博客喽~如果有人发现博客中的错误，请留下您的评论，我会改正的，加油吧！少年！

猜你喜欢