当前位置:首页天津网站制作方案 → 全部信息
做好准备迎接html5了吗?
更新时间:2013/1/7 点击:990次
知识简介:本文主要介绍html4 html1.0和1.1 以及html5的区别 整理介绍html5特新性比如表单扩展,canvas,SVG等
 
伴随着 Chrome, Firefox 3.5, Opera, 和 Safar对html5的支持,html5已经像一列暴走的列车接近我们了。这里是些好的建议帮助你准备过渡到html5.
See what others have done(首先让我们看看其他人已经做的吧)
开始准备html5的第一件事情就是先看下别人是使用它的。HTML 5 gallery 演示了一些使用html5的网站。
Now you do it(现在你可以开始了)
你可以先看看这些网站的文章,here(这里html5 预览) 和 elsewhere(和其他地方html5doctor), 甚至 read the specification(读取html5详细说明)
但是上面当中文章没有一个能像使用新的元素那样让您领会掌握html5.
通过实际做,你可以知道什么可以工作,什么不可以工作。比如我在firefox3.5版本中发现类似article 和section的标签默认显示方式是display:inline模式,所以不得不强制设置它们为display:block模式才能像期望的效果显示。
下面是整理的一些 HTML 5, XHTML 1.0/1.1, 以及XHTML 5之间的一些关系或者结论吧。
我们所熟知和了解的HTML 4.0,它是基于SGML(standard Generalized markup language)规则手册的。
在SGML规则手册中,元素的书写并不区分大小写,你可以有选择的闭合标签,标签属性的书写也可以不用引号标记。
XHTML 1.0 和1.1是基于XML的,在xml规则手册中,所有的标签和属性必须用小写,标签必须闭合,而且所有的属性必须用引号括起来。
HTML5定义的标记语言不是基于上面任何一种规则手册,但是html5可以被写成要么是html形式,要么是xhtml形式。
如果你用html形式书写标签的话,你就可以不用区分大小写,而且标签可以不用闭合,属性不用引号,当中可以穿插一些xml的标签。比如:<img /><br />等。
但是如果你用xhtml书写标签的话就必须严格遵照规格手册。
以后xml毕竟是个发展方向,所以我推荐大家使用xhtml5.
使用xhtml5的时候一定要记住在声明MIME 类型的时候,一定要用application/xhtml+xml 或者 text/xml。如果有语法错误会提示滴哈。
正则表达式
html5扩展了input元素,给它增加了一些新的属性,比如min max (主要针对数字类型),html5还提供了一些新的type类型(比如url, email, date, 和time)
如果这些属性不能满足你的需求,html5还提供给type为text的input一个pattern的属性,pattern的值就是和ECMAscript中的正则表达一样。
这写表单属性已经在Safari and Chrome, 和 Opera中支持。如果你的浏览器不支持这些属性。你可以下载Google’s Web Forms 2 提供。
例子:
<p>
Enter a date: <input type="date" name="day"
required="required"
title="Use format yyyy-mm-dd" />
</p>
<p>
Enter a US or Canadian Postal Code:
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&#160;B2C" />
</p>

Static art with SVG

html5允许在文档对象中嵌入SVG (Scalable Vector Graphics)。
根据这里 我们可以知道svG嵌入已经在Firefox, Safari, 和 Opera 中支持了。
如果你用的是firefox3.5可以点击 这里SVG 文件
这是一个复杂的SVG文件。这里还有个简单地 下面是个例子:
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="200px" height="100px">
<circle cx="50" cy="50" r="30"
 style="stroke:none; fill:#ff0000;"/>
<g transform="translate(100, 20) scale(1.65)">
 <polygon points="36 25, 25 36, 11 36, 0 25,
 0 11, 11 0, 25 0, 36 11"
 style="stroke:none; fill:#0000ff;" />
</g>
<rect x="60" y="20" height="60" width="60"
 style="stroke:none; fill:#00ff00;
 fill-opacity: 0.5;" />
</svg>
SVG可以用js动态更改。html5提供了更好的解决方案。
空白画布的支持
html5令人兴奋的特性之一就是支持空白画布。这一特性Firefox, Safari, Opera, 和 Chrome
都支持。但是ie不支持。你可以用js绘制你需要的画布。
示例代码:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
 if (canvas.getContext) {
 var ctx = canvas.getContext("2d");
 ctx.beginPath(); // the circle
 ctx.fillStyle = "#ff0000";
 ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
 ctx.closePath();
 ctx.fill();
 ctx.save();
 // move and resize the octagon
 ctx.translate(100, 20);
 ctx.scale(1.65, 1.65);
 ctx.fillStyle = "#0000ff";
 ctx.beginPath();
 ctx.moveTo(36, 25); ctx.lineTo(25, 36);
 ctx.lineTo(11, 36); ctx.lineTo(0, 25);
 ctx.lineTo(0, 11); ctx.lineTo(11, 0);
 ctx.lineTo(25, 0); ctx.lineTo(36, 11);
 ctx.closePath();
 ctx.fill();
 // restore graphics as they
 // were before move and resize
 ctx.restore();
 ctx.fillStyle = "#00ff00";
 ctx.globalAlpha = 0.5;
 ctx.beginPath();
 ctx.rect(60, 20, 60, 60);
 ctx.closePath();
 ctx.fill();
 }
}

更多关于canval可以看这里Canvas tutorial

不要等了赶紧验证下html5在表单和canvas等的新特性吧
  • bbbbb公司总机:022-28261501 28335110    服务邮箱:service@nfree.cn    手机直线:15822335163 QQ:912030008
  • 地址:天津市河西区环湖中路57号华实大厦7层C10-11    备案/许可证编号: 津ICP备11006814号-1
  • CopyRight 2006~2018 All Rights Reserved 天津市华易动力信息科技有限公司

    津公网安备 12010302001042号