H5知识简单总结

H5知识点简单总结

新的语义标签

audio和video标签

完全支持CSS3

2D和3D的变换

数学公式

Canvas绘图

SVG绘图

本地存储

---

新的语义标签

标签	描述
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）。
figc aption	定义 元素的标题
footer	定义 section 或 document 的页脚。
header	定义了文档的头部区域
mark	定义带有记号的文本。
meter	定义度量衡。仅用于已知最大和最小值的度量。
nav	定义导航链接的部分。
progress	定义任何类型的任务的进度。
ruby	定义 ruby 注释（中文注音或字符）。
rt	定义字符（中文注音或字符）的解释或发音。
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
section	定义文档中的节（section、区段）。
time	定义日期或时间。
wbr	规定在文本中的何处适合添加换行符。

---

audio和video标签

audio标签

一般要对不支持的浏览器进行区分

里面放的是资源文件路径

audio标签属性

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	出现系统自带的控制控件，不同浏览器的也不一样
loop	loop	循环，写上是一直重复播放
muted	muted	静音
preload	auto metadata none	何时加载资源：自动，初始化加载，不加载
src	URL	资源的URL

source标签属性

属性	值	描述
type	MIME_type	视频： video/ogg video/mp4 video/webm 音频： audio/ogg audio/mpeg
src	URL	填写资源的URL

video标签

语法与audio大致相同，不过要注意控制video的大小要在video标签内写好，并且不要写“px”单位

video比audio多的一些属性

属性	值	描述
height	数字	设置播放器高度
width	数字	设置播放器的宽度
poster	URL	视频未播放加载时候显示的封面内容

---

完全支持CSS3

H5中已经完全支持了CSS里面的新属性，以及动画的变化。


H5的声明变的非常简单

---

2D和3D的变换

2D和3D的变换也是在CSS3中实现的，具体操作可以看——

CSS3之2D/3D动画

---

数学公式

HTML5 可以在文档中使用 MathML 元素

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

显示a²+b²=c²

   
      
      
   

   

      $a^2+b^2=c^2$

   

矩阵

   
      
      
   

   
      $A=\left[\begin{array}{cc}x& y\\ z& w\end{array}\right]$

   

---

Canvas绘图

canvas是一个画布，对它进行操作要先在HTML文件中声明

如果要对它位置进行设定的话，设定为display:block

设置大小，请在标签设置，那样是可以绘制的大小

开始与结束，最好是在一个图形的开始和结束添加

ctx.beginPath();
ctx.closePath();

样式

线段粗细

ctx.lineWidth=10;

线段颜色

ctx.strokeStyle="#FF0000";

填充颜色

ctx.fillStyle="#FF0000";

线段绘制

JS代码

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(200,20);
ctx.stroke();
ctx.closePath();

圆形绘制

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

度数计算小技巧，这个计算结果就是1°

var angle = Math.PI/180;

矩形绘制

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

文字绘制

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

图片绘制

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function()
{
    ctx.drawImage(img,10,10);
}

线性渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

圆渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

更多的请看——

Canv绘制奇奇怪怪图形

---

SVG绘图

内联SVG

---

本地存储

暂无，没有咋用过等用的时候再补吧~