HTML5容易忽略的细节

2012-06-28 12:58 江苏黑马阅读(318) 评论(0) 收藏举报

细节一：

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

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

1     <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
2     <script type=”text/javascript” src=”path/to/script.js”></script>

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

1     <link rel=”stylesheet” href=”path/to/stylesheet.css” />
2     <script src=”path/to/script.js”></script>

使用还是不使用引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。
```
1     <p class=myClass id=someId> Start the reactor.
```

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

 1     <!DOCTYPE html>
 2     <html lang=”en”>
 3     <head>
 4     <meta charset=”utf-8">
 5     <title>untitled</title>
 6     </head>
 7     <body>
 8     <h2> To-Do List </h2>
 9     <ul contenteditable=”true”>
10     <li> Break mechanical cab driver. </li>
11     <li> Drive to abandoned factory
12     <li> Watch video of self </li>
13     </ul>
14     </body>
15     </html>

细节二：

本地存储
多亏了HTML5的 local storage ，我们可以让高级浏览器“记住”我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
视频预先加载
你首先需要决定是否需要浏览器来预先加载视频。是否有需要？假设，一个访客进入某个专门用来显示视频的页面，那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload=”preload”来预先加载视频，或者直接添加preload也可以。
何时使用<div>
是否还需要使用<div>标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住，特别是为了内容的定位，<div> 将会是非常理想的选择。不过，如果不是上述情况而是要包裹博客文章、或者页脚的链接列表，建议你分别使用 <article>和<nav>元素。
data属性

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：
```
1 <h1 id=someId customAttribute=value> 小样，胆儿挺肥的呢 </h1>
```
…校验器会小题大做！但是现在，只要我们以”data”为前缀（data-）定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。
不需要闭合标签在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。
废弃的标签下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp>
简单易记的语言标签你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang=”en”> 将对 HTML5 有效。
HTML5新加的语义化标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。
你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset：
HTML5 Reset CSS

Reset5

参考文献：http://www.mhtml5.com/resources

刷新页面返回顶部

jj_maqun

HTML5容易忽略的细节

About