html5+css3

p2021年7月14日

1.行间属性placeholer可以实现input属性聚焦消失文字

2.input::placeholer可以改变input中文字的颜色

3.::selection可以改变选择文本样式的底色还有文字选中颜色及文字阴影颜色，及可以设置color、background-color、text-shadow的属性

4.伪类选择器是被选中元素的一种状态

5.:not（标签属性）选中除了括号中标签的元素属性的所有

6.根标签选择器:root表示html里面的根节点，和html表示一个意思

7.:targer目标标签，可以改变一个被选中目标标签的状态

8.:first-child选出子元素的第一个元素；:last-child选出子元素的最后一个元素；注意：选中的元素只要是父标签的子元素都会被选中

9.:only-child拥有唯一的子元素

10:nth-child（公式如2n+1）选择出公式中的子元素，2n+1中的n是从第0位开始差数的

11.first-of-type{}选择出第一个子元素，last-of-type{}选择出最后一个子元素

12.only-of-tyle{}选择出唯一的一个子元素，子元素内可以有不同的元素

13.nth-of-type()从指定的位置开始查询，括号中可以填公式n是从第n个开始查找；nth-of-last-type()倒着查询

14.:empty没有任何元素的子元素

15.:checked点击多选产生效果

16:enabled{}表示能用的的input的输入文本框；:disable{}表示将input文本输入框失效不能够输入

2021年7月15日

1.css中的calc属性，可以写在需要计算尺寸的冒号后面，calc括号中可以填入简单的公式计算尺寸，算数符号两边必须得加上空格，否则无法计算

2.box-shadow用来设置边框阴影如果没有指明就是外阴影，冒号后第一个参数是水平偏移量，第二个参数是垂直偏移量，第三个参数是阴影的模糊范围，第四个参数是阴影大小

3.box-shadow内部阴影， 第一个参数写inset

4.背景颜色在阴影的下面，文字在阴影的上面

2021年7月16日

1.border-image-source:url()添加元素边框背景图片

2.border-imgage-slice: 像素值（不用写px）是将border边框图片切割成上下左右八块，然后后将图片放在border的相应位置，其中冒号后面的四个像素值就是4条切割线的位置

3.border-image-outset:像素:将border边框图片进行延伸，可以将边框背景图片延伸到边框以外

4.border-image-width:像素：显示border边框图片的宽度

6.border-image-repeat：stretch(默认拉升)、round（先拉升到拉伸图片大小足够在进行平铺）、repeat(平铺加载出来半个图片也会平铺出来)、space（先用空白进行填充，当图片可以加载出来在进行平铺）

7.其中border-image:source slice repeat；可以写在一起

2021年7月17日

1.background

-image:linear-gradient();表示静向渐变括号中填入颜色会以线性渐变

2021年7月18日

1. background-origim:boder-box/padding-box/content-box,分别表示背景图从哪个位置开始

2.background-clip:border-box/content-box/padding-box/text,表示从哪开始截断不在显示

3.background-clip:text，表示用背景图替换文字那部分，但是必须是谷歌游览器才有，所以要配合-webkit-text-fill-color:transparent;进行使用

4.background-repeat:可以添repeat-x，repeat-y,进行水平和垂直平铺，；两个方向同时平铺用round

5.background-attachment:scroll:改变背景图片定位，相对于游览容器定位，会跟着容器走

6.background-attachment:local：将背景图片设置成相对于内容区进行定位，会跟着内容走

7.background-attachment:fixed:将背景图片设置成相对于游览器窗口进行定位，不跟着内容也不跟滑动条走

8.background-size:cover;会让一张图片完完整整的填充容器，不改变图片的原始比例，可能hi溢出容器

9.background-size:contain;会在不改变一张图片的比例下让一张图片完整的填充容器，不会溢出，如果容器大了会让图片有留白

10.background-image:linear-gradient(角度deg，颜色1 像素1，颜色2 像素2)，线性渐变颜色，其中deg表示度，从颜色1从像素1开始渐变到颜色2像素2结束

11.background-image:radial-gradient(角度、形状，颜色1 占比，颜色2 占比),放射性渐变色，角度形状

2021年7月18日

1.text-shadow:像素1，像素2，像素3，颜色，对文字进行阴影设置  

2.transition:all 数字s；表示在数字S中动态过度改变，动态效果的属性

3.-webkit-text-stroke:描边的粗细 描边的颜色;文字描边效果

