HTML5之表单详解

email输入类型

<INPUT type=email name=email>
 
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型必须指定name值,否则无效果.

url输入类型

<INPUT type=url>
 
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.

日期时间相关输入类型(这些个很牛X的)

<INPUT type=date>
<INPUT type=time>
<INPUT type=month>
<INPUT type=week>
 
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.

number输入类型(这些个很牛X的)

<INPUT type=number>
 
这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.

range输入类型

<INPUT type=range>
 
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.

search输入类型

<INPUT type=search>
 
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.

tel输入类型

<INPUT type=tel>
 
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.

color输入类型

<INPUT type=color>
 
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.

三、新增的表单属性

placeholder属性

<INPUT id=placeholder placeholder=”点击我会以清除”>
 
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.

require/pattern属性

<INPUT id=placeholder name=require required>
<INPUT id=placeholder name=require1 required=”required”>
<INPUT name=require2 pattern=”^[1-9]\d{5}$”>
 
表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示。上面两种写法都对,这个很有用。并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证。这两种类型必须指定name值,否则无效果。

autofocus属性

<INPUT autofocus=”true”>
 
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().

list属性

<INPUT id=list list=”ilist”>
<DATALIST id=ilist>
 <OPTION value=”a” label=”a”>
 <OPTION value=”b” label=”b”>
 <OPTION value=”c” label=”c”>
</DATALIST>
 
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容。

max/min/step属性

<INPUT type=range step=”20″ min=”1″ max=”100″>
 
限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯。

autocomplete属性

<INPUT id=autocomplete autocomplete=”on”>
 
此属性是为表单提供自动完成功能。如果该属性为打开状态可很好地自动完成。一般来说,此属性必须启动浏览器的自动完成功能。

HTML调用rss

<html>
<head>
      <title>javascript读取RSS数据</title>
<META content=”text/html; charset=utf-8″ http-equiv=Content-Type />

</head>
<body leftmargin=”0″ topmargin=”0″>
<font><h3 align=”center”>javascript读取RSS数据</h3></font>
<br>
<table width=”90%” align=”center” border=”0″ cellpadding=0 cellspacing=0>
<tr>
   <td bgcolor=White><b>新闻中心</b><font size=”-1″>(摘自新浪网)</font><hr></td>
</tr>
<tr>
   <td bgcolor=White>
    <div id=”container” >News Loading…</div>
   </td>
</tr>
</table>
<script language=”JavaScript1.2″>
//Container for ticker. Modify its STYLE attribute to customize style:
var tickercontainer=”
var xmlsource=”http://rss.sina.com.cn/news/marquee/ddt.xml”;
var root;
var title;
var link;
var items;
var item;
var images;
var image;
var description;
if (window.ActiveXObject)
{
//document.write(“Microsoft.XMLDOM”);
var xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
}
else if (document.implementation && document.implementation.createDocument)
{
//document.write(“document.implementation.createDocument”);
var xmlDoc= document.implementation.createDocument(“”,”doc”,null);
}
if (typeof xmlDoc!=”undefined”)
{
//document.write(tickercontainer)
xmlDoc.load(xmlsource)
}
function fetchxml()
{
if (xmlDoc.readyState==4)
   output()
else
   setTimeout(“fetchxml()”,10)
}
function output()
{
var temp=””;
root = xmlDoc.getElementsByTagName(“channel”)[0];
title =root.getElementsByTagName(“title”)[0];
//temp = title.firstChild.nodeValue +”<br>”;
items=root.getElementsByTagName(“item”);
for(i=0;i<=items.length-1;i++)
{
   item=items[i];
   title=item.getElementsByTagName(“title”)[0];
   link=item.getElementsByTagName(“link”)[0];
   description=item.getElementsByTagName(“description”)[0];
   temp = temp + “<font size=-1><a href=” + link.firstChild.nodeValue+ ” target=’_bank’>” +

title.firstChild.nodeValue +”</a></font><br><br>”;
   //temp = temp +”<font size=-1>” + description.firstChild.nodeValue + “</font><br><br>”;
   document.getElementById(“container”).innerHTML = temp;
}
}
if (window.ActiveXObject)
fetchxml()
else if (typeof xmlDoc!=”undefined”)
xmlDoc.onload=output
</script>
</body>
</html>

W3C认为HTML5目前暂无法大规模应用

HTML规范的制定方W3C今天警告网络内容生产者:HTML5尚未成熟,并有可能发生规范上的重大变化以增加互操作性,W3C期望这些工作能在2011年年中完成。

这是W3C首次如此正面地向业界告知HTML5的应用风险,现在看来这种新的技术还并不适合全面部署。

以HTML5<video>标记规范为例,并不是所有的浏览器都支持相同的格式,Safari和Chrome支持使用该标签实现本地MP3播 放,而Firefox和Opera则不可以,此外由于专利问题HTML5规范将不会配备本地视频编解码器。

诸如这些技术和专利上的分歧将在很长一段时间内存在,在这段过渡时期里现有的Silverlight或Flash等专有技术将继续流行。此外W3C还表示,面向HTML5的创作工具的选择非常匮乏,这 也是原因之一。

IE9为什么不会支持HTML5呢?

其实很早就想说这个问题了,一个是IE9不支持XP 另外就是IE9并不打算去支持html5,当然不是这么说的,是说他们在考察主流网站用的东西,去支持主流网站的代码,这样让大多数网站用着好。其实我不觉得这个有很大的冲突啊,这样就不能去更多的支持html5吗?而且作为大多数浏览器都在做的事你不去做,是为什么呢?不管是用户还是网站,都是去用你们浏览器的,只有你们浏览器做好了一个模式固定了,那么开发者们就会省很多精力,而且也不会有不同浏览器之间的很多麻烦,然后你们总是标新立异。要知道网站的开发是会看用户用什么浏览器的,你们这么做不是支持网站,只不过是变相的与其他浏览器制造不同。

HTML 5 !DOCTYPE

定义和用法
<!DOCTYPE> 声明是文档中的第一个成分,位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:<!DOCTYPE HTML>。
提示和注释:
注释:<!DOCTYPE> 标签没有结束标签!

提示:<!DOCTYPE> 对大小写不敏感。
HTML 5
在 HTML5 中,文档类型声明很简单:

<!DOCTYPE HTML>

在所有 HTML 文档中规定文档类型很重要,这样浏览器才能了解所预期的文档类型。

HTML 4.01 中的 doctype 需要引用一个 DTD,这是因为 HTML 4.01 基于 SGML。HTML 5 不基于 SGML,也不需要引用 DTD,但是需要声明文档类型让浏览器按照它们应该的方式来运行。
属性:NONE

htm与html的区别

实际上HTM与HTML没有本质意义的区别,只是为了满足DOS仅能识别8+3的文件名而已,因为一些老的系统(win32)不能识别四位文件名。

W3C目前自然是建议使用HTML。

DIV+CSS并不能使你的网站节省流量

      话说很久以前,我就一直保持这个观点,但是一直苦于div+css的主流趋势所致,使我之前使惯了table到现在要大量的div标签,其实每个新产品出来都会攻击上一代产品,无情的将上代产品的缺陷上撒盐,目前html5出来后我已经看到一些文章在攻击div大量的重复使用。而html5则推出了几个新的标签来代替div,

HTML 5 添加了一些新元素,专门用来标识这些常见的结构:

  • section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西
  • header:页面上显示的页眉;与 head 元素不一样
  • footer:页脚;可以显示电子邮件中的签名
  • nav:指向其他页面的一组链接
  • article:blog、杂志、文章汇编等中的一篇文章

那为什么说我一直不认同div+css呢,可能是因为我是太过习惯table了,到div+css主流之后我很少设计网页了。另外最重要的一个原因就是我网站运营中的数据统计,事实证明div+css更浪费流量,每每都看到div+css降低运营成本的文章,网站重构的文章,其实这些有多少考虑到网站的运营实际情况呢?

     我所运作的大多网站都是靠搜索引擎来获取流量,这样有一个特点就是大量访问者都只是访问一个页面就离开,这样的话table就比div+css要节省很多流量,然后事实上有多少网站具有高浏览量的特性呢?

     其实div和table差不多 table是去加一些属性,而div是加标签到css中去解析,这样就会导致访问一个页面的情况下table表现出来一个页面的内容,div+css却要表现出来一个页面+全局的css内容+分类的css内容等,只有当访问者浏览超过3个页面以上的时候浏览才相当或者比table更节省流量。在用户角度上我还测试大量使用的IE,当使用table写网站的时候,重复的代码内容在每个分页的加载,IE的表现并不是重新加载,它似乎做了处理,表现出来是很快的。很可能这部分相同代码的流量是不消耗的。一样能够表现出CSS的重用性。起码给用户的体验是表现出来的。最后一个批评table的噱头是不容易改版及可读性差,我个人也认为这个是不可以理解的,比起要看两个文件才能看出是什么格式,我认为还是只看一个页面要容易理解,这个可能跟我之前大量使用table有关,另外不容易改版我也认为这个是不合适的,在模板的使用中,无论是div+css还是table,都是只修改一个模板然后整个网站都生成新的页面了。不存在什么大量文件需要修改。

     现在html5的一些文章已经在说html5的优势了,我也觉得在html和xhtml中,更多的运用html更适合中国的网站情况,我也希望能用一个HTML5写出来的wordpress模板。

