HTML5教程技巧.docx
《HTML5教程技巧.docx》由会员分享,可在线阅读,更多相关《HTML5教程技巧.docx(11页珍藏版)》请在冰豆网上搜索。
HTML5教程技巧
互联网科技发展的速度真可谓惊人的快,一个稍不留神,你就可能无法跟上它的步伐。
HTML5的变化和更新也压倒不少人,这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。
1.新的文档类型(Doctype)
1.
DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
2.“http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
你还在使用上面这个既麻烦又难记的XHTML文档类型吗?
如果还是这样的话,现在该切换到新的HTML5文档类型了。
1.
DOCTYPE html>
只要这么简单的15个字符就可以了。
(注意:
你的doctype的申明需要出现在你html文件的第一行。
)
2.图形(Figure)元素
考虑用下面的代码来标记图片?
1.
2.
Image of Mars.
很不幸,它不能用简单、富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记以及图片元素包裹着,而HTML5通过引进
当结合元素使用时,我们就可以将图形标题与图形配对起来。
代码如下:
1.
2.
3.
4.
This is an image of something interesting.
5.
6.
3.重新定义
原来你可以利用元素来创建与logo密切相关的副标题。
不过,现在HTML5修改了这个用法,元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。
4.不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
1.
2.
在HTML5中,这已经不再需要了。
意味着说这两个标签分别代表着样式和脚本。
因此,我们可以将它们的类型属性都删除掉。
代码如下:
1.
2.
5.使用还是不使用引号
记住,HTML5与XHTML不同,如果你不喜欢的话你不必用引号将属性包裹起来。
不过,要是你觉得用引号会让你觉得更加舒服的话,当然也不会有任何问题。
1.
Start the reactor.
6.使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”,顾名思义它将允许用户编辑元素(包括他的子元素)内包含的任何文本内容。
它的用途非常广,如,简单的任务清单或是基于wiki的站点也非常实用,此外,它还有一个优势就是利用了本地的存储。
1.
DOCTYPE html>
2.
3.
4.
5.
untitled 6.
7.
8.
To-Do List
9.
10.
- Break mechanical cab driver.
11.
- Drive to abandoned factory
12.
- Watch video of self
13.
14.
15.
或者,按照第五条技巧所说的,你也可以将第九行的代码写成这样(不用引号):
1.
7.电子邮件输入
如果我们应用“电子邮件”类型来指定输入的形式,我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。
虽然说内置的表单验证很快就会到来,但是我们也不能完全依靠这个。
比较旧的浏览器不理解这种“电子邮件”类型,它们只会简单地返回到普通的文本框。
1.
DOCTYPE html>
2.
3.
4.
5.
untitled 6.
7.
8.
13.
14.
在说到浏览器所支持和不支持的元素以及属性时,你必需知道当前所有浏览器都不是那么可靠。
例如,Opera只有在你指定name属性时才支持电子邮件验证。
不过,它不支持占位符属性(下面即将要讲到的)。
最后,虽然你可以使用这种形式的验证,不过不要过分依赖它。
8.占位符
此前,我们需要使用JavaScript来创建文本框的占位符。
你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容就会再次变成空的。
占位符属性有效地弥补了这一点。
1.
9.本地存储
多亏了HTML5的localstorage,我们可以让高级浏览器“记住”我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。
尽管不是所有的浏览器都支持,但是最关键的InternetExplorer8,Safari4,Firefox3.5.都支持。
10.语义性的Header和Footer
1.
4.
上面的代码一去不复返。
Divs从根本上来说并没有任何语义结构,即使应用上了ID还是如此。
而在HTML5中,我们可以使用
1.
2.…
3.
4.
5.…
6.
不过注意不要将这两个元素与网站的头部和脚部混淆起来。
它们只是代表它们的容器。
11.IE和HTML5
IE理解新的HTML5元素需要费一定的神,为了确保新的HTML5元素能够以块级元素正确显示,有必要将它们用下面的代码定义风格:
1.header, footer, article, section, nav, menu, hgroup {
2.display:
block;
3.}
就算如此,IE还是不知道这些元素究竟是什么,因而会无视这些格式,还需要用到下面的代码来解决这个问题:
1.document.createElement(“article”);
2.document.createElement(“footer”);
3.document.createElement(“header”);
4.document.createElement(“hgroup”);
5.document.createElement(“nav”);
6.document.createElement(“menu”);
12.群组标题(hgroup)
假设一个网站有名称、副标题分别用
、标签来标记,在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法,此外,当使用h2在页面中显示其它标题时,在层级方面问题就更多。
而使用群组标题hgroup元素,我们可以将这些标题聚集在一起,而不影响文档的整个纲要。
1.
2.
3.
Recall Fan Page
4.
Only for people who want the memory of a lifetime.
5.
6.
13.必要(Required)属性
表单允许新的必要属性,规定是否某个特定的输入是必要的。
你可以依据自己写代码的偏好,用下面两种不同方式来声明这个属性:
1.
或者,更严谨:
1.
上面两行代码都行得通。
用了这行代码之后,并且浏览器支持required属性的话,输入空白的表单就不会被提交。
下面是一个简单的例子,同时我们也添加了占位符属性:
1.
如果输入是空的,表单将无法提交,突出显示文本框。
14.自动对焦(Autofocus)属性
同样地,有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。
如果某个输入应该被”选择“或被聚焦,我们现在可以使用HTML的自动对焦autofocus属性。
1.
15.音频支持