4.引入外部字体包，@font-face{font-family:名称；src：url（） }

5.column-width:文字的文本宽度，column-gap:分割文字的宽度

6.触发IE6b  混杂模式盒模型要写上box-sizing:border-box;

7.overflow:auto;溢出内容出现滚动条，不溢出不出现滚动条

8.配合overflow属性使用的resize:both；让用户调节属性大小

9.弹性盒子的表示方法display:flex/inline-flex;

10. flex-direction:row(主轴：从左往右)/row-reverse(对齐方式与row相反)/column(主轴：纵向从上往下排列)/column-reverse(对齐方式与column相反);

11.flex-wrap:wrap;弹性盒子换行

12.justify-content:flex-start:弹性盒子元素将向行起始位置对齐。

13.justify-content:flex-end：弹性盒子元素将向行结束位置对齐。

14.justify-content:center:弹性盒子元素将向中间位置对齐。

15.justify-content:space-between:弹性盒子元素会平均地分布在行里。

16.justify-content:space-around:弹性盒子项目则平均分布，并确保两两之间的空白空间相等。

17.align-items:flex-start;弹性盒子元素将向列起始位置对齐。

18.align-items:flex-end：弹性盒子元素将向列结束位置对齐。

19.align-items:center:弹性盒子元素将向中间位置对齐。

20.align-items:baseline;根据元素内容对齐

21.align-items:stretch;如果没有设置子元素高度，此属性会将子元素高度撑开

22.align-content:center;进行多行居中

2021年7月20日

1.order:数字;默认数字为0,其中数值约小元素位置越靠前

2.align-self:flex-start/flex-end/center/baseline;设置给子元素，子元素的位置

3.flex-grow:1;设置给子元素，将父元素剩余的空间按照比例瓜分给子元素

4.flex-basis:像素;可以覆盖掉width的值，区别width:当填写英文内容超出width宽度则英文内容会溢出，当flex-basis中英文内容超出宽度则会将盒子撑宽，但是同时设置width和flex-basis时，width设置元素的上限，flex-basis设置元素的下线

5.flex-shrink:比例;将子级元素超出的范围按照比例缩进，公式：宽度*比例+宽度*比例=总和；宽度*多出来的比例/总和*宽度（都是内容区的大小）

2021年7月23日

1.transition过度动画

2.transition-property:属性；监听到底变化哪个属性的值，属性值中填all是所有过度属性都添加

3.transition-duration:秒；动画多少秒来完成

4.transition-timing-function:linear（运动状态过度函数）;过渡的运动状态

5.transition-delay:秒;等多少秒在执行过度

2021年7月26日

1.绘制贝塞尔曲线：transition:all 1s cubic-bezier(0,0,1,1);三次贝塞尔曲线transition-timing-function;

2.CSS3动画：animation的用法

  （1）先定义容器@keyframes 自定义名{

    状态改变内容，例如：

    0%/from{ } 25%{ } 50%{ } 75%{ } 100%/to { }

  }

  （2）animation:自定义名 时间；不同属性同时进行动画 ： animation:自定义名1 时间1 ，自定义2 时间2 ；

3.animation:自定义名  时间  cubic-bezier(0,0,1,1)定义的是每一段的动画状态   时间（等多少秒在执行动画）  数值/infinite[永久循环]（动画执行的次数） reverse(让动画倒着进行)   alternate(往返运动，但运动次数大于1)  forwards(设置最后一针的状态，让其在动画截至的时候保存最后一针的状态)/both（在动画开始之前为开始之前的状态，在动画结束保留最后一针的状态）

4.用animation中的steps（1，end/start)来代替cubic-bezier(0,0,1,1)则不会产生过度,其中end是保留当前帧状态，直到动画时间结束，start保留下一帧状态，直到这段动画时间结束

2021年7月28日

1.旋转角度transform:rotate(度数deg)

2.transform-origin:像素 像素，确定旋转中心点，这个点是相对当前元素

3.perspective:像素；设置3D效果，像素是设置人眼到元素的距离

4.transform-style:preserve-3d;增强眼睛看到的3D效果

5.transform:rotate3d(x,y,z,angle);/rotatex/rotatey，旋转特效，x,y，z旋转的角度angle

6.scale( x,y)伸缩、扩张，伸缩的是此元素变化坐标轴的刻度

7.skew(度数deg,度数deg)将元素按照x,y轴倾斜