研究表明俄罗斯方块有助于排解忧愁(附HTML源代码)

俄罗斯方块我是玩的,排解忧愁不否认,不过这个游戏我玩多了晚上睡觉都会有方块的。

据香港《大公报》报道,遭受重大打击后,玩《俄罗斯方块》(Tetris)可以减低创伤后压力症的征状.
英国研究人员发现,遭受创伤后不久玩《俄罗斯方块》有助抹去痛苦记忆和减少不快的回忆突然重现的频率.这项发现可以帮助科学家找到新方法去治疗因为意外入 院或是从战区回来的人士.研究人员向40名健康的志愿人士展示不同来源的创伤性影像,包括突显醉酒驾驶的危机性的宣传海报,然后让其中20人玩了10分钟 的《俄罗斯方块》,而另一半人什么也没有做.研究人员发现,玩过游戏的人在接下来的一星期里,伤痛回忆突然重现的情况少得多.

负责领导这项研究的霍姆斯博士认为,俄罗斯方块有助阻止大脑贮存痛苦回忆,但必须是在事发后马上就玩.

研究人员解释,这是因为大脑分为两部分:一部分负责感官,另一部分负责分析.由于我们一心二用──例如一边跟人谈话一边解决数学问题──的能力有限,这种计算机游戏可以“干扰大脑保留记忆的方式”.

研究人员选择《俄罗斯方块》是因为它要求玩家将彩色的方块到处移动,能驱使大部分大脑参与活动.不过,他们不清楚其它计算机游戏是否同样有效.

霍姆斯说:“《俄罗斯方块》有效可能是因为它争夺大脑争取感官信息的资源.我们发现它明确地干预感官回忆在受到创伤后的时段被贮存下来的方式,从而减少了之后发生的回忆闪现的次数.”

另一位研究人员指出,事发后的6小时是关键:“以健康的志愿人士来说,在这个时间段内玩《俄罗斯方块》可以减少突现闪现式的回忆,而又不会影响理解那次事件的能力.”

以下附上HTML的俄罗斯方块源代码,和现在的应用程序比是很简陋的,不过也是很方便的。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>俄罗斯方</title>
</head>

<body>
<style>
span.btn
{
BORDER-RIGHT: #7b9ebd 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #7b9ebd 1px solid;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
BORDER-LEFT: #7b9ebd 1px solid;
COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #7b9ebd 1px solid;
background-color: #CCCCCC;
}
</style>
<script language=”javascript”>
var doing;
var candown=0;
var wnum=13;
var hnum=18;
var grid=new Array();
var gridBuf=new Array();
for(i=0;i<=hnum;i++){
grid[i]=new Array();
gridBuf[i]=new Array();
for(j=0;j<=wnum;j++){
if(j>0 && j<wnum && i<hnum){
grid[i][j]=0;
gridBuf[i][j]=0;
}else{
grid[i][j]=1;
gridBuf[i][j]=1;
}
}
}

