毕业论文基于HTML5 CSS3的个人博客系统设计与实现Word文件下载.docx

毕业论文基于HTML5 CSS3的个人博客系统设计与实现Word文件下载.docx

《毕业论文基于HTML5 CSS3的个人博客系统设计与实现Word文件下载.docx》由会员分享，可在线阅读，更多相关《毕业论文基于HTML5 CSS3的个人博客系统设计与实现Word文件下载.docx（42页珍藏版）》请在冰豆网上搜索。

HTML5isthetheHTMLnextmajorrevision,itisstillinthedevelopmentstage.Thegoalistoreplaceenactedin1999forHTML4.01andXHTML1.0standards,withaviewtotherapiddevelopmentofInternetapplications,thenetworkstandardtomeetourcontemporarynetworkneeds.GeneralizedaddressHTML5,actuallyreferstothecombinationofasetoftechnologies,includingHTML,CSSandJavaScript.IthopestobeabletoreducethebrowserplugtherichnessofnetworkapplicationservicesRIA,suchasAdobeFlash,MicrosoftSilverlight,andOracleJavaFX'

sneeds,andprovidemoreeffectiveenhancednetworkapplicationsthesetofstandards.HTML5isanewwebdevelopmenttechnology,ithasagoodsemantictags,withthelatestCSS3displaycanshowunparalleled.SupportHTML5browsers,includingFirefox（Firefox）,IE9anditslater,Chrome（GoogleChrome）,Safari,Opera,etc.;

Maxthonbrowser（Maxthon）,andbasedonIEorChromium（Chromeworksversion,ortheexperimentalversion）haslauncheda360browser,Sogoubrowser,QQbrowser,cheetahbrowserdomesticbrowseralsohavetheabilitytosupportHTML5.

Alongwithcomputer'

sdevelopmentandthepopularization,Blogobtainedtheenormousdevelopment.BlogisWeblog（networkdiary）abbreviation.AfterBlogisE-mail,BBS,theICQfourthnetworkexchangeway.Ittakehastheinfluencenews,thenews,theeventpersonallyasthecentraldisseminationpublicationandsoon,thebrightindividualcharacteristicisconspicuous,itbyuniqueangleofview,keenpowerofobservation,unceasingimpacttraditionmedia.

Inthispaper,ASP.NETandHTML5technology,SQLServer2005asthedatabasetoachieveadynamicpersonalblogsiteanditsmanagement,makestheblogshowmoreperfectmanagementmoreconvenient.

【Keywords】BlogASP.NETC#SQLServerHTML5CSS3

参考文献36

附录37

前言

本论文设计的作品博客系统是基于HTML5和CSS3技术在.NET平台上设计与开发的。

HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。

CSS即层叠样式表（CascadingStylesheet）。

在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。

本设计的目的是开发一个博客系统来支持个人或小团体使用，而不能作为大规模的应用，将来可以改进成为每个人都有自己固定的主页，而且自己可以管理自己的主页，包括博客，分类，样式等功能。

随着网络技术的日渐成熟，网络博客系统近几年更是成为各类网民不可或缺的展示自我表现自我的强大工具，其强大的功能良好的互动性在很大程度上满足了广大网民的需求。

第1章博客系统项目概述

第1节系统开发背景

互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式也开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。

在各种应用不断的趋于更加网络化的同时，一种新的技术标准也随之产生，那就是HTML5（HTML是一种标记语言也是一种标准，互联网开发居于此）。

HTML5是近十年来Web（互联网）标准最巨大的飞跃，和以前的版本不同。

HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。

也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的富客户端，这个客户端可以在蒋动终端、PC（个人计算机）或者其他可以宥网络的地方轻松的运行。

博客从进入中国的这十几年里得到了极大的发展。

博客是一种新的生活方式、新的工作方式、新的学习方式和交流方式，虽然受到微博的冲击，但是博客也是人们发表自己动态最全面，最可靠，信息量最大的平台。

第二节课题研究意义

随着互联网的不断发展，互联网对人们的生活也在不断地变化和加强，人们渐渐地已经开始习惯于互联网所带来的各类服务与应用，并且享受着它带来的便利和丰富。

当然随着互联网的基础用户和开发者不断增多，人们不断地去创造和完普它的速度也越来越快，无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新陈代谢不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式，由于整个行业存在创业成本很低、技术成本门槛却较高等特点，大公司也不断地推动着新的技术，基于此来创建一定的技术壁垒，同时基于此建立全新的服务和技术。

