HTML5适用总结1_前端技术_日志_DTOP - 动易设计团队博客

您的位置： 首页 >日志>前端技术>详细内容

前端技术

HTML5适用总结1

来源：本站原创发布时间：2012-06-03 22:15:49 浏览次数：次【字体：小大】

1. 新的Doctype声明

"">

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

2.

</span><span style= — 标签使用。

描述 " src="image">
< figcaption >

图片描述文字

figcaption>

3. 删除Js和CSS的type属性

以前在和

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

4. 占位符

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

请输入搜索关键字">

5. 更有语义的header和footer

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

...

...

通常我们都会给header和footer定义一个div，然后再添加一个id，但是在HTML5中可以直接使用

和
标签，所以可以将上面的代码改写成：

...

...

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

6. IE对HTML5的支持

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

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

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

</span><span style= — 标签使用。

描述 " src="image">
< figcaption >

图片描述文字

figcaption>

3. 删除Js和CSS的type属性

以前在和

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

4. 占位符

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

请输入搜索关键字">

5. 更有语义的header和footer

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

...

...

通常我们都会给header和footer定义一个div，然后再添加一个id，但是在HTML5中可以直接使用

和
标签，所以可以将上面的代码改写成：

...

...

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

6. IE对HTML5的支持

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

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

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

×

用户登录

未注册的手机号在初次登录时会自动注册为网站会员。

账号密码登录
手机免密登录
微信扫码登录
企业微信登录

成功登录后，: 保持登录状态