1.html5新增元素
为了更好的实践web语义化,增加了header,footer,nav,aside,section等语义化标签,
在表单方面,为了增强表单,为input增加了color,email,data ,range等类型,
在存储方面,提供了sessionStorage,localStorage,和离线存储,通过这些存储方式方便数据在客户端的存储和获取,
在多媒体方面规定了音频和视频元素audio和video,
另外还有地理定位,canvas画布,拖放,多线程编程的web worker和websocket协议
2.语义化标签有
article标签装载显示一个独立的文章内容,article标签可以嵌套,内层的article对外层的article有隶属关系。
section标签定义文档中的节,比如章节、页眉、页脚
aside标签用来装载非正文类中的内容,比如广告、成组的链接、侧边栏等
hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。
header 标签定义文档的页面组合,通常是一些引导和导航信息。
footer 标签定义 section 或 document 的页脚。
nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。
time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
mark 标签定义带有记号的文本.
figure标签规定独立的流内容(图像、图表、照片、代码等等),figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
2.canvas使用方式
绘制直线:
var c=document.getElementById('myCanvas');
var context=c.getContext('2d');
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();
绘制矩形:
var c=document.getElementById('myCanvas');
var context=c.getContext('2d');
context.fillStyle="#FF00FF";//填充粉色实心矩形
context.fillRect(0,0,200,100);
context.strokeStyle="#FFFFFF";//白色矩形轮廓
context.strokeRect(0,0,100,50);
绘制圆形:(空心实心与前面方法一样,fill和stroke的区别)
var c=document.getElementById('myCanvas');
var context=c.getContext('2d');
context.fillStyle="#FF00FF";
context.beginPath();
context.arc(100,75,50,0,Math.PI*2,true);
context.closePath();
context.fill();
绘制三角形:
var c=document.getElementById('myCanvas');
var context=c.getContext('2d');
context.fillStyle="red";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.fill();
实心的跟上述方式一样,不过要在stroke上面添加语句context.closePath()
清除画布:
context.clearRect(0,0,300,200);
保存Canvas状态:context.save() 恢复Canvas状态:context.restore()
移动:context.translate()
旋转:context.rotate()
缩放:context.scale(x,y) 参数值大于一相当于放大,参数小于一相当于缩小
线性渐变:context.createLinearGradient(20,20,150,150);
addColorStop(position,color);
径向渐变:context.createRadialGradient(55,55,20,100,100,90);
addColorStop(position,color);
3.html5的优缺点:
优点: a、网络标准统一、HTML5本身是由W3C推荐出来的。
b、多设备、跨平台
c、即时更新。
d、提高可用性和改进用户的友好体验;
e、有几个新的标签,这将有助于开发人员定义重要的内容;
f、可以给站点带来更多的多媒体元素(视频和音频);
g、可以很好的替代Flash和Silverlight;
h、涉及到网站的抓取和索引的时候,对于SEO很友好;
i、被大量应用于移动应用程序和游戏。
缺点: a、安全:像之前Firefox4的websocket和透明代理的实现存在严重的安全问题,同时webstorage、websocket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
b、完善性:许多特性各浏览器的支持程度也不一样。
c、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
d、性能:某些平台上的引擎问题导致HTML5性能低下。
e、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。
4..html5的元素按优先级定义为:
结构性属性:section、header、footer、nav、article
级块性元素:aside、figure、code、dialog
行内语义性元素:meter、time、progress、video、audio
交互性元素:detail、datagrid、menu、command
5.meta标签
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。