01-input-视频-音频-canvas

i am lzy

已于 2023-09-21 09:12:14 修改

阅读量82

点赞数

文章标签： html5 音视频前端

于 2023-09-09 20:23:06 首次发布

本文链接：https://blog.csdn.net/liuzeyunb/article/details/132760621

版权

本文介绍了HTML5中新增的header、nav、article、section、aside和footer等标签，详细讲解了video和audio标签的控件、循环、静音属性，以及input的常用类型和属性，同时还涉及了基本的canvas图形绘制方法。

摘要由CSDN通过智能技术生成

一.html5新增标签

header – 头部标签
nav – 导航标签
artical – 内容标签
section – 块级标签
aside – 侧边栏标签
footer – 尾部标签

二.视频音频标签以及属性

	 controls  给视频添加控件 
	 loop  循环播放
	 muted 静音播放
	 poster 用户下载时显示的图像 ,值为url
	 preload 边加载边播放

<video width="" height="" autoplay control loop src="../222222.mp4">
<audio src="../11111.mp3" autoplay controls></audio>

三.input常用属性
1.常用的type值

		<input type="number" name="" id="" value="" />
		<input type="date" name="" id="" value="" />
		<input type="file" name="" id="" value="" />
		<input type="email" name="" id="" value="" />
		<input type="tel" name="" id="" value="" />
		<input type="url" name="" id="" value="" />
		<input type="color" name="" id="" value="" />

type值	作用
text	默认文本
button	默认按钮
password	密码
radio	单选
checkbox	复选框
submit	提交
reset	重置文本
number	只能填充数字
data	日期
file	上传文件
email	邮箱
tel	手机号码(语义词)
url	网址(语义词)
search	搜索(语义词)
color	颜色

2.常用的input属性

input属性	作用
placeholder	表单提示文字
required	校验表单不能为空
multiple	选择多个文件上传
autocomplete	启用on 关闭off 提交记录
min max	通常与数字和日期类型一起使用
pattern	表单正则验证
step	给默认数字类型上下箭头提供跳跃的数字
readonly	只读属性
disabled	禁用属性
autofocus	默认焦点

四.canvas基础图形

var c=document.getElementById("myCanvas");
var circle=c.getContext("2d");;
circle.arc(50,50,40,0,500);
cxt.moveTo(100,100);---开始点
cxt.lineTo(100,200);---直线连接点

arc在这里插入图片描述
画圆-arc(x,y,r,startAngle,endAngle，true/false)
画椭圆-ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, true or false)
ellipse：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)

参数	描述
x,y	定义弧的圆心坐标
r	定义弧的半径
starAngle	开始角度(单位为Math.PI*0-2)
endAngle	结束角度(单位为Math.PI*0-2)
true/false	顺时针(true)逆时针(false)