但是毕竟整个互联网是一个开放的环境，大家需要一种标准。

而不是一家独大的竞争下去，这样就一定会失去民心，所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。

HTML5是近十年来Web标准最巨大的飞跃，和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频，音频、图象和动画，以及同电脑的交互都被标准化。

尽管HTML5的实现还有很长的路要走，但HTML5正在改变Web。

另外，目前的互联网不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用，如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用，未来必将也会改变人们生活的方方面面。

HTML5中也加入了以上各类新的元素和功能，同时也考虑到了非健全人事使用互联网时可能带来的问题，所以，研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇，而基于这个变革的年代去使用类似的技术来创造更多新的应用更是能够改变这个世界的一次机会。

博客作为一种新的生活方式、新的工作方式和新的学习方式已经被越来越多的人所接受，并且在改变传统的网络和社会结构。

它使交流和沟通更有明确的选择和方向性；

单一的思想和群体的智慧结合变得更加有效；

个人出版变成人人都可以实现的梦想。

博客正在影响和改变着我们的生活。

博客是以网络作为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人进行交流，再集丰富多彩的个性化展示于一体的综合性平台。

将HTML5与博客结合，是一次全新的挑战，可以让博客的展现方式更加丰富。

第3节博客发展趋势

近年来，以Internet为核心的现代网络技术和通信技术已经得到了飞速的发展和广泛的应用，各种网络交流互动工具也应运而生。

其中以论坛、博客、社区、空间等最为受广大网民朋友的欢迎，也是目前为止发展的比较成熟的信息交流工具。

随着网络技术的日渐成熟，网络博客系统在近几年更是成为各类网民不可或缺的展示自我表现自我的强大工具，其强大的功能良好的互动性在很大程度上满足了广大网民的需求。

从互联网的兴起到现在，网民由上网浏览网络文章和查找资料以及上论坛发帖子，发展到建网站、建个人网站论坛主页，再发展成现在的建博客，一路走来，网民在网络一直打拼着建造着一个属于自己的地盘，在我国，已经有十几万个博客网站，博客数量达到100多万个，并且呈现40%的年增长进度。

不知从何时起，建博客、写博客成为了众多网民网络生活的重要组成部分，与网络聊天成了并驾齐驱的热点，共同成为网民上网最关心的事情。

因此，如何快速高效地为客户构建一个能满足其不同需求的博客系统，成为了当前网络技术人员应深入研究的课题。

第2章开发环境概述

第一节HTML5简介

HTML5是HTML下一个的主要修订版本，现在仍处于发展阶段。

目标是取代1999年所定订的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。

广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如AdobeFlash（Adobe公司的一种技术体系，使用Actionscript语言，开发后生成的程序以插件形式在浏览器端运行）、MicrosoftSilverlight（微软公司的一种技术，同样是以插件形式在浏览器端运行），与OracleJavaFX（基于Java的一种技术，SUN公司被Oracles收购后归于Oracle公司，以插件形式在浏览器端运行）的需求，并且提供更多能有效增强网络应用的标准集。

HTML5添加了许多新的语法特征，其中包括<

video>

，<

audio>

，和<

canvas>

元素（<

均为HTML5中的新标记），同时集成了SVG（HTML5中新加入的矢量图形实现方式）内容。

这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。

其它新的元素包括<

section>

article>

header>

和<

nav>

（<

均为HTML5新添加的标记），是为了丰富文档的数据内容。

新的属性的添加也是为了同样的目的。

同时也有一些属性和元素被移除掉了。

一些元素，像<

a>

cite>

menu>

均为HTML标签）被修改，重新定义或标准化了。

同时APIS和DOM（DocumentObjectModel，文档对象模型）已经成为HTML5中的基础部分了。

HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

HTML5提供了一些新的元素和属性，反映典型的现代用法网站。

其中有些是技术上类似<

div>

span>

标签，但有一定含义，例如<

（网站导航块）和<

footer>

。

这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。

同时为其他浏览要素提供了新的功能，通过一个标准接口，如<

标记。

一些过时的HTML4标记将取消，其中包括纯粹用作显示效果的标记，如<

font>

center>

（HTML中为数不多的具有修改样式属性的标签），因为它们已经被CSS取代。

还有一些通过DOM的网络行为。

