实现还有很长的路要走,但HTML5正在改变Web。另外,目前的互联网不仅仅是传统意义上面的互联网,所有的传统应用和模式正在向着更加移动和便捷发展,人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用,如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用,未来必将也会改变人们生活的方方面面。
HTML5中也加入了以上各类新的元素和功能,同时也考虑到了非健全人事使用互联网时可能带来的问题,所以,研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇,而基于这个变革的年代去使用类似的技术来创造更多新的应用更是能够改变这个世界的一次机会。
博客作为一种新的生活方式、新的工作方式和新的学习方式已经被越来越多的人所接受,并且在改变传统的网络和社会结构。它使交流和沟通更有明确的选择和方向性;单一的思想和群体的智慧结合变得更加有效;个人出版变成人人都可以实现的梦想。博客正在影响和改变着我们的生活。博客是以网络作为载体,简易迅速便捷地发布自己的心得,及时有效轻松地与他人进行交流,再集丰富多彩的个性化展示于一体的综合性平台。
将HTML5与博客结合,是一次全新的挑战,可以让博客的展现方式更加丰富。
第三节 博客发展趋势
近年来,以Internet为核心的现代网络技术和通信技术已经得到了飞速的发展和广泛的应用,各种网络交流互动工具也应运而生。其中以论坛、博客、社区、空间等最为受广大网民朋友的欢迎,也是目前为止发展的比较成熟的信息交流工具。随着网络技术的日渐成熟,网络博客系统在近几年更是成为各类网民不可或缺的展示自我表现自我的强大工具,其强大的功能良好的互动性在很大程度上满足了广大网民的需求。从互联网的兴起到现在,网民由上网浏览网络文章和查找资料以及上论坛发帖子,发展到建网站、建个人网站论坛主页,再发展成现在的建博客,一路走来,网民在网络一直打拼着建造着一个属于自己的地盘,在我国,已经有十几万个博客网站,博客数量达到100多万个,并且呈现40%的年增长进度。不知从何时起,建博客、写博客成为了众多网民网络生活的重要组成部分,与网络聊天成了并驾齐驱的热点,共同成为网民上网最关心的事情。因此,如何快速高效地为客户构建一个能满足其不同需求的博客系统,成为了当前网络技术人员应深入研究的课题。
-3-
第二章 开发环境概述
第一节 HTML5简介
HTML5 是HTML 下一个的主要修订版本,现在仍处于发展阶段。目标是取代1999 年所定订的HTML 4.01 和XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5 时,实际指的是包括HTML、CSS 和JavaScript 在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA,如Adobe Flash(Adobe 公司的一种技术体系,使用Actionscript语言,开发后生成的程序以插件形式在浏览器端运行)、Microsoft Silverlight(微软公司的一种技术,同样是以插件形式在浏览器端运行),与Oracle Java FX(基于Java 的一种技术,SUN 公司被Oracles 收购后归于Oracle 公司,以插件形式在浏览器端运行)的需求,并且提供更多能有效增强网络应用的标准集。
HTML5 添加了许多新的语法特征,其中包括
HTML5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似和标签,但有一定含义,例如
尽管和SGML(Standard Generalized Markup Language,标准通用标记语言)在标记上的相似性,HTML5 的句法并不再基于它了,而是被设计成向后兼容对老版本的HTML 的解析。它有一个新的开始行看起来就像SGML 的文档类型声明,(声明位于文档中的最前面的位置,处于标签之前,此标签可告知浏览器文档使用哪种HTML 或XHTML 规范)这会触发和标准兼容的渲染模式。在2009 年1
-4-
月5 号,HTML5 添加了Web Form2.0(处理表单的功能)的内容。
HTML5 还提供了许多新的应用程序接口(API),除了原先的DOM 接口,HTML5 增加了更多样化的API
① 实时二维绘图。Canvas API:有关动态产出与渲染图形、图表、图像和动画的API。 ② 定时媒体播放HTML5 音频与视频:HTML5 里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。
③ 通信网络Communication APIs:构建实时和跨源(Cross-Origin)通信的两大基础: 跨文档通信(Cross Document Messaging)与XML Http Request Level2。
④ Geolocation API:用户可共享地理位置,并在Web 应用的协助下享用位置感知服务(Location-Aware Services)。
⑤ Web SQL Database,一个本地的SQL 数据库。
⑥ WebSocket,一个基于浏览器的Socket(一种网络协议,支持所有的互联网通信),支持实时性的数据传输。
⑦ 其他:离线存储数据库(离线网络应用程序)、编辑、拖放等。 HTML5与HTML 4的不同之处
① 文件类型声明()仅有一型:。 ② 新的解析顺序:不再基于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简介
CSS即层叠样式表(Cascading Stylesheet)。 在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实
-5-
在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
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和
-6-
content
border:控制背景起始于左上角的边框 padding:控制背景起始于左上角的留白 content:控制背景起始于左上角的内容
background-clip:决定边框是否覆盖住背景(默认是不覆盖),提供了两个值,border和padding
border:会覆盖住背景 padding:不会覆盖背景
background-size:可以指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定
multiple backgrounds:多重背景图象,可以把不同背景图象只放到一个块元素里。
五、文字效果
text-shadow:文字投影,可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text -overflow:当文字溢出时,用“…”提示。包
括ellipsis、clip、ellipsis-word、inherit,前两个CSS2就有了,目前还是部分支持,但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词,对中文意义不大,inherit可以继承父级元素。
六、颜色
HSL colors:除了支持RGB颜色外,还支持HSL(色相、饱和度、亮度)。以前一般都是作图的时候用HSL色谱,但这样一来会包括更多的颜色。H用度表示,S和L用百分比表示,比如hsl(0,100%, 50%)
HSLA colors:加了个不透明度(Apacity),用0到1之间的数来表示,比如hsla(0,100%,50%,0.2)
opacity:直接控制不透明度,用0到1之间的数来表示
RGBA colors:和HSLA colors类似,加了个不透明度。一直以来,浏览器的透明一直无法实现单纯的颜色透明,每次使用alpha后就会把透明的属性继承到子节点上。换句话说,很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。
实现这样的效果非常简单,设置颜色的时候我们使用标准的rgba()单位即可,例如rgba(255,0,0,0.4)这样就出现了一个红色同时拥有alpha透明为0.4的颜色。
经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。
-7-