HTML5新特性

标签: html5 | 发表时间:2012-02-09 08:46 | 作者:yhawaii
出处:http://blog.csdn.net

1.Canvas

 1.1矩形和线条的绘制

 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas可以使用clearRect。上述三个方法的参数相同:x,y, width, height。前两个参数设定(x,y) 坐标,后两个参数设置矩形的高度和宽度。可以使用lineWidth属性改变线条粗细。

context.fillStyle = ‘#00f’;//blue
context.strokeSyle = ‘#f00’;//red
context.lineWidth = 4;
//draw some rectangles
context.fillRect(0,0,150,50);
context.strokeRect(0,60,150,50);
context.clearRect(30,25,90,60);
context.strokeRect(30,25,90,60);

路径:

//绘制三角形
context.fillStyle = ‘#00f’;//blue
context.strokeSyle = ‘#f00’;//red
context.lineWidth = 4;
context.beginPath();//开始绘制
context.moveTo(10,10);//(x,y)坐标
context.lineTo(100,10);
context.lineTo(10,100);
context.lineTo(10,10);
context.fill();
context.stroke();
context.closePath();//结束绘制

1.2插入图片

drawImage 方法允许在 canvas 中插入其他图像。( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法可以有3个、5个或9个参数。

3个参数:最基本的 drawImage使用方法。一个参数指定图像位置,另两个参数设置图像在 canvas中的位置。

context.drawImage(img_elem,dx,dy);

5个参数:中级的 drawImage 使用方法,包括上面所述3个参数,加两个参数指明插入图像宽度和高度 (改变图像大小)。

context.drawImage(img_elem,dx,dy,dw,dh);

9个参数:最复杂 drawImage 杂使用方法,包含上述5个参数外,另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

context.drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);

1.3像素操作

2D Context API 提供了三个方法用于像素级操作:createImageData,getImageData, 和putImageData。ImageData对象保存了图像像素值。每个对象有三个属性:width, height 和data。data 属性类型为CanvasPixelArray,用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至255,包括alpha在内!)。像素的顺序从左至右,从上到下,按行存储。

·        绘制红色矩形
var imgd = context.creatImageData(50,50);
var pix = imgd.data;
for(var i=0;n<pix.length,i<n;i+=4){
 pix[i]=255;
pix[i+3]=127;
}
Context.putImageData(imgd,0,0);

·        颜色反转滤镜
var imgd = context.getImageData(x,y,width,height);
var pix = imgd.data;
for(var i=0,n=pix.length;i<n;i+=4){
 pix[i]=255-pix[i];
 pix[i+1]=255-pix[i+1];
 pix[i+2]=255-pix[i+2];
}
context.putImageDate(imgd,x,y);

1.4文字写入

context对象可以设置以下 text 属性:

font:文字字体,类似于CSS的font-family;

textAlign:文字水平对齐方式。可取属性值: start,end,left,right,center。默认值:start。

textBaseline:文字竖直对齐方式。可取属性值:top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic

·        有两个方法可以绘制文字:

fillText:绘制带 fillStyle 填充的文字。

strokeText:绘制只有 strokeStyle 边框的文字。两者的参数相同:

要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项——最大宽度。

·        阴影效果:

Chrome浏览器不支持,Firefox支持。

Shadows API的属性为:

shadowColor:阴影颜色。其值和 CSS 颜色值一致。

shadowBlur:设置阴影模糊程度。此值越大,阴影越模糊。其效果和Photoshop 的高斯模糊滤镜相同。

shadowOffsetX 和 shadowOffsetY:阴影的 x 和 y 偏移量,单位是像素。

例子:

context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=4;
context.shadowColor=‘rgba(255,0,0,0.5)’;
context.fillStyle=‘#00f’;
context.fillRect(20,20,150,100);

1.5颜色渐变

 

除了CSS 颜色,fillStyle和strokeStyle 属性可以设置为CanvasGradient 对象。——通过 CanvasGradient可以为线条和填充使用颜色渐变。欲创建CanvasGradient对象,可以使用两个方法:createLinearGradient和createRadialGradient。前者创建线性颜色渐变,后者创建圆形颜色渐变。创建颜色渐变对象后,可以使用对象的addColorStop方法添加颜色中间值。

