2024年5月4日发(作者：)

龙源期刊网

基于HTML5技术的高校门户网站设计

作者：蓝鹰

来源：《智能计算机与应用》2015年第04期

摘要：针对目前大多数高校门户网站采用HTML4技术实现的网页代码结构不清晰等局限

性，本文提出了一套基于HTML5+CSS技术的高校门户网站生成方案。该方案具有Web标准

统一，轻松实现跨平台等优点。

关键词：HTML5； CSS；跨平台

中文分类号：TP311 文献标识码： A文章编号：2095-2163（2015）04-

Design of University Portal Website based on HTML5

LAN Ying

（College of Computer Science and Technology， Jilin Normal University， Siping 136000，

China）

Abstract： At present， most of the university portal is realized by using html4 technology to

realize，butits structure of code is not clear. This paper proposes a scheme based on HTML5 + CSS

technology. The scheme has many advantages such asthe same web standard and platform

independence.

Key words： HTML5； CSS；Platform Independence

0 引言

传统的采用HTML4 技术设计的高校门户网站页面中大量使用到 DIV+CSS 技术进行页面

布局。首先使用DIV标签将网页元素分成块，再对分割后的每一块使用 CSS技术进行精确的

格式控制，以实现为每部分设置文本格式，段落格式，背景格式，排版，自动隐藏，各种特效

等。这种DIV标签的过多使用情况通常会导致在网页代码中嵌套层次过多，进而造成网页代

码结构不清晰，给高校门户网站的日后维护带来很大麻烦，并于无形中增加了网站的维护成

本。

HTML5 是 W3C与 WHATWG（Web Hypertext Application Technology Working Group）在

2006 年合作创建的一个新版本HTML。该版本将成为 HTML和XHTML以及 HTML DOM 技

术的新标准。2013年5月6日，HTML 5.1 正式草案公布。HTML 5是近年来网站开发标准的

巨大飞跃。与之前的HTML版本不同的是HTML 5技术并非仅仅用来表示网站的页面内容，

而是能够将Web应用带入一个更加成熟的应用平台，在该平台上，文本，音频，视频，图

龙源期刊网

像，动画，以及同电脑的交互活动都将得到高质量的标准化。根据W3C（万维网联盟）的发

言稿称：“HTML5是开放的Web网络平台的奠基石。”，这种跨平台的网页程序环境通常被认

为是“Web标准”的保护伞。HTML5以及JavaScript和CSS相关技术的联合更使得HTML5技术

更趋完善，三者的结合能够让开发者在任何设备上可顺利运行丰富内容的网页应用。基于此，

采用HTML5技术设计的高校门户网站页面代码结构将会更加清晰，并且能够轻松实现跨平

台。可以预期，越来越多的高校门户网站即将加入到HTML 5的大平台上来。

1 基于HTML5的高校门户网站设计

1.1高校门户网站的系统功能结构设计

从功能上划分，高校门户网站系统共分为以下几个模块： 首页、学校概况、机构设置、

科学研究、师资队伍、人才培养、国际交流、学生工作等功能模块，如图1所示。

图1 高校门户网站系统功能结构

Fig.1 Function Structure of University Web Site

1.2高校门户网站首页的架构设计

高校门户网站首页的架构采用两栏式网页架构，如图2所示。

图2 高校门户网站首页架构

Fig.2 Home Page Structure of University Web Site

高校门户网站首页所使用的HTML5结构化标签有：标记、标记、标记、标记、标记和标

记。这些标记的具体含义则如表1所示。

表1高校门户网站首页的结构化语义标记

Tab.1 Structured Semantic Markup of University Web Site

标记 说明

显示网站名称、主题或者主要信息

网站的连接菜单

用于侧边栏

用于定义主内容区

龙源期刊网

用于章节或段落

1.3高校门户网站首页的页面实现

采用HTML5技术的高校门户网站首页效果如图3所示。高校门户网站首页主要部分代码

如下：

//高校门户网站首页头部

欢迎来到吉林师范大学

