小白学习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>