var boxdata=
[
[
[1,1,1,1],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[1,0,0,0],
[0,0,0,0],
[0,0,0,0],

],
[
[1,1,1,0],
[0,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[0,0,1,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
],
[
[0,1,1,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
]
];

var colors=[“black”,”#A0A0A0″,”red”,”#FF8000″,”yellow”,”pink”];
var gotLine=0;
var box;
var bGameOver=false;
function getHeight(arr)
{
var i,j;
for(i=3;i>=0;i–)
for(j=0;j<4;j++)
if(arr[i][j]) return i;
}
function getWidth(arr)
{
var i,j;
for(i=3;i>=0;i–)
for(j=0;j<4;j++)
if(arr[j][i]) return i;
}

function Box(x,y,arr,color)
{
this.arr=arr;
this.x=x;
this.y=y;
this.w=getWidth(arr);
this.h=getHeight(arr);
this.color=color;
this.active=true;

this.clearOldBox=function()
{
for(var j=0;j<=this.h;j++)
for(var i=0;i<=this.w;i++)
if(this.arr[j][i]>0) grid[this.y+j][this.x+i]=0;
}

this.putNewBox=function()
{
for(var j=0;j<=this.h;j++)
for(var i=0;i<=this.w;i++)
if(this.arr[j][i]>0) grid[this.y+j][this.x+i]=this.color;

}

this.moveLeft=function()
{
this.clearOldBox();
var _x=this.x-1;
if(this.canMove(_x,this.y)) this.x=_x;
this.putNewBox();
drawGrid();
}
this.moveRight=function()
{
this.clearOldBox();
var _x=this.x+1;
if(this.canMove(_x,this.y)) this.x=_x;
this.putNewBox();
drawGrid();
}

this.moveDown=function()
{
this.clearOldBox();

var _y=this.y+1;
if(this.canMove(this.x,_y)){
this.y=_y;
this.putNewBox();
drawGrid();

}else{
this.putNewBox();
drawGrid();
checkLineFull();
return;
}

}

this.rotate=function()
{
var tmp=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
for(j=0;j<=this.h;j++)
for(i=0;i<=this.w;i++)
tmp[this.w-i][j]=this.arr[j][i];
var newBox=new Box(this.x,this.y,tmp,this.color);
this.clearOldBox();
if(! newBox.canMove(this.x,this.y)) this.putNewBox();
else
{
box=newBox;
box.putNewBox();
drawGrid();
}
}
this.canMove=function(x,y)
{
for(var j=0;j<=this.h;j++)
for(var i=0;i<=this.w;i++)
{
if(grid[y+j][x+i]!=0 && this.arr[j][i]!=0){ candown=1;return false; }
}
return true;
}

}

function drawGrid()
{
for(var j=0;j<hnum;j++)
for(var i=0;i<wnum;i++)
{
if( grid[j][i]!=gridBuf[j][i])
{
paintCell(j,i,grid[j][i]);
}
gridBuf[j][i]=grid[j][i];

}
}

function paintCell(i,j,color)
{
var htmlGrid=document.getElementById(“TetrisGrid”).firstChild;
htmlGrid.childNodes[i].childNodes[j].style.backgroundColor=colors[color];

}
function init()
{
var html='<table id=”TetrisGrid” cellspacing=1 style=”background-color:green”><tbody>’;
for(var i=0;i<=hnum;i++)
{
html+='<tr>’;
for(var j=0;j<=wnum;j++)
{

html+='<td width=”20″ height=”20″ style=”background-color:’+colors[grid[i][j]]+’;”></td>’;
}
html+='</tr> \r\n’;
}
html+='</tbody></table>’;
document.write(html);

}

function checkLineFull()
{
var full,i,j,i2;
var y3=box.y+box.h;
var y4=box.y;
for(i=y3;i>=y4;)
{
full=1;
for(j=0;j<wnum;j++)
if(grid[i][j]==0){full=0; break;}
if(full==0){ –i; continue;}
for(i2=i; i2>0;i2–)
for(j=0;j<wnum;j++)
grid[i2][j]=grid[i2-1][j];
drawGrid();
y4++;
gotLine++;
}
checkGameOver();
}

function checkGameOver()
{
var bOver=false;
for(var j=1;j<wnum;j++)
if(grid[0][j]>0){ bOver=true; break;}
if(!bOver){
box=new Box((wnum-1)/2,0,boxdata[Math.floor(Math.random()*7)],Math.floor(Math.random()*5)+1);
box.putNewBox();
}
else
{
bGameOver=true;
msg.innerHTML=”游戏结束! 您的得分为”+gotLine*100;
window.clearTimeout(doing);
}
}
function document_onkeydown()
{
if(bGameOver) return;
switch(event.keyCode)
{
case 32:
down();
break;
case 37:
box.moveLeft();
break;
case 39:
box.moveRight();
break;
case 38:
box.rotate();
break;
case 40:
box.moveDown();
break;
case 80:
stop();
break;
case 66:
window.location.reload();
break;
case 67:
restart();
break;
}
}
function down(){
if(window.event.keyCode==32){
clearTimeout(doing);
for(i=0;i<hnum;i++){
if(candown==0){
box.moveDown();
}else{
break;
}
}
candown=0;
doing=window.setTimeout(‘moveDownBox()’,interval);
}
}
var interval;
function moveDownBox()
{
interval=1000-10*(gotLine>80?80 :gotLine);
msg.innerHTML=” 等级:”+Math.floor(gotLine/10)+”;得分:”+gotLine*100;
box.moveDown();
doing=window.setTimeout(‘moveDownBox()’,interval);
}
function startGame()
{
init();
doing=window.setTimeout(‘moveDownBox()’,1000);
bGameOver=false;
box=new Box((wnum-1)/2,0,boxdata[Math.floor(Math.random()*7)],Math.floor(Math.random()*5)+1);
box.putNewBox();
drawGrid();
}
var status;
function stop(){
status=1;
window.clearTimeout(doing);
}
function restart(){
if(status==1){
status=0;
doing=window.setTimeout(‘moveDownBox()’,1000);
}
}
function keydown(){
if (document.all)document_onkeydown()
}
</script>
<BODY onLoad=”window.focus()” onkeydown=”keydown()”>
<table width=”100%” height=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<table id=”maintable” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”>
<span class=”btn” style=”width:100%; height:24px;background-color:#F0C0C0;color:#0000FF;vertical-align:middle;text-align:center”>俄罗斯方块</span></td>
</tr>
<tr>
<td style=”height:20px;background-color:black;color:#00FF00;font-size:12px;”><table height=”20″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr style=”font-size:12px; color:#FFFFFF”>
<td width=”100%”> <a style=”cursor:hand” onclick=”window.location.reload()”>开始(B)</a> <a style=”cursor:hand” onclick=”stop();”>暂停(P)</a> <a style=”cursor:hand” onclick=”restart();”>继续(C)</a></td>
</tr>
</table></td>
</tr>
<tr>
<td style=”height:20px;background-color:black;color:#00FF00;font-size:12px;” id=”msg”> 等级:0;得分:0</td>
</tr>
<tr>
<td height=”20″>
<script language=javascript>
maintable.style.width=(wnum+1)*20;
startGame();
</script>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

EditPlus功能强大的文本编辑器

  其实有很多文本编辑器,但是使用中这款编辑器轻便好用不自觉的就习惯的使用上了,在编写网页的时候也是不错的选择,之前也推荐过一款编辑器是国内开源的文本编辑器,最近也去它的官方社区看了看,并且在更新所以还是选择editplus使用毕竟是熟悉的,当然这款软件是需要注册的不过网上很多注册机,破解也是相当的容易。哦对了 这个似乎是韩国人写的。

    它拥有无限制的Undo/Redo功能,让你不再为一步误操作而后悔不已;其强劲的英文拼字检查、自动换行、列数标记、语法高亮显示、垂直选择、搜寻功能,让你全面体验记事本所没有的超强功能;它可以同时编辑多种文件类型,轻松做到“一旦拥有,别无所求”;另外还有全屏幕浏览功能;特别值得一提的是,它的监视剪贴板的功能,能同步于剪贴板自动将文字贴进EditPlus的编辑窗口中,让你省去粘贴的步骤。

  其次,EditPlus还是一个好用的(X)HTML编辑器。

  在EditPlus中设计网页和编辑一个文档没什么两样。单击“File”→“New”→“HTMLPage”,就可以打开“HTML页面编辑器”窗口,使用它所提供的工具就可以直接进行网页的编辑与创作。EditPlus除了可以对你直接输入的文字用颜色标记HTMLTag(同时支持C/C++、Perl、Java)外,还内建了完整的HTML和CSS1指令功能,你甚至可以一边编辑一边“浏览”(CTRL+B)页面效果。对于习惯用记事本进行网页编辑的网友们来说,它可以帮你节省一半的网页编辑时间。

  再次,EditPlus其他比较好用的功能包括:可以设置工程并进行多文件查找;代码片断;自动完成;设置标记方便跳转

 

官方地址:http://www.editplus.com/

本站就不提供下载地址了,网上下载地址超多,并且更新也挺快的。