好学近知，力行近仁

 首页

 学校概况

//高校门户网站导航

//高校门户网站的主内容区

//显示学术活动公告

学术活动

07.03 大学外语部教师系列学术讲座之六

……此处省略部分代码

采用HTML5技术创建的高校门户网站首页只含有页面显示内容。网页的美化部分则需要

由CSS3来处理。这种HTML5语法只负责显示网页结构与内容，CSS3负责网页格式的方式能

够实现网页内容与格式相分离，方便网页日后维护。图4即是在图3的基础上使用CSS3美化

后的高校门户网站首页效果图。

龙源期刊网

图3 未使用CSS3的高校门户网站首页

Fig.3 Home Page which unused CSS3 图4 已使用CSS3的高校门户网站首页

Fig.4 Home Page which used CSS3

高校门户网站首页中所使用的关键CSS3代码如下：

#header nav li {float： left；list-style： none；padding： 0 5px；}//通过float浮动属性，将

导航链接由垂直方向更改为水平方

a {color： #996600；text-decoration： none；} //定义导航链接文本格式为指定文本颜色，

去掉下划线

h1， h2， h4 {margin： 0；} //定义标题文本格式为居中

a：hover {color： #cc3300；} //定义导航链接文本悬浮状态的颜色

#travel section {float： left；width： 350px；} // 学术活动侧栏浮动靠左对齐

#travel aside {margin-left： 400px； }//定义高校门户网站首页图片侧边栏与学术活动侧栏

距离为400像素

footer {margin： 15px 0 10px；text-align： center；} //定义网站版权声明页脚的文本信息水

平居中对齐

……此处省略部分CSS代码

2 采用HTML5技术的高校门户网站优势

2.1 Web标准统一

HTML5技术的推出源于W3C 、谷歌、苹果等几百家公司探讨商定的结果。HTML5标准

的公开性，使得访问高校门户网站的各种浏览器和平台都可以根据关联W3C的资料库找寻根

源，并实现自己的应用，进而实现了Web标准的统一性。

2.2 轻松实现跨平台

HTML5技术可以轻松地实现跨平台使用。采用HTML5技术的高校门户网站应用，如果

需要可以很轻松地被移植到UC的开放平台、Facebook应用平台，甚至可以通过软件封装的技

术发放到App Store上。这种强大的跨平台性则使得高校门户网站具有广阔的应用前景。

龙源期刊网

2.3 程序升级更快捷

使用HTML5技术的高校门户网站由于采用的是B/S（浏览器/服务器）模式，程序升级将

是即时更新的，只要服务器端更新了高校门户网站的新版本；之后客户端浏览器在打开网页

时，也将自动更新到高校门户网站各个网页的最新版本。

2.4 与搜索引擎无缝结合

通常，对于一些含有Flash动画的高校门户网站，搜索引擎在抓取和索引操作时效率十分

低下。而采用HTML5技术编写的高校门户网站，搜索引擎的蜘蛛将能够抓取高校门户网站站

点和索引内容。大部分嵌入高校门户网站中的Flash动画内容可以方便、高效地被各类搜索引

擎成功获取。

3 结束语

网站实际应用效果表明，采用 HTML5技术的高校门户网站设计，在实现网页代码结构非

常清晰的同时，大大减少了开发人员代码编写量，能够有效提高开发效率，同时降低高校门户

网站的日后维护成本。鉴于HTML5技术所具有的Web标准统一、轻松实现跨平台、程序升级

更快捷、搜索引擎无缝结合等这些优良特性，由此推断HTML5技术必将成为未来高校门户网

站开发的核心技术。

参考文献：

[1] 黄玉春. 浅谈下一代Web开发标准的核心技术_HTML5[J].计算机时代，2015，12

（4）：3-5.

[2] 涂频. 基于HTML5的网页设计应用[J].办公自动化，2013，24（18）：31-33.

[3] 陈婉凌.网页设计必学的实用编程技术[M].北京：清华大学出版社，2014.