HTML5+CSS3知识概览
发布日期:2022-02-22 16:04:47 浏览次数:10 分类:技术文章

本文共 5112 字,大约阅读时间需要 17 分钟。

H5 + CSS3 知识大纲

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’ 选择多个文件; 可以输入多个邮箱地址,逗号分隔

一些其他需求

  1. form表单之外还有一个表单元素,如何与表单一起提交?
  • 方法: 指定form表单的id 给form表单之外的表单元素添加 form属性 form=‘id值’
  1. 使下拉列表不仅可以选择还可以输入
  • 方法:使用datalist 和 input 输入框 通过list属性 绑定
   
   
    
    

注意与原始下拉列表选项option书写的区分

   
    
     js
     
c

其他标签

其他标签

  • colgroup标签—用于对表格中的列进行组合,以便进行一些格式化的设置(同时设置一列的样式,span=i设置前i列)。 只能在table元素内使用colgroup标签
   
    

DataDataData
DataDataData

二、css新特性

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;设置盒子大小的计算方式。
  1. 默认:content-box 设置的width/height高指的是content部分的宽高,
    盒子最终大小=content(width/height) + padding2+border2
  2. 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变换效果

transform

动画

* 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布局

flex

  • align-self属性:允许单个元素有与其他项目不一样的对齐方式,可覆盖align-items属性。
    默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch; 在子元素上设置

四、video 、audio

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

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 正值往左移动 负值向右移动 移动之后不显示(蚂蚁 线的原理)

获取画宽高的两种方法

  1. 通过canvas 的dom元素,wdith/height 属性获取
  2. 通过 上下文对象 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

svg

八、历史记录history

history

九、worker

worker

十、地理定位

地理定位

十一、客户端存储

客户端存储

十二、webSocket协议

webSocket协议

持续更新中~

转载地址:https://blog.csdn.net/Conradine_Lian/article/details/106481038 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Vue知识点梳理(思维导图版)
下一篇:关于HTTP协议的那些事儿

发表评论

最新留言

表示我来过!
[***.188.10.174]2022年09月30日 08时48分00秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

【习题 5-14 UVA - 1598】Exchange 2020-01-10 04:10:53
周记八 2020-01-10 04:10:54
个人作业2 2020-01-10 04:10:54
CentOS查看端口是否被占用 2020-01-10 04:10:54
二进制编译http 2020-01-10 04:10:54
Confluence 6 设置 Oracle 数据库准备 2020-01-10 04:10:52
20140904 atoi字符串转化为整数源码 2020-01-10 04:10:52
MySQL——在Linux下安装和卸载MySQL 2020-01-10 04:10:53
信息熵的直观理解 2020-01-10 04:10:53
linux下安装tomcat 2020-01-10 04:10:53
ESB文件调用,windows服务 2020-01-10 04:10:53
C专家编程 2020-01-10 04:10:51
在nodejs中的集成虹软人脸识别 2020-01-10 04:10:52
ORACLE RAC 中 SRVCTL 命令详细说明文档 2020-01-10 04:10:52
eclipse 中自定义EL表达式时创建tld文件 2020-01-10 04:10:52
[转]jquery的一个模板引擎-zt 2020-01-10 04:10:52
用SQL删除重复记录的N种方法 2020-01-10 04:10:52
数据库范式 2020-01-10 04:10:51
wordpress博客留言自动填写 2020-01-10 04:10:51
IPO模式 2020-01-10 04:10:51