html5和css3新增

  

注：移动端没有兼容性问题；但是在ie9中，需要转换为块元素 

 

 注：尽量使用mp4格式，因为它支持的浏览器多  注：如果担心兼容性问题，可以加上中间两行，先看第一种格式行不行，再看第二种

、

 

 注：如果不加属性，直接加进来不自动播放，也很大，可以设置width100%；

设置自动播放autoplay属性后，在ie中可直接播放，但在谷歌中并不直接播放，是因为可能视频文件很大怕消耗流量，所以给限制了，需要加上muted，如果静音就自动播放

controls播放控件，在谷歌浏览器和ie中控件样子不同，所以一般不加这个属性，在js里面搞定这个（小米没加）

注：以上是在手机端浏览器打开此html文件的样子，跟在网页上浏览器不同，日期时间会弹出选择，数字电话会弹出数字键盘，邮箱会弹出字母数字键盘

 

 

 注：重点记住placeholder和multiple

 

 

 注：正常情况下都是关闭off 

 

注：不加multiple只能打开一个文件 

 注：小米的  

 注：属性选择器是10，类也是，但是div[class^=icon]权重是11=1+10，.icon1是10；

选择所有的icon开头的元素，方法之前有两个，一个是并集选择器，逗号隔开，一个是每个元素多设置一个相同选择器icon，每个都设置两个，在通过icon再选择 

 注：div[class^=icon]和div.icon1权重都是11，后者是交集选择器，有并且的意思

 注：ul 和:fist-child之间要有li，要写上选择的这个孩子是谁，告诉我们第一个孩子li，li第二个孩子

 注：可解决表格的隔行变色

 注：这里面只能写n，n是从0开始，但会忽略不计 

注:这个直接nth-child(5n)把5的倍数选出来，让其margin-right为0即可 ；之前用过分别对5n设置类名，再类选择器选择出来再设置；或者之前是让ul的宽度变大，直接等于5个ul及其右边距之和

 

 

 

注：nth-child两者都看后，没有这样的孩子，就不选择

  注：结构伪类选择器也是伪类选择器，权重是10，其中，section div:nth-of-type(1)权重是12

 无序列表中因为都是li，所以用nth-of-type和nth-child都行，效果一样，但是更注重nth-child，是因为这个对于无序列表好理解一些 ​​​​​​​

注：这两者都是在父盒子里面插入子盒子，嵌入的越多会比较乱，现在可以用伪元素选择器来解决；不是html标签，在文档树中找不到

 

 

 注：在文档树找不到

注：也可设置大小；浮动，定位或模式转换都能设置大小

权重和标签选择器一样都是1，div::after权重是2

  

注：去网站把字体图标内容复制粘贴，把相关的字体文件下载，然后先字体图标声明（在style.css文件的前小段复制一下即可），再在盒子里调用写上字体名， 最后把字体文件fonts放到调用的html的同一目录

把字体图标用子绝父相定位到其位置，因为绝对定位不占用位置

结构简单，只有一个div，结构简单，更友好，不用再看谁嵌套谁

除了复制后面的符号外，复制前面的编码也可以表示该字体图标，要加个转义字符

 注：在html结构里面不用加mask标签，把相关代码行删掉

将.mask 改为.tudou::before，虽然里面没有内容，但是一定要加content，里面不放内容即可，如果不放content，那么就无效

鼠标经过的不是mask而是before，经过了土豆里的before；

受到语法的限制，before冒号前面不能有空格，包括上面也是，.tudou::before,.tudou::hover::before，要是有空格则没有效果，mask时中间有空格

注：这个是在后面插入一个盒子，写上clear:both，坏处就是如果有好多需要清楚浮动的需要在结构中插入好多，就不友好

 注：父级添加after伪元素，是额外标签法的升级版本，就是思路一致，只不过变成设置样式，

内容为空；

因为伪元素为行内元素，所以要转换为块级元素；

并且不要显示和看到这个元素，且放上最关键的代码clear:both

 visibility和diaplay显示的区别是，前者占有空间，后者不占有空间 ​​​​​​​

注：父级添加双伪元素，这个也是对额外标签法的升级版；

内容为空，插入的两个伪元素必须是块级，为了在一行上，用display:table，相当于一行有两个单元格，就实现把这两个盒子放在一行上

注：以后可以在清除内边距的通配符选择器里加上box-sizing的设置

 注：padding变大后并不会撑开盒子；默认就是box-sizing:content-box

 注：京东的下面有一个灰条条，比父盒子小30px，就是用了这种方法

自己在做网站时，如果碰到不知道怎么做的，可以查阅一下 

 

注：如果不加过渡，会卡一下变换

谁要变，就在谁身上加过渡

后面两个参数可以省略不写，会有默认，写时间必须加秒数单位

加上何时触发时间为1s，就是鼠标放上去1s再触发扩张，鼠标离开1s再收缩

两个属性的话中间写逗号，但是最常用就是直接写all，所有属性都变化过渡

 注：进度条就是如果是0%，那么一件都没有卖，如果是100%，说明都卖完了；件数每卖完一件，就进度条增多

 父盒子嵌套子盒子

 

 注：第一个模块就是一个大盒子，里面包含一个图片，段落，盒子，过渡，链接

第二个mi模块过渡是，两个小盒子，放一个盒子里，如下放，当鼠标经过时i，让left值变小变负值，往左走到logo2，这之间加个过渡，鼠标一离开再回来

​​​​​​​

 

 

 

 

 

 

 

 

 

 

 

 

 

注：有一个滑动的效果

 

注：有一个渐变颜色的效果

注：此盒子放上去，慢慢升起来了，有阴影效果