尽管和SGML（StandardGeneralizedMarkupLanguage,标准通用标记语言）在标记上的相似性，HTML5的句法并不再基于它了，而是被设计成向后兼容对老版本的HTML的解析。

它有一个新的开始行看起来就像SGML的文档类型声明，<

!

DOCTYPEHTML>

DOCTYPE>

声明位于文档中的最前面的位置，处于<

HTML>

标签之前，此标签可告知浏览器文档使用哪种HTML或XHTML规范）这会触发和标准兼容的渲染模式。

在2009年1月5号，HTML5添加了WebForm2.0（处理表单的功能）的内容。

HTML5还提供了许多新的应用程序接口（API），除了原先的DOM接口，HTML5增加了更多样化的API

①实时二维绘图。

CanvasAPI：

有关动态产出与渲染图形、图表、图像和动画的API。

②定时媒体播放HTML5音频与视频：

HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。

③通信网络CommunicationAPIs：

构建实时和跨源（Cross-Origin）通信的两大基础：

跨文档通信（CrossDocumentMessaging）与XMLHttpRequestLevel2。

④GeolocationAPI：

用户可共享地理位置，并在Web应用的协助下享用位置感知服务（Location-AwareServices）。

⑤WebSQLDatabase，一个本地的SQL数据库。

⑥WebSocket，一个基于浏览器的Socket（一种网络协议，支持所有的互联网通信），支持实时性的数据传输。

⑦其他：

离线存储数据库（离线网络应用程序）、编辑、拖放等。

HTML5与HTML4的不同之处

①文件类型声明（<

）仅有一型：

<

②新的解析顺序：

不再基于SGML。

③新的元素：

section,video,progress,nav,meter,time,aside,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,mark,output,rp,rt,ruby,source,summary,wbr。

④input元素的新类型：

date,email,url等等。

⑤新的属性：

ping（用于a与area）,charset（用于meta）,async（用于script）。

⑥全局属性：

id,tabindex,repeat。

⑦新的全局属性：

contenteditable,contextmenu,draggable,dropzone,hidden,spellcheck。

⑧移除元素：

acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,noframes,strike,tt。

第二节CSS3简介

以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。

这些模块包括：

盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

CSS3带来无与伦比的页面表现能力，而这些在以前只能靠图片，多层的标签嵌套或者js才能实现，现在只需要几行CSS3就能实现，效率也比原来要高很多。

一、布局

Grid布局应用很广泛，最简单的例子就是内容的分栏显示。

对于左边这个布局复杂的三栏网页来说，如果使用CSS3Grid布局的话，我们只需这样写：

body{columns:

3;

column-gap:

0.5in;

}

img{float:

pagetopright;

width:

3gr;

其中，body部分声明页面为3栏，栏间距为0.5英寸；

img中float属性指明图片浮动位置为页面的右上角，而宽度为3个栏宽。

只需这样两行CSS，就可以实现这个复杂布局。

二、特性

圆角表格，对应属性：

border-radius。

以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。

对应属性：

font-effect。

丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。

（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：

text-underline-style，text-underline-color，text-underline-mode，text-underline-position。

在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。

font-emphasize-style和font-emphasize-position。

三、边框

border-color:

控制边框颜色，并且有了更大的灵活性，可以产生渐变效果

border-image:

控制边框图象

border-corner-image:

控制边框边角的图象

border-radius:

能产生类似圆角矩形的效果

四、背景

background-origin:

决定了背景在盒模型中的初始位置，提供了3个值，border,padding和content

border:

控制背景起始于左上角的边框

padding:

控制背景起始于左上角的留白

content:

控制背景起始于左上角的内容

background-clip:

决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding

会覆盖住背景

不会覆盖背景

background-size:

可以指定背景大小，以象素或百分比显示。

当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定

multiplebackgrounds:

多重背景图象，可以把不同背景图象只放到一个块元素里。

五、文字效果

text-shadow:

文字投影，可能是因为MACOSX的Safari浏览器开始支持投影才特意增加的。

text-overflow:

当文字溢出时，用“…”提示。

包

括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。

ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。

六、颜色

HSLcolors:

除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。

以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。

H用度表示，S和L用百分比表示，比如hsl（0,100%,50%）

HSLAcolors:

加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）

opacity:

直接控制不透明度，用0到1之间的数来表示

RGBAcolors:

和HSLAcolors类似，加