html5+css3基础总结

1.html5标签

语义化标签

• header 头部标签
• nav 导航标签
• article 内容标签
• section 块级标签
• aside 侧边栏标签
• footer 尾部标签

h5表单属性

• placeholder:占位符-提示信息

• autofocus:自动获得焦点-一般页面中放1个

• autocomplete 自动完成

  • 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
  • 默认已经打开 如 autocomplete=on 关闭 autocomplete =off
  • 需要放在表单内同时加上name属性

• multiple:可以多选文件提交

  • 结合文件上传标签 <input type="file" > 一起使用

• form属性，可以将输入标签放在表单的外面，还受到表单的管理

• required:必填验证

• novalidate:关闭验证

  • 在表单上添加该属性，那么在提交的时候就不会再执行 required验证

• pattern：自定义验证-通过编写正则表达式自定义验证规则 一般和required同时使用

  • 表单事件

audio 音频标签

语法:

<audio src="小猪佩奇.mp3" autoplay> </audio>

支持的格式

格式	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

video 视频标签

语法:

  <video src="小猪佩奇.mp4" autoplay controls ></video>

支持的格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

video常用属性、方法、事件

属性	方法	事件
duration 视频播放时长	play 播放	canplay 视频加载完毕 准备播放
currentTime 当前播放进度	pause 暂停	timeupdate 播放时-持续触发
volume 音量大小

source标签

可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

    <!-- 当1.mp4出错时，自动切换到2.mp4 ... -->
    <video >
      <source src="1.mp4">
      <source src="2.mp4">
      <source src="3.mp4">
    </video>

object-fit属性

当video标签视频内容宽度没有铺满video标签时，可以在css写上 该属性即可

    video {
      /* 让视频内容铺满整个video标签 */
      object-fit: fill;
    }

公共属性

以下属性 是要直接写在标签上的 如 autoplay controls

<video src="小猪佩奇.mp4" autoplay controls ></video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

伪类选择符

结构伪类选择器

E:first-child —— 匹配父元素的第一个子元素

E:nth-child(n) E:nth-last-child(n)

匹配到父元素的第n个元素 或者 是倒数第n个元素（n也可以为公式、数字、关键字）

常见的关键词有even偶数、odd奇数

E:nth-of-type(n)

• E:nth-child(n) 匹配父元素的第n个子元素E。
• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

属性选择器

1. E[att] 选择具有att属性的E元素。
2. E[att=“val”] 选择具有att属性且属性值等于val的E元素。
3. E[att^=“val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
4. E[att$=“val”] 选择具有att属性且属性值为包含val的字符串的E元素
5. E[att*=“val”] 选择具有att属性且属性值为包含val的字符串的E元素。

伪元素选择器

1. E::before 在E元素前插入一个元素
2. E::after 在E元素后插入一个元素
3. E::first-letter 选择到了E容器内的第一个字母
4. E::first-line 选择到了E容器内的第一行文本

想要让伪元素有效，必须遵循以下注意事项

1. 伪元素只能给双标签加 不能给单标签加
2. 伪元素的冒号前不能有空格 如 E ::before 这个写法是错误的
3. 伪元素里面必须写上属性 content:"";

2.2D、3D转换、动画animation

2d移动 translate

语法：div{

transform: translate(50px,50px);

}

1. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
2. translate类似定位，不会影响到其他元素的位置
3. 对行内标签没有效果

2d旋转 rotate

使用步骤：

1. 给元素添加转换属性 transform
2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
      transform: rotate(0deg);
}

特点

1. 角度为正时 顺时针 负时 为逆时针
2. 默认旋转的中心点是元素的中心点

转换中心 transform-origin

该属性可以修改元素旋转的时候的中心点

1. transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
2. transform-origin:top left; 左上角 和 transform-origin：0 0;相同
3. transform-origin:50px 50px; 距离左上角 50px 50px 的位置
4. transform-origin：0; 只写一个值的时候 第二个值默认为 50%;

2d缩放 scale

1. 给元素添加转换属性 transform
2. 转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)

div{
    transform:scale(2,3);
}

小结