8.transform:translatez(像素)/translatex(像素)/translatey(像素)向三维坐标的z、x、y轴移动像素

9.perspective:像素；景深，需要设置到父级上子级才能有景深的效果，还有一种是transform:perspective(像素):是写在元素自身的景深，他是不能设置眼睛看到的角度，和在父级设置的景深不同时在子级元素设置的景深所有的角度都是一样的

10.perspective-origin:像素 像素；配合景深perspective使用，是眼睛看到的角度可以写center center

11.transform-origin:像素1 像素2 像素3;确定旋转的空间中心

12.backface-visibility:hidden；影藏照片墙背面

2021年7月28日

1.matrix(1,0,0,1,e,f)=>自定义元素的动画变换，主要方法较复杂需要查看渡一课程，css3中的6-12节的内容

2.性能优化css3由于transform会直接作用DOM节点数，想要在非渲染层启用GPU来进行优化程序可以在transfrom后加上translatex/y/z/3D，启用GPU进行优化

3.标准GPU加速处理的属性：will-change:transform;告诉游览器独立出一个层面处理transfrom

2021年7月29日

1.dpr = 物理像素/css像素

2.<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable = no(让移动端设备不会点击放大)"  >将页面大小 根据分辨率不同进行相应的调节以展示给用户的大小感觉上差不多

3.分布式响应，用link引入外部css样式，在link中设置属性media="(max-width:375px)则应用css样式，例如:<link rel="stylesheet" media = "screen and(max-widht:375px )" hred="index.css"> 当屏幕尺寸大于375px时则引用index.css样式

4.分布式响应（媒体查询）的第二种方法用@import "index.css" screen and (max-width:375px);当屏幕像素大于375px时用引入index.css样式

5.分布式响应第三种方法直接在css中进行分布式响应，@media and screen(屏幕类型)（max-width:375px）{属性内容}；不占用权重，一般放在最后，and表示与“，”逗号表示或

6.@media not screen and (max-width: 375px){ }表示除了375px所有的屏幕像素

7.vw/vh是将视口分成了100分，vmax/vmi取视口宽高中最大或最小的值分成100份

2021年7月30日（html5）

1.input使用方法

  (1)input中的placeholer属性可以实现input文本框在不输入文字显示底纹，当鼠标聚焦则底纹消失

  (2)form表单中的<input type = "date">用来制作日期选择

  (3)<input type="time">进行日期填写

  (4)<input type="week">对某年第几周进行选择

  (5)<input type="datetime-local">将日期选择与时间选择进行结合，能选择日期及时间

  (6)<input type="number">限制输入文本框只能填入数字 （兼容性不好）

  (7)<input type="email">限制输入文本框只能输入邮箱地址

  (8)<input type="color">选择颜色

  (9)input type="range" min="最小值" max="最大值" name = "range"> 这是一个选择条，可以设置最小和最大值，同时提交之后range性会记录提交的值

  (10)<input type = "search">在提交过后会记录提交内容共下次输入选择

  (11)<input type="url">只能填写url地址进行提交

2.contenteditable ="false/true",这个属性可以填在有文本的元素上，默认属性是false不会有任何变化，当设置成true时就可以更改元素中的文字内容，这个属性是可以继承的

