Web技 术 的 发展 速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的 HTML 5，本文总结了22个HT ML 5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。
1. 新的Docty PE 声明
XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。
HTML5的Doctype声明很短，看到这个声明相信你马上就能记住， 不用 浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。
HTML5的简短的DOCTYPE声明是让Firefox、Ch rom e等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪 IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合 这种格式，都会进入标准模式。
2.
标签
看看下面一段 简单 的代码：
&nbs p;
Image of Mars.
遗憾的是，这里的h6标签和 img 标签好像没有什么关系，语义不够 明确 。HTML5意识到了这 一点 ，于是就采用了
标签。当 结合标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。
This is an image of something interesting.
3. 重新定义
不久前，我使用了标签来创建与 LOG o相关的副标题。但是在HTML5中重新定义了标签，使之更能表现语义化，在的 字号 都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。
4. 去掉了Javascript和 CSS 标签的type属性
通常你会在
和
在HTML5中，不再需要type属性了，因为这显得有点多余，去掉之后可以让代码更为简洁。
5. 是否 使用双引号
这有点让人纠结，HTML5并不是XTHML，你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号，因为这让代码看起来会更标准。 不过 ，这可以根据你的个人喜好来确定是到底要不要双引号。
Start the reactor.
6. 使 网页内容 可以编辑
这是HTML5新增的一个功能，在标签中加上一个contented IT able属性，并且设置值为true，就可以直接在页面上编辑这个标签的内容，包括这个标签的子级标签的内容。有了这个属性，你可以 利用 这个属性完成很多事，比如在网页中编辑一个待办 事项 的清单。
br eak mechan ical cab driver
7. 电 子邮件输入框
HMTL5中新增了一个输入框的电子邮件属性，可以检测输入的内容是否符合电子邮件的书写格式，功能越来越强大了吧，在HTML5之前只能依靠JS来检测。虽然内置的表单验证功能很快就会成为现实，但这个属性很多浏览器都还不支持，只会当作普通的文本输入框来处理。
Em ai l:
S ub mit Form
到目前为止，包括现代浏览器在内都不支持该属性，所以这个属性暂时还是靠不住的。
8. 占位符
文本框中的占位符(看看本博的搜索框效果)有利于 提升 用户体验，之前，我们只能依靠JS来实现占位符的效果，在HTML5中新增了占位符属性placeholder。
同样，目前的主流现代浏览器对该属性的支持不大好，暂时只有C hr ome和Safari支持该属性，Firefox和 opera 不支持该属性。
9. 本地存储
HTML5的本地存储功能，可以让现代浏览器[记住]我们输入的，就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持，但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的，你可以测试下。
10. 更有语义的header和footer
下面的代码在HTML5中将不复存在
.. .
...
通常我们都会给header和footer定义一个p，然后再添加一个id，但是在HTML5中可以直接使用
和 标签，所以可以将上面的代码改写成：
...
...
要注意不要将这两个标签和网站的头部和页脚混淆起来，它们只是代表它们的容器。
11. IE对HTML5的支持
IE浏览器目前对HTML5的支持并不好，也是阻碍HTML5的更快普及的一大绊脚石，不过，IE9对HTML5的支持度还是很不错的。
IE把HTML5新增的标签都解析成内联元素，而实际上它们是块级元素，所以有必要为它们定义一个样式：
header, footer, article, section, nav, menu, hgroup {
dis play : block;
}
尽管如此，IE还是不能解析这些新增的HTML5标签，这个时候就需要借助Javascript来解决这个问题：
document.create_rElement_x("article");
document.create_rElement_x("footer");
document.create_rElement_x("header");
document.create_rElement_x("hgroup");
document.create_rElement_x("nav");
document.create_rElement_x(" ;m enu");
你可以借助这一段Javascript代码来修复IE更好的解析HTML5
21. Mark标签
标签用于高亮显示那些需要在视觉上向用户突出其 重要 性的文字，包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索[Open your Mind] ，我可以使用在标签里使用JavaScript 来包裹每一次动作。
Se Arch Results
They were interrupted, just after Quato said, "Open your Mind".
22. 该如何正确的使用 p标签
有些人可能会有疑问，有了
和 等这些标签，
标签在HTML5中还有用吗?答案是肯定的，比如你想创建一个能包裹特殊内容的容器自由灵活的
肯定是首选，而你要创建一篇 文章 或者 一个导航菜单，建议你使用更有语义的 和 标签。
很多人认为HTML5可能还是很遥远的事，所以直接无视，其实不然，现在很多网站都已经 开始 使用HTML5了，事实上，HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事， 应该 值得我们推崇。最后感谢你阅读了这篇HTML5的入门级文章，希望能为你进一步学习HTML5提供一些帮助。
Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。
1. 新的Doctype声明
XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。
HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。
HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪 IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合 这种格式，都会进入标准模式。
2.
标签
看看下面一段简单的代码：
Image of Mars.
遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML5意识到了这一点，于是就采用了
标签。当 结合标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。
This is an image of something interesting.
3. 重新定义
不久前，我使用了标签来创建与logo相关的副标题。但是在HTML5中重新定义了标签，使之更能表现语义化，在的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。
4. 去掉了Javascript和CSS标签的type属性
通常你会在
和
在HTML5中，不再需要type属性了，因为这显得有点多余，去掉之后可以让代码更为简洁。
5. 是否使用双引号
这有点让人纠结，HTML5并不是XTHML，你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号，因为这让代码看起来会更标准。不过，这可以根据你的个人喜好来确定是到底要不要双引号。
Start the reactor.
6. 使网页内容可以编辑
这是HTML5新增的一个功能，在标签中加上一个contenteditable属性，并且设置值为true，就可以直接在页面上编辑这个标签的内容，包括这个标签的子级标签的内容。有了这个属性，你可以利用这个属性完成很多事，比如在网页中编辑一个待办事项的清单。
Break mechanical cab driver
7. 电子邮件输入框
HMTL5中新增了一个输入框的电子邮件属性，可以检测输入的内容是否符合电子邮件的书写格式，功能越来越强大了吧，在HTML5之前只能依靠JS来检测。虽然内置的表单验证功能很快就会成为现实，但这个属性很多浏览器都还不支持，只会当作普通的文本输入框来处理。
Email:
Submit Form
到目前为止，包括现代浏览器在内都不支持该属性，所以这个属性暂时还是靠不住的。
8. 占位符
文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验，之前，我们只能依靠JS来实现占位符的效果，在HTML5中新增了占位符属性placeholder。
同样，目前的主流现代浏览器对该属性的支持不大好，暂时只有Chrome和Safari支持该属性，Firefox和Opera不支持该属性。
9. 本地存储
HTML5的本地存储功能，可以让现代浏览器[记住]我们输入的，就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持，但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的，你可以测试下。
10. 更有语义的header和footer
下面的代码在HTML5中将不复存在
...
...
通常我们都会给header和footer定义一个p，然后再添加一个id，但是在HTML5中可以直接使用
和 标签，所以可以将上面的代码改写成：
...
...
要注意不要将这两个标签和网站的头部和页脚混淆起来，它们只是代表它们的容器。
11. IE对HTML5的支持
IE浏览器目前对HTML5的支持并不好，也是阻碍HTML5的更快普及的一大绊脚石，不过，IE9对HTML5的支持度还是很不错的。
IE把HTML5新增的标签都解析成内联元素，而实际上它们是块级元素，所以有必要为它们定义一个样式：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
尽管如此，IE还是不能解析这些新增的HTML5标签，这个时候就需要借助Javascript来解决这个问题：
document.create_rElement_x("article");
document.create_rElement_x("footer");
document.create_rElement_x("header");
document.create_rElement_x("hgroup");
document.create_rElement_x("nav");
document.create_rElement_x("menu");
你可以借助这一段Javascript代码来修复IE更好的解析HTML5
21. Mark标签
标签用于高亮显示那些需要在视觉上向用户突出其重要性的文字，包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索[Open your Mind] ，我可以使用在标签里使用JavaScript 来包裹每一次动作。
Search Results
They were interrupted, just after Quato said, "Open your Mind".
22. 该如何正确的使用p标签
有些人可能会有疑问，有了
和 等这些标签，
标签在HTML5中还有用吗?答案是肯定的，比如你想创建一个能包裹特殊内容的容器自由灵活的
肯定是首选，而你要创建一篇文章或者一个导航菜单，建议你使用更有语义的 和 标签。
很多人认为HTML5可能还是很遥远的事，所以直接无视，其实不然，现在很多网站都已经开始使用HTML5了，事实上，HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事，应该值得我们推崇。最后感谢你阅读了这篇HTML5的入门级文章，希望能为你进一步学习HTML5提供一些帮助。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-Html5入门应用技巧，初学者必读 全部内容，希望文章能够帮你解决 html5教程-Html5入门应用技巧，初学者必读 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-Html5入门应用技巧，初学者必读的详细内容...