22个HTML5 技巧一

HTML5 技巧一:当今科技发展的速度真惊人,稍不留神,就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜,我们将通过这篇文章向大家介绍一些HTML技巧。
1. 新的文档类型(Doctype)
-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

上面这个既麻烦又难记的XHTML文档类型你还在使用吗? 如果还是这样的话,现在该切换到新的HTML5文档类型了。

现在只要这么简单的15个字符就可以了。(注意:你的doctype的申明需要出现在你html文件的第一行。)

2. 图形(Figure)元素

你还在考虑用下面的代码来标记图片吗?

   
   

image of mars.

上面的代码它不能以简单而且富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记以及图片元素包裹,而 HTML5通过引进

元素,改进了这一点。当结合
元素使用时,我们就可以将图形标题与图形配对起来。代码如下:

   

    22个HTML5 技巧一
   
   

This is an image of something interesting.

   

   

3. 重新定义

原来你可以利用元素来创建与logo密切相关的副标题。不过,现在HTML5修改了这个用法,元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。

4. 不再需要脚本、链接类型

很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。

   
   

在HTML5中,这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此,我们可以将它们的类型属性都删除掉。代码如下:

   
   

5. 使用还是不使用引号

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

   

Start the reactor.

6. 使你的内容可编辑

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

   
   
   

   
   

untitled
   
   
   

To-Do List

   
    Break mechanical cab driver.
    Drive to abandoned factory
    Watch video of self
   
   
   

或者,按照第五条技巧所说的,你也可以将第九行的代码写成这样(不用引号):

   

7. 电子邮件输入

如果我们应用”电子邮件”类型来指定输入的形式,我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来,但是我们也不能完全依靠这个。比较旧的浏览器不理解这种”电子邮件”类型,它们只会简单地返回到普通的文本框。

   
   
   
   
   

untitled
   
   
   
   
   

在说到浏览器所支持和不支持的元素以及属性时,你必需知道当前所有浏览器都不是那么可靠。例如,Opera只有在你指定name属性时才支持电子邮件验证。不过,它不支持占位符属性(下面即将要讲到的)。最后,虽然你可以使用这种形式的验证,不过不要过分依赖它。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    HTML5与Flash对比

    2025-3-29 20:26:21

    编程技术

    Webkit做到了HTML5方式的客户端数据库存储

    2025-3-29 20:26:30

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索