您的位置:首页> 日志> 前端技术 正文
DTOP

HTML5 适用总结1

laomao800 | 2012年06月03日 |

>>收藏本文 已有 1条评论

 

1. 新的Doctype声明

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

这是以前的doctype声明,而HTML5Doctype声明很短,比以前的形式简单了许多。

<!DOCTYPE html>

2. <figure>标签

<img alt="描述" src="image"> 
<h4>
图片描述文字</h4>

这种代码则是常用于图片列表,图片+标题的形式,但是从结构上来看,imgh4没有什么特别的联系,语义不清晰,而在html内可以使用<figure>标签结合<figcaption>标签使用。

<figure>
<img alt="
描述" src="image"> 
<
figcaption>
<h4>
图片描述文字</h4>
</
figcaption>
</figure >

3. 删除JsCSStype属性

以前在<link><script>上一般会加上type属性:

<LINK rel=”stylesheet” type=”text/css” href="style.css">
<SCRIPT type=”text/javascript” src="script.js"></SCRIPT>

HTML5中,不再需要type属性了,因为这显得有点多余,去掉之后可以让代码更为简洁。

<LINK href=" style.css">
<SCRIPT src="script.js"></SCRIPT>

4. 占位符

文本框中的占位符在这之前,我们只能依靠JS来实现这种的效果,在HTML5中新增了占位符属性placeholder

<input type=”text” name=”search” placeholder="请输入搜索关键字">

5. 更有语义的headerfooter

下面的代码在HTML5中将不复存在

<DIV id=header>
... 
</DIV> 
<DIV id=footer>
... 
</DIV

通常我们都会给headerfooter定义一个div,然后再添加一个id,但是在HTML5中可以直接使用<header><footer>标签,所以可以将上面的代码改写成:

<HEADER> 
... 
</HEADER> 
<FOOTER> 
... 
</FOOTER>

要注意不要将这两个标签和网站的头部和页脚混淆起来,它们只是代表它们的容器。

 

6. IEHTML5的支持

IE浏览器目前对HTML5的支持并不好,也是阻碍HTML5的更快普及的一大绊脚石,不过,IE9HTML5的支持度还是很不错的。

IEHTML5新增的标签都解析成内联元素,而实际上它们是块级元素,所以有必要为它们定义一个样式:

header, footer, article, section, nav, menu, hgroup {
display: block;
}

尽管如此,IE还是不能解析这些新增的HTML5标签,这个时候就需要借助Javascript来解决这个问题:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

你可以借助这一段Javascript代码来修复IE更好的解析HTML5

<SCRIPT mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></SCRIPT>