1. transform:scale(1,1) 放大一倍 相对于没有放大
2. transform:scale(2,2) 宽和高都放大了2倍
3. transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
4. transform:scale(0.5,0.5) 缩小
5. transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解

动画 animation

用@keyframes定义动画，类似定义类选择器

   /* 1 声明动画函数 */

    @keyframes ani_div {
 0%{
    width: 100px;
    background-color: red;
  }
  50%{
    width: 150px;
    background-color: green;
  }
  100%{
    width: 300px;
    height: 300px;
    background-color: yellow;
  }
}
 div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 2 调用动画 */
      animation-name: ani_div;
      /* 持续时间 */
      animation-duration: 2s;
    }

语法：

1. 动画名

   设置要使用的动画名 animation-name:xxx;

2. 持续时间

   设置动画播放的持续时间 animation-duration:3s

3. 速度曲线

   和设置过渡的速度曲线一样 animation-timing-function:linear;

   • linear： 匀速
   • ease： 慢-快-慢 默认值
   • ease-in： 慢-快。
   • ease-out： 快-慢。
   • ease-in-out： 慢-快-慢。

4. 延迟时间

   animation-delay: 0s;

5. 循环次数

   设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环

6. 循环方向

   animation-direction

   如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为

   1. normal 默认值 红 -> 黑
   2. reverse 反向运行 黑 -> 红
   3. alternate 正-反-正… 红 -> 黑 -> 红…
   4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
   5. 以上与循环次数有关

7. 动画等待或者结束的状态

   animation-fill-mode 设置动画在等待或者结束的时候的状态

   • forwards：动画结束后，元素样式停留在 100% 的样式
   • backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
   • both： 同时设置了 forwards和backwards两个属性值

8. 暂停和播放

   animation-play-state 控制 播放 还是 暂停

   running 播放 paused 暂停

   复合写法

   animation: name duration timing-function delay iteration-count direction fill-mode;
   
   animation:动画名称 持续性时间 运动曲线 合适开始 播放次数 是否反方向 起始或结束的标志
   

   ​

   动画结束事件animationend

   元素在动画结束之后，会自动触发的事件 animationend

       var div = document.querySelector("div");
       div.addEventListener("animationend", function () {
         console.log("div的动画结束之后，触发");
       })
   

   ​

   css3兼容处理

   css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理

   添加对应的浏览器的前缀 常见前缀如下

   • 谷歌 -webkit
   • 火狐 -moz
   • IE -ms

   如对 border-radius 进行兼容性处理

         -webkit-border-radius: 30px 10px;
         -moz-border-radius: 30px 10px;
         -ms-border-radius: 30px 10px;
   	  // border-radius 一定要放在最后
         border-radius: 30px 10px;
   

   如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性

   ​

   3D转换

   3d移动 translate3d

   1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
   2. translform:translateX(100px) 仅仅是移动在x轴上移动
   3. translform:translateY(100px) 仅仅是移动在Y轴上移动
   4. translform:translateZ(100px) 仅仅是移动在Z轴上移动

视距 perspertive

perspertive 就是用来设置 人 和 物体 的距离

写在被观察元素的父盒子里

左手准则

要判断某元素沿着x轴是怎么旋转的

1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

3d旋转 rotate3d

语法：

1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度 了解即可

3D缩放 scale3d

语法：

1. transform: scale3d(1 ,1,2); 宽，高 缩放一倍，厚度放大两倍
2. transform: scaleX(1) 只缩放宽
3. transform: scaleY(1) 只缩放高
4. transform: scaleZ(1) 只缩放厚

视距原点 perspective-origin

视距原点 可以设置 人 站在x轴和y轴的位置

1. 视距原点和视距一样，也是设置给要观察元素的父元素上
2. perspective-origin:center center; 默认值是元素的中心点
3. perspective-origin:10px； 指定了一个参数的时候，第二个参数默认为center 也就是50%；
4. perspective-origin:10% %； 百分比都是相对于自身的宽度和高度

转换样式（3D呈现） transform-style

控制子元素是否开启3维立体环境

• transform-style: flat; 平面模式 - 不开启3维立体环境
• transform-style: preserve-3d; 3维立体环境