必须知道的学习html5的技巧

胡锡铭

浏览: 7140 次
性别:
来自: 杭州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5

1.新的文档类型（Doctype）

<!DOCTYPE html>，只要简单的15个字符就可以了，再也不用像以前那样写一长串文档类型的代码了。

2.重新定义<small>

3.不再需要脚本，链接类型，即去掉了type属性

4.使用还是不使用引号

HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。

5.使你的内容可编辑

HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。

<ul contenteditable="true"></ul>，则ul列表中的所有项都是可编辑的。

6.form表单的验证功能

虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。而且chrome浏览器对form验证的支持也不是很好。尽管他们有技术实现，但还是不提供支持，从这个层面上也给出了暗示，不要太依赖内置的表单验证。

7.占位符

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />，虽然样式没有js特效实现的好看，但是未来的发展一定能弥补这点点小缺陷。

8.本地存储

多亏了HTML5的 local storage ，我们可以让高级浏览器“记住”我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。

9.IE和HTML5

IE不知道header, footer, article, section, nav, menu, hgroup......这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：

document.createElement("article");

document.createElement("footer");

document.createElement("header");

document.createElement("hgroup");

document.createElement("nav");

document.createElement("menu");

不过，这些事情可以用一个简单的js引入就可以解决，http://html5shiv.googlecode.com/svn/trunk/html5.js，把这个js放在head中，

<!--[if IE]>

<![endif]-->

这样就可以只让IE识别，发送请求了。

10.必要（required）属性

<input type="text" name="someInput" required="required">，如果输入框是空的，表单提交将无法提交，突出显示文本框，前提是，浏览器支持的话。

11.自动对焦（Autofocus）属性

<input type="text" name="someInput" autofocus="autofocus">，如果某个输入应该被”选择“或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

12.视频，音频

现在各浏览器对其支持并不是很好或统一，期待其发展

13.何时使用<div>

是否还需要使用<div>标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住，特别是为了内容的定位，<div> 将会是非常理想的选择。不过，如果不是上述情况而是要包裹博客文章、或者页脚的链接列表，建议你分别使用 <article>和<nav>元素。

分享到：

CSS3圆角 | css兼容性hack (ie6,ie7,ie8,firefox,chro ...

2012-08-15 15:21
浏览 939
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论