html5

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),比如针对搜索引擎和更新频度的描述和关键词。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容