电子产品世界

五、引号还是不要引号

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

<pclasspclass=myClassid=someId>Startthereactor. 

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

六、内容可编辑

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

<ulcontenteditableulcontenteditable="true"> 
<li>悼念遇难香港同胞</li> 
<li>深圳特区30周年</li> 
<li>伊春空难</li></ul> 

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

<ulcontenteditableulcontenteditable=true> 

七、Email输入(Inputs)

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

<formactionformaction=""method="get"> 
     <labelforlabelfor="email">邮箱:</label> 
     <inputidinputid="email"name="email"type="email"/> 
     <buttontypebuttontype="submit">确定</button> 
</form> 

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

八、占位符(Placeholders)

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

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

<labelforlabelfor="email">邮箱:</label> 
<inputidinputid="email"type="email"placeholder="zhangxinxu@zhangxinxu.com"size="26"/> 

关键词： HTML5

加入微信
获取电子行业最新资讯
搜索微信公众号：EEPW
或用微信扫描左侧二维码