H5
关注
分享
扫一扫
文章平均质量分 74
no的征程
这个作者很懒，什么都没留下…
展开
-
html之伪类的学习
目标伪类的使用就是**:target{}** ，上面图片的效果是在点击a标签的时候，在弹向下面h2内容的时候，还会把h2内容变成红色，就是对活跃的对象进行修改。状态伪类的使用如图，就是按钮的disable属性，使用给这个属性加上伪类就可以修改它的状态动态伪类的使用:nth-child() 和 :nth-of-type()伪类的使用也可以使用 :nth-of-last...原创 2019-12-21 16:55:59 · 368 阅读 · 0 评论 -
h5学习笔记之canvas（3）
一、像素createImageData(sx,sy)创建新的、空白的 ImageData 对象getImageData(x1,y1,sx,sy)返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 putImageData(img,x2,y2)把图像数据（从指定的 ImageData 对象）放回画布上具体用法：如1： var can = documen...原创 2019-09-02 23:47:00 · 173 阅读 · 0 评论 -
h5学习笔记之canvas绘图2
一、颜色渐变添加颜色渐变的方法 addColorStop(位置,颜色) 位置:渐变点 0-1之间 可多个1、线性渐变:createLinearGradient(x1,y1,x2,y2) x1,y1起始坐标点 x2,y2结束坐标点 var can = document.getElementByid('can'); var ...原创 2019-09-06 15:34:28 · 327 阅读 · 0 评论 -
h5学习笔记之svg绘图
一、svg的引入方式如代码： <div id="box"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > //这里是引入svg代码 <circle cx="250" cy="250" r="100" fill="red">...原创 2019-09-08 10:51:48 · 990 阅读 · 0 评论 -
h5学习笔记之视频与音频
一、视频1、Video标签的各属性说明Autoplay 视频就绪自动播放 在火狐和谷歌浏览器中需要加上 muted 属性一起使用才可以controls 向用户显示播放控件Width 设置播放器宽度Height 设置播放器高度Loop 播放完是否继续播放该视频，循环播放Preload 是否等加载完再播放Src 视频url地址Poster 加载等待的画面图片Aut...原创 2019-09-10 13:27:06 · 362 阅读 · 0 评论 -
h5学习之触屏事件
一、手机触屏事件最后了解以下标签内的 date自定义值属性设置属性方法：div-dataset-name = “值” //name 这个名字可以随意改变是自定义的div-dataset-name1-name2 = “值” //name 这个名字可以随意改变是自定义的在js中获取到这些自定义值的方法如下面实例，可以弹出自定义里面的值 <div id="div" d...原创 2019-09-11 00:58:26 · 571 阅读 · 0 评论 -
h5学习之移动端网页讲解与移动端响应式布局
DeviceModel 模型选择resolution 分辨率设置pixel ratio 像素比 就是设置，例如照片多少像素放到浏览器上的一个像素Emulation Mobile 模拟移动端特效Shrink to fit 缩放适应屏幕Media 媒体查询NetWork网络信息设备版本号浏览器的内核Sensors 传感器Emulation touch screen ...原创 2019-09-13 01:10:38 · 454 阅读 · 0 评论 -
h5学习笔记之地理信息与使用百度地图
一、首先要明白位置信息从何而来，以下就是IP地址GPS全球定位系统Wi-Fi无线网络基站二、获取地理信息的方法 navigator.geolocation1、单次定位请求 ：getCurrentPosition(请求成功,请求失败,数据收集方式)2、多次定位请求 : watchPosition(请求成功,请求失败,数据收集方式) 移动设备有用，位置改变才会触发 ，特有属性： ...原创 2019-09-15 01:47:35 · 522 阅读 · 0 评论 -
h5学习笔记之canvas绘制钟表
一、先理解canvas变换translate(x,y) 坐标基准点偏移 : 把画布的中心点移动到 xy这个点上rotate(弧度): 旋转 弧度公式 ：角度*PI/180scale(wb,hb) 缩放比例，值是当前内容的几倍大小二、时钟1<!doctype html><html lang="en"> <head> <...原创 2019-08-30 16:23:32 · 195 阅读 · 0 评论 -
h5学习笔记之canvas绘图（1）
一、canvas标签的说明在设置cancas大小的时候，必须在标签内写，如果在css内写会发生变化默认宽度300px，默认高度 150px 背景颜色红色 的一个长方形 <canvas width="" height="" id=""> 您的浏览器不支持canvas，请更换浏览器！ </canvas>二、成功使用canvas绘图的前提需要2d渲...原创 2019-08-27 19:14:08 · 348 阅读 · 0 评论 -
h5学习笔记之拖拽
一、拖拽事件图片自带拖拽功能其他元素可设置draggable属性设置 draggable =true 就可以实现对盒子拖拽拖拽元素(被拖拽元素对象)事件 :ondragstart : 拖拽前触发ondrag :拖拽前、拖拽结束之间，连续触发ondragend :拖拽结束触发目标元素(拖拽元素被拖到的对象)事件 :ondragenter :进入目标元素触发ondragover :...原创 2019-08-26 20:58:40 · 342 阅读 · 0 评论 -
h5学习笔记之css3新增背景属性
一、background-size 背景尺寸background-size:x y //具体数值宽高大小background-size:100% 100% //具体百分比大小，不溢出可能会变形background-size:cover 比例放大 //如果图片比例方大到一些内容盒子放不下，会溢出然后看不见background-size:c...原创 2019-08-20 23:31:13 · 244 阅读 · 0 评论 -
h5学习笔记之css补充之遮盖特、光影、实现球体、设置随机颜色的3种方法
一、遮盖特效 : mask:url() 这个属性是添加一个透明照片作为遮罩，是拥有图片的属性的如代码: div{ width:500px;height:500px;background:url("images/2.jpg") no-repeat; background-size:100% 100%; border:10px solid red; -webkit-...原创 2019-08-25 21:28:44 · 496 阅读 · 0 评论 -
h5学习笔记之表单类型与属性
一、智能表单required: required 内容不能为空placeholder: 表单提示信息autofocus:自动聚焦pattern: 正则表达式 输入的内容必须匹配到指定正则范围autocomplete:是否保存用户输入值默认为on，关闭提示选择offformaction: 在submit里定义提交地址datalist: 输入框选择列表配合list使用 list值为...原创 2019-08-26 12:30:34 · 1180 阅读 · 0 评论 -
h5学习笔记之表单事件
表单验证反馈:Invalid事件 validity对象(valid查看验证是否通过)input.addEventListener(‘invalid’,fn,false)阻止默认验证：ev.preventDefault()formnovalidate属性 : 关闭验证oText.addEventListener(“invalid”,fn1,false);ev.preventDefau...原创 2019-08-26 16:25:32 · 358 阅读 · 0 评论