HTML5+CSS3知识概览
发布日期:2022-02-22 16:04:47
浏览次数:21
分类:技术文章
本文共 5108 字,大约阅读时间需要 17 分钟。
H5 + CSS3 知识大纲
一、标签
表单新增的type属性:
- 验证类: email 要求包含 @ 和 服务器名称 eg:qq.com url 要求包含http number 要求只能输入数字
- 日期和时间 time : --:– date: 年/月/日 下拉列表显示日历控件 datetime-local : 年/月/日 --:-- 下拉列表显示日历控件 month: ----年–月 week : ----年第–周 大多数浏览器不支持datetime,只有safari支持
表单新增的其他属性
- autocomplete=‘on|off’ 自动完成 on 打开 off关闭
前提:1.表单必须提交成功才能自动完成 2. 添加了自动完成属性的元素必须有一个name属性
- multiple 多选 type=‘file’ 选择多个文件; 可以输入多个邮箱地址,逗号分隔
一些其他需求
- form表单之外还有一个表单元素,如何与表单一起提交?
- 方法: 指定form表单的id 给form表单之外的表单元素添加 form属性 form=‘id值’
- 使下拉列表不仅可以选择还可以输入
- 方法:使用datalist 和 input 输入框 通过list属性 绑定
注意与原始下拉列表选项option书写的区分
其他标签
- colgroup标签—用于对表格中的列进行组合,以便进行一些格式化的设置(同时设置一列的样式,span=i设置前i列)。 只能在table元素内使用colgroup标签
Data | Data | Data |
Data | Data | Data |
二、css新特性
阴影
- 盒子阴影:box-shadow
- 文字阴影:text-shadow: offsetX(水平方向偏移) offsetY blur (模糊范围) color;
- 多层阴影:写多组数据,逗号隔开。 text-shadow:0px 0px 30px #fff,0px 0px 55px red;
盒子模型
新特性box-sizing: content-box |border-box;设置盒子大小的计算方式。
- 默认:content-box 设置的width/height高指的是content部分的宽高, 盒子最终大小=content(width/height) + padding2+border2
- border-box 设置的width/height高指的是盒子最终大小;盒子大小=width/height 只能消除内边距对元素的影响,不能消除外边距对元素的影响
线性渐变
background-image: linear-gradient(方向,开始颜色,[位置1,颜色2 位置2,颜色3 位置3,……]结束颜色)
- 方向:to left 从右向左270deg | to right 从左向右90deg| to top 0deg | to bottom 180deg(默认)
background: linear-gradient(to right, red 0%,blue 50%,yellow 100%);
颜色和位置之前用空格
镜像渐变
background: radial-gradient(形状,大小,坐标…)
- 形状:circle圆形 ellipse适配当前形状(默认)
- 大小(渐变半径):closest-side最近的边| farthest-side最远的边| closest-corner最近的角| - farthest-corner最远的角(默认)
- 坐标(镜像渐变的中心):at 像素值|left|right|top|bottom|center 默认镜像渐变在中心, 根据左上角的位置偏移
重复渐变:repeating- radial-gradient | repeating- linear -gradient
过渡
transition: all 2s steps(4); // 让过渡效果分成指定的n步完成
- transition 属性添加在要发生过渡效果的元素身上
- display 显示隐藏 不能实现 过渡效果
2D/3D变换效果
动画
* animation-name: 动画名称;* animation-duration:耗时;* animation-iteration-count:动画执行次数;默认一次 Infinite—无限循环* animation-direction: normal | alternate ; 交替动画 原路返回 开始->结束->开始* animation-delay:1s; 延时* animation-fill-mode: forwards | backwards;设置动画结束状态。forwards-保留动画结束时的状态;backwards(默认)-动画播放完毕会回到初始状态(直线返回,不是原路返回)。* animation-timing-function:linear; 线性* animation-play-state:running | paused;设置动画的播放状态 刷新页面自动播放;paused-暂停状态 可以通过js控制 不同的状态
三、弹性盒子-flex布局
- align-self属性:允许单个元素有与其他项目不一样的对齐方式,可覆盖align-items属性。 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch; 在子元素上设置
四、video 、audio
video标签- 属性 src controls autoplayer loop width height 宽高一般只设置一个 另一个等比缩放 poster(视频封面;视频没有加载完成或未点击播放时显示) 不设置默认显示第一帧
audio标签 插入音频
- 属性:src 文件路径 controls 显示面板(默认不显示) autoplayer 自动播放 (有浏览器兼容问题) loop 循环
全屏:兼容不同浏览器
if(video.requestFullScreen){ video.requestFulScreen(); }else if(video.webkitRequestFullScreen){ video.webkitRequestFullScreen(); //chrome safria }else if(video.mozRequestFullScreen){ video.mozRequestFullScreen(); // firefox }else if(video.msRequestFullscreen){ video.msRequestFullScreen();// IE }
五、canvas
-
新建画布 默认 300*150 白色 。canvas 是行内元素。
-
通过css改变宽高来调整画布大小 会缩放画布,图像会失真,可以在行间该宽高
bug:默认线宽1px,实际上看到的是2px
原因:canvas是从中心开始往两边延伸,物理像素如果是从整数开始会自动扩展 解决:设置物理像素从.5 画到 .5
getContext('2d'); // 获取上下文(绘图环境) ctx.beginPath();//开启新路径ctx.moveTo(100,100.5); // 移动画笔 起始点坐标ctx.lineTo(200,100.5);//画直线 结束点坐标ctx.stroke();// 描边ctx.strokeStyle='red'; //线的颜色默认使用上一次的 继承ctx.lineWidth=10;ctx.closePath();// 图形闭合。 画到起始点 不能完全闭合ctx.fill();//填充 默认黑色ctx,fillStyle=’red’;//设置填充色
线的端点(线帽):ctx.lineCap=’butt | square | round’;
butt 默认没有任何效果
ctx.lineJoin=’miter | bevel | round’;
miter 默认 没有效果 绘制镂空的正方形
非0环绕-判断某一部分图形是否需要填充:从需要填充的地方拉一条线出来,顺时针+1 逆时针-1 非0填充,0不填充
环绕方向相反,中间镂空;相同,实心 注意:两个正方形之间 一定不要 开始新路径ctx.beginPath();
绘制虚线
ctx.setLineDash([5]); 参数是一个数组 小段实线的长度和间隔都是5pxctx.setLineDash([5,10]); 实线长度5px 间隙10pxctx.setLineDash([5,10,15]); 交替显示 5,10,15
ctx.setLineDash();//获取虚线的排列方式,不重复的一段
- 偏移:
ctx.lineDashoffset = 15
正值往左移动 负值向右移动 移动之后不显示(蚂蚁 线的原理)
获取画宽高的两种方法
- 通过canvas 的dom元素,wdith/height 属性获取
- 通过 上下文对象 ctx.canvas ,wdith/height 属性获取
绘制矩形
ctx.rect(x,y,w,h);// 不是独立的路径 坐标点(x,y) 只是一个轨迹,需要调用stroke(); 或fill()方法ctx.strokeRect(x,y,w,h);//绘制描边的矩形,有自己独立的路径ctx.fillRect(x,y,w,h); //绘制填充的矩形ctx.clearRect(x,y,宽,高)//清除矩形中的内容-橡皮擦ctx.clearRect(0,0,宽,高)//清除整个画布
绘制图片
3个参数:drawImage(image,100,100[,width,height]);// 图片对象image,坐标(image)5个参数:drawImage(image,100,100,width,height); // 图片对象image,坐标(image),图片大小9个参数:drawImage(image,400,400,100,100,200,200,width,height);//图片对象,图片上的定位坐标(开始截取的坐标),图片上的截取区域,图片的坐标,图片的大小
六、requestAnimationFrame动画
-
与屏幕更新频率一致,requestAnimationFrame在页面刷新的时候才开始执行。解决setTimeout 不准确的问题
-
设置动画:requestAnimationFrame(f);//浏览器每次刷新时触发f函数
-
取消动画:cancelAnimationFrame(id);
-
兼容性写法:
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setTimeout(callback,100/60); }})();window.cancelAnimFrame = (function(){ return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id){ window.clearTimeout(id); }})();
七、SVG
八、历史记录history
九、worker
十、地理定位
十一、客户端存储
十二、webSocket协议
持续更新中~
转载地址:https://blog.csdn.net/Conradine_Lian/article/details/106481038 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2024年03月31日 09时55分16秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
EfficientDet训练自己的数据集实现抽烟检测
2019-04-26
【工具篇】10分钟快速上手git与github
2019-04-26
【开发篇】10分钟快速上手spring boot
2019-04-26
【开发篇】10分钟快速spring boot+react前后端分离
2019-04-26
【开发篇】10分钟快速上手spring boot+mybatis增删改查
2019-04-26
【Leetcode刷题篇】leetcode203 移除链表元素
2019-04-26
【Leetcode刷题篇】leetcode108 将有序数组转换为二叉搜索树
2019-04-26
【Leetcode刷题篇】leetcoe109 有序链表转换二叉搜索树
2019-04-26
【Leetcode刷题篇】leetcode938 二叉搜索树的范围和
2019-04-26
【Leetcode刷题篇】leetcode235 二叉搜索树的最近公共祖先
2019-04-26
【Leetcode刷题篇】leetcode236 二叉树的最近公共祖先
2019-04-26
【Leetcode刷题篇】leetcode230 二叉搜索树中第K小的元素
2019-04-26
【Leetcode刷题篇】leetcode173 二叉搜索树迭代器
2019-04-26
【Leetcode刷题篇】leetcode99 恢复二叉搜索树
2019-04-26
【Leetcode刷题篇】leetcode451根据字符出现频率排序
2019-04-26
【Leetcode刷题篇】leetcode703 数据流中的第k大元素
2019-04-26
【Leetcode刷题篇】leetcode378 有序矩阵中第K小的元素
2019-04-26
【Leetcode刷题篇】前K个高频元素
2019-04-26
【Leetcode刷题篇】leetcode373 查找和最小的K对数字
2019-04-26
【Leetcode刷题篇】leetcode367 有效的完全平方数
2019-04-26