移动web开发 基础入门

1. H5新增的语义化标签： 好处是增强了代码的可阅读性，也方便了网站的seo。

   nav 导航标签

   article 内容标签

   section 块级标签

   aside 侧边栏标签

   footer 尾部标签

   header 头部标签

2. H5新增的输入型 input 标签

   

3. 标签属性：

   required=“required”必填项

   placeholder=“请输入内容” 类似于value

   autofocus=“autofocus” 自动获取光标

   autocomplete 提示之前输入过的内容 默认是on（打开的）一般我们都是把它（off）关掉的。这个属性使用时，标签中必须有name属性。

   multiple=“multiple” 可以多选文件上传，常用在file标签中。

Chrome浏览器会禁止音频的自动播放，所以想要视频自动播放，只需要禁音就可以了，即：先autoplay再muted。

placeholder 和 value 用途一样，但是我们用placeholder，比value强大的多。

注：E：first-child 是“匹配父元素中的第一个子元素E”但是如果父元素的第一个子元素不是E（也就是木有符合要求的）那这个选择器木有用。
父元素的子元素相同时一般用E:nth-child（n）有不相同的子元素时 一般用 E：nth-of-type（n）。
           

注意 ：E::before实在 E 内部的前创建一个行内元素 然后通过 content 添加内容。
           

1. 2D转换 transform ：

   

   重点补充：translate不会影响其他盒子的位置，而且其层级比普通盒子高，和定位一样会压住普通盒子。

   translate（50%，50%）这个常用来和定位搭配，使盒子水平垂直居中。

补充一个：calc（）css3的一个属性 calc（50% - 100px）也可以实现居中。

补充：过度效果 transition

transform：rotate（）默认为中心为旋转的中心点

transform-origin 可以调节旋转的中心点。

也是可以用 transform-origin 来调节中心点的。

2D转换就学了这四个：

简写法：transform：translate（） rotate（） scale（） 还有一个 transform-origin

位移 旋转 缩放

简写法中各属性是有顺序的，一般把位移放在第一位。

CSS动画的使用：

先定义，再调用

这些属性可以简写：animation：动画名称 动画时间 动画曲线 何时开始 播放次数 是否反向 结束状态

这里面前两个是不能省略的，属性顺序一般不变。

animation-paly-state 动画是否停止 这个一般和 ：hover 一起使用，，不在简写中写。

1. transform 3D 转换

   （1）transform translate3d（x,y,z）里面的数据不能省略，木有就是0。xyz单写就像下面：

   

   （2）perspective 透视也叫做视距，理解为视距更好一些，即：模拟屏幕到眼睛的距离，物体近大远小，体现出3D的效果。 perspective：500px; 500px即是屏幕到眼睛的距离，数值越大物体越小。

（3）transform：rotate3d:

例如：transform：rotate3d（1,0,0,45deg）绕x轴旋转。transform：rotate（1,1,0,45deg）绕对角线旋转

perspective是加给父级元素（也可以是爷爷级）的。这个是安排眼睛去可看出3D效果。

transform-style：preserve-3d;是加给父级的，只能是父级，子元素才会保持3d效果。

补充知识：