返回上一页
客服QQ
客服QQ
一切从沟通开始……
必须知道的22个学习html5的技巧(一)
作者：睿美印象网站建设工作室 发布日期：2012-12-04
互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。
1. 新的文档类型（Doctype）
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）
2. 图形（Figure）元素
考虑用下面的代码来标记图片？
XML/HTML Code复制内容到剪贴板
<mg src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而 HTML5通过引进<figure>元素，改进了这一点。当结合 <figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：
XML/HTML Code复制内容到剪贴板
<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. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
XML/HTML Code复制内容到剪贴板
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：
XML/HTML Code复制内容到剪贴板
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
5. 使用还是不使用引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。
XML/HTML Code复制内容到剪贴板
<p class=myClass id=someId> Start the reactor.
6. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。
XML/HTML Code复制内容到剪贴板
<!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>
或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：
XML/HTML Code复制内容到剪贴板
<ul contenteditable=true>
7. 电子邮件输入
如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。
XML/HTML Code复制内容到剪贴板
<!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属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
1. 新的文档类型（Doctype）
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）
2. 图形（Figure）元素
考虑用下面的代码来标记图片？
XML/HTML Code复制内容到剪贴板
<mg src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而 HTML5通过引进<figure>元素，改进了这一点。当结合 <figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：
XML/HTML Code复制内容到剪贴板
<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. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
XML/HTML Code复制内容到剪贴板
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：
XML/HTML Code复制内容到剪贴板
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
5. 使用还是不使用引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。
XML/HTML Code复制内容到剪贴板
<p class=myClass id=someId> Start the reactor.
6. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。
XML/HTML Code复制内容到剪贴板
<!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>
或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：
XML/HTML Code复制内容到剪贴板
<ul contenteditable=true>
7. 电子邮件输入
如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。
XML/HTML Code复制内容到剪贴板
<!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属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- CSS网页布局DIV水平居中的各种方法
- 6、【视频】CSS缩写
- 正IE6不支持position:fixed的bug
- 跟KingDZ学HTML5之一：HTML5入门
- 13、【视频】CSS滑动门技术宽度自适应按钮
- 一步一步学做游戏 第四回：熊碰撞边界处理
- HTML5开发的翻页效果
- 16 个印象深刻的 HTML5/CSS3/JavaScript 体验
- 火狐浏览器下文本自适应高度问题
- 仿AS语法来写HTML5—第8章，图片处理+粒子
- 仿AS语法来写HTML5—第3章，鼠标事件与移动
- HTML5 特性的检测：离线Web应用
- HTML5基础教程系列：第2部分，组织页面的输入
- 写出高效整洁的css的13条规则
- 一步一步学做游戏 第七回：熊碰到奖品处理
- IE7.JS解决IE兼容性问题方法
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
