二、前端开发语言体系-HTML
文章目录
HTML5 表单
HTML 表单用于搜集不同类型的用户输入。
元素定义 HTML 表单。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
元素是最重要的表单元素，根据不同的 type 属性，有很多形态。
类型描述
text
定义常规文本输入
radio
定义单选按钮输入
submit
定义提交按钮（提交表单）
action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
绘图
HTML5新增了一个 canvas 属性。该元素自身并不绘制图形，只是相当于一张空画布。如果开发者需要向 canvas 上绘制图形则必须使用JavaScript脚本进行绘制。
为了向 canvas 元素上绘图，必须经过如下3步。
获取 canvas 元素对应的DOM对象，这是一个Canvas对象。调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形。调用CanvasRenderingContext2D对象的方法绘图。
CanvasRenderingContext2D只提供了两个方法来绘制几何图形：
为了在Canvas上绘制更复杂的图形，必须在Canvas上启用路径，借助于路径来绘制图形。介绍几个方法：
/*
该方法负责绘制圆角矩形
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();
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。SVG 是万维网联盟的标准。HTML5 支持内联 SVG。
使用SVG绘制圆形
使用SVG绘制矩形
多媒体
embed 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
HTML5通过 audio 标签来解决音频播放的问题。
HTML5通过 video 标签来解决音频播放的问题。
HTML5常用API History Geolocation RequestAnimationFrame Mutation Observer
一个获取地理位置的例子：
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");
}
参考文章
HTML 表单
HTML5实现简单绘图
HTML5之SVG的使用
HTML5 多媒体标签
HTML5常用API
