整理HTML5的一些新特性与Canvas的常用属性

2019-01-28 15:40:28王旭

1.HTML5的内容类型

内容类型 描述
内嵌 向文档中添加其他类型的内容,例如audio、video、canvas和iframe等
在文档和应用的body中使用的元素,例如form、h1和small
标题 段落标题,例如h1、h2和hgroup等
交互 与用户交互的内容,例如音频和视频的控件、botton和textarea等
元数据 通常出现在页面的head中,设置页面其他部分的表现和行为,例如script、style和title等。
短语 文本和文本标记元素,例如mark、kdb、sub和sup等
片段 用友定义页面片段的元素,例如article、aside和title等

2.HTML5中新的片段类元素
元素名 描述
header 标记头部区域的内容(用于整个页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面中的一块区域)
section Web页面中的一块区域
article 独立的文章内容
aside 相关内容或者引文
nav 导航类辅助内容

3.新querySelector方法
2016129110156970.png (693×164)

提示
selectors API不仅仅只是方便,在遍历DOM的时候,selectors API通常会比以前的子节点搜索API更快。为了实现快速样式表,浏览器对选择器匹配进行了高度优化。

4.Canvas API
4.1Canvas 概述
Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小。此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。
使用canvas编程,首先要获取其上下文(context)。接着在上下文中执行动作,最后将这些动作应用到上下文中。
canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y-0的点称作原点。
同大多数HTML元素一样,canvas元素也可以通过应用CSS的方式来增加边框,设置内边距、外边距等,而且一些CSS属性还可以被canvas内的元素继承。