html5和css3的进阶

24.7.21

html5新特性

还有<video>、<audio>

<video>仅支持mp4、webm、ogg三种视频模式

加上静音播放可以使谷歌浏览器自动播放

<audio>

新增input类型

html5新增表单属性

css3特性

css3新增选择器

属性选择器

结构伪类选择器

伪元素选择器

盒子模型

css3其他特性（了解）

比父盒子少80px

css3过渡（重点）

还要和hover结合

24.7.22

网站favicon图标

需要ico结尾的特殊文件，去比特虫转换

<link rel="shortcut icon" href=" /favicon.ico" />

网站tdk三大标签seo优化

title网站标题

网站标题-解释

desciption网站说明(简述网站干什么的)

<meta name="description" content=" xx"/>

keywords关键字

<meta name="description" content=" 关键词1，关键词2"/>

常见模块命名

logo seo 优化

一般行元素要包含显示块元素要转成块元素（比如说分割的小竖线

24.7.23

什么是web服务器

本地服务器（局域网）

远程服务器

免费远程服务器：http://free.3v.do/

2d转换之位移translate

translate对于行内元素是无效的

2d转换之旋转rotate

transform:rotate(度数deg)

一般和transition过渡结合

2d转换中心转换点transform-origin

transform_origin:x y;

默认中心点旋转（50% 50%）

可以具体px像素或者left bottom这种左下角

2d转换之缩放scale(xy为几倍没有单位)

transform：scale（x,y);（而且不会影响其他盒子）

2d总格式

transform：translate（）rotate（）scale（）

24.7.24

css 3d转换

简写

 简写不包括play——state

3d转换

prospective透视

距离越近（那么px越小）物体越大

translatez

translatez的px数字越大，物体越近物体越大

3d旋转rotate3d

transform：rotateX（度数deg）:度数为正向里翻转，反之

transform：rotateY（度数deg）

transform：rotateZ（度数deg）

transform：rotate3d（度数deg）

简写

transform：rotate3d（x,y,z,度数deg）,哪个轴有数字1为沿着哪个轴旋转，1，1，0，45def为沿着xy轴旋转

3d呈现transfrom-style

如果沿y轴旋转原先的蓝色盒子会看不见3d后边穿过去的效果，所以需要在父盒子开启立体空间

24.7.25

浏览器私有前缀