var gradient1 = context.creatLinearGradient(sx,sy,dx,dy);//开始点和结束点

//变化是从0至1

gradient1.addColorStop(0,‘#f00’);//red

gradient1.addColorStop(0.5,‘#ff0’);//yellow

gradient1.addColorStop(1,‘#00f’);//blue\

//创建圆形的渐变需要指明圆的中心点,也包括起始和结束,以及圆的半径

var gradient2 =context.creatRadialGradient(sx,sy,sr,dx,dy,dr);

//增添颜色和线性的一样

2.Form

 

2.1type=number

 

type=number的HTML表单元素是可以用按键的方式改变文本框中的值。

人数:

<input type=”number” value=”1”/>

2.2type=range

 

type=range意为可以选择某个值的区域范围。

<input type=”range” value=”50”/>

2.3type=data以及其它时间控件

 

type=data意为时间选择器控件。

选择日期:<input type=”data”value=”2011-11-14”>

2.4type=color

 

type=color意为颜色选择器控件。

选取颜色:<input type=”color”value=”#34538b”>

2.5type=search

 

type=search意为搜索功能。

2.6datalist元素和list属性

 

datalist是实现数据列表下拉效果的。

<input type="text" list="mydata" placeholder="热门电影排行"/>

 <datalist id="mydata">

 <option label="Top1" value="让子弹飞">

 <option label="Top2" value="非诚勿扰2">

 <option label="Top3" value="大笑江湖">

 <option label="Top4" value="赵氏孤儿">

 <option label="Top5" value="初恋这件小事">

 </datalist>

3.视频与音频

 

3.1Video

 

Ogg是带有Theora视频编码和Vorbis音频编码的文件;

MPEG4是带有H.264视频编码和AAC音频编码的MPEG4文件;

WebM是VP8视频编码和Vorbis音频编码的文件;

HTML5的规范没有指定特定的视频编解码器,它留给了浏览器来决定。

Safari和IE9预期支持H.264格式的视频,Firefox和Opera坚持开源的Theora和Vorbis格式,所以需要提供两种格式。

Video支持三种视频格式:Ogg,MPEG4,WebM。

例:

<video controls=”preload”>

//此属性表示视频在页面加载时进行加载,预备播放。如果设置为”autoplay”,就忽略该属性。

//controls用于显示如播放按钮的控件

<source src=”cohagenPhoneCall.ogv” type=”video/ogg;codecs=’vorbis,theora’”/>

<source src=”cohagenPhoneCall.mp4”

type=”vide0/mp4; codecs=’avc1.42E01E,mp4a.40.2’”/>

<p>你的浏览器太旧了。<a href=”cohagenPhoneCall.mp4”>下载这个视频。</a></p>

</video>

注:

·        技术上是不需要设置type属性的,但是不这样做的话,浏览器就会自己去寻找类型,为了节省一些带宽,最好还是声明下。

·        不是所有的浏览器都支持HTML5,所以在资源元素的下面,可以提供一个下载链接或者嵌入视频的flash版本替代,这取决于个人。

·        如果想要所有的浏览器都支持HTML5标签,只要链接一个js文件就可以。在页面的头部或底部写上:
<script src=” http://html5media.googlecode.com/svn/trunk/src/html5media.min.js”>
</script>

对于HTML部分,使用:

<video src=”video.mp4” width=”320” height=”240”controls=”autobuffer”>

</video>

3.2Audio

 

无需再依赖第三方产检区渲染音频了,因为HTML5提供了<audio>元素。

以MOozilla核心的Firefox浏览器只支持.ogg文件,webkit核心的浏览器支持.mp3扩展,safari不承认.ogg,它会跳过并移到MP3版本。所以需要创建两个版本的音频。

Audio支持三种音频格式:Ogg Vorbis,MP3,Wav。

例:

<audio autoplay=”autoplay” controls=”controls”>

<source src=”file.ogg”/>

<source src=”file.mp3”/>

</audio>

//标签的属性与video相同。没有height与width。

4.Web存储

 

4.1localStorage

 

localStorage可以长期存储数据而没有时间限制。

4.2sessionStorage

 

SessionStorage不能长期存储数据,数据会随着浏览器的关闭而删除。

5.HTML5的特征

 

5.1.1新的Doctype

 

<!DOCTYPE html>

5.1.2图形元素

 

<img src=”path/to/image” alt=”About image”>

<p>Image of Mars</p>

文字裹在p的标签中,与img标签各行其道,让人很难联想到这就是标题。HTML5通过采用figure元素进行改正。当和figcaption组合使用时,就能够语义化的联想到这就是图片相对应的标题。

<figure>

<img src=”path/to/image” alt=”About image”/>

<figcaption>

<p>This is an image of somethinginteresting</p>

</figcaption>

</figure>

5.1.3<small>重新定义

 

<small>元素不再被用来创建靠近logo且相关的副标题。在html5中,<small>被重新定义,指小字。

5.1.4脚本(scripts)和链接(links)无需type

 

<link rel=”stylesheet” href=”path/to/stylesheet.css”type=”text/css”/>

<script type=”text/javascript”src=”path/to/script.js”></script>

在html5中:

<link rel=”stylesheet”href=”path/to/stylesheet.css”>

<script src=”path/to/script.js”></script>

5.1.5引号问题

 

Html5不是XHTML,所以可以不需要引号。

<p class="myclass" id=someID>Startthe reactor

但是如果倾向结构化,还是需要把引号加上的。

5.1.6内容可以编辑

 

contenteditable元素顾名思义就是允许用户可以编辑元素内容包含的任意文本。

<ul contenteditable=” true”>

<li>hello</li>

<li>Beijing</li>

<li>trs</li>

</ul>

5.1.7email输入(input)

 

在表单输入框应用名为”email”的type属性可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。但是较旧的浏览器不识别,它们会简单的退回到普通文本框。

<form action=”” method=”get”>
<label for=”email”>邮箱:</label><input id=”email”name=”email” type=”email”/>
<button type=”submit”>确定</button>
</form>

5.1.8占位符(placeholders)

 

placeholders意为文本框/文本域空间默认会有个文字提示,获得焦点时,此提示文字就会消失;失去焦点时如果内容为空,提示文字又出现。在表单控件里面显示的提示性文字就是占位符。

如果是以前需要一些javascript代码实现占位符的操作,而html5却使得其非常轻松:

<label for=”email”>邮箱:</label>

<input id=”email” type=”email” placeholder=”trs@trs.com”size=”26”/>

一般webkit核心的浏览器支持此特性,如chrome、safari。

5.1.9本地存储(localStorage)

 

传统的HTML使用的是众所周知的cookie,各种浏览器都支持,直接用js就可以调用,很方便。但是传统的cookie也有它本身的缺陷和不足。比如存储空间小,每个站点大小限制在4kb左右,又有时间期限,而且在请求网页的时候cookie会被附在每个HTTP请求的header中,所以无形中增加了流量。HTTP请求中cookie是明文传递的,所以存有安全性问题,入股用SSL(Secure Sockets Layer 安全套接层;是为网络通信提供安全及数据完整性的一种安全协议)通道另当别论。cookie也很容易受到跨站较稳的攻击。在一个链接后面加上”?cookie=document.cookie”就可以轻易获得用户的cookie信息。HTML5的本地存储也可能会有跨站脚本攻击XSS(cross site script,跨站脚本攻击。恶意攻击者往Web中插入恶意html代码,当用户浏览该页时,嵌入其中web里面的html代码会被执行。)的问题。

HTML5的本地存储可以存储5M大小的数据,甚至还多。它主要有四种:localStorage,sessionStorage,webSQL,indexDB

例子:

//HTML代码:

<ul id=”edit” contenteditable=” true”>

<li><li>

</ul>

//JS代码:

var edit=document.getElementById(edit);

edit.onblur=function(){

localStorage.setItem(“tododata”, this.innerHtml);

};

If(localStorage.getItem(“tododata”)){

 Edit.innerHTML = localStorage.getItem(“tododata”);

}

5.2.0语义的Header和Footer

 

以往:

<div id=”header”>

 …

</div>

<div id=”footer”>

</div>

有了HTML5,可直接替换成;

<header>

 …

</header.

<footer>

</footer>

5.2.1IE和HTML5

 

所有元素有个默认的inline的display。为了确保所有新的元素都以block正确的渲染,需要这样定义:

header,footer,article,section,nav,menu,hgroup{

display:block;

}

但是由于IE不识别某些标签,如header,就会忽略这些样式,所以需要创建元素:

document.creatElement(“artical”);

document.creatElement(“footer”);

document.creatElement(“header”);

document.creatElement(“nav”);

document.creatElement(“menu”);

document.creatElement(“hgroup”);

另解:

<!—[ if IE]>

<script src=” http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

<![endif]-->

5.2.2文档某一部分的信息(hgroup)

 

使用hgroup元素可以将标题组合在一起。

<header>

<hgroup>

<h1>recall fan page</h1>

<h2>only for people whowant the memory of a lifetime.</h2>

</hgroup>

</header>

5.2.3必要的属性(required attribute)

 

<input type=”text” name=”someInput” required>

或者使用更结构化的方法:

<input type=”text” name=”someInput”required=”required”>

如果”someInput”文本框是空白,表单就不会被提交。

<form action=”” method=”get”>

<lable for=”name”>姓名:</label>

<input id=”name” name=”name” type=”text”placeholder=”trs” required=”required”/>

<button type=”submit”>提交<button>

</form>

如果input里面内容是空白,在表单提交的时候,文本框的框会高亮显示,但是好像只是在chrome里有此效果。

5.2.4autocomplete属性

 

autocomplete属性规定form或者input域应该拥有自动完成的功能。

它使用于<form>标签,以及以下类型的<input>标签:text,search,url,telephone,email,password,datapickers,range以及color。

<form action=”” method=”get” autocomplete=”on”>

<label for=”email”>邮箱:</label>

<input type=”email” name=”email”autocomplete=”off”/>

</form>

5.2.5正则表达式

 

使用正则表达式能够轻松的验证一个特定的文本。

<form action=”” method=”get”>

<label for=”username”>姓名:</label>

<input id=”username ” name=”username” type=”text”placeholder=”4-10个英文字母”

Pattern=”[A-Za-z]{4,10}”required=”required” autofocus/>

<button type=”submit”>提交</button>

</form>

在[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。此特性好像只在chrome浏览器中支持。

5.2.6属性支持检测

 

利用优秀的Modernizr库( http://www.modernizr.com/ 可以检测浏览器是否支持某些属性。

只要创建和分析这些元素,就可以确定浏览器的能力。事实上,这是一种确定浏览器兼容的常用方法。比如确定pattern属性,在javascrip中添加一小段代码:

alert(‘pattern’ in document.creatElement(‘input’));//Boolean

//创建了一个新的input元素,并确定了里面的pattern属性浏览器是否支持。

也可以:

<script>

If(!’pattern’ in document.creatElement(‘input’)){

 //做操作

}

</script>

 

5.2.7mark元素(Mark Element)

 

<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。

5.2.8div

 

div应该用在没有更好的元素的时候。比如需要包裹一段代码块在对内容定位处理的包装单元内。但是如果是文章,最好用<artical>,如果是链接列表,就用<nav>。

5.2.9小知识

 

·        SVG(scalable vector graphics)不是HTML5,它是基于可扩展标记语言(XML),用于描述二维矢量图的一种图形格式。

·        Geolocation不是HTML5,它意味地理位置,通过HTML5能够使web应用程序确定位置并提供更多相关信息。

·        检索自定义属性的价值:

5.3.0data属性

 

Html代码部分:<div id=”myDiv”data-custom-attr=”My Value”>lady嘎嘎</div>

检索:

var theDiv = document.getElementById(“myDiv”);

var attr = theDiv.getAttribute(“data-custom-attr”);

alert(attr);//My Value

·        此属性在CSS中的应用

CSS代码:

.data_custom{display:inline-block;position:relative;}

.data_custom:hover{color:ransparent;}

.data_custom:hover:after{

content:attr(data-hover-response);

color:black;

position:absolute;

left:0;

}

HTML代码:

<a class=”data_custom”data-hover-response=”我说过不要碰我!”href=”#”>不要碰我,嘎嘎</a>

注:浏览器支持伪类after一季content的attr的前提下。

5.3.1使用区域input创建滑块

 

HTML5引进了range类型的input。

<input type=”range”>,它可以接收min,max,step和value属性等。

·        标签
<form method=”post”>
<h4>音量控制</h4>
<input type=”range” name=”range” min=”0” max=”10” step=”1”value=””/>
<output name=”result”></output>
</form>

·        CSS

使用:before和:after告知用户指定的最大值和最小值

input {font-size:14px;font-weight:bold;}

input[type=range]:before{content:attr(min):padding-right:5px;}

input[type=range]:after{content:attr(max):padding-left:5px}

output{

 display:block;

 font-size:5.5em;

 font-weight:bold;

}

·        JavaScript

l  检测浏览器是否能够识别rangeinput,如果不识别就显示提示信息;

l  当用户移动滑块的时候,动态的改变output的值;

l  监听,当用户离开滑块的时候,就插入值,同时本地存储;

l  然后当刷新页面的时候,选择的区域和值会自动地设置成最后一次的选择。

(function(){

    var f =document.forms[0],//返回对象中对所有文档的引用

    range=f[‘range’],

    result=f[‘result’],

    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;

    //检测浏览器是否足够酷

    //识别range input

    var o =document.creatElement(‘input’);

    o.type=’range’;

     if(o.type==’text’)

        alert(‘不好意思,你的浏览器还不够酷,试试最新的chrome浏览器吧!’);

  //设置初始值

  //无论是否本地存储了,都设置为5

   range.value=cachedRangeValue;

   result.value=cachedRangeValue;

  //当用户选择了一个值,更新本地存储

   range.addEventListener(“mouseup”,function(){

       alert(“你的选择是:”+range.value+”我现在正在用本地存储保存此值。在浏览器上刷新验证。”);

       localStorage?(localStorage.rangeValue=range.value):alert(“数据保存到了数据库或是其它地方。”);

     }, false);

   //滑动显示选择的值

   range.addEventListner(“change”,function(){

   result.value=range.value;

  }, false);

})();

 


元素。以MOozilla核心的Firefox浏览器只支持.ogg文件,webkit核心的浏览器支持.mp3扩展,safari不承认.ogg,它会跳过并移到MP3版本。所以需要创建两个版本的音频。Audio支持三种音频格式:Ogg Vorbis,MP3,Wav。例://标签的属性与video相同。没有height与width。4.Web存储Edit4.1localStorageEditlocalStorage可以长期存储数据而没有时间限制。4.2sessionStorageEditSessionStorage不能长期存储数据,数据会随着浏览器的关闭而删除。5.HTML5的特征Edit5.1.1新的DoctypeEdit5.1.2图形元素Edit ”About

Image of Mars

文字裹在p的标签中,与img标签各行其道,让人很难联想到这就是标题。HTML5通过采用figure元素进行改正。当和figcaption组合使用时,就能够语义化的联想到这就是图片相对应的标题。 ”About

This is an image of something interesting

5.1.3 重新定义Edit 元素不再被用来创建靠近logo且相关的副标题。在html5中, 被重新定义,指小字。5.1.4脚本(scripts)和链接(links)无需typeEdit在html5中:5.1.5引号问题EditHtml5不是XHTML,所以可以不需要引号。

Start the reactor但是如果倾向结构化,还是需要把引号加上的。5.1.6内容可以编辑Editcontenteditable元素顾名思义就是允许用户可以编辑元素内容包含的任意文本。

  • hello
  • Beijing
  • trs
5.1.7email输入(input)Edit在表单输入框应用名为”email”的type属性可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。但是较旧的浏览器不识别,它们会简单的退回到普通文本框。
邮箱: 确定
5.1.8占位符(placeholders)Editplaceholders意为文本框/文本域空间默认会有个文字提示,获得焦点时,此提示文字就会消失;失去焦点时如果内容为空,提示文字又出现。在表单控件里面显示的提示性文字就是占位符。如果是以前需要一些javascript代码实现占位符的操作,而html5却使得其非常轻松:邮箱: 一般webkit核心的浏览器支持此特性,如chrome、safari。5.1.9本地存储(localStorage)Edit传统的HTML使用的是众所周知的cookie,各种浏览器都支持,直接用js就可以调用,很方便。但是传统的cookie也有它本身的缺陷和不足。比如存储空间小,每个站点大小限制在4kb左右,又有时间期限,而且在请求网页的时候cookie会被附在每个HTTP请求的header中,所以无形中增加了流量。HTTP请求中cookie是明文传递的,所以存有安全性问题,入股用SSL(Secure Sockets Layer 安全套接层;是为网络通信提供安全及数据完整性的一种安全协议)通道另当别论。cookie也很容易受到跨站较稳的攻击。在一个链接后面加上”?cookie=document.cookie”就可以轻易获得用户的cookie信息。HTML5的本地存储也可能会有跨站脚本攻击XSS(cross site script,跨站脚本攻击。恶意攻击者往Web中插入恶意html代码,当用户浏览该页时,嵌入其中web里面的html代码会被执行。)的问题。HTML5的本地存储可以存储5M大小的数据,甚至还多。它主要有四种:localStorage,sessionStorage,webSQL,indexDB例子://HTML代码:
//JS代码:var edit=document.getElementById(edit);edit.onblur=function(){localStorage.setItem(“tododata”,this.innerHtml);};If(localStorage.getItem(“tododata”)){ Edit.innerHTML = localStorage.getItem(“tododata”);}5.2.0语义的Header和FooterEdit以往:
 …
有了HTML5,可直接替换成; …</header.…5.2.1IE和HTML5Edit所有元素有个默认的inline的display。为了确保所有新的元素都以block正确的渲染,需要这样定义:header,footer,article,section,nav,menu,hgroup{display:block;}但是由于IE不识别某些标签,如header,就会忽略这些样式,所以需要创建元素:document.creatElement(“artical”);document.creatElement(“footer”);document.creatElement(“header”);document.creatElement(“nav”);document.creatElement(“menu”);document.creatElement(“hgroup”);另解:<!—[if IE]><![endif]-->5.2.2文档某一部分的信息(hgroup)Edit使用hgroup元素可以将标题组合在一起。

recall fan page

only for people who want the memory of a lifetime.

5.2.3必要的属性(required attribute)Edit 或者使用更结构化的方法: 如果”someInput”文本框是空白,表单就不会被提交。
姓名: 提交
如果input里面内容是空白,在表单提交的时候,文本框的框会高亮显示,但是好像只是在chrome里有此效果。5.2.4autocomplete属性Editautocomplete属性规定form或者input域应该拥有自动完成的功能。它使用于
标签,以及以下类型的 标签:text,search,url,telephone,email,password,datapickers,range以及color。邮箱:
5.2.5正则表达式Edit使用正则表达式能够轻松的验证一个特定的文本。
姓名: 提交
在[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。此特性好像只在chrome浏览器中支持。5.2.6属性支持检测Edit利用优秀的Modernizr库(http://www.modernizr.com/ )可以检测浏览器是否支持某些属性。只要创建和分析这些元素,就可以确定浏览器的能力。事实上,这是一种确定浏览器兼容的常用方法。比如确定pattern属性,在javascrip中添加一小段代码:alert(‘pattern’ in document.creatElement(‘input’));//Boolean//创建了一个新的input元素,并确定了里面的pattern属性浏览器是否支持。也可以: 5.2.7mark元素(Mark Element)Edit元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。5.2.8divEditdiv应该用在没有更好的元素的时候。比如需要包裹一段代码块在对内容定位处理的包装单元内。但是如果是文章,最好用,如果是链接列表,就用。5.2.9小知识Edit• SVG(scalable vector graphics)不是HTML5,它是基于可扩展标记语言(XML),用于描述二维矢量图的一种图形格式。• Geolocation不是HTML5,它意味地理位置,通过HTML5能够使web应用程序确定位置并提供更多相关信息。• 检索自定义属性的价值:5.3.0data属性EditHtml代码部分:
lady嘎嘎
检索:var theDiv = document.getElementById(“myDiv”);var attr = theDiv.getAttribute(“data-custom-attr”);alert(attr);//My Value• 此属性在CSS中的应用CSS代码:.data_custom{display:inline-block;position:relative;}.data_custom:hover{color:ransparent;}.data_custom:hover:after{content:attr(data-hover-response);color:black;position:absolute;left:0;}HTML代码: 不要碰我,嘎嘎注:浏览器支持伪类after一季content的attr的前提下。5.3.1使用区域input创建滑块EditHTML5引进了range类型的input。 ,它可以接收min,max,step和value属性等。• 标签

音量控制

• CSS使用:before和:after告知用户指定的最大值和最小值input {font-size:14px;font-weight:bold;}input[type=range]:before{content:attr(min):padding-right:5px;}input[type=range]:after{content:attr(max):padding-left:5px}output{ display:block; font-size:5.5em; font-weight:bold;}• JavaScriptl  检测浏览器是否能够识别range input,如果不识别就显示提示信息;l  当用户移动滑块的时候,动态的改变output的值;l  监听,当用户离开滑块的时候,就插入值,同时本地存储;l  然后当刷新页面的时候,选择的区域和值会自动地设置成最后一次的选择。(function(){    var f = document.forms[0],//返回对象中对所有文档的引用    range=f[‘range’],    result=f[‘result’],    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;    //检测浏览器是否足够酷    //识别range input    var o = document.creatElement(‘input’);    o.type=’range’;    if(o.type==’text’)         alert(‘不好意思,你的浏览器还不够酷,试试最新的chrome浏览器吧!’);  //设置初始值  //无论是否本地存储了,都设置为5   range.value=cachedRangeValue;   result.value=cachedRangeValue;  //当用户选择了一个值,更新本地存储   range.addEventListener(“mouseup”,function(){       alert(“你的选择是:”+range.value+”我现在正在用本地存储保存此值。在浏览器上刷新验证。”);       localStorage?(localStorage.rangeValue=range.value):alert(“数据保存到了数据库或是其它地方。”);     },false);   //滑动显示选择的值   range.addEventListner(“change”,function(){   result.value=range.value;  },false);})();

作者:yhawaii 发表于2012-2-9 16:46:46 原文链接
阅读:10 评论:0 查看评论

相关 [html5] 推荐:

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5漫谈(4)–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com). http://phonegap.com)按官方说法,是HTML5移动应用平台,它包括两部分:. 1)       应用开发框架:采用Web/HTML5技术编写应用,支持设备能力(如GPS、重力感应等)调用;支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签,根据内容和类型的不同,被分为7大类. 语义化标签可以简化HTML页面设计,并且将来搜索引擎在抓取和索引网页的时候,也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT(PDF) 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面:一方面,当然了,就是HTML5. 我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范.

HTML5的SEO探索

- Amo - HTML5研究小组
所有现代浏览器对HTML5的支持问题不大. HTML5被智能手机浏览器和越来越多的网站广泛的采用,甚至作为最优的选择. 但是,Googlebot,Bidubot等其他搜索引擎呢. 引擎是否会由于HTML5这任何额外因素,在搜索结果中优先推荐您的网站吗. 另一方面,少数搜索引擎会认为所有这些额外的H1标记的是垃圾网站吗.

文章: HTML5之美

- - InfoQ cn
如今大热的HTML5到底美在哪里. HTML5到底能为实际的移动开发带来哪些改变. 来自阿里云云手机服务运营部的前端开发工程师 正邪 (廖健)分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面做了细致讲解:. 白伟民:酷狗音乐的HTML5实践(百度开发者大会广州站 5月31日 免费报名).