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
- 大小: 14.6 KB
- 大小: 18.3 KB
- 大小: 9.7 KB
分享到:
相关推荐
HTML5以进入实际应用,它的强大之处早有耳闻,下面来看一下html5中的新标签和属性。 HTML5中的新标签: <article> :定义article <aside>:定义页面内容之外的内容 <audio>:定义声音内容 <canvas>:定义图形
第01章【HTML5简介】-第04节:HTML结构标签的深入学习
span 标签默认浏览器中没有效果,strong\b标签默认是加粗显示,但strong更多是有强调的作用。i\em是倾斜的意见,但em具有强调的作用。br表示换行的意思。
ppt格式的html5 介绍,非常形象、生动的资料
代码简介:HTML5 SVG表单浮动标签特效是一款效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效。
本文主要介绍了HTML5的标签.不同于以前的标签.更简单.更方便
资源名称:HTML5布局之路内容简介:《HTML5布局之路》从开发实战的视角,介绍了网站制作知识和开发流程。首章当中,针对HTML5的基本知识及《HTML5布局之路》所涉及的所有内容进行整体概括。主要内容包括:HTML5入门...
HTML5.chm中文帮助文档API,《HTML5从入门到精通》中文学习教程.pdf教程,《HTML 5 教程.pdf》教程。 HTML 5 简介 HTML 5 视频 HTML 5 音频 HTML 5 Canvas HTML 5 Web 存储 HTML 5 Input 类型 HTML 5 表单元素 HTML ...
网页设计师是对网页的架构、色彩负责;网站得做的漂亮,客户满意。主要需要有美术功底,会photoshop等。非常适合零基础学习HTML5同学下载学习。
HTML与XHTML区别1、XHTML元素必须被正确地嵌套2、XHTML 元素必须被关闭,空标签也必须被关闭。如 3、XHTML 元素必须小写 4、XHTML 文档必须拥有一个根元素 5、XHTML属性名称必须小写,属性值必须加引号,属性不...
此文档主讲HTML4.0与HTML5.0的规范及区别。
标签的简介 163 8.2.2 <div>标签的属性 164 8.2.3 <span>标签与<div>标签 170 8.3 <iframe>标签 172 8.3.1 <iframe>标签的简介 172 8.3.2 <iframe>标签的属性 172 ...
本课程从HTML5简介和历史开始,逐步介绍HTML5的新元素和属性,以及如何测试浏览器是否支持HTML5。课程还将介绍新的表单输入类型和熟悉,音频和视频标签,并深入了解用于动态产出与渲染图形、图表、图像和动画的...
Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和...本文详细分析了HTML5技术的简介和发展前景,并深入探讨了HTML5引入的核心标签Canvas元素,介绍了Canvas可以实现的主要功能,在此基础上实现了部分类似Win
网页基本分为三大模块,利用html5标签+css修饰。留言板部分使用标签创建html表单。点击链接跳转相应网页。 精彩视频是从网上下载的mp4格式,将之放入文件夹map4下,使用标签定义媒介资源,并且点开页面自动加载运行...
S-CMS HTML5响应式企业建站系统【ASP】,此为免费精简版,摄影图片网站主题,支持移动设备【手机、Pad等终端设备】浏览,内置支付宝(即时到帐接口)/微信(扫码支付)付款方式,会员系统QQ/微信接口一键登录等功能...
Infinity新标签页是一款基于html5的Chrome扩展程序,它重新定义了您的Chrome新标签页。相比Chrome自带的新标签页,您可以通过Infinity自定义添加自己喜爱的网站,我们重绘了上千当然,您也可以自定义这些网站的图标...
HTML5能够用progress标签直接向页面添加进度条,这还是相当exciting的,不过各浏览器下的默认显示效果会有差异,这里我们就来看看HTML5中的进度条progress元素简介及兼容性处理
HTML边缘探索Ⅰ HTML简介Ⅱ HTML到HTML5—-HTML发展历史Ⅲ HTML5简介Ⅳ HTML5环境Ⅴ HTML5基本元素介绍Ⅵ 写一个最简单的HTML程序 Ⅰ HTML简介 超文本标记语言(Hyper Text Markup Language),缩写为HTML,标准通用...