WEB开发人员必知的20+HTML5技巧Word文档格式.docx

1、/p 很不幸，它不能用简单、富有语 义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而HTML5通过引进元素，改进了这一点。当结 合 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：img src=This is an image of something interesting. /figure3. 重新定义 原来你可以利用元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法， 在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。script src=5. 使用还是不使用引号

2、 记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。p id=someId Start the reactor. 在这点上，你可以自己决定。如果你想要一个结构非常清楚的文档的话，坚持使用引号也挺好的。6. 使你的内容可编辑 HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。html lang=enhea

3、dmeta charset=utf-8titleuntitled/headbodyh2 To-Do List ul contenteditable=trueli Break mechanical cab driver. Drive to abandoned factory Watch video of self /body/html 或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：ul contenteditable=true7. 电子邮件输入 如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验

4、证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。form action= method=getlabel for=emailEmail:/labelinput id= name=button type=submit Submit Form /form 在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。8. 占位符 此前，我们需要

5、使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。input name= placeholder=doug9. 本地存储 多亏了HTML5的 local storage ，我们可以让高级浏览器“记住”我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。10. 语义性的Header和Footerdiv id=header./divfooter上

6、面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。 而在HTML5中，我们可以使用和元素，上面的代码就可以替换为：/header/footer 不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。11. IE和HTML5 IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：header, footer, article, section, nav, menu, hgroup display: block; 就算如此，IE还是不知道这些元素究竟是什么，因而会无视这

7、些格式，还需要用到下面的代码来解决这个问题：document.createElement（article）;hgroupnavmenu12. 群组标题（hgroup） 假设一个网站有名称、副标题分别用、 Recall Fan Page Only for people who want the memory of a lifetime. 13.必要（Required）属性 表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：input type=textsomeInput required 或者，更严谨： required=requ

8、ired 上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：form method=post action= Your Name: id=Douglas QuaidGo15. 音频支持 我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素。目前，只有最新的浏览器支持HTML5音频。 此时，最好还是提供一些向后兼容性。audio autoplay=autoplay controls=controlssource src=file.oggfile.mp3a href=Down

9、load this file./audio 说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认 不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。16. 视频支持 与音频元素 18. 显示控件 你可能已经注意到，用上面的代码的话，视频将只会显示成一个图片，而没有任何可控制的元件。为了获取这些播放控件，我们必需在视频元素里指定这些控件属性。

10、video preload controls19. 正则表达式 对亏了新模式的属性，我们可以直接在代码中插入一个正则表达式。usernameCreate a Username:name=id=placeholder=4 Go if （!） ） / do client/server side validation 记住，这将需要依靠 JavaScript来实现！21. Mark元素mark元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此 标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在 Search Results They were interrupted, just after Quato said, .