我的家园

我的家园

22个HTML5 技巧二

Posted on 2012-04-15 16:37 zljpp 阅读(118) 评论(0)  编辑  收藏

22个HTML5 技巧二：上面一章讲到了HTML5的几个技巧，现在我们来学习新的技巧。

8. 占位符

此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。

  1. <input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />

9. 本地存储

多亏了HTML5的 local storage ，我们可以让高级浏览器"记住"我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。


10. 语义性的Header和Footer

  1. <div id=”header”>
  2. …
  3. </div>
  4. <div id=”footer”>
  5. …
  6. </div>
  7.  

上面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。而在HTML5中，我们可以使用<header>和<footer>元素，上面的代码就可以替换为：

  1. <header>
  2. …
  3. </header>
  4. <footer>
  5. …
  6. </footer>
  7.  

不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。

11. IE和HTML5

IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

  1. header, footer, article, section, nav, menu, hgroup {
  2.  
  3. display: block;
  4.  
  5. }

就算如此，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）

假设一个网站有名称、副标题分别用<h1>、<h2>标签来标记，在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。

  1. <header>
  2. <hgroup>
  3. <h1> Recall Fan Page </h1>
  4. <h2> Only for people who want the memory of a lifetime. </h2>
  5. </hgroup>
  6. </header>

13.必要（Required）属性

表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：

  1. <input type=”text” name=”someInput” required>

或者，更严谨：

  1. <input type=”text” name=”someInput” required=”required”>

上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：

  1. <form method=”post” action=”">
  2. <label for=”someInput”> Your Name: </label>
  3. <input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
  4. <button type=”submit”>Go</button>
  5. </form>

如果输入是空的，表单将无法提交，突出显示文本框。
14. 自动对焦（Autofocus）属性

同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被"选择"或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

  1. <input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

15. 音频支持

我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素<audio>。目前，只有最新的浏览器支持HTML5音频。 此时，最好还是提供一些向后兼容性。

  1. <audio autoplay=”autoplay” controls=”controls”>
  2. <source src=”file.ogg” />
  3. <source src=”file.mp3″ />
  4. <a href=”file.mp3″>Download this file.</a>
  5. </audio>

说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。


只有注册用户登录后才能发表评论。
网站导航: