HTML5有哪些新特点

日期:2021-01-19 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1、HTML5 中的1些趣味的新特点:

用于美术绘画的 canvas 元素
用于媒体回放的 video 和 audio 元素
对当地线下储存的更好的适用
新的独特內容元素,例如 article、footer、header、nav、section
新的表单控制,例如 calendar、date、time、email、url、search
2、HTML5 视頻<video>
1、视頻文件格式

Ogg = 带有 Theora 视頻编号和 Vorbis 声频编号的 Ogg 文档
  MPEG4 = 带有 H.264 视頻编号和 AAC 声频编号的 MPEG 4 文档
  WebM = 带有 VP8 视頻编号和 Vorbis 声频编号的 WebM 文档
2、<video> 标识的特性


 *标识<source>要求多新闻媒体資源,能够是好几个
3、案例
  (1)
 

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>视頻</title>
</head>
<body>
<video src=". HTML声频视頻-编解码专用工具.mp" controls="controls" width="px" height="px"></video>
</body>
</html>

  实际效果:


(2)HTML5 <video> - 应用 DOM 开展操纵(用JS来操纵视頻的播发/中止和变大、变小)

   <小专业知识:在JS涵数里键入console.log("hello");表明在访问器操纵台輸出hello,若操纵台能够輸出hello,则表明涵数是能够启用的。

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>视頻</title>
</head>
<body>
<video id="video" src=". HTML声频视頻-编解码专用工具.mp" width="px" height="px"></video>
<button onclick="clickA()">播发/中止</button>
<button onclick="clickBig()">变大</button>
<button onclick="clickSmall()">变小</button>
<script><!--若此JS一部分写在<head></head>中,视頻将播发不正确-->
var a = document.getElementById("video");
function clickA() {
if(a.paused) a.play();
else a.pause();
}
function clickBig() {
a.width = ;
a.height = ;
}
function clickSmall() {
a.width = ; <!--此处不可以写px,不然会错误,能够写成a.width = +"px";-->
a.height = ;
}
</script>
</body>
</html>

  实际效果:


 点一下变大、变小视頻会有相应的更改。
3、声频<audio>
1、声频文件格式


2、<audio>标识特性


control 特性供加上播发、中止和声音控制。<audio> 与 </audio> 之间插进的內容是供不适用 audio 元素的访问器显示信息的。(视頻中也是1样)
4、HTML 5 Canvas(画布)
1、甚么是Canvas?
  canvas 元素用于在网页页面上绘图图型。
  *HTML5 的 canvas 元素应用 JavaScript 在网页页面上绘图图象,canvas 元素自身是沒有制图工作能力的。全部的绘图工作中务必在 JavaScript 內部进行。
  *画布是1个矩形框地区,您能够操纵其每像素。
  *canvas 有着多种多样绘图相对路径、矩形框、圆形、标识符和加上图象的方式。
2、有关的JS专业知识:
  (1)getContext("2d") 目标是内建的 HTML5 目标,有着多种多样绘图相对路径、矩形框、圆形、标识符和加上图象的方式。
  (2)fillStyle 方式将其染色,fillRect 方式要求了样子、部位和规格。【fillRect 方式有着主要参数 (0,0,150,75)。意思是:在画布上绘图 150x75 的矩形框,从左上角刚开始 (0,0)】
3、案例
  (1)把电脑鼠标悬停在矩形框上能够看到座标
 

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX; <!--clientX 恶性事件特性回到当恶性事件被开启时电脑鼠标指针向针对访问器网页页面(或顾客区)的水平座标-->
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:px;">
<p>把电脑鼠标悬停在下面的矩形框上能够看到座标:</p>
<div id="coordiv" style="float:left;width:px;height:px;border:px solid #ccc"
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>



<div id="xycoordinates"></div>
</body>
</html>

  专业知识点:
  *clientX 恶性事件特性回到当恶性事件被开启时电脑鼠标指针向针对访问器网页页面(或顾客区)的水平座标。顾客区指的是当今对话框。
  *innerText和innerHTML都可以以给标识体里加上相应信息内容。
  实际效果:


(2)绘图线条
 

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
cxt.moveTo(,);
cxt.lineTo(,);
cxt.lineTo(,);
cxt.stroke();
</script>
</body>
</html>

  专业知识点:
  *moveto是挪动到某个座标,lineto是从当今座标连线到某个座标。这两个涵数加起来便是画1条平行线。画线要用“笔”,那末MoveToEx()把笔要画的起止部位固定不动了(x,y)随后要固定不动停止部位要用到LineTo涵数明确停止部位(xend,yend),这样1条线就画出来了。每次与前面1个座标相连。
  *stroke() 方式会具体地绘图出根据 moveTo() 和 lineTo() 方式界定的相对路径。默认设置色调是黑色。
  实际效果:


(3)绘图圆形
  *fill() 方式填当做前的图象(相对路径)。默认设置色调是黑色。
  *arc() 方式建立弧/曲线图(用于建立圆或一部分圆):context.arc(x,y,r,sAngle,eAngle,counterclockwise);


管理中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
起止角:arc(100,75,50,0,1.5*Math.PI)
完毕角:arc(100,75,50,0*Math.PI,1.5*Math.PI)


* Cxt. beginPath()  :打开相对路径,打开后能够重新设定有关特性  。 Cxt.closePath():关掉1条相对路径。
 

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas> <!--不可以放在JS编码以后,不然实际效果出不来-->
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
cxt.fillStyle="#FF";
cxt.beginPath();
cxt.arc(,,,,Math.PI*,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>

  实际效果:


(4)色调渐变色
  *createLinearGradient() 方式建立线形的渐变色目标。渐变色能用于填充矩形框、圆形、线条、文字这些。应用 addColorStop() 方式要求不一样的色调,和在 gradient 目标中的何处精准定位色调。JS英语的语法:context.createLinearGradient(x0,y0,x1,y1):


*addColorStop() 方式要求 gradient 目标中的色调和部位。JS英语的语法:gradient.addColorStop(stop,color);



拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
var grd=cxt.createLinearGradient(,,,);
grd.addColorStop(,"#FF");
grd.addColorStop(,"#FF");
cxt.fillStyle=grd;
cxt.fillRect(,,,);
</script>
</body>
</html>

  实际效果:


(5)把1幅图象置放到画布上
  *drawImage() 方式在画布上绘图图象、画布或视頻。也可以绘图图象的一些一部分,和/或提升或降低图象的规格。
    *JS英语的语法1:在画布上精准定位图象:context.drawImage(img,x,y);
    *JS英语的语法2:在画布上精准定位图象,并要求图象的宽度和高宽比:context.drawImage(img,x,y,width,height);
    *JS英语的语法3:裁切图象,并在画布上精准定位被裁切的一部分:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);



拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
var img=new Image();
img.src=".png";
cxt.drawImage(img,,);
</script>
</body>
</html>