3.元素上的属性draggable="true";实现元素拖拽功能

  （1）拖拽开始（ondragstart),拖拽进行（ondrag),拖拽结束（ondragrend）

  （2)被拖拽的物体，目标区域

    [1]其中draggable在js中有三个时间ondragstart事件，这个事件会在拖拽开始开始移动触发一次（物体按下的瞬间不会触发事件）；ondrag是拖拽途中触发的事件会记录拖拽途中的数据，ondragend是在拖拽结束触发的事件，三个时间都有形参e是记录拖拽相关数据，其中e.clientX/e.clientY表示鼠标所在位置

    [2]拖拽目标元素使用ondragenter事件，当元素鼠标进入拖拽目标区域进行触发（不是元素图形进入触发）

    [3]拖拽目标元素使用ondragover事件，当元素鼠标进入拖拽目标区域不停进行触发（和ondrag差不多)

    [4]拖拽事件元素使用ondraleave事件，当元素鼠标离开拖拽区域后触发事件

    [5]拖拽事件元素使用ondrop事件，当鼠标放下触发事件，但是由于事件都会回到默认值，而ondragover和ondrop又产生冲突，使用ondrop事件需要组织ondragover事件在其中加上e.preventDefault（）;这样ondrop事件就能够触发

  2021年7月31日

  1.语义化标签header头部,footer底部，导航nav

  2.语义化标签<article></article>文章<--可以直接被引用拿走-->，<section></section>段落

  3.画板<canvas id = "can"></canvas>,这个标签设置画板大小要设置在行间，同时需要在js中设置画笔，var ctx = can.getContext("2d")，这是在2d平面建立一个ctx画笔，调用画笔ctx.moveTo（坐标x，坐标y）这是起点；ctx.linTo（坐标x,坐标y)这是连接起点坐标；ctx.closePath（）；将连续的画闭合 ；ctx.stroke()；结束

  4.ctx.lineWidth可以设置画出线条的粗细

  5.在同一个画图中开一个新画需要使用ctx.beginPath()；

  6.ctx.fill()；填充将图形填满

  7.画一个矩形ctx.strokeRect(100[x点坐标]，100[y点坐标],100[宽]，100[高])；画一个填充的矩形ctx.fillRect(100,100,200,100);将整个动画清屏用ctx.clearRect(100[x点坐标]，100[y点坐标],100[宽]，100[高])

  2021年8月1日

  1.在js中角的弧度表示为Math.l表示180度的角

  2.用canvas标签画圆及扇形，用法：ctx.arc(原心（x,y），半径（r），弧度（起始弧度，结束弧度），方向(顺时针0，逆时针1))

  3.画圆角矩形，ctx.moveTo(x，y);ctx.arcTo(B坐标x,B坐标y，c坐标x,c坐标y，弧度数值)

  4.二次贝塞尔曲线ctx.quadraticCurveTo(1坐标x,1坐标y,2坐标x,2坐标y)；三次贝塞尔曲线ctx.bezierCurveTo(1坐标x,1坐标y,2坐标x,2坐标y,3坐标x,3坐标y)

  2021年8月2日

  1.旋转ctx.rotate(Math.PI)；围绕坐标原点旋转180度

  2.坐标系位移，移动画板坐标轴，ctx.translate(x坐标,y坐标)设置坐标原点

  3.缩放ctx.scale(2,1),这个是放在画图前面的，意思是x轴是原来的两倍，y轴不变

  4.平移、旋转和缩放是作用在全局上的，如果设置了canvas标签上的所有图形都会被作用上，可以在画板开头使用ctx.seve()函数记录初始样式，在设置其他样式后，让不需要平移、旋转缩放的图形上使用cxt.restore()；进行恢复

  5.给画板矩形填充颜色ctx.fillRect(x轴，y轴，宽，高)；ctx.fillStyle = "颜色";

  6.给画板矩形填充图片背景，构造var img = new image();然后var bg = ctx.createPatten(img,"no-repeat");最后ctx.fillStyle = bg ;注意图片填充是按照画板的坐标系进行的需要用ctx.translate（x,y）设置原点坐标

  7.对画板设置线性渐变色，var bg = ctx.createLinearGradient(像素1，像素2，像素3，像素4)；var一个渐变的方向；bg.addColorStop(0,"颜色1")；bg.addColorStop(1,"颜色2");设置关键帧进行颜色渐变；ctx.fillStyle = bg;画板设置颜色,但是颜色也是作用在坐标系上的

  8.放射性渐变bg = ctx.createRadialGradient(开始x轴，开始y轴，半径1，结束x轴，结束y轴，半径2)；

  9.设置画板阴影，ctx.shadowColor = "颜色",设置阴影颜色，ctx.shadowBlur = 像素；设置阴影的像素大小，ctx.shadowOffsetX/Y = 像素；设置阴影便宜方向及偏移大小

  10，在canvas画板上绘制文本，使用ctx.font = "像素 文字字体"可以设置画板中的像素大小及文字字体，用ctx.strokeText("文字内容"，像素1，像素2)设置描边文字内容及位置，ctx.fillText("文字内容",像素1，像素2)设置内容文字及文字位置

  11.设置两线交汇ctx.lineJoin = "miter"；round圆角，bevel切平，miter尖锐，设置miter的时候可以设置ctx.miterLimit =数值，可以设置miter的尖锐值

  12.给线段两端加“小帽子”ctx.lineCap = butt(默然)、square(小方块)、round(半圆的小帽子)

 13.SVG矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单，标签和css去画。 Canvas适用于小面积的绘图，适合动画

 14.SVG画直线

  <svg width = "500px" height = "300px" style = "border :1px solid ">

    <line x1="100" y1="100" x2="200" y2="200" >画直线，从（100，100）画到 (200,200)</line>

    <rect height="50" width="100" x="0" y="0" rx="10圆角为10" ry="0y轴圆角为0" >画矩形</rect>

  </svg>

  15.给svg标签中line元素加css样式可以设置线条颜色stroke、线条宽度stroke-width.

  16.给svg标签line元素画圆和椭圆：<circle r="半径" cx="圆心x轴" cy= "圆心y"</circle>,画椭圆 <ellipse rx = "半径1" ry ="半径2" cx = "圆心x轴" cy="圆心y轴"</ellipse>

  17.在svg属性中的不填充是css样式fill:transparent;

  18.给svg属性添加折线，<polyline points ="0 0,30 30,100 100,100 50"></polyline>默然折线是填充效果，需要变成折线效果需要设置填充并且给边界加上颜色,不会做收尾相连

  19.给svg属性添加多边形<polygon points ="0 0,30 30,100 100,100 50"></polygon>

  20.给svg添加文字用<text x="" y=""></text>标签

  21.svg折线中的属性-透明度：stroke-opacity:.5;边框透明度设为百分之五十；fill-opacity:.5;填充设为百分之五十

  22.给svg的折线两端设置“小帽子”：stroke-linecap:butt(默然)、square(小方块)、round(半圆的小帽子);

  23.给svg折线设置交汇属性：stroke-linejion:round圆角，bevel切平，miter尖锐

  24.svg画线<path d="M 100 100 L 200 100 L 200 100></path> M是起始点，L是连接点，如果L小写就是相对位置 l 100 200 表示先向x轴移动100像素再向y轴移动两百像素

  25.svg画线,<path d="M 100 100 H 200 V200 z></path> 表示M是起点坐标,H是向横向到200 ，V表示竖着到200，如果是小写则是相对位置是相对于当前点走多少距离,Z表示闭合区间

  2021年8月3日（第28节)

  1.给svg画弧用<path d="M 100(起点X轴) 100(起点Y轴) A 100(椭圆大半径) 50(椭圆小半径) 90(旋转半径) 1(大半径对应的圆弧/0小半径对应的圆弧) 0(顺时针/1逆时针) 150(终点x轴) 200(终点Y轴)"></path>

  2.svg线性渐变

  <defs>

    <linearGradient id="bg1" x1 = "0" y1="0" x2="100%" y2="100%">

      <stop offset="0%"(关键帧) style="stop-color:rgb(255,255,0)"></stop>

      <stop offset="100%"（关键帧） style="stop-color:rgb(255,0,0)"></stop>

    </linearGradient>

    引用线性渐变<rect x="100" y="100" height="100" widht="200" style="fill:url(#bg1)"(引用渐变)></rect>

  </defs>

  3.高斯滤镜

  <defs>

    <fillter id ="Gaussian">

        <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>

    </feGaussianBlur>

  </defs>

  引用高斯滤镜<rect x="100" y="100" height="100" width="200" style="fill:url(#Gaussian)"></rect>

  4.设置虚线给svg实线添加CSS样式stroke-dasharray：10px;可以添加3个参数来调节虚线中的间距；设置虚线偏移stroke-dashoffset:10px;向左偏移10像素

  5.svg属性中的比例尺，在svg中添加属性view="0,0,250,150"表示在svg width="500px" height="300px"放大一倍，表示用250和300代替原来的宽高并将宽高设置为500、300

  6.音频播放用<audio src="音频地址" controls></audio>只能播放音频不能播放视频

  7.视频播放用<video src="视频地址"controls(自带的控制条)></video>

    (1).在设置播放时需要在js中选中video标签并打点调用.play（）；此时点击相应标签就能播放视频;属性中判断是否已经播放为video.paused为已经播放,暂停为video.pause()

  8.获取video中视频总的时间video.duration；获取当前的播放时间video.currentTime;

  2021年8月4日

  1.video.playbackRate = 倍数；这个属性可以调节视频的倍数

  2.video.volume = 0到1之间;设置视屏音量

  3.设置全屏要先var dom = document.getElement;然后给dom。requestFullscreen()；

  2021年8月9日

  1.Math.atan(x,y),x轴Y轴坐标与圆心连线到X轴正方向的角度

  2.getBoundingClientRect()盒模型信息对象：left:0；top:0;bottom:0;right:0;width:0;height:0;