WEB开发人员必知的20+HTML5技巧.docx

上传人:b****5 文档编号:3409317 上传时间:2022-11-22 格式:DOCX 页数:9 大小:56.19KB
下载 相关 举报
WEB开发人员必知的20+HTML5技巧.docx_第1页
第1页 / 共9页
WEB开发人员必知的20+HTML5技巧.docx_第2页
第2页 / 共9页
WEB开发人员必知的20+HTML5技巧.docx_第3页
第3页 / 共9页
WEB开发人员必知的20+HTML5技巧.docx_第4页
第4页 / 共9页
WEB开发人员必知的20+HTML5技巧.docx_第5页
第5页 / 共9页
点击查看更多>>
下载资源
资源描述

WEB开发人员必知的20+HTML5技巧.docx

《WEB开发人员必知的20+HTML5技巧.docx》由会员分享,可在线阅读,更多相关《WEB开发人员必知的20+HTML5技巧.docx(9页珍藏版)》请在冰豆网上搜索。

WEB开发人员必知的20+HTML5技巧.docx

WEB开发人员必知的20+HTML5技巧

互联网科技发展的速度真可谓惊人的快,一个稍不留神,你就可能无法跟上它的步伐。

HTML5的变化和更新也压倒不少人,这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。

1.新的文档类型(Doctype)

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

你还在使用上面这个既麻烦又难记的XHTML文档类型吗?

如果还是这样的话,现在该切换到新的HTML5文档类型了。

DOCTYPEhtml>

只要这么简单的15个字符就可以了。

(注意:

你的doctype的申明需要出现在你html文件的第一行。

2.图形(Figure)元素

考虑用下面的代码来标记图片?

ImageofMars.

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

元素,改进了这一点。

当结合

元素使用时,我们就可以将图形标题与图形配对起来。

代码如下:

Thisisanimageofsomethinginteresting.

3.重新定义

原来你可以利用元素来创建与logo密切相关的副标题。

不过,现在HTML5修改了这个用法,元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。

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

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

在HTML5中,这已经不再需要了。

意味着说这两个标签分别代表着样式和脚本。

因此,我们可以将它们的类型属性都删除掉。

代码如下:

5.使用还是不使用引号

记住,HTML5与XHTML不同,如果你不喜欢的话你不必用引号将属性包裹起来。

不过,要是你觉得用引号会让你觉得更加舒服的话,当然也不会有任何问题。

Startthereactor.

在这点上,你可以自己决定。

如果你想要一个结构非常清楚的文档的话,坚持使用引号也挺好的。

6.使你的内容可编辑

HTML5其中一个非常强大的功能就是“contenteditable”,顾名思义它将允许用户编辑元素(包括他的子元素)内包含的任何文本内容。

它的用途非常广,如,简单的任务清单或是基于wiki的站点也非常实用,此外,它还有一个优势就是利用了本地的存储。

DOCTYPEhtml>

untitled

To-DoList

  • Breakmechanicalcabdriver.
  • Drivetoabandonedfactory

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

    7.电子邮件输入

    如果我们应用“电子邮件”类型来指定输入的形式,我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。

    虽然说内置的表单验证很快就会到来,但是我们也不能完全依靠这个。

    比较旧的浏览器不理解这种“电子邮件”类型,它们只会简单地返回到普通的文本框。

    DOCTYPEhtml>

    untitled

    Email:

    SubmitForm

    在说到浏览器所支持和不支持的元素以及属性时,你必需知道当前所有浏览器都不是那么可靠。

    例如,Opera只有在你指定name属性时才支持电子邮件验证。

    不过,它不支持占位符属性(下面即将要讲到的)。

    最后,虽然你可以使用这种形式的验证,不过不要过分依赖它。

    8.占位符

    此前,我们需要使用JavaScript来创建文本框的占位符。

    你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容就会再次变成空的。

    占位符属性有效地弥补了这一点。

    9.本地存储

    多亏了HTML5的localstorage,我们可以让高级浏览器“记住”我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。

    尽管不是所有的浏览器都支持,但是最关键的InternetExplorer8,Safari4,Firefox3.5.都支持。

    10.语义性的Header和Footer

    ...

    ...

    上面的代码一去不复返。

    Divs从根本上来说并没有任何语义结构,即使应用上了ID还是如此。

    而在HTML5中,我们可以使用