HTML5的小技巧（一）
2016-07-26 19:09
417 查看
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）元素
你还在考虑用下面的代码来标记图片吗？
<mg 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 class=myClass 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>
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. 占位符(IE9不支持)
此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
<input name="email" type="email" placeholder="xingyuyu27@163.com" />
9. 本地存储
多 亏了HTML5的 local storage ，我们可以让高级浏览器"记住"我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
10. 语义性的Header和Footer(同div 块元素)
<div id="header">...</div>
<div id="footer">..</div>
上面的代码一去不复返。Div从根本上来说并没有任何语义结构，即使应用上了ID还是如此。而在HTML5中，我们可以使用<header>和<footer>元素，上面的代码就可以替换为：
<header></header>
<footer></footer>
不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。
11. IE和HTML5（兼容性显示统一设置块元素及获取）
IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：
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");
<!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）元素
你还在考虑用下面的代码来标记图片吗？
<mg 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 class=myClass 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>
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. 占位符(IE9不支持)
此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
<input name="email" type="email" placeholder="xingyuyu27@163.com" />
9. 本地存储
多 亏了HTML5的 local storage ，我们可以让高级浏览器"记住"我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
10. 语义性的Header和Footer(同div 块元素)
<div id="header">...</div>
<div id="footer">..</div>
上面的代码一去不复返。Div从根本上来说并没有任何语义结构，即使应用上了ID还是如此。而在HTML5中，我们可以使用<header>和<footer>元素，上面的代码就可以替换为：
<header></header>
<footer></footer>
不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。
11. IE和HTML5（兼容性显示统一设置块元素及获取）
IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：
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");
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 _表单提交
- html5
- html5 datalist
- 玩转HTML5移动页面——动效篇
- HTML5小游戏研究（三）:增加开始界面、声音、碰撞动画
- 兼容各个浏览器的H.264播放： H.264+HTML5+FLOWPLAYER+WOWZA+RMTP
- swipe的基础使用（二十六）
- html5实现视频（放大缩小播放暂停）
- H5开发工具submit常用快捷键
- html5与css3随笔
- HTMl5的sessionStorage和localStorage
- html5--导航栏制作
- html5--导航栏制作
- HTML5-Database Storage 本地存储.html
- 【自制】html5图像边缘查找算法
- Html5 拖放（drag 和 drop）
- 浅谈Html5中视频 音频标签 进度条的问题
- 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
- HTML5学习笔记（三）
- html5 Server-Sent 事件学习笔记