HTML5 知识库
html5标签简介
阅读:1381次
评论:1条
更新时间:2011-07-29
1. 新的Doctype声明
<!DOCTYPE html>
2. <figure>标签
看看下面一段简单的代码：
<img alt="About image" src="path/to/image">
<h6>image of Mars.</h6>
遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML 5意识到了这一点，于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。
<figure>
<img alt="about image" src="path/to/image">
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>
3. 重新定义<small>
不久前，我使用了<small>标签来创建与logo相关的副标题。但是在HTML 5中重新定义了<small>标签，使之更能表现语义化，在<small>的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。
4. 去掉了Javascript和CSS标签的type属性
<link href="path/to/stylesheet.css">
<script src="path/to/script.js"></script>
5. 支持使用单，双引号
6. 使网页内容可以编辑
<ul contenteditable="true">
<li>悼念遇难香港同胞 </li>
<li>深圳特区30周年</li>
<li>伊春空难</li>
</ul>
7、新的表单，具有校验功能
<input> type:search mail url
8. 占位符
文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验，之前，我们只能依靠JS来实现占位符的效果，在HTML 5中新增了占位符属性placeholder。
<input type="email" name="email" placeholder="doug@givethesepeopleair.com">
9. 本地存储
HTML 5的本地存储功能，可以让现代浏览器“记住”我们输入的，就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持，但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的，你可以测试下。
10. 更有语义的header和footer等标签
11、HTML5 canvas具有画图功能的标签
HTML页面代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="UTF-8" src="js/canvas.js"></script>
</head>
<body>
<img src="http://www.google.com.hk/images/nav_logo82.png" id="imgid">
<canvas id="canvas">您的浏览器不支持canvas标签</canvas>
<button type="button" onclick="drawPath()">画路径</button>
</body>
</html>
JavaScript代码
function get2DContext(){
var canvasPointer = document.getElementById("canvas");
return canvasPointer.getContext("2d")
}
function drawPath() {
var ctx = get2DContext();
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 35);
ctx.fill();
}
引用
http://www.css3-html5.com/HTML5-Tutorial/20110119621.html
http://www.w3school.com.cn/html5/html5_reference.asp
您还没有登录,请您登录后再发表评论
1 楼 昔雪似花 2011-11-09 11:34