必须知道的22个学习HTML5的技巧
互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。
1. 新的文档类型（Doctype）
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
2. “/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE html>
只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）
2. 图形（Figure）元素
考虑用下面的代码来标记图片？
XML/HTML Code复制内容到剪贴板
1. <mg src=”path/to/image” alt=”About image” />
2. <p>Image of Mars. </p>
很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而 HTML5通过引进<figure>元素，改进了这一点。当结合 <figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：
XML/HTML Code复制内容到剪贴板
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密切相关的副标题。不过，现在HTML5修改了这个用法，<small>元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。
4. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
XML/HTML Code复制内容到剪贴板
1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
2. <script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：
XML/HTML Code复制内容到剪贴板
1. <link rel=”stylesheet” href=”path/to/stylesheet.css” />
2. <script src=”path/to/script.js”></script>
5. 使用还是不使用引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。
XML/HTML Code复制内容到剪贴板
1. <p class=myClass id=someId> Start the reactor.
6. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE html>
2. <html lang=”en”>
3. <head>
4. <meta charset=”utf-8″>
5. <title>untitled</title>
6. </head>
学javascript前要学什么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>
或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：
XML/HTML Code复制内容到剪贴板
1. <ul contenteditable=true>
7. 输入
如果我们应用“”类型来指定输入的形式，我们可以命令浏览器只允许符合有效地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“”类型，它们只会简单地返回到普通的文本框。
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE html>
2. <html lang=”en”>
3. <head>
4. <meta charset=”utf-8″>
5. <title>untitled</title>
6. </head>
7. <body>
8. <form action=”" method=”get”>
9. <label for=”email”>Email:</label>
10. <input id=”email” name=”email” type=”email” />
11. <button type=”submit”> Submit Form </button>
12. </form>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。