![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5笔记
文章平均质量分 76
HTML5笔记
Alice_LMY
这个作者很懒,什么都没留下…
展开
-
HTML5笔记 05:一些API与效果
获取元素的大小(border-box)及其相对于视口的位置信息<div id="box1"></div><script> var box1 = document.getElementById('box1'); // DOMRect 对象 包含元素的大小(border-box)及其相对于视口的位置信息 // top/y: 8 // bottom: 8 // left/x: 8 // right: 1357 // w原创 2021-09-26 13:55:45 · 60 阅读 · 0 评论 -
HTML5笔记 04:其他标签与表单
状态标签1. meter<!-- 用来显示已知范围的标量值或者分数值,外观类似进度条 value:当前的数值 min:值域的最小边界值,默认为 0 max:值域的上限边界值,默认为 1 low:定义了低值区间的上限值 high:定义了高值区间的下限值 在二者之间进度条为绿色,剩下部分为黄色(火狐浏览器下) optimum:最佳取值--><meter id="meter" value="30" min="20" max原创 2021-09-02 13:51:19 · 101 阅读 · 0 评论 -
HTML5笔记 03:音视频标签
音频和视频原创 2021-09-02 13:51:04 · 702 阅读 · 0 评论 -
HTML5笔记 02:canvas
基本用法1. 什么是 canvas?<canvas>是HTML5新增的元素,可用于通过使用JS中的脚本来绘制图形可以用于绘制图形,创建动画<canvas>在使用时建议成对出现,默认高度为 300px,默认宽度为 150px...原创 2021-09-02 13:50:50 · 186 阅读 · 0 评论 -
HTML5笔记 01:简介
attribute 与 property1. 什么是 attribute?什么是 property?html标签的预定义属性和自定义树顶统称为 attribute;js 原生对象的直接属性是 property2. 什么是布尔值属性?什么是非布尔值属性对象的 property 是(非)布尔值类型的,称为(非)布尔值属性3. attribute 与 property 的同步关系非布尔值属性:实时同步布尔值属性: ① property 永远都不会同步 attribute; ② 在没动过 pr原创 2021-09-02 13:50:35 · 66 阅读 · 0 评论 -
HTML5 实例:签名板(canvas)
使用 canvas 实现电子签名板,按下鼠标移动即可书写<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-08-20 09:18:33 · 388 阅读 · 0 评论 -
HTML5 实例:马赛克(canvas)
步骤:选取一个马赛克正方形从马赛克正方形中随机抽出一个像素点的信息将整个马赛克正方形中的像素点信息统一换成2中的信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content原创 2021-08-23 16:13:37 · 354 阅读 · 0 评论 -
HTML5 实例:钟表(canvas)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-08-20 15:14:39 · 136 阅读 · 0 评论 -
HTML5 实例:刮刮卡(canvas)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>刮刮原创 2021-08-24 11:19:39 · 357 阅读 · 0 评论 -
HTML5 实例:旋转同时放大缩小的方块(canvas)
使用 canvas 变换 + 定时器来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-08-20 10:08:36 · 559 阅读 · 0 评论