html5css3

一、HTML5新增语义化标签

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

二、多媒体音频标签

1、多媒体标签有两个，分别是

• 音频-audio
• 视频-video

2、audio标签说明

• 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放
• 但是播放格式是有限的

3、audio支持的音频格式

4、audio的参数

三、video视频标签

• 目前支持三种格式

• 语法格式

<video src="./media/video.mp4" controls="controls"></video>

• video参数
  

多媒体标签总结

• 音频标签与视频标签使用基本一致
• 多媒体标签在不同浏览器下情况不同，存在兼容性问题
• 谷歌浏览器把音频和视频标签的自动播放都禁止了
• 谷歌浏览器中视频添加 muted 标签可以自己播放
• 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

四、新增input标签

五、新增表单属性

六、属性选择器

1、属性选择器列表

2、属性选择器代码演示

七、结构为类选择器

1、属性列表

2、代码演示

3、nth-child参数详情

• 注意：本质上就是选中第几个子元素
• n 可以是数字、关键字、公式
• n 如果是数字，就是选中第几个
• 常见的关键字有 even 偶数、 odd 奇数
• 常见的公式如下(如果 n 是公式，则从 0 开始计算)
• 但是第 0 个元素或者超出了元素的个数会被忽略
• 

4、代码演示

5、伪元素选择器

注意事项

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

八、2D转换之translate

1、2D转换

• 2D 转换是改变标签在二维平面上的位置和形状
• 移动： translate
• 旋转： rotate
• 缩放： scale

2、translate语法

• x就是在x轴上水平移动
• y就是在y轴上水平移动

transform: translate(x, y) 
transform: translateX(n)
 transfrom: translateY(n)

3、重点知识点

• 2D 的移动主要是指 水平、垂直方向上的移动
• translate 最大的优点就是不影响其他元素的位置
• translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
• 行内标签没有效果

九、2D转换rotate

1、rotate旋转

• 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

2、rotate语法

/* 单位是：deg */
 transform: rotate(度数)

3、重点知识点

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点

十、设置元素旋转中心点（transform-origin）

1、transform-origin基础语法

transform-origin: x y;

2、重要知识点

• 注意，x 与 y 之间使用逗号进行分隔
• transform: scale(1, 1) : 宽高都放大一倍，相当于没有放大
• transform: scale(2, 2) : 宽和高都放大了二倍
• transform: scale(2) : 如果只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5) : 缩小
• scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

十一、2D转换综合写法以及顺序问题

1、知识要点

• 同时使用多个转换，其格式为 transform: translate() rotate() scale()
• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
• 但我们同时有位置或者其他属性的时候，要将位移放到最前面

十二、动画

1、语法格式

@keyframes 动画名称 {
   0% {
       width: 100px; 
       }
    100% {
        width: 200px；
         } 
      }

2、常见的属性

3、动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ 
animation:namedurationtimingfunctiondelayiteration-count direction fill-mode

4、速度曲线细节

• animation-timing-function：规定动画的速度曲线，默认是ease