html5基本标签_汪刚_2023.4.25

今日学习内容：

• 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 设置静音播放
          
    • 支持多视频格式的写法audio标签
      
  • 
    
    • 当前audio标签支持三种音频格式：推荐使用MP3格式的音频
      
    • 引入音频的方式
      
    • 常用属性
      
      • src
        
        • 属性值 音频的URL
          
      • controls
        
        • 属性值 controls  添加音频控件
          
      • loop
        
        • 属性值 loop  控制音频循环播放
          
    • 支持多格式的写法
      
• CSS3
  
  • CSS3的新增选择器
    
    • 属性选择器
      
      • 概念
        
        • 属性选择器可以根据元素的特定的属性来选择元素，可以减少类选择器和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）
            
      • CSS的2D转换
        
  • 
    
    • 属性 transform
      
      • 属性值
        
        • translate(x,y)  对盒子的X和Y轴进行位移
          
        • translateX(n) 对盒子进行x轴的位移
          
        • translateY(n) 对盒子进行y轴的位移
          
      • 注意点：
        
        • 1、translate不会影响其他的元素位置
          
        • 2、translate中的百分比单位是相对于元素自身的宽高来进行设定的 比如 transform:translate(50%,50%)；
          
        • 3、对行内标签没有效果