当前位置: 代码迷 >> HTML/CSS >> (译文)28个您必须知道的HTML5特性,技巧和技术
  详细解决方案

(译文)28个您必须知道的HTML5特性,技巧和技术

热度:345   发布时间:2012-08-26 16:48:05.0
(译文)28个你必须知道的HTML5特性,技巧和技术

作者:Jeffrey Way
译者:Robin Z
原文

1. 新的Doctype

仍在使用那烦人的,几乎不可能记住的XHTML doctype吗?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"?
2.???? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?

如果是这样,为什么不用新的HTML5 doctype呢? 如Douglas Quaid所说,你会获得更久些。

1. <!DOCTYPE html>?

事实上,你知道吗,这对于HTML5来说甚至不是必需的?然而,对于当前以及较早的浏览器来说,还需要指定doctype。那些不能解析这个doctype的浏览器将会用标准模式来生成包含的标记。所以,不用担心,尽情拥抱新的HTML doctype吧。

2. Figure元素

想想下面的image标记:

1. <img src="path/to/image" alt="About image" />?
2. <p>Image of Mars. </p>?

不幸的是,没有任何方便且语义化的方法能将包含在段落标签中的标题与image元素自身关联起来。HTML5通过引入<figure>元素纠正了这一点。与<figcaption>元素结合使用,现在我们可以使标题和与对应的图片从语义上关联在一起。

1. <figure>?
2.???? <img src="path/to/image" alt="About image" />?
3.???? <figcaption>?
4.???????? <p>This is an image of something interesting. </p>?
5.???? </figcaption>?
6. </figure>?

3. 重新定义的<small>
不久之前,我还使用<small>元素来创建logo边上的副标题。它是一种很有用的显示元素;然而现在,那将是不正确的用法。small元素已经被重新定义为较小的字体 - 这更为适当。想象一下你站点底部的版权语句 - 按照HTML5对<small>新的定义, 它将是这个信息最好的包装元素。
The small element now refers to “small print.”
4. Script和Link不再需要type属性
现在你可能仍为link和script标签添加type属性。

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

但这不再是必需的了。这意味着这两个标签就分别代表样式表和脚本 - 我们可以去掉type属性了。

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

5. 还要不要引号
...这是个问题。记住,HTML5并不是XHTML。如果你不想你就不需要用引号将属性括起来。你不需要关闭你的元素。如果这样让你感觉惬意的话,就这么做好了,没什么错的。对于我来说就是如此。

1. <p class=myClass id=someId> Start the reactor.?

在这个问题上你自己做决定。如果你更喜欢结构化的文档,那么务必继续使用引号。

?

?

6. 使你的内容可编辑


Content Editable
新的浏览器有一个极好的叫做"contenteditable"的新属性可应用于元素上。正如它的名字所指,这允许用户编辑包含在元素及其子节点内的任意文本。这个属性有很多用途,包括下面的极简的to-do列表 - 它还使用了本地存储。
  1. <!DOCTYPE?html > ??
  2. ??
  3. < html ? lang = "en" > ??
  4. < head > ??
  5. ????< meta ? charset = "utf-8" > ??
  6. ????< title > untitled </ title > ??
  7. </ head > ??
  8. < body > ??
  9. ????< h2 > ?To-Do?List? </ h2 > ??
  10. ?????< ul ? contenteditable = "true" > ??
  11. ????????< li > ?Break?mechanical?cab?driver.? </ li > ??
  12. ????????< li > ?Drive?to?abandoned?factory??
  13. ????????< li > ?Watch?video?of?self? </ li > ??
  14. ?????</ ul > ??
  15. </ body > ??
  16. </ html > ??
或者,按照在上个技巧里学到的,我们可以写成这样:
  1. < ul ? contenteditable = true > ??
(To be continue...)