h5+c3-day1

day1

语义化标签

• header 头部标签
• nav 导航
• article 内容
• section 块级
• aside 侧边栏
• footer 尾部
• 一般在移动端使用

audio

• autoplay 自动播放

• loop 循环播放

• contrds 显示控件

  谷歌禁用了autoplay

  不同浏览器支持不同格式 解决方案
  <audio>
      <source />
  </audio>
  

video

• 同audio

• preload 是否加载完播放

• poster 加载等待画面

• muted 静音播放

  给video添加禁音 就能自动播放

input新的标签

• email 输入email类型

• URL url类型

• 时间

  • date
  • datetime
  • time
  • moth
  • week

• number 数字

• tel 手机号

• search 输入框

• color 生成颜色选择表单

  input属性

• required 必填

• placeholder 提示文本 重点

• autofocus 获焦

• autocomplete off/on 显示之前键入的值

  必须成功提交过 需要加上name属性

• multiple 多文件提交

• file 单文件提交

属性选择器

• E[att] 有att属性的E元素

• E[att=“val”] 有att属性值为val的E元素

• ^= val 以val开头

• $= val 以val结尾

• *= val 包含val

  权重为10

结构伪类选择器

• ：first/last-child

• ：nth-child(n) 后面的n是数字.关键词.公式

  • 关键词 even偶数. odd奇数
  • n是公式 从0开始计算
  • 2n 偶数
  • 2n+1 奇数
  • 3n 3的倍数
  • n+3 从第3开始往后
  • -n+3 前3位

• ：first/last-of-type

• ：ntht-of-type

  ：nth-child(n) 选择父元素里的第n个 不关心类型

  ：ntht-of-type 选择指定类型

  权重10

伪元素选择器

权重1

• ::before 在元素内部内容前插入
• ::after 在元素内部内容后插入

必须有content:"" 可以为空 创建的是行内元素

2D 转换 transform

translate 移动

• transform:translate (x,y);

• transform:translateX (n);

• transform:translateY (n);

  不会影响其他元素的位置

  百分比是基于自身（可以用于居中）

  对行内元素没有效果

rotate 旋转

• transform:rotate(45deg);

  正顺 负逆

  默认旋转中心为元素的中心点