语义标签
html5语义标签,可以使开发者更方便清晰构建页面的布局 |标签| 描述| |-|-| || 定义了文档的头部区域| || 定义了文档的尾部区域 | || 定义文档的导航 | || 定义文档中的节| || 定义文章| || 定义页面以外的内容| || 定义用户可以看到或者隐藏的额外细节| || 标签包含details元素的标题 | || 定义对话框 | |
表单
html5修改一些新的input输入特性,改善更好的输入控制和验证
html5新增了五个表单元素
标签
描述
用户会在他们输入数据时看到域定义选项的下拉列表
进度条,展示连接/下载进度
刻度值,用于某些计量,例如温度、重量等
提供一种验证用户的可靠方法,生成一个公钥和私钥
用于不同类型的输出,比如尖酸或脚本输出
html5新增表单属性
属性
描述
placehoder
输入框默认提示文字
required
要求输入的内容是否可为空
pattern
描述一个正则表达式验证输入的值
min/max
设置元素最小/最大值
step
为输入域规定合法的数字间隔
height/wdith
用于image类型标签图像高度/宽度
autofocus
规定在页面加载时,域自动获得焦点
multiple
规定元素中可选择多个值
音频和视频
html5 提供了音频和视频文件的标准。
音频:
//controls属性提供添加播放、暂停和音量控件。
您的浏览器不支持 audio 元素。 //浏览器不支持时显示文字
标签属性 |属性|描述| |-|-| |src|播放音频的URL| |preload|预加载| |autoplay|自动播放| |loop|循环播放| |controls|浏览器自带的控制条|
视频:
您的浏览器不支持Video标签。
标签的属性 |属性|描述| |-|-| |src |播放视频的URL| |poster|视频封面,没有播放时显示的图片| |preload|预加载| |autoplay|自动播放| |loop|循环播放| |controls|浏览器自带的控制条| |width|视频宽度| |height|视频高度|
Canvas (画布)
canvas 元素用于在网页上绘制图形。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
画布是一个矩形区域,可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
示例: (1)绘制线条
Your browser does not support the canvas element.
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
(2)绘制圆形
fill() 方法填充当前的图像(路径)。默认颜色是黑色。
arc() 方法创建弧/曲线(用于创建圆或部分圆):context.arc(x,y,r,sAngle,eAngle,counterclockwise);
中心:arc(100,75,50,0Math.PI,1.5Math.PI)
起始角:arc(100,75,50,0,1.5*Math.PI)
结束角:arc(100,75,50,0Math.PI,1.5Math.PI)
Cxt. beginPath() :开启路径,开启后可以从新设置相关属性 。 Cxt.closePath():关闭一条路径。
(3)颜色渐变
createLinearGradient() 方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。
addColorStop() 方法规定 gradient 对象中的颜色和位置。
(4)把一幅图像放置到画布上
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);