html5新特征编辑,HTML5 常见的几种新特征

语义标签

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);

333860489c9172c23450c15fab82efab.png

中心: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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值