前端-王卓凡-20230426

今天所学内容:
HTML5新特性

• • HTML5的新增特性主要是针对之前的不足，增加了一些新的标签、新的表单和新增的表单属性等。
    
    
• H5常用的标签
  • 例
    
    
• 新增input常用的type属性值
  • 例
    
    
• 新增input属性
  • 例
  • required
    • 属性值 required 表单如果有该属性，表示该表单中内容不能为空，是必填项
      
      
  • placeholder
    • 属性值 提示文本 表单的提示信息，如果有value属性，那么这个提示信息就不会显示
    • 修改提示文本的样式
      
      
  • autofocus
    • 属性值 autofocus 当页面加载完成的时候，将焦点自动聚焦到当前的表单元素
      
      
  • autocomplete
    • 属性值 on/off 当用户想显示之前输入过的内容时，可以使用该属性，但必须要求有name 属性，而且输入的内容必须提交过，才能生效。
      
      
  • multiple
    • 属性值 multiple 当需要提交多个文件的时候，可以使用该属性。
      
      
    
    
• 新增多媒体标签
  • video标签
    • video标签是可以在不使用插件的情况下， 支持视频播放，当然，它支持的格式是有限的。
    • video标签支持的视频格式：尽量使用MP4格式
    • 例
    • 常用属性
      • autoplay
        • 属性值 autoplay 视频准备就绪自动播放（谷歌浏览器需要添加muted属性来控制视频静音，只有静音视频才可以自动播放）
          
          
      • controls
        • 属性值 controls 添加播放控件
          
          
      • width
        • 属性值 像素值  控制播放器的宽度
          
          
      • height
        • 属性值 像素值 控制播放器的高度
          
          
      • loop
        • 属性值 loop 视频结束之后可以循环播放
          
          
      • src
        • 属性值 url 视频的url地址
          
          
      • poster
        • 属性值 imgurl  加载等待视频的图片画面
          
          
      • muted
        • 属性值 muted 设置静音播放
          
          
        
        
      
      
  • 新增多媒体标签
    • video标签
      • video标签是可以在不使用插件的情况下， 支持视频播放，当然，它支持的格式是有限的。
      • video标签支持的视频格式：尽量使用MP4格式
      • 例
      • 常用属性
        • autoplay
          • 属性值 autoplay 视频准备就绪自动播放（谷歌浏览器需要添加muted属性来控制视频静音，只有静音视频才可以自动播放）
            
            
        • controls
          • 属性值 controls 添加播放控件
            
            
        • width
          • 属性值 像素值  控制播放器的宽度
            
            
        • height
          • 属性值 像素值 控制播放器的高度
            
            
        • loop
          • 属性值 loop 视频结束之后可以循环播放
            
            
        • src
          • 属性值 url 视频的url地址
            
            
        • poster
          • 属性值 imgUrl  加载等待视频的图片画面
            
            
        • muted
          • 属性值 muted 设置静音播放
            
            
          
          
      • 支持多视频格式的写法
        • 例
          
          
        
        
    • audio标签
      • 当前audio标签支持三种音频格式：推荐使用MP3格式的音频
      • 引入音频的方式
        • 例
          
          
      • 常用属性
        • src
          • 属性值 音频的URL
            
            
        • controls
          • 属性值 controls  添加音频控件
            
            
        • loop
          • 属性值 loop  控制音频循环播放
            
            
          
          
      • 支持多格式的写法
        • 例
          
          
        
        
      
      
    
    
  
  

CSS3CSS3的新增选择器属性选择器

• 概念
  • 属性选择器可以根据元素的特定的属性来选择元素，可以减少类选择器和id选择器的使用。属性选择器的权重是0,0,1,0
    
    
• 例
  
  

结构伪类选择器

• 概念
  • 结构伪类选择器主要是根据文档的结构来选择元素的，通常用于根据父级选择器来选择里面的子元素
  • 例 first-child 、last-child、nth-child()
  • 例 first-of-type、last-of-type、nth-of-type()
  • 
    
    
  
  
  

伪元素选择器

• 作用
  • 伪元素选择器可以帮助我们利用CSS创建新的标签元素，从而简化HTML的标签结构
    
    
• 注意
  • before和after都会创建一个元素，但是属于行内元素
  • 语法：element::after{}
  • before和after必须要有content属性
  • before是在父元素的内容前面来创建元素，after就是在父元素的内容后面来创建元素
  • 伪元素选择器和标签选择器一样，权重是1
    
    
  
  

CSS的过度

• 概念
  • 过渡（transition）是CSS3最具有颠覆性的一个特征之一，可以在不使用动画或者JS的情况下，给元素从一种状态转化为另一种状态的过程添加效果。
  • 一般情况下会和:hover来进行使用。
    
    
• 语法
  • transition: 要过渡的属性 花费的时间 运动曲线 何时开始;
    • 要过渡的属性（必须属性）
      • 宽度、高度、背景颜色、内外边距都可以，如果所有的属性都需要过渡，就写一个all即可。
        
        
    • 花费的时间（必须属性）
      • 单位是秒 必须要写单位，比如说.5s
        
        
    • 运动曲线（可以省略）
      • 默认是ease
        
        
    • 何时开始（可以省略）
      • 可以设置延迟触发的时间，默认是0  单位是秒（s）
      • 今天遇到的问题：无