互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。
HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的
HTML技巧。
1. 新的文档类型（Doctype）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该
切换到新的HTML5文档类型了。
<!DOCTYPE html>
只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）
2. 图形（Figure）元素
考虑用下面的代码来标记图片？
<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p>
很不幸，它不能用简单、富有语 义关联的方式与图形的标题关联，因为它仅仅是用段落
标记以及图片元素包裹着，而HTML5通过引进<figure>元素，改进了这一点。当结 合
<figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. 重新定义<small>
原来你可以利用<small>元素来创建与logo密切相关的副标题。不过，现在HTML5修改
了这个用法，<small>元素被重新定义了，或者更恰当地说，它现在用来代表小字或其
他边注（如，网站底部的版权声明）。
4. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，
我们可以将它们的类型属性都删除掉。代码如下：
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
5. 使用还是不使用引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，
要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。在这点上，你可以自己决定。
如果你想要一个结构非常清楚的文档的话，坚持使用引号也挺好的。
<p id=someId> Start the reactor.
6. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑
元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清
单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html>
或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：
<ul contenteditable=true>
7. 电子邮件输入
如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有
效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也
不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返
回到普通的文本框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html>
在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那
么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持
占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要
过分依赖它。
8. 占位符
此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是
否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效
地弥补了这一点。
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
9. 本地存储
多亏了HTML5的 local storage ，我们可以让高级浏览器“记住”我们输入的内容，就
算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关
键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
10. 语义性的Header和Footer
<div id="header"> ... </div> <div id="footer"> ... </div>
上面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。
而在HTML5中，我们可以使用<header>和<footer>元素，上面的代码就可以替换
为：
<header> ... </header> <footer> ... </footer>
不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。
|
header, footer, article, section, nav, menu, hgroup {display: block;}
就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
12. 群组标题（hgroup） <header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header> 13.必要（Required）属性 <input type="text" name="someInput" required> 或者，更严谨： <input type="text" name="someInput" required="required"> 上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入
<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> 15. 音频支持 <audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> </audio> 说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文 18. 显示控件 <video preload>
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">Go </button>
</form>
如果你比较熟悉正则表达式的话就会注意到这个新模式: [A-Za-z]{4,10}只接受大小写
alert( 'pattern' in document.createElement('input') ) // boolean;
实际上，这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上
<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>
21. Mark元素 <mark>元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性 的文字。包裹在此 标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博 客中搜索“Open your Mind” ，我可以使用在<mark>标签里使用JavaScript 来包裹 每一次动作。 <h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p> |
