二、前端开发语言体系-HTML
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");
}