你必须知道的28个HTML5特征、窍门和技术

======================================================
注：本文源代码点此下载
======================================================

…这确实是个问题。记住,html5不是xhtml,要是你不愿意,你没有必要非得用引号标记包裹你的属性,没有必要非得闭合元素。换句话说,只要你自己觉得舒服,就没有什么对错之分。对于我自己来说就是如此。

p class=myclass id=someid> start the reactor.

对此取舍你还得自己拿主意。如果你更倾向于结构化的文档,就算天塌下来,也要把引号牢牢拽在怀里。

六、内容可编辑

最新的浏览器有个很赞的新属性可以应用到元素上,叫做contenteditable。顾名思意,就是允许用户编辑元素内容包含的任意文本,包括子元素。类似的用途还有很多,像是简单的待办事项清单应用程序,可大大利用其本地存储的优势。

ul contenteditable="true">

li>悼念遇难香港同胞 li>

li>深圳特区30周年li>

li>伊春空难li>

ul>

或者,根据前面所学到的一些技巧,我们可以把它写成:

ul contenteditable=true>

七、email输入(inputs)

如果我们给表单输入框应用名为”email”的type属性,我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错,内置表单验证即将到来,由于一些显而易见的原因,我们还不能100%依赖内置验证,较旧的浏览器不认识这个”email”型,它们会简单地退回到普通文本框。

form action="" method="get">

label for="email">邮箱:label>input id="email" name="email" type="email" />

button type="submit">确定button>

form>

您可以狠狠地点击这里:html5邮箱内置验证demo

//zxx:经我小测了下,貌似仅在chrome浏览器下有效果(xp系统),当输入内容不是合法邮箱格式,点击“确定”按钮是没有反应的;当输入为合法邮箱,点击“确定”按钮才会提交刷新页面。

还应当指出,当谈到哪些元素和属性支持和不支持时,当前所有的浏览器都有点靠不住的。例如,opera似乎支持电子邮件验证,但仅在name属性被指定的时候。而且,它不支持占位符属性,这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它!

八、占位符(placeholders)

//zxx:此处内容非直译,有删改

placeholders什么意思呢,就是文本框/文本域空间默认会有个文字提示,获得焦点时,此提示文字消失;失去焦点时如果内容为空,提示文字又出现。如下图所示:

这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法,我们需要使用一点javascript代码实现占位符效果,例如我之前的“文本框/域文字提示自动显示隐藏jquery小插件”一文所展示的。当然,你需要设定一个初始的默认的value值,然后根据输入内容进行判断,从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性,一切就轻松了。

label for="email">邮箱:label>

input id="email" type="email" placeholder="[e-mail]" size="26" />

根据我的测试,目前仅webkit核心的浏览器支持placeholders属性,像是chrome5,safari4,结果如下所示:

您可以狠狠地点击这里:html5占位符demo

九、本地存储(local storage)

多亏了本地存储(非正式的html5,本着方便归纳的目的),我们可以让高级浏览器记住我们的编辑后的内容,即使浏览器被关掉或是页面刷新。

//zxx:原视频默认展示的是youtube视频,不***看不了,所以,这里展示来自另外一个网站的video。建议全屏观看,以看清其中的html与javascript代码

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/