【无标题】

小白学习HTML5小知识

首先了解 html与 html5区别
HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），
因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

1.canvas

创建一个矩形框，通过 元素来绘制
注意: 标签需要指定一个id属性 , width 和 height 属性定义的画布的大小.
canvas 元素本身是没有绘图能力的。所有的绘制工作需要利用JavaScript 完成。

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(100,100);
cxt.lineTo(0,100);
cxt.stroke();

首先，找到 元素,然后，创建 context 对象,利用坐标在画布上绘画。
canvas - 路径
利用canvas在矩形框上画线，我们可以利用下面两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
可以多次定位坐标。

在canvas中绘制圆形, 我们可以利用下面方法:
arc(x,y,r,start,stop)。

在canvas中绘制椭圆形, 我们可以利用下面方法:
ellipse(x, y, radiusX, radiusY, rotation, startAng)。
参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角)。

2.视频（Videos）播放

 source兼容不同视频格式       poster用户下载时显示的图像 ,值为url
 controls给视频添加控件       preload边加载边播放
loop循环播放                 autoplay视频加载完成后自动播放 
muted静音播放

例如：

 <video width="300" height="" autoplay controls loop muted >
<source src="../QQ视频20230908110224.mp4" type="video/mp4"></source>

3.音频 （Audio) 播放

control 属性供添加播放、暂停和音量控件。
audio 定义了声音内容。（audio) 元素允许使用多个 (source) 元素. (source) 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

<!-- <audio src="../凌俊杰 此生不换.mp3" autoplay controls></audio> -->

HTML5

1.新特性
1.input 标签
- header — 头部标签
- nav — 导航标签
- article — 内容标签
- section — 块级标签
- aside — 侧边栏标签
- footer — 尾部标签

2.input 属性
input是表单的一种，所以表单属性input也可以使用。

    text  默认文本                date日期
    button按钮  				 file上传文件
	password 密码 			     email邮箱
	adio单选					 tel手机号码
	heckbox多选				     url 网址
	submit提交					 search搜索
	eset重置					 color颜色
	number数字

<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="" />

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

例子：

<form>
	<input type="text" name="" required id="" value="" placeholder="请输入"/>
	<input type="text" name="" id="" value="" autofocus placeholder="请输入"/>
	<input type="file" multiple name="" id="" value="" />
	<input type="submit" value="提交"/>
</form>