HTML5和CSS3提高

html5和css3的提高方面知识，思维导图，便于记忆

HTML5和CSS3提高

• html5 新增标签
  • 语义化标签
    • header，nav，article，section，aside，footer
  • 多媒体标签
    • 视频video
      • <video src= “文件地址”controls= “controls ”> </video>
      • autoplay ，controls ，muted ，poster ，width ，height ，loop ，src ，preload
    • 音频audio
      • <audio src= “文件地址”controls= “controls ”>
      • 视频可以通过muted 静音，音频不可以
  • input 标签
    • email ，url ，date ，time ，month ，week ，number ，tel ，search ，color
    • 验证时必须添加form 表单域
  • 表单属性
    • required-requried ，必填
    • placeholder- 提示文本
    • autofocus-autofocus ，自动聚焦
    • autocomplete-off ｜ on ，历史记录
    • multiple-multiple ，上传多个文件
    • 表单属性要在input-type 下用
    • 更改表单内容样式。input :: placeholder {color:pink;}
• css3
  • 属性选择器
    • Input [ type=text ] { …;} 属性= 属性值
    • div [ class^=icon ] { …;} 属性值以icon 开头，权重11
    • section [ class$=data ] 属性值以data 结尾
    • ul li [ class*=sn ] 属性值中含有sn
    • 类选择器，属性选择器，伪类选择器，权重为10
  • 结构伪类选择器
    • ul li:first-child { …;}
    • ul li:last-child { …;}
    • ul li:nth-child(n) { …;}
      • n是数字：选择第n个子元素
      • n是关键字：even偶数，odd奇数
      • n是公式：n，2n，2n+1，-n+3等，从0开始
    • section div：nth-of-type（2）{…}
      • 先看section div，再看nth-of-type第几个元素
      • nth-child(n)，先看nth-child(n)第几个元素，再看section div，不匹配就无效果
  • 伪元素选择器
    • div::before { …content: “内容”；} 权重为2
    • div::after { …content: “内容”；}
    • 必须有content
    • 权重为1
    • 使用场景：伪元素字体图标