二、前端开发语言体系-HTML

文章目录

二、前端开发语言体系-HTML

HTML5

表单
绘图
多媒体
HTML5常用API

参考文章

HTML5

表单

HTML 表单用于搜集不同类型的用户输入。

元素定义 HTML 表单。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

元素是最重要的表单元素，根据不同的 type 属性，有很多形态。

类型	描述
text	定义常规文本输入
radio	定义单选按钮输入
submit	定义提交按钮（提交表单）

action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

<form action="" method="get" id="forms">
    <input type="text" id="username" placeholder="用户名" required />
    <input type="password" id="pws" placeholder="密码" required />
    <input type="email" id="email" placeholder="邮箱" required />
    <input type="submit" value="提交" id="submitBtn">
</form>

绘图

HTML5新增了一个 canvas 属性。该元素自身并不绘制图形，只是相当于一张空画布。如果开发者需要向 canvas 上绘制图形则必须使用JavaScript脚本进行绘制。

为了向 canvas 元素上绘图，必须经过如下3步。

获取 canvas 元素对应的DOM对象，这是一个Canvas对象。
调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形。
调用CanvasRenderingContext2D对象的方法绘图。

CanvasRenderingContext2D只提供了两个方法来绘制几何图形：

fillRect(double x,double y,double width,double height):填充一个矩形区域。
strokeRect(double x,double y,double width,double height):绘制一个矩形边框。

为了在Canvas上绘制更复杂的图形，必须在Canvas上启用路径，借助于路径来绘制图形。介绍几个方法：

arcTo(double x1,double y1,double x2,double y2,double radius):向Canvas的当前路径上添加一段弧，确定这段弧的方式是：假设从当前点到P1(x1,y1)绘制一条线条，再从P1(x1,y1)到P2(x2,y2)绘制一条线条，arcTo则绘制一段同时与上面两条线条相切，且半径为radius的圆弧。
lineTo(double x,double y):把Canvas的当前路径从当前结束点连接到x,y对应的点。
moveTo(double x,double y):把Canvas的当前路径的结束点移动到x,y对应的点。

<body>
	<canvas id="mc" height="400" width="400">
	</canvas>
</body>
<script type="text/javascript">
	/*
	该方法负责绘制圆角矩形
	x1、y2：是圆角矩形左上角的坐标。
	width、height：控制圆角举行的宽、高
	radius：控制圆角矩形的四个圆角的半径
	*/
	function createRoundRect(ctx,x1,y1,width,height,radius)
	{
		//beginPath():丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。  
		ctx.beginPath();
		// 移动到左上角
		ctx.moveTo(x1+radius,y1);
		// 添加一条连接到右上角的线段
		ctx.lineTo(x1+width-radius,y1);
		// 添加一段圆弧
		ctx.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius);
		// 添加一条连接到右下角的线段
		ctx.lineTo(x1 + width, y1 + height - radius);
		// 添加一段圆弧
		ctx.arcTo(x1 + width, y1 + height , x1 + width - radius 
			, y1 + height , radius);
		// 添加一条连接到左下角的线段
		ctx.lineTo(x1 + radius, y1 + height); 
		// 添加一段圆弧
		ctx.arcTo(x1, y1 + height , x1 , y1 + height - radius , radius);
		// 添加一条连接到左上角的线段
		ctx.lineTo(x1 , y1 + radius);
		// 添加一段圆弧
		ctx.arcTo(x1 , y1 , x1 + radius , y1 , radius);
		//closePath() :方法创建从当前点到开始点的路径。 
		ctx.closePath();
	}
	// 获取canvas元素对应的DOM对象
	var canvas = document.getElementById('mc');
	// 获取在canvas上绘图的CanvasRenderingContext2D对象
	var ctx = canvas.getContext('2d');
	ctx.lineWidth=3;
	createRoundRect(ctx,30,30,200,100,20);
	ctx.stroke();
</script>

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。SVG 是万维网联盟的标准。HTML5 支持内联 SVG。

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印

<p>使用SVG绘制圆形</p>
<svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
	<circle cx="200" cy="200" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff">
	</circle>
</svg>

<p>使用SVG绘制矩形</p>
<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1">
 	<rect x="50" y="100" width="300" height="150" 
 	style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
</svg>

多媒体

embed 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

<embed src="helloworld.swf" />

HTML5通过 audio 标签来解决音频播放的问题。

autoplay属性控制是否网页加载自动播放
controls 是否显示播放控件，默认不显示
loop 属性用于控制循环次数，如果值为正整数，则播放指定的次数，如果是 loop 或者是 loop = -1，则无线循环播放。

<audio src="resource/tkzw.mp3" autoplay="autoplay" controls="true" loop="-1"></audio>

HTML5通过 video 标签来解决音频播放的问题。

width 属性设置播放窗口宽度
height 属性设置播放窗口高度

<video src="resource/Bear.mp4" autoplay="autoplay" controls="true" loop="-1" height="800px" width="800px"></video>

HTML5常用API

History
- History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL。
Geolocation
- Geolocation API 用于获得用户的地理位置，使得我们可以基于用户地理位置开发互联网应用。
RequestAnimationFrame
- RequestAnimationFrame API用来请求动画关键帧，专门用于优化动画
Mutation Observer
- Mutation Observer API用来监视DOM树的更改，DOM树的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个API都能得到通知。

一个获取地理位置的例子：

if(window.navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack);
}
else{
    console.log("error");
}
function successCallBack(position)
{
    var wd=position.coords.latitude;    //纬度
    var jd=position.coords.longitude;   //经度
    console.log(wd+"-------------------"+jd);
}
function errorCallBack(error){  
    console.log("wrong");
}