H5知识点简单总结
新的语义标签
audio和video标签
完全支持CSS3
2D和3D的变换
数学公式
Canvas绘图
SVG绘图
本地存储
新的语义标签
| 标签 | 描述 |
|---|---|
| article | 定义页面独立的内容区域。 |
| aside | 定义页面的侧边栏内容。 |
| bdi | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| command | 定义命令按钮，比如单选按钮、复选框或按钮 |
| details | 用于描述文档或文档某个部分的细节 |
| dialog | 定义对话框，比如提示框 |
| summary | 标签包含 details 元素的标题 |
| figure | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| figc aption | 定义 <figure> 元素的标题 |
| footer | 定义 section 或 document 的页脚。 |
| header | 定义了文档的头部区域 |
| mark | 定义带有记号的文本。 |
| meter | 定义度量衡。仅用于已知最大和最小值的度量。 |
| nav | 定义导航链接的部分。 |
| progress | 定义任何类型的任务的进度。 |
| ruby | 定义 ruby 注释（中文注音或字符）。 |
| rt | 定义字符（中文注音或字符）的解释或发音。 |
| rp | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| section | 定义文档中的节（section、区段）。 |
| time | 定义日期或时间。 |
| wbr | 规定在文本中的何处适合添加换行符。 |
audio和video标签
audio标签
一般要对不支持的浏览器进行区分
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<source>里面放的是资源文件路径
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 width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
video比audio多的一些属性
| 属性 | 值 | 描述 |
|---|---|---|
| height | 数字 | 设置播放器高度 |
| width | 数字 | 设置播放器的宽度 |
| poster | URL | 视频未播放加载时候显示的封面内容 |
完全支持CSS3
H5中已经完全支持了CSS里面的新属性，以及动画的变化。
H5的声明变的非常简单
<!DOCTYPE html>
2D和3D的变换
2D和3D的变换也是在CSS3中实现的，具体操作可以看——
CSS3之2D/3D动画
数学公式
HTML5 可以在文档中使用 MathML 元素
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
显示a2+b2=c2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
矩阵
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>
Canvas绘图
canvas是一个画布，对它进行操作要先在HTML文件中声明
如果要对它位置进行设定的话，设定为display:block
设置大小，请在标签设置，那样是可以绘制的大小
<canvas id="myCanvas" width="200" height="100"></canvas>
开始与结束，最好是在一个图形的开始和结束添加
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
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
本地存储
暂无，没有咋用过等用的时候再补吧~
