![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5/CSS3
文章平均质量分 85
Lucifinil
这个作者很懒,什么都没留下…
展开
-
HTML5 新增的主体结构元素
article 元素与 section 元素<article> <header> <h1>主体结构元素</h1> </header> <section> <h2>article 元素</h2> &原创 2011-09-24 14:37:16 · 133 阅读 · 0 评论 -
HTML5 离线应用程序【2】
applicationCache对象applicationCache对象代表本地缓存,可以用它来通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中,当浏览器对本地缓存进行更新,将入新的资源文件时,会触发applicationCache对象的updateready事件,通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新,用户需要手工刷新页面来得到...原创 2011-10-27 20:48:56 · 119 阅读 · 0 评论 -
HTML5 跨文档消息传输
基本介绍HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口号)的Web网页之间可以互相通信,甚至可以实现跨域通信。要想授受从其他窗口发送来的信息,必须对窗口对象的message事件进行监听,代码如下:window.addEventListener("message", function(event) { ...原创 2011-10-29 19:11:19 · 242 阅读 · 0 评论 -
HTML5 Web Sockets通信
基础介绍Web Sockets是HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术。使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的,也是永久的,除非被显示关闭。这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户端的浏览器中,无须...原创 2011-10-29 20:15:25 · 174 阅读 · 0 评论 -
HTML5 使用Web Worker处理线程
基础知识Web Worker是在HTML5中新增的,用来在Web应用程序中实现后台处理的一项技术。使用这个API,用户可以很容易地创建在后台运行的线程(在HTML5中称为worker),如果将可能耗费较长时间的处理交给后台去执行,对用户在前台页面中执行的操作就完全没有影响了。创建后台线程的步骤很简单。只要在Worker类的构造器中将需要在后台线程中执行的脚本文件的URL作为参数,然后创建W...原创 2011-11-01 09:16:53 · 213 阅读 · 0 评论 -
HTML5 获取地理位置信息
Geolocation API的基本知识在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在三个方法。取得当前地理位置可以使用getCurrentPosition()方法来取得用户当前的地理位置信息,该方法的定义如下:...原创 2011-11-01 18:12:04 · 199 阅读 · 0 评论 -
HTML5 绘制图形【1】
canvas元素基础canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形。在页面上放置一个canvas元素,就相当于在页面上放置了一块“画布”,可以在其中进行图形的描绘。canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。在页面中放置canvas元素<!DOCTYPE html><html> <...原创 2011-11-03 12:48:48 · 203 阅读 · 0 评论 -
CSS3 模块化结构
CSS3中的模块模块名称功能描述Basic box model定义各种与盒相关的样式。Line定义各种与直线相关的样式。Lists定义各种与列表相关的样式。Hyperlink Presentation定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等。Presentation Levels定义页面中元素的不同的...原创 2011-11-03 19:12:57 · 482 阅读 · 0 评论 -
HTML5 绘制图形【2】
使用路径绘制圆形要想绘制其他图形,需要使用路径。同样的,绘制开始时还是要取得图形上下文,然后需要执行如下步骤:开始创建路径;创建图形的路径;路径创建完成后,关闭路径;设定绘制样式,调用绘制方法,绘制路径。也就是说,首先使用路径来勾勒图形轮廓,然后设置颜色,进行绘制。开始创建路径首先,使用图形上下文对象的beginPath()方法,该方法的定义如下:con...原创 2011-11-04 11:42:25 · 172 阅读 · 0 评论 -
HTML5 绘制图形【3】
绘制渐变图形渐变是指在填充时从一种颜色慢慢过渡到另外一种颜色。绘制线性渐变绘制线性渐变时,需要使用到LinearGradient对象。使用图形上下文对象的createLinearGradient()方法创建该对象。该方法的定义如下:context.createLinearGradient(xStart, yStart, xEnd, yEnd);该方法有四个参数,前两个参数指定渐...原创 2011-11-05 19:28:30 · 129 阅读 · 0 评论 -
CSS3 选择器【1】
选择器概述选择器是CSS3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在CSS3中,提倡使用选择器来将样式与元素直接绑定真情为,这样,在样式表中什么样式与什么元素相匹配变得一目了然,修改起来也方便。不仅如此,通过选择器,我们还可以实现各种复杂的指定,同时也能大量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。CSS3中的属性选择器...原创 2011-11-06 12:19:10 · 281 阅读 · 0 评论 -
CSS3 选择器【2】
UI元素状态伪类选择器UI元素状态伪类选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用。选择器E:hover、E:active和E:focusE:hover选择器用来指定当鼠标指针移动到元素上时元素所使用的样式;E:active选择器用来指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式;E:focus选择器用来指定元素获得光标焦点...原创 2011-11-07 14:30:17 · 124 阅读 · 0 评论 -
HTML5 离线应用程序【1】
离线Web应用程序介绍在HTML5中新增了一个API,为离线Web应用程序的开发提供了可能性。为了让Web应用程序在离线状态时也能正常工作,就必须要把所有构成Web应用程序的资源文件,诸如:HTML文件、CSS文件、JavaScript脚本文件等放在本地缓存中,当服务器没有和Internet建立连接的时候,也可以利用本地缓存中的资源文件来正常运行Web应用程序。本地缓存与浏览器网页缓存的区...原创 2011-10-27 14:02:40 · 112 阅读 · 0 评论 -
HTML5 本地数据库
本地数据库的基本概念在HTML5中,添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地,从而提高了Web应用程序的性能,减轻了服务器端的负担。在这其中,一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。现在,这种不需要存储在服务器上的,被称为“SQLLite”的文件型SQL数据库已经得到了广泛的利用,所以HTML5中也采...原创 2011-10-24 21:03:31 · 159 阅读 · 0 评论 -
HTML5 新增的非主体结构元素
header 元素header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页内的一个内容区块的标题,也可包含其他内容。注意:一个网页内并未限制header 元素的个数,可以拥有多个,可以为每个内容区块增加一个。header 元素中可以包含多个“h1~h6”元素、hgroup元素、nav元素、form元素、table元素等。hgroup 元素hgroup 元素...原创 2011-09-24 16:07:54 · 121 阅读 · 0 评论 -
HTML5 表单新增元素与属性【1】
全局属性所谓全局属性,是指可以对任何元素都使用的属性。contentEditable属性该属性允许用户编辑元素中的内容,所以该元素必须是可以获得焦点的元素,而且在点击鼠标后要向用户提供一个插入符号,提示用户该元素中的内容允许编辑。该属性是boolean类型的,可以被指定为true或false。该属性还有个隐藏的inherit状态,属性为true时,元素被指定为允许编辑;为false...原创 2011-10-06 20:38:59 · 188 阅读 · 0 评论 -
HTML5 表单新增元素与属性【2】
增加与改良的input元素url类型该类型的input元素是一种专门用来输入URL地址的文本框。提交时如果该文本框中的内容不能转换为URL格式,则不允许提交,使用方法如下:<input type="url" name="url" value="http://www.iteye.com/"/> email类型该类型的input元素是一种专门用来输入Email地址的...原创 2011-10-10 21:23:26 · 128 阅读 · 0 评论 -
HTML5 表单验证
HTML5中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能。自动验证在HTML5中,通过对元素使用属性的方法,可以实现在表单提交时执行自动验证的功能。下例将在提交时自动验证输入的内容是否为数字,若不能通过验证,将显示错误信息,表单验证示例:<!DOCTYPE html><html> <hea...原创 2011-10-11 07:19:22 · 280 阅读 · 0 评论 -
HTML5 中增强的页面元素
新增的figure元素与figcaption元素figure元素是一种元素的组合,带有可选标题。figure元素用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生任何影响。figure元素所表示的内容可以是图片、统计图或代码示例。figcaption元素表示figure元素的标题,它从属于figure元素,必须书写在figure元素内部,可以书写在figure元...原创 2011-10-13 12:34:07 · 243 阅读 · 0 评论 -
HTML5 文件API
在HTML5中,提供了一个关于文件操作的文件API,通过使用这个接口,对于从Web页面上访问本地文件系统的相关处理将会变得十分简单。FileList对象与file对象FileList对象表示用户选择的文件列表。在HTML5中,通过在file控件中添加multiple属性,可以使用控件内一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象则为这些file...原创 2011-10-16 18:49:27 · 136 阅读 · 0 评论 -
HTML5 拖放API
在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码。实现拖放的步骤在HTML5中要想实现拖放操作,至少要经过两个步骤:将想要拖放的对象元素的draggable属性设为true(draggable="true")。这样才能将该元素进行拖放。另外,img元素和a元素(必须指定href属性)默认允许拖放。编写与拖放有关的事件处理代码。...原创 2011-10-17 19:43:21 · 267 阅读 · 0 评论 -
HTML5 多媒体播放【1】
video与audio元素基础在HTML5中,video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的音频数据。以audio元素为例,只要把播放音频的URL给指定元素的src属性就可以了,例如:<audio src="demo/test.mp3"> 您的浏览器不支持audio元素!</audio>通过这种方法,可以把指...原创 2011-10-21 18:58:50 · 354 阅读 · 0 评论 -
HTML5 多媒体播放【2】
音频和视频元素的属性这两种元素所具有的属性大致相同,介绍如下:src属性和autoplay属性src属性用于指定媒体数据的URL地址。autoplay属性用于指定媒体是否在页面加载后是否自动播放,使用方法如下:<video src="sample.mov" autoplay="autoplay"></video>perload属性该属性用于指定视...原创 2011-10-22 21:14:56 · 283 阅读 · 0 评论 -
HTML5 多媒体播放【3】
video元素和audio元素的方法play()方法:使用该方法来播放媒体,自动将元素的paused属性值设置为false。pause()方法:使用该方法来暂停播放,自动将元素的paused属性值设置为true。load()方法:使用该方法来重新载入媒体进行播放,自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值,自动将元素的error的值变...原创 2011-10-23 10:45:22 · 477 阅读 · 0 评论 -
HTML5 Web Storage
Web Storage简单使用在HTML5中重新提供了一种在客户端本地保存数据的功能,它就是Web Storage功能。Web Storage功能,就是在Web上存储数据的功能。具体来说,又分为两种:sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。se...原创 2011-10-24 15:51:22 · 158 阅读 · 0 评论 -
HTML5 绘制图形【4】
绘制变形图形坐标变换绘制图形的时候,我们可能会想要旋转图形,或对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,可以实现这种效果。在计算机上绘制图形的时候,是以坐标单位为基准来进行图形绘制的。默认情况下,Canvas画布的最左上角对应于坐标轴原点(0, 0)。如果对这个坐标使用变换处理,就可以实现图形的变形处理了。对坐标的变换处理有三种方式:平移使用图形上下文对...原创 2011-11-08 08:39:36 · 162 阅